mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-09-28 07:54:28 +08:00
Merge pull request #3125 from mlorb/ml-sci-5364
Update Experiments page layout and the toolbar row [SCI-5364]
This commit is contained in:
mlorb
GitHub
commit
d931ed01f2
15 changed files with 439 additions and 612 deletions
|
|
@ -507,9 +507,9 @@
|
|||
let projectsPageSelector = '.projects-index';
|
||||
|
||||
// list/cards switch
|
||||
$(projectsPageSelector).on('click', '.projects-view-mode', function() {
|
||||
$(projectsPageSelector).on('click', '.cards-switch', function() {
|
||||
let $btn = $(this);
|
||||
$('.projects-view-mode').removeClass('active');
|
||||
$('.cards-switch').removeClass('active');
|
||||
if ($btn.hasClass('view-switch-cards')) {
|
||||
$(cardsWrapper).removeClass('list');
|
||||
} else if ($btn.hasClass('view-switch-list')) {
|
||||
|
|
|
|||
|
|
@ -3,207 +3,67 @@
|
|||
// scss-lint:disable SelectorFormat
|
||||
// scss-lint:disable IdSelector
|
||||
|
||||
// EXPERIMENT PANEL
|
||||
.experiment-panel {
|
||||
@include box-shadow(0 4px 8px 0 $color-dove-gray);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 400px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 35px;
|
||||
margin-top: 15px;
|
||||
max-width: 700px;
|
||||
|
||||
.panel-title {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
// New experiments page
|
||||
|
||||
.panel-heading .clone-experiment,
|
||||
.panel-heading .dropdown {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover .clone-experiment,
|
||||
&:hover .dropdown {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.panel-date {
|
||||
color: $color-silver-chalice;
|
||||
|
||||
.fas {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-heading > .clone-experiment {
|
||||
color: $color-silver-chalice;
|
||||
padding-left: 4px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
color: $color-silver-chalice;
|
||||
|
||||
button {
|
||||
padding-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
a {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.experiment-description {
|
||||
margin-top: 10px;
|
||||
max-height: 86px;
|
||||
overflow-x: hidden;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.experiment-no-description {
|
||||
@include font-h3;
|
||||
color: $color-alto;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-workflowimg {
|
||||
color: $color-alto;
|
||||
display: block;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
margin: 15px 0;
|
||||
max-height: 200px;
|
||||
padding-bottom: 70px;
|
||||
padding-top: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.workflowimg-container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
max-height: 190px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// SHOW
|
||||
.center-btn {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.big-plus {
|
||||
color: $color-gainsboro;
|
||||
display: block;
|
||||
font-size: 180px;
|
||||
margin: 20px 0;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
color: $color-alto;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: $color-alto;
|
||||
}
|
||||
}
|
||||
|
||||
#project-show-archive {
|
||||
.experiment-panel {
|
||||
background: $color-concrete;
|
||||
|
||||
.panel-heading {
|
||||
background: unset;
|
||||
}
|
||||
|
||||
.panel-date {
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#project-show,
|
||||
#project-show-archive {
|
||||
.projects-show {
|
||||
.content-header {
|
||||
.project-name {
|
||||
max-width: calc(100% - 2em);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: calc(100% - 7em);
|
||||
|
||||
.fas {
|
||||
margin-right: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-actions {
|
||||
margin-left: auto;
|
||||
|
||||
.experiment-sort-menu {
|
||||
display: inline-block;
|
||||
.project-show-container {
|
||||
margin: 1.5em 0;
|
||||
|
||||
#sortMenu {
|
||||
background: $color-white;
|
||||
.cards-wrapper {
|
||||
--card-min-width: 350px;
|
||||
--list-columns-number: 7;
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
.card {
|
||||
grid-row: span 6;
|
||||
|
||||
&:hover {
|
||||
background: $color-concrete;
|
||||
&.experiment-card {
|
||||
border-radius: 4px;
|
||||
box-shadow: $flyout-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
@include font-button;
|
||||
min-width: 200px;
|
||||
padding: .5em 0;
|
||||
&.list {
|
||||
grid-template-columns: max-content repeat(calc(var(--list-columns-number) - 2), minmax(100px, auto)) max-content;
|
||||
|
||||
a {
|
||||
border-radius: unset;
|
||||
cursor: pointer;
|
||||
padding: .5em 1em;
|
||||
text-align: left;
|
||||
.card {
|
||||
&.experiment-card {
|
||||
.experiment-name-cell {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $color-concrete;
|
||||
}
|
||||
.start-date-cell {
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
&.selected::after {
|
||||
@include font-awesome;
|
||||
content: $font-fas-check;
|
||||
margin-left: auto;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
.modified-date-cell {
|
||||
grid-column: 4;
|
||||
}
|
||||
|
||||
.completed-task-cell {
|
||||
grid-column: 5;
|
||||
}
|
||||
|
||||
.description-cell {
|
||||
grid-column: 6;
|
||||
}
|
||||
|
||||
.actions-cell {
|
||||
grid-column: 7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-show-toolbar {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,20 +8,6 @@
|
|||
$color-group-hover: $color-alabaster;
|
||||
$color-module-hover: $brand-primary;
|
||||
|
||||
// Breadcrumbs
|
||||
.projects-breadcrumbs {
|
||||
padding: .5em 1em;
|
||||
}
|
||||
|
||||
/* Secondary navigation */
|
||||
|
||||
.navbar-nav {
|
||||
.projects-view-mode-switch {
|
||||
margin: 8px 10px 12px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Canvas index page */
|
||||
|
||||
#canvas-container:not(.canvas-container-edit-mode) {
|
||||
|
|
@ -396,7 +382,6 @@ li.module-hover {
|
|||
|
||||
/* Edit module tags modal window */
|
||||
#manage-module-tags-modal {
|
||||
|
||||
.add-tag-form {
|
||||
display: inline-block;
|
||||
margin-left: 15px;
|
||||
|
|
@ -468,140 +453,13 @@ li.module-hover {
|
|||
}
|
||||
|
||||
|
||||
|
||||
/// icon override
|
||||
|
||||
.panel-project {
|
||||
|
||||
.nav-tabs[data-hook="project-footer-icons"] {
|
||||
|
||||
.btn-link {
|
||||
display: inline-block;
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
.badge-indicator {
|
||||
background: transparent;
|
||||
color: $color-silver-chalice;
|
||||
font-size: 12px;
|
||||
margin-left: 0;
|
||||
padding: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content[data-hook="project-dropdown-panel"] {
|
||||
|
||||
.over-due {
|
||||
|
||||
.title {
|
||||
border-top: 1px solid $color-concrete;
|
||||
font-size: 14px;
|
||||
line-height: 15px;
|
||||
padding: 10px 15px 0;
|
||||
}
|
||||
|
||||
.notification {
|
||||
padding-left: 35px;
|
||||
|
||||
.date-time {
|
||||
position: relative;
|
||||
|
||||
.fas {
|
||||
font-size: 14px;
|
||||
left: -20px;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// New projects page
|
||||
|
||||
.projects-breadcrumbs {
|
||||
padding: .5em 1em;
|
||||
}
|
||||
|
||||
.projects-index {
|
||||
.cards-wrapper {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-auto-rows: 2em;
|
||||
grid-column-gap: 1em;
|
||||
grid-row-gap: 1em;
|
||||
grid-template-columns: repeat(auto-fill, minmax(291px, 1fr));
|
||||
width: 100%;
|
||||
|
||||
.table-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.projects-view-mode {
|
||||
&.active::after {
|
||||
@include font-awesome;
|
||||
content: "\f00c";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.archive-projects-form {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.restore-projects-form {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
|
||||
.projects-sort-menu {
|
||||
display: inline-block;
|
||||
|
||||
#sortMenu {
|
||||
background: $color-white;
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $color-concrete;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
@include font-button;
|
||||
min-width: 150px;
|
||||
padding: .5em 0;
|
||||
|
||||
a {
|
||||
border-radius: unset;
|
||||
cursor: pointer;
|
||||
padding: .5em 1em;
|
||||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
background: $color-concrete;
|
||||
}
|
||||
|
||||
&.selected::after {
|
||||
@include font-awesome;
|
||||
content: $font-fas-check;
|
||||
margin-left: auto;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
position: initial;
|
||||
|
||||
|
|
@ -765,51 +623,22 @@ li.module-hover {
|
|||
.form-group {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.archive-projects-form {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.restore-projects-form {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.projects-container {
|
||||
margin: 1.5em 20px;
|
||||
margin: 1.5em 0;
|
||||
|
||||
.cards-wrapper {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-auto-rows: 2em;
|
||||
grid-column-gap: 1em;
|
||||
grid-row-gap: 1em;
|
||||
grid-template-columns: repeat(auto-fill, minmax(291px, 1fr));
|
||||
width: 100%;
|
||||
|
||||
&.no-results {
|
||||
|
||||
.no-results-container {
|
||||
grid-row: 8;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.no-results-img {
|
||||
display: block;
|
||||
margin: auto;
|
||||
max-height: 230px;
|
||||
}
|
||||
|
||||
.no-results-title {
|
||||
@include font-h1;
|
||||
margin-bottom: .25em;
|
||||
margin-top: 1.25em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-results-description {
|
||||
@include font-main;
|
||||
color: $color-silver-chalice;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: none;
|
||||
}
|
||||
--card-min-width: 291px;
|
||||
--list-columns-number: 6;
|
||||
|
||||
.projects-group {
|
||||
grid-column: 1/-1;
|
||||
|
|
@ -817,49 +646,6 @@ li.module-hover {
|
|||
}
|
||||
|
||||
.card {
|
||||
background-color: $color-white;
|
||||
color: $color-volcano;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
grid-row: span 4;
|
||||
height: 100%;
|
||||
padding: .5em 1em;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.checkbox-cell {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 2em;
|
||||
justify-content: center;
|
||||
left: .5em;
|
||||
position: absolute;
|
||||
top: .5em;
|
||||
width: 2em;
|
||||
}
|
||||
|
||||
.user-cell {
|
||||
.global-avatar-container {
|
||||
height: 28px;
|
||||
margin-right: .25em;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.value {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.manage-users-link {
|
||||
color: $color-silver-chalice;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.folder-card {
|
||||
text-align: center;
|
||||
|
||||
|
|
@ -969,49 +755,53 @@ li.module-hover {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.more-users {
|
||||
align-items: center;
|
||||
background: $color-volcano;
|
||||
border-radius: 50%;
|
||||
color: $color-white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 2em;
|
||||
justify-content: center;
|
||||
margin-right: .25em;
|
||||
width: 2em;
|
||||
|
||||
&:hover {
|
||||
&.user-cell {
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.new-user {
|
||||
align-items: center;
|
||||
background: $color-concrete;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 2em;
|
||||
justify-content: center;
|
||||
width: 2em;
|
||||
.value {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.global-avatar-container {
|
||||
height: 28px;
|
||||
margin-right: .25em;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.more-users {
|
||||
align-items: center;
|
||||
background: $color-volcano;
|
||||
border-radius: 50%;
|
||||
color: $color-white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 2em;
|
||||
justify-content: center;
|
||||
margin-right: .25em;
|
||||
width: 2em;
|
||||
}
|
||||
|
||||
.new-user {
|
||||
align-items: center;
|
||||
background: $color-concrete;
|
||||
border-radius: 50%;
|
||||
color: $color-silver-chalice;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 2em;
|
||||
justify-content: center;
|
||||
width: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.list {
|
||||
grid-auto-flow: dense;
|
||||
grid-auto-rows: 3em 1px;
|
||||
grid-column-gap: 0;
|
||||
grid-row-gap: 0;
|
||||
grid-template-columns: max-content repeat(3, minmax(100px, auto)) max-content max-content;
|
||||
margin: 40px 0 0 6px;
|
||||
|
||||
.no-results-container {
|
||||
grid-row: 12;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
grid-template-columns: max-content repeat(calc(var(--list-columns-number) - 3), minmax(100px, auto)) max-content max-content;
|
||||
|
||||
.projects-group {
|
||||
display: contents;
|
||||
|
|
@ -1030,30 +820,6 @@ li.module-hover {
|
|||
}
|
||||
|
||||
.card {
|
||||
display: contents;
|
||||
|
||||
// Border element
|
||||
&:after {
|
||||
background: $color-concrete;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
grid-column: 1/-1;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.table-cell {
|
||||
background: $color-concrete;
|
||||
}
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
height: 100%;
|
||||
padding: 0 .5em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.data-row {
|
||||
font-weight: normal;
|
||||
line-height: 1.25em;
|
||||
|
|
@ -1073,10 +839,6 @@ li.module-hover {
|
|||
font-weight: normal;
|
||||
}
|
||||
|
||||
.checkbox-cell {
|
||||
position: initial;
|
||||
}
|
||||
|
||||
&.folder-card {
|
||||
text-align: left;
|
||||
|
||||
|
|
@ -1107,12 +869,9 @@ li.module-hover {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.checkbox-cell {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.project-name-cell {
|
||||
grid-column: 2;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
|
||||
a:hover {
|
||||
|
|
@ -1140,36 +899,6 @@ li.module-hover {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: contents;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
.table-header-cell {
|
||||
align-items: center;
|
||||
border: 1px solid $color-white;
|
||||
display: flex;
|
||||
height: 3em;
|
||||
padding: 0 .5em;
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: 13em;
|
||||
width: calc(100% + 1em);
|
||||
z-index: 2;
|
||||
|
||||
&.select-all-checkboxes {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
& > * {
|
||||
background-color: $color-concrete;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1217,8 +946,9 @@ li.module-hover {
|
|||
}
|
||||
|
||||
&.list {
|
||||
--list-columns-number: 7;
|
||||
grid-auto-rows: 3em 1px;
|
||||
grid-template-columns: max-content repeat(5, minmax(100px, auto)) max-content;
|
||||
grid-template-columns: max-content repeat(calc(var(--list-columns-number) - 2), minmax(100px, auto)) max-content;
|
||||
|
||||
.card {
|
||||
&::after {
|
||||
|
|
|
|||
138
app/assets/stylesheets/shared/cards.scss
Normal file
138
app/assets/stylesheets/shared/cards.scss
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
.cards-wrapper {
|
||||
--card-min-width: 200px;
|
||||
--list-columns-number: 5;
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-auto-rows: 2em;
|
||||
grid-column-gap: 1em;
|
||||
grid-row-gap: 1em;
|
||||
grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width), 1fr));
|
||||
width: 100%;
|
||||
|
||||
.table-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.no-results {
|
||||
.no-results-container {
|
||||
grid-row: 8;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.no-results-img {
|
||||
display: block;
|
||||
margin: auto;
|
||||
max-height: 230px;
|
||||
}
|
||||
|
||||
.no-results-title {
|
||||
@include font-h1;
|
||||
margin-bottom: .25em;
|
||||
margin-top: 1.25em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-results-description {
|
||||
@include font-main;
|
||||
color: $color-silver-chalice;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: $color-white;
|
||||
color: $color-volcano;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
grid-row: span 4;
|
||||
height: 100%;
|
||||
padding: .5em 1em;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.checkbox-cell {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 2em;
|
||||
justify-content: center;
|
||||
left: .5em;
|
||||
position: absolute;
|
||||
top: .5em;
|
||||
width: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
&.list {
|
||||
grid-auto-flow: dense;
|
||||
grid-auto-rows: 3em 1px;
|
||||
grid-column-gap: 0;
|
||||
grid-row-gap: 0;
|
||||
grid-template-columns: repeat(var(--list-columns-number), minmax(100px, auto));
|
||||
margin: 40px 0 0 6px;
|
||||
|
||||
.no-results-container {
|
||||
grid-row: 12;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: contents;
|
||||
|
||||
// Border element
|
||||
&:after {
|
||||
background: $color-concrete;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
grid-column: 1/-1;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.table-cell {
|
||||
background: $color-concrete;
|
||||
}
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
height: 100%;
|
||||
padding: 0 .5em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.checkbox-cell {
|
||||
grid-column: 1;
|
||||
position: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: contents;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
.table-header-cell {
|
||||
align-items: center;
|
||||
border: 1px solid $color-white;
|
||||
display: flex;
|
||||
height: 3em;
|
||||
padding: 0 .5em;
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: 13em;
|
||||
width: calc(100% + 1em);
|
||||
z-index: 2;
|
||||
|
||||
&.select-all-checkboxes {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
& > * {
|
||||
background-color: $color-concrete;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -22,6 +22,7 @@
|
|||
|
||||
.title-row {
|
||||
align-items: center;
|
||||
background: $color-white;
|
||||
border-bottom: $border-tertiary;
|
||||
display: flex;
|
||||
height: 5em;
|
||||
|
|
@ -34,6 +35,12 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.view-switch {
|
||||
margin-left: auto;
|
||||
|
||||
|
|
@ -51,6 +58,12 @@
|
|||
@include font-button;
|
||||
min-width: auto;
|
||||
|
||||
.divider-label {
|
||||
@include font-small;
|
||||
color: $color-silver-chalice;
|
||||
padding: .25em 1em;
|
||||
}
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
padding: 1em;
|
||||
|
|
@ -65,10 +78,62 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cards-switch {
|
||||
&.active::after {
|
||||
@include font-awesome;
|
||||
content: "\f00c";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sort-menu {
|
||||
display: inline-block;
|
||||
|
||||
#sortMenu {
|
||||
background: $color-white;
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $color-concrete;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
@include font-button;
|
||||
min-width: 150px;
|
||||
padding: .5em 0;
|
||||
|
||||
a {
|
||||
border-radius: unset;
|
||||
cursor: pointer;
|
||||
padding: .5em 1em;
|
||||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
background: $color-concrete;
|
||||
}
|
||||
|
||||
&.selected::after {
|
||||
@include font-awesome;
|
||||
content: $font-fas-check;
|
||||
margin-left: auto;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-row {
|
||||
background: $color-white;
|
||||
border-bottom: $border-tertiary;
|
||||
margin-left: -2em;
|
||||
padding: 1em 0;
|
||||
|
|
|
|||
|
|
@ -657,84 +657,6 @@ ul.double-line > li {
|
|||
}
|
||||
}
|
||||
|
||||
.panel-project {
|
||||
box-shadow: 0 3px 6px $color-alto;
|
||||
color: $color-silver-chalice;
|
||||
|
||||
&:not(.selected) .panel-heading .project-card-selector,
|
||||
&:not(.selected) .panel-heading .dropdown {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:not(.selected):hover .project-card-selector,
|
||||
&:not(.selected):hover .dropdown {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav .btn-link {
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border-color: $brand-primary;
|
||||
box-shadow: 0 3px 10px $brand-primary;
|
||||
}
|
||||
|
||||
&.archived {
|
||||
&,
|
||||
.panel-heading,
|
||||
.panel-body,
|
||||
.panel-footer-scinote {
|
||||
background-color: $color-concrete;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
background-color: $color-white;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
color: $color-silver-chalice;
|
||||
|
||||
.fas {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
color: $brand-primary;
|
||||
|
||||
.fas {
|
||||
color: $color-silver-chalice;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
padding: 10px 15px;
|
||||
|
||||
.row {
|
||||
padding: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-footer {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
|
||||
.nav {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-pane {
|
||||
color: $color-emperor;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-archive {
|
||||
.panel-heading {
|
||||
background-color: darken($color-gainsboro, 5%);
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
<%= render partial: 'projects/index/breadcrumbs', locals: { target_folder: @project.project_folder } %>
|
||||
<% end %>
|
||||
|
||||
|
||||
<div class="content-pane flexible" id="project-show-archive">
|
||||
<%= render partial: 'projects/show/header' %>
|
||||
<% if @project.archived_experiments.count > 0 %>
|
||||
|
|
|
|||
|
|
@ -5,14 +5,15 @@
|
|||
|
||||
<div class="sci-btn-group header-actions">
|
||||
<%= render layout: 'shared/view_switch', locals: { disabled: false } do %>
|
||||
<li class="view-switch-cards projects-view-mode active">
|
||||
<li class="view-switch-cards cards-switch active">
|
||||
<i class="fas fa-th-large button-icon"></i> <%= t('projects.index.header.cards') %>
|
||||
</li>
|
||||
|
||||
<li class="view-switch-list projects-view-mode ">
|
||||
<li class="view-switch-list cards-switch ">
|
||||
<i class="fas fa-list button-icon"></i> <%= t('projects.index.header.table') %>
|
||||
</li>
|
||||
|
||||
<div role="separator" class="divider"></div>
|
||||
<li class="view-switch-active archive-switch" data-view-mode="archived" data-url="<%= projects_path %>">
|
||||
<i class="fas fa-rocket button-icon"></i> <%= t('projects.index.header.active_projects') %>
|
||||
</li>
|
||||
|
|
@ -146,7 +147,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown projects-sort-menu">
|
||||
<div class="dropdown sort-menu">
|
||||
<button class="btn btn-light dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span><i class="fas fa-sort-amount-down"></i></span>
|
||||
<span class="caret"></span>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<% end %>
|
||||
<% end %>
|
||||
<a href="#" class="btn btn-light edit-btn single-object-action hidden" data-for="editable">
|
||||
<span class="fas fa-folder" aria-hidden="true"></span>
|
||||
<span class="fas fa-pencil-alt" aria-hidden="true"></span>
|
||||
<span class="hidden-xs"><%= t('projects.index.edit_button') %></span>
|
||||
</a>
|
||||
<a href="#" class="btn btn-light move-projects-btn multiple-object-action hidden" data-for="moveable" data-url="<%= move_to_modal_project_folders_url %>">
|
||||
|
|
|
|||
|
|
@ -11,28 +11,32 @@
|
|||
<%= render partial: 'projects/index/breadcrumbs', locals: { target_folder: @project.project_folder } %>
|
||||
<% end %>
|
||||
|
||||
<div class="content-pane flexible" id="project-show">
|
||||
<div id="projectShowWrapper" class="content-pane flexible projects-show">
|
||||
<%= render partial: 'projects/show/header' %>
|
||||
<div class="project-show-toolbar">
|
||||
<% if can_create_experiments?(@project) %>
|
||||
<%= link_to new_project_experiment_url(@project),
|
||||
remote: true,
|
||||
type: "button",
|
||||
id: 'new-experiment',
|
||||
class: 'btn btn-primary' do %>
|
||||
<span class="fas fa-plus"></span>
|
||||
<span class="hidden-xs"><%=t 'experiments.new.create' %></span>
|
||||
|
||||
<div class="project-show-container">
|
||||
<div class="cards-wrapper" id="cardsWrapper">
|
||||
<!-- list -->
|
||||
<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('experiments.card.name') %></div>
|
||||
<div class="table-header-cell"><%= t('experiments.card.start_date') %></div>
|
||||
<div class="table-header-cell"><%= t('experiments.card.modified_date') %></div>
|
||||
<div class="table-header-cell"><%= t('experiments.card.completed_task') %></div>
|
||||
<div class="table-header-cell"><%= t('experiments.card.description') %></div>
|
||||
<div class="table-header-cell"></div>
|
||||
</div>
|
||||
<!-- cards -->
|
||||
<% @project.sorted_experiments(@current_sort).each do |experiment| %>
|
||||
<%= render partial: 'projects/show/experiment_card',
|
||||
locals: { experiment: experiment } %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="row">
|
||||
<% @project.sorted_experiments(@current_sort).each_with_index do |experiment, index| %>
|
||||
<%= render partial: 'projects/show/experiment',
|
||||
locals: { experiment: experiment } %>
|
||||
<% end %>
|
||||
<% if can_create_experiments?(@project) %>
|
||||
<%= render 'projects/show/new_experiment' %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
28
app/views/projects/show/_experiment_card.html.erb
Normal file
28
app/views/projects/show/_experiment_card.html.erb
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<div class="card experiment-card">
|
||||
<div class="checkbox-cell table-cell">
|
||||
<div class="sci-checkbox-container">
|
||||
<input value="1" type="checkbox" class="sci-checkbox experiment-card-selector">
|
||||
<span class="sci-checkbox-label"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="experiment-name-cell table-cell">
|
||||
<%= experiment.name %>
|
||||
</div>
|
||||
<div class="actions actions-cell table-cell">
|
||||
<i class="fas fa-ellipsis-h"></i>
|
||||
</div>
|
||||
<div class="data-row start-date-cell table-cell">
|
||||
<span class="card-label"><%= t('experiments.card.start_date') %></span>
|
||||
<span class="value card-value"><%= l(experiment.created_at, format: :full_date) %></span>
|
||||
</div>
|
||||
<div class="data-row modified-date-cell table-cell">
|
||||
<span class="card-label"><%= t('experiments.card.modified_date') %></span>
|
||||
<span class="value card-value"><%= l(experiment.updated_at, format: :full_date) %></span>
|
||||
</div>
|
||||
<div class="data-row completed-task-cell table-cell">
|
||||
<span class="card-label"><%= t('experiments.card.completed_task') %></span>
|
||||
</div>
|
||||
<div class="data-row description-cell table-cell">
|
||||
<span class="card-label"><%= t('experiments.card.description') %></span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="content-header">
|
||||
<div class="content-header sticky-header">
|
||||
<div class="title-row">
|
||||
<h1 class="project-name">
|
||||
<% if @inline_editable_title_config.present? %>
|
||||
|
|
@ -14,8 +14,32 @@
|
|||
<%= @project.name %>
|
||||
<% end %>
|
||||
</h1>
|
||||
<div class="header-actions">
|
||||
<div class="dropdown experiment-sort-menu">
|
||||
<div class="sci-btn-group header-actions">
|
||||
<!-- View switch dropdown -->
|
||||
<%= render layout: 'shared/view_switch', locals: { disabled: false } do %>
|
||||
<li class="view-switch-cards cards-switch active">
|
||||
<i class="fas fa-th-large button-icon"></i> <%= t('experiments.header.cards') %>
|
||||
</li>
|
||||
|
||||
<li class="view-switch-list cards-switch ">
|
||||
<i class="fas fa-list button-icon"></i> <%= t('experiments.header.table') %>
|
||||
</li>
|
||||
|
||||
<div role="separator" class="divider"></div>
|
||||
<li class="view-switch-active archive-switch" data-view-mode="archived" data-url="<%= project_path(@project) %>">
|
||||
<i class="fas fa-rocket button-icon"></i> <%= t('experiments.header.active_experiments') %>
|
||||
</li>
|
||||
|
||||
<li class="view-switch-archived archive-switch" data-view-mode="active" data-url="<%= project_path(@project, view_mode: 'archived') %>">
|
||||
<i class="fas fa-archive button-icon"></i> <%= t('experiments.header.archived_experiments') %>
|
||||
</li>
|
||||
<% end %>
|
||||
<!-- TODO: add filters dropdown -->
|
||||
<div class="filter-container dropdown">
|
||||
<button class="btn btn-light icon-btn filter-button" data-toggle="dropdown"><i class="fas fa-filter"></i></button>
|
||||
</div>
|
||||
<!-- Sort menu dropdown -->
|
||||
<div class="dropdown sort-menu">
|
||||
<button class="btn btn-light icon-btn dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<i class="fas fa-sort-amount-up"></i>
|
||||
</button>
|
||||
|
|
@ -34,4 +58,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="toolbarWrapper" class="toolbar-row">
|
||||
<%= render partial: 'projects/show/toolbar' %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
33
app/views/projects/show/_toolbar.html.erb
Normal file
33
app/views/projects/show/_toolbar.html.erb
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<div id="projectShowToolbar" class="project-show-toolbar">
|
||||
<!-- new experiment button -->
|
||||
<% if can_create_experiments?(@project) %>
|
||||
<%= link_to new_project_experiment_url(@project),
|
||||
remote: true,
|
||||
type: "button",
|
||||
id: 'new-experiment',
|
||||
class: 'btn btn-primary' do %>
|
||||
<span class="fas fa-plus" aria-hidden="true"></span>
|
||||
<span class="hidden-xs"><%= t('experiments.toolbar.new_button') %></span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<a href="#" class="btn btn-light edit-experiment-btn single-object-action" data-for="editable" data-url="">
|
||||
<span class="fas fa-pencil-alt" aria-hidden="true"></span>
|
||||
<span class="hidden-xs"><%= t('experiments.toolbar.edit_button') %></span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="btn btn-light duplicate-experiment-btn multiple-object-action" data-for="duplicable" data-url="">
|
||||
<span class="fas fa-copy" aria-hidden="true"></span>
|
||||
<span class="hidden-xs"><%= t('experiments.toolbar.duplicate_button') %></span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="btn btn-light move-experiments-btn multiple-object-action" data-for="moveable" data-url="">
|
||||
<span class="fas fa-arrow-right" aria-hidden="true"></span>
|
||||
<span class="hidden-xs"><%= t('experiments.toolbar.move_button') %></span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="btn btn-light archive-experiments-btn multiple-object-action" data-for="archivable" data-url="">
|
||||
<span class="fas fa-archive" aria-hidden="true"></span>
|
||||
<span class="hidden-xs"><%= t('experiments.toolbar.archive_button') %></span>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
<span class="caret pull-right"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="viewSwitchButton">
|
||||
<li class="divider-label"><%= t("general.set_view_type") %></li>
|
||||
<%= yield %>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -961,6 +961,24 @@ en:
|
|||
body_html: This inventory has been ushared with your team by the inventory’s owner. To view the item/s that are assigned to your task/s contact the <b>%{team_name}</b> team administrator <b>%{admin_name}</b> (<b>%{admin_email}</b>).
|
||||
open_mobile_app: "Open mobile app"
|
||||
experiments:
|
||||
header:
|
||||
cards: "Cards"
|
||||
table: "Table"
|
||||
active_experiments: "Go to Active experiments"
|
||||
archived_experiments: "Go to Archived experiments"
|
||||
toolbar:
|
||||
new_button: "New experiment"
|
||||
edit_button: "Edit details"
|
||||
duplicate_button: "Duplicate"
|
||||
move_button: "Move"
|
||||
archive_button: "Archive"
|
||||
card:
|
||||
name: "Experiment"
|
||||
start_date: "Start date"
|
||||
modified_date: "Modified date"
|
||||
archived_date: "Archived date"
|
||||
completed_task: "Completed"
|
||||
description: "Description"
|
||||
new:
|
||||
create: 'New Experiment'
|
||||
modal_title: 'Create new experiment'
|
||||
|
|
@ -2337,6 +2355,7 @@ en:
|
|||
public: "public"
|
||||
private: "private"
|
||||
view: "View"
|
||||
set_view_type: "SET VIEW TYPE"
|
||||
search: "Search"
|
||||
file:
|
||||
choose: "Choose File"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue