mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-03-22 21:09:53 +08:00
Merge pull request #2934 from urbanrotnik/ur-sci-5130
New cards and list layout [SCI-5130][SCI-5131]
This commit is contained in:
Alex Kriuchykhin
GitHub
commit
672e1d1b7a
11 changed files with 368 additions and 85 deletions
|
|
@ -385,9 +385,9 @@
|
|||
initEditProjectButton($('.panel-project'));
|
||||
initArchiveRestoreButton($('.panel-project'));
|
||||
|
||||
$('#projects-cards-view').on('click', '.project-card-selector', function() {
|
||||
$('#cards-wrapper').on('click', '.card-selector', function() {
|
||||
var projectsToolbar = $('#projectsToolbar');
|
||||
var projectCard = $(this).closest('.panel-project');
|
||||
var projectCard = $(this).closest('.card');
|
||||
var projectId = projectCard.data('id');
|
||||
// Determine whether ID is in the list of selected project IDs
|
||||
var index = $.inArray(projectId, selectedProjects);
|
||||
|
|
@ -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,15 +490,8 @@
|
|||
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);
|
||||
viewContainer.find('.card').remove();
|
||||
viewContainer.append(data.html);
|
||||
init();
|
||||
},
|
||||
error: function() {
|
||||
|
|
@ -760,26 +754,10 @@
|
|||
|
||||
$('.projects-view-mode-switch a').off().on('shown.bs.tab', function(event) {
|
||||
if ($(event.target).data('mode') === 'table') {
|
||||
// table tab
|
||||
$('#sortMenu').hide();
|
||||
$('#projects-absent').hide();
|
||||
$('#projects-present').show();
|
||||
if ($.isEmptyObject(TABLE)) {
|
||||
dataTableInit();
|
||||
} else if (projectsViewFilterChanged) {
|
||||
TABLE.draw();
|
||||
} else {
|
||||
updateSelectedRows();
|
||||
}
|
||||
$('#cards-wrapper').addClass('list');
|
||||
} else {
|
||||
// cards tab
|
||||
$('#sortMenu').show();
|
||||
if (projectsViewFilterChanged) {
|
||||
loadCardsView();
|
||||
}
|
||||
updateSelectedCards();
|
||||
$('#cards-wrapper').removeClass('list');
|
||||
}
|
||||
projectsViewFilterChanged = false;
|
||||
});
|
||||
|
||||
initProjectsViewFilter();
|
||||
|
|
|
|||
|
|
@ -209,7 +209,7 @@
|
|||
padding: 5px 0 5px 40px;
|
||||
|
||||
&:hover {
|
||||
background-color: $brand-primary-light;
|
||||
background-color: $brand-focus-light;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -653,3 +653,260 @@ li.module-hover {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// New projects page
|
||||
.projects-container {
|
||||
margin-top: 35px;
|
||||
|
||||
.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;
|
||||
margin: 40px 0 0 6px;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -244,7 +244,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $brand-primary-light;
|
||||
background-color: $brand-focus-light;
|
||||
}
|
||||
|
||||
.external-import-btn {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -11,36 +11,21 @@
|
|||
<%= 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">
|
||||
<%= render partial: 'projects/index/toolbar' %>
|
||||
<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
17
app/views/projects/index/_folder_card.html.erb
Normal 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 card-selector">
|
||||
<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
50
app/views/projects/index/_project_card.html.erb
Normal 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 card-selector">
|
||||
<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>
|
||||
|
|
@ -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 %>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue