Merge pull request #3125 from mlorb/ml-sci-5364

Update Experiments page layout and the toolbar row [SCI-5364]

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')) {

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 {
+// New experiments page
-    margin-bottom: 14px;
-  }
 
-  .panel-heading .clone-experiment,
+.projects-show {
-  .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 {
   .content-header {
     .project-name {
-      max-width: calc(100% - 2em);
+      max-width: calc(100% - 7em);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
 
       .fas {
         margin-right: .5em;
       }
     }
   }
-  .header-actions {
-    margin-left: auto;
 
-    .experiment-sort-menu {
+  .project-show-container {
-      display: inline-block;
+    margin: 1.5em 0;
 
-      #sortMenu {
+    .cards-wrapper {
-        background: $color-white;
+      --card-min-width: 350px;
+      --list-columns-number: 7;
 
-        &:focus,
+      .card {
-        &:active {
+        grid-row: span 6;
-          box-shadow: none;
-        }
 
-        &:hover {
+        &.experiment-card {
-          background: $color-concrete;
+          border-radius: 4px;
+          box-shadow: $flyout-shadow;
         }
       }
 
-      .dropdown-menu {
+      &.list {
-        @include font-button;
+        grid-template-columns: max-content repeat(calc(var(--list-columns-number) - 2), minmax(100px, auto)) max-content;
-        min-width: 200px;
-        padding: .5em 0;
 
-        a {
+        .card {
-          border-radius: unset;
+          &.experiment-card {
-          cursor: pointer;
+            .experiment-name-cell {
-          padding: .5em 1em;
+              grid-column: 2;
-          text-align: left;
-
-          &:hover {
-            background: $color-concrete;
             }
 
-          &.selected::after {
+            .start-date-cell {
-            @include font-awesome;
+              grid-column: 3;
-            content: $font-fas-check;
-            margin-left: auto;
-            position: absolute;
-            right: 1em;
-          }
-        }
-      }
-    }
             }
 
-  .project-show-toolbar {
+            .modified-date-cell {
-    margin-top: 1em;
+              grid-column: 4;
+            }
+
+            .completed-task-cell {
+              grid-column: 5;
+            }
+
+            .description-cell {
+              grid-column: 6;
+            }
+
+            .actions-cell {
+              grid-column: 7;
+            }
+          }
+        }
+      }
+    }
   }
 }

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-index {
+.projects-breadcrumbs {
-  .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;
-          }
-        }
-      }
-    }
 }
 
+.projects-index {
   .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;
+      --card-min-width: 291px;
-      display: grid;
+      --list-columns-number: 6;
-      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;
-      }
 
       .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,6 +755,22 @@ li.module-hover {
               display: none;
             }
 
+            &.user-cell {
+              a:hover {
+                text-decoration: none;
+              }
+
+              .value {
+                display: flex;
+                flex-wrap: wrap;
+              }
+
+              .global-avatar-container {
+                height: 28px;
+                margin-right: .25em;
+                width: 28px;
+              }
+
               .more-users {
                 align-items: center;
                 background: $color-volcano;
@@ -980,16 +782,13 @@ li.module-hover {
                 justify-content: center;
                 margin-right: .25em;
                 width: 2em;
-
-              &:hover {
-                text-decoration: none;
-              }
               }
 
               .new-user {
                 align-items: center;
                 background: $color-concrete;
                 border-radius: 50%;
+                color: $color-silver-chalice;
                 cursor: pointer;
                 display: flex;
                 height: 2em;
@@ -999,19 +798,10 @@ li.module-hover {
             }
           }
         }
+      }
 
       &.list {
-        grid-auto-flow: dense;
+        grid-template-columns: max-content repeat(calc(var(--list-columns-number) - 3), minmax(100px, auto)) max-content max-content;
-        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;
-        }
 
         .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 {

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;
+      }
+    }
+  }
+}

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;

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%);

app/views/projects/experiment_archive.html.erb

@@ -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 %>

app/views/projects/index/_header.html.erb

@@ -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>

app/views/projects/index/_toolbar.html.erb

@@ -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 %>">

app/views/projects/show.html.erb

@@ -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) %>
+  <div class="project-show-container">
-      <%= link_to new_project_experiment_url(@project),
+    <div class="cards-wrapper" id="cardsWrapper">
-                  remote: true,
+      <!-- list -->
-                  type: "button",
+      <div class="table-header">
-                  id: 'new-experiment',
+        <div class="table-header-cell select-all-checkboxes">
-                  class: 'btn btn-primary' do %>
+          <div class="sci-checkbox-container">
-        <span class="fas fa-plus"></span>
+            <input value="1" type="checkbox" class="sci-checkbox select-all">
-        <span class="hidden-xs"><%=t 'experiments.new.create' %></span>
+            <span class="sci-checkbox-label"></span>
-      <% end %>
-    <% end %>
           </div>
-  <div class="row">
+        </div>
-    <% @project.sorted_experiments(@current_sort).each_with_index do |experiment, index| %>
+        <div class="table-header-cell"><%= t('experiments.card.name') %></div>
-      <%= render partial: 'projects/show/experiment',
+        <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 %>
-    <% if can_create_experiments?(@project) %>
+    </div>
-      <%= render 'projects/show/new_experiment' %>
-    <% end %>
   </div>
 </div>
 

app/views/projects/show/_experiment_card.html.erb

@@ -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>

app/views/projects/show/_header.html.erb

@@ -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="sci-btn-group header-actions">
-      <div class="dropdown experiment-sort-menu">
+      <!-- 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>

app/views/projects/show/_toolbar.html.erb

@@ -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>

app/views/shared/_view_switch.html.erb

@@ -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>

config/locales/en.yml

@@ -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"