diff --git a/app/assets/javascripts/projects/index.js b/app/assets/javascripts/projects/index.js
index d1c997aa6..22d35e0a2 100644
--- a/app/assets/javascripts/projects/index.js
+++ b/app/assets/javascripts/projects/index.js
@@ -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')) {
diff --git a/app/assets/stylesheets/experiments.scss b/app/assets/stylesheets/experiments.scss
index c8a7fd37b..d5776f37c 100644
--- a/app/assets/stylesheets/experiments.scss
+++ b/app/assets/stylesheets/experiments.scss
@@ -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;
- }
}
diff --git a/app/assets/stylesheets/projects.scss b/app/assets/stylesheets/projects.scss
index 510897ccd..cb0e78b59 100644
--- a/app/assets/stylesheets/projects.scss
+++ b/app/assets/stylesheets/projects.scss
@@ -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 {
diff --git a/app/assets/stylesheets/shared/cards.scss b/app/assets/stylesheets/shared/cards.scss
new file mode 100644
index 000000000..f20c64788
--- /dev/null
+++ b/app/assets/stylesheets/shared/cards.scss
@@ -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;
+ }
+ }
+ }
+}
diff --git a/app/assets/stylesheets/shared/content_pane.scss b/app/assets/stylesheets/shared/content_pane.scss
index f9a950c0a..3829f8a8d 100644
--- a/app/assets/stylesheets/shared/content_pane.scss
+++ b/app/assets/stylesheets/shared/content_pane.scss
@@ -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;
diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index f2bb9a994..d6515811f 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -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%);
diff --git a/app/views/projects/experiment_archive.html.erb b/app/views/projects/experiment_archive.html.erb
index a6b676669..264d85fa3 100644
--- a/app/views/projects/experiment_archive.html.erb
+++ b/app/views/projects/experiment_archive.html.erb
@@ -10,7 +10,6 @@
<%= render partial: 'projects/index/breadcrumbs', locals: { target_folder: @project.project_folder } %>
<% end %>
-
<%= render partial: 'projects/show/header' %>
<% if @project.archived_experiments.count > 0 %>
diff --git a/app/views/projects/index/_header.html.erb b/app/views/projects/index/_header.html.erb
index db2b09316..2523bca02 100644
--- a/app/views/projects/index/_header.html.erb
+++ b/app/views/projects/index/_header.html.erb
@@ -5,14 +5,15 @@
-