scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-09-20 14:45:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

New cards and list layout

Browse source
This commit is contained in:
Urban Rotnik 2020-11-03 08:07:17 +01:00
parent a95dd904c8
commit 9f12c5f343
11 changed files with 370 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
app/assets/javascripts/projects/index.js
View file

@ -478,10 +478,11 @@
function loadCardsView() {
// Load HTML with projects list
var viewContainer = $('#projects-cards-view');
animateSpinner(viewContainer, true);
var viewContainer = $('#cards-wrapper');
// animateSpinner(viewContainer, true);
$.ajax({
url: $('#projects-cards-view').data('projects-url'),
url: viewContainer.data('projects-cards-url'),
type: 'GET',
dataType: 'json',
data: {
@ -489,16 +490,16 @@
sort: projectsViewSort
},
success: function(data) {
viewContainer.html(data.html);
if (data.count === 0 && projectsViewFilter !== 'archived') {
$('#projects-present').hide();
$('#projects-absent').show();
} else {
$('#projects-absent').hide();
$('#projects-present').show();
}
initFormSubmitLinks(viewContainer);
init();
viewContainer.append(data.html);
// if (data.count === 0 && projectsViewFilter !== 'archived') {
// $('#projects-present').hide();
// $('#projects-absent').show();
// } else {
// $('#projects-absent').hide();
// $('#projects-present').show();
// }
// initFormSubmitLinks(viewContainer);
// init();
},
error: function() {
viewContainer.html('Error loading project list');

2
app/assets/stylesheets/global_activities.scss
View file

@ -209,7 +209,7 @@
padding: 5px 0 5px 40px;
&:hover {
background-color: $brand-primary-light;
background-color: $brand-focus-light;
border-radius: 5px;
}

256
app/assets/stylesheets/projects.scss
View file

@ -653,3 +653,259 @@ li.module-hover {
}
}
}
// New projects page
.projects-container {
margin-top: 50px;
.cards-wrapper {
align-items: center;
display: grid;
grid-auto-rows: 11em;
grid-column-gap: 1em;
grid-row-gap: 1em;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
width: 100%;
.table-header {
display: none;
}
.card {
background-color: $color-white;
color: $color-volcano;
display: flex;
flex-wrap: wrap;
height: 100%;
padding: .5em 1em;
position: relative;
width: 100%;
.checkbox-cell {
align-items: center;
display: flex;
height: 2em;
justify-content: center;
left: 1em;
position: absolute;
top: .5em;
width: 2em;
}
.user-cell {
.global-avatar-container {
height: 28px;
margin-right: .25em;
width: 28px;
}
.value {
display: flex;
flex-wrap: wrap;
}
}
&.folder-card {
text-align: center;
.icon-folder {
color: $brand-primary-light;
font-size: 5em;
width: 100%;
}
.name {
color: $color-volcano;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.description {
color: $color-volcano;
width: 100%;
}
}
&.project-card {
border-radius: 4px;
box-shadow: $flyout-shadow;
.project-name-cell {
align-items: center;
display: flex;
height: 2em;
margin: 0 .5em 0 2.5em;
overflow: hidden;
a {
color: inherit;
overflow: hidden;
white-space: nowrap;
}
.name {
line-height: 2em;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
}
}
.data-row {
@include font-button;
align-items: center;
color: $color-black;
display: flex;
flex-basis: 100%;
line-height: 2em;
.information {
margin-left: auto;
}
.card-label {
color: $color-volcano;
width: 5em;
}
.new-user {
align-items: center;
background: $color-concrete;
border-radius: 50%;
cursor: pointer;
display: flex;
height: 2em;
justify-content: center;
width: 2em;
fas.fa-plus {
color: $color-silver-chalice;
}
}
}
}
}
&.list {
grid-auto-flow: dense;
grid-auto-rows: 2em 1px;
grid-row-gap: .5em;
grid-template-columns: max-content 1fr 1fr 1fr 1fr max-content;
.card {
display: contents;
// Border element
&:after {
background: $color-concrete;
content: "";
display: inline-block;
grid-column: 1/-1;
height: 1px;
}
.card-label {
display: none;
}
.name {
@include font-button;
color: $brand-primary-light;
font-weight: normal;
}
.checkbox-cell {
position: initial;
}
&.folder-card {
text-align: left;
.icon-folder {
display: none;
font-size: 2em;
margin: 0;
}
.name {
grid-column: 5 span;
&:before {
@include font-awesome;
content: "\f07b";
margin-right: .25em;
}
}
.description {
display: none;
}
}
&.project-card {
.start-date-row {
display: contents;
}
.checkbox-cell {
grid-column: 1;
}
.project-name-cell {
grid-column: 2;
margin: 0;
a:hover {
color: $brand-primary-light;
}
}
.start-date-cell {
grid-column: 3;
}
.visibility-cell {
grid-column: 4;
}
.user-cell {
grid-column: 5;
}
.information-cell {
grid-column: 6;
}
}
}
.table-header {
display: contents;
.table-header-cell {
align-items: center;
border: 1px solid $color-white;
display: flex;
height: 3em;
margin: 0 0 2.5em -.5em;
padding: 0 .5em;
width: calc(100% + 1em);
&.select-all-checkboxes {
justify-content: center;
position: relative;
}
}
& > * {
background-color: $color-concrete;
}
}
}
}
}

2
app/assets/stylesheets/protocol_management.scss
View file

@ -244,7 +244,7 @@
}
&:hover {
background-color: $brand-primary-light;
background-color: $brand-focus-light;
}
.external-import-btn {

4
app/assets/stylesheets/shared/dropdown_selector.scss
View file

@ -226,7 +226,7 @@
user-select: none;
&:hover {
background: $brand-primary-light;
background: $brand-focus-light;
}
}
@ -240,7 +240,7 @@
background: $color-concrete;
&:hover {
background: $brand-primary-light;
background: $brand-focus-light;
}
&::before {

4
app/assets/stylesheets/shared_styles/constants/colors.scss
View file

@ -12,6 +12,7 @@ $color-black: #231f20;
$brand-primary: #104da9;
$brand-primary-hover: #0c3a80;
$brand-primary-press: #07244f;
$brand-primary-light: #7094cb;
$brand-academy: #a52068;
$brand-academy-dark: #8c1b58;
@ -38,8 +39,6 @@ $office-ms-powerpoint: #d24726;
// MarvinJS color:
$marvinjs-color: #29999c;
// Don't use them
$color-alabaster: $color-concrete;
$color-gainsboro: $color-concrete;
@ -50,6 +49,5 @@ $brand-default: $color-white;
$brand-info: $brand-focus;
$brand-other: $brand-success;
$brand-extra: $brand-focus;
$brand-primary-light: $brand-focus-light;
$brand-light-blue: $brand-focus-light;

42
app/views/projects/index.html.erb
View file

@ -11,36 +11,20 @@
<%= render partial: 'projects/index/modals/manage_users' %>
<%= render partial: 'projects/index/modals/export_projects' %>
<div class="content-pane" id="projects-index">
<div id="projects-absent" style="display:none">
<div class="jumbotron text-center" style="margin-top:12%">
<strong><%= t 'projects.index.no_projects.text' %></strong>
<% if can_create_projects?(current_team) %>
<h2><strong><%= t 'projects.index.no_projects.title' %></strong></h2>
<br/>
<a class="btn btn-primary new-project-btn">
<span class="fas fa-plus"></span>
<span class="hidden-xs"><%= t('projects.index.no_projects.create_new_button') %></span>
</a>
<% else %>
<p><strong><%= t 'projects.index.no_projects.no_permission_title' %></strong></p>
<% end %>
</div>
</div>
<div id="projects-present" style="display:none">
<%= render partial: 'projects/index/toolbar' %>
<div class="tab-content">
<div class="tab-pane active"
id="projects-cards-view"
data-projects-url="<%= cards_projects_path %>"
data-projects-sidebar-url="<%= projects_sidebar_path %>">
</div>
<div class="tab-pane" id="projects-table-view">
<%= render partial: "projects/index/team_projects_table" %>
<div class="projects-container">
<div class="cards-wrapper" id="cards-wrapper" data-projects-cards-url="<%= cards_projects_url %>">
<div class="table-header">
<div class="table-header-cell select-all-checkboxes">
<div class="sci-checkbox-container">
<input value="1" type="checkbox" class="sci-checkbox select-all">
<span class="sci-checkbox-label"></span>
</div>
</div>
<div class="table-header-cell"><%= t('.card.name') %></div>
<div class="table-header-cell"><%= t('.card.start_date') %></div>
<div class="table-header-cell"><%= t('.card.visibility') %></div>
<div class="table-header-cell"><%= t('.card.users') %></div>
<div class="table-header-cell"></div>
</div>
</div>
</div>

17
app/views/projects/index/_folder_card.html.erb Normal file
View file

@ -0,0 +1,17 @@
<div class="card folder-card">
<div class="checkbox-cell">
<div class="sci-checkbox-container">
<input value="1" type="checkbox" class="sci-checkbox select-all">
<span class="sci-checkbox-label"></span>
</div>
</div>
<div class="icon-folder">
<i class="fas fa-folder"></i>
</div>
<div class="name">
<%= folder %>
</div>
<div class="description">
<%= t('projects.index.folder.description', projects_count: 9999, folders_count: 12) %>
</div>
</div>

50
app/views/projects/index/_project_card.html.erb Normal file
View file

@ -0,0 +1,50 @@
<div class="card project-card">
<div class="checkbox-cell">
<div class="sci-checkbox-container">
<input value="1" type="checkbox" class="sci-checkbox select-all">
<span class="sci-checkbox-label"></span>
</div>
</div>
<div class="project-name-cell">
<a href="<%= project_url(project) %>">
<h3 class="name">
<%= project.name %>
</h3>
</a>
</div>
<div class="data-row start-date-row">
<div class="start-date-cell">
<span class="card-label"><%= t('projects.index.card.start_date') %></span>
<span class="value"> <%= l(project.created_at, format: :full_with_comma) %></span>
</div>
<div class="information information-cell"><i class="fas fa-info-circle"></i></div>
</div>
<div class="data-row visibility-cell">
<span class="card-label"><%= t('projects.index.card.visibility') %></span>
<span class="value">
<% if project.hidden? %>
<%= t('projects.index.hidden') %>
<% else %>
<%= t('projects.index.visible') %>
<% end %>
</span>
</div>
<div class="data-row user-cell">
<span class="card-label"><%= t('projects.index.card.users') %></span>
<div class="value">
<% project.users.each do |user| %>
<span class="global-avatar-container">
<%= image_tag avatar_path(user, :icon_small) %>
</span>
<% end %>
<span class="new-user">
<i class="fas fa-plus"></i>
</span>
</div>
</div>
</div>

25
app/views/projects/index/_team_projects.html.erb
View file

@ -1,18 +1,9 @@
<div class="row">
<% projects.each_with_index do |project, i| %>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<% cache [current_user, project] do %>
<%= render partial: "projects/index/project.html.erb", locals: { project: project } %>
<% end %>
</div>
<% if (i + 1) % 4 == 0 %>
<div class="clearfix visible-lg-block"></div>
<% end %>
<% if (i + 1) % 3 == 0 %>
<div class="clearfix visible-md-block"></div>
<% end %>
<% if (i + 1) % 2 == 0 %>
<div class="clearfix visible-sm-block"></div>
<% end %>
<% projects.each do |project| %>
<% cache [current_user, project] do %>
<%= render partial: 'projects/index/project_card', locals: { project: project } %>
<% end %>
</div>
<% end %>
<% %w(FakeFolder#1 FakeFolder#2 FakeFolder#3 FakeFolder#4).each do |folder| %>
<%= render partial: 'projects/index/folder_card', locals: { folder: folder } %>
<% end %>

7
config/locales/en.yml
View file

@ -330,6 +330,13 @@ en:
options_header: "Options"
comment_placeholder: "Your Message"
more_comments: "More Comments"
card:
start_date: "Start date"
visibility: "Visibility"
users: "Users"
name: "Name"
folder:
description: "%{projects_count} projects | %{folders_count} folders"
modal_new_project:
modal_title: "Create new project"
create: "Create"