Merge pull request #2886 from aignatov-bio/ai-sci-5074-update-dashboard-layout

Refactor dashboard layout [SCI-5074]

app/assets/javascripts/dashboard/quick_start.js

@@ -8,19 +8,19 @@ var DasboardQuickStartWidget = (function() {
   var newProjectsVisibility = '#create-task-modal .new-projects-visibility';
 
   function initNewReportLink() {
-    $('.quick-start-widget .new-report').click(() => {
+    $('.quick-start-buttons .new-report').click(() => {
       sessionStorage.setItem('scinote-dashboard-new-report', Math.floor(Date.now() / 1000));
     });
   }
 
   function initNewProtocolLink() {
-    $('.quick-start-widget .new-protocol').click(() => {
+    $('.quick-start-buttons .new-protocol').click(() => {
       sessionStorage.setItem('scinote-dashboard-new-protocol', Math.floor(Date.now() / 1000));
     });
   }
 
   function initNewTaskModal() {
-    $('.quick-start-widget .new-task').click(() => {
+    $('.quick-start-buttons .new-task').click(() => {
       $('#create-task-modal').modal('show');
       $('#create-task-modal .select-block').attr('data-error', '');
     });
@@ -118,7 +118,7 @@ var DasboardQuickStartWidget = (function() {
 
   return {
     init: () => {
-      if ($('.quick-start-widget').length) {
+      if ($('.quick-start-buttons').length) {
         initNewTaskModal();
         initNewProtocolLink();
         initNewReportLink();

app/assets/stylesheets/dashboard/calendar.scss

@@ -5,8 +5,6 @@
 
 .dashboard-container .calendar-widget {
   --calendar-day-size: 32px;
-  grid-column: 10 / span 3;
-  grid-row: 1 / span 6;
   min-height: 320px;
 
   .dashboard-calendar {
@@ -127,17 +125,8 @@
   }
 }
 
-@media (max-width: 1250px) {
+@media (max-width: 1600px) {
   .dashboard-container .calendar-widget {
-    grid-column: 9 / span 4;
-  }
-}
-
-@media (max-width: 1000px) {
-  .dashboard-container .calendar-widget {
-    grid-column: 1 / span 6;
-    grid-row: 5 / span 4;
-
     .clndr {
       .events-container {
         left: 0;
@@ -150,7 +139,5 @@
 @media (max-width: 700px) {
   .dashboard-container .calendar-widget {
     --calendar-day-size: 28px;
-    grid-column: 1 / span 12;
-    grid-row: 2;
   }
 }

app/assets/stylesheets/dashboard/current_tasks.scss

@@ -2,8 +2,6 @@
 // scss-lint:disable NestingDepth
 
 .dashboard-container .current-tasks-widget {
-  grid-column: 1 / span 9;
-  grid-row: 1 / span 6;
 
   .title {
     flex-shrink: 0;
@@ -238,8 +236,6 @@
 
 @media (max-width: 1250px) {
   .dashboard-container .current-tasks-widget {
-    grid-column: 1 / span 8;
-
     .task-progress-container {
       max-width: 150px;
     }
@@ -259,9 +255,6 @@
 
 @media (max-width: 1000px) {
   .dashboard-container .current-tasks-widget {
-    grid-column: 1 / span 12;
-    grid-row: 1 / span 4;
-
     .no-tasks .fas {
       margin-left: 500px;
     }
@@ -271,7 +264,6 @@
 @media (max-width: 700px) {
   .dashboard-container .current-tasks-widget {
     --widget-header-size: 72px;
-    grid-row: 1;
     min-height: 450px;
 
     .widget-title {

app/assets/stylesheets/dashboard/quick_start.scss

@@ -1,48 +0,0 @@
-// scss-lint:disable SelectorDepth
-// scss-lint:disable NestingDepth
-
-.dashboard-container .quick-start-widget {
-  grid-column: 1 / span 2;
-  grid-row: 7 / span 6;
-
-  .widget-body {
-    .quick-start-description {
-      margin: 16px 16px 24px;
-    }
-
-    .btn-secondary {
-      margin: 8px 16px;
-      text-align: left;
-      width: calc(100% - 32px);
-    }
-  }
-}
-
-@media (max-width: 1700px) {
-  .dashboard-container .quick-start-widget {
-    grid-column: 1 / span 3;
-  }
-}
-
-
-@media (max-width: 1300px) {
-  .dashboard-container .quick-start-widget {
-    grid-column: 1 / span 4;
-  }
-}
-
-@media (max-width: 1000px) {
-  .dashboard-container .quick-start-widget {
-    grid-column: 7 / span 6;
-    grid-row: 5 / span 4;
-  }
-}
-
-@media (max-width: 700px) {
-  .dashboard-container .quick-start-widget {
-    --widget-header-size: 36px;
-    grid-column: 1 / span 12;
-    grid-row: 4;
-    min-height: 300px;
-  }
-}

app/assets/stylesheets/dashboard/recent_work.scss

@@ -2,9 +2,6 @@
 // scss-lint:disable NestingDepth
 
 .dashboard-container .recent-work-widget {
-  grid-column: 3 / span 7;
-  grid-row: 7 / span 6;
-
   .widget-title {
     flex-grow: 1;
   }
@@ -58,24 +55,9 @@
   }
 }
 
-@media (max-width: 1700px) {
-  .dashboard-container .recent-work-widget {
-    grid-column: 4 / span 6;
-  }
-}
-
-
-@media (max-width: 1300px) {
-  .dashboard-container .recent-work-widget {
-    grid-column: 5 / span 8;
-  }
-}
 
 @media (max-width: 1000px) {
   .dashboard-container .recent-work-widget {
-    grid-column: 1 / span 12;
-    grid-row: 9 / span 4;
-
     .no-results {
       .no-results-arrow {
         display: none;
@@ -84,14 +66,11 @@
   }
 }
 
-@media (max-width: 700px) {
+@media (max-width: 1100px) {
   .dashboard-container .recent-work-widget {
-    --widget-header-size: 72px;
-    grid-row: 3;
     min-height: 450px;
 
     .widget-title {
-      flex-basis: 100%;
       line-height: 36px;
     }
 

app/assets/stylesheets/dashboard/show.scss

@@ -1,23 +1,53 @@
 // scss-lint:disable SelectorDepth
 // scss-lint:disable NestingDepth
 
-.dashboard-container {
+.dashboard-background {
+  background: $color-concrete;
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
+.dashboard-view {
   --dashboard-widgets-gap: 30px;
+  padding: calc(var(--dashboard-widgets-gap) / 2)
+           calc(var(--dashboard-widgets-gap) / 2)
+           var(--dashboard-widgets-gap);
+}
+
+.dashboard-header {
+  padding-bottom: calc(var(--dashboard-widgets-gap) / 2);
+}
+
+.dashboard-container {
   --widget-header-size: 44px;
   display: grid;
+  grid-auto-rows: 30em;
   grid-column-gap: var(--dashboard-widgets-gap);
   grid-row-gap: var(--dashboard-widgets-gap);
-  grid-template-columns: repeat(12, 1fr);
-  grid-template-rows: repeat(12, 1fr);
-  min-height: calc(100vh - 51px);
-  padding: var(--dashboard-widgets-gap) calc(var(--dashboard-widgets-gap) - 15px);
+  grid-template-columns: repeat(auto-fit, minmax(7em, 1fr));
   width: 100%;
 
   .basic-widget {
+    background: $color-white;
     border-radius: $border-radius-modal;
     box-shadow: $flyout-shadow;
     position: relative;
 
+    &.large-widget {
+      grid-column: auto / 9 span;
+    }
+
+    &.medium-widget {
+      grid-column: auto / 6 span;
+    }
+
+    &.small-widget {
+      grid-column: auto / 3 span;
+    }
+
     .widget-header {
       align-items: center;
       border-bottom: $border-tertiary;
@@ -27,6 +57,7 @@
 
       .widget-title {
         @include font-h2;
+        flex-shrink: 0;
       }
     }
 
@@ -51,16 +82,50 @@
   }
 }
 
-@media (max-width: 1300px) {
+@media (max-width: 1100px) {
   .dashboard-container {
-    --dashboard-widgets-gap: 16px;
+    --dashboard-widgets-gap: 15px;
+    grid-template-columns: 100%;
+
+    .basic-widget {
+      &.large-widget,
+      &.medium-widget,
+      &.small-widget {
+        grid-column: auto / 1 span;
+      }
+    }
+  }
+}
+
+@media (max-height: 800px) {
+  .dashboard-container {
+    grid-auto-rows: 24em;
+  }
+}
+
+@media (min-height: 1300px) {
+  .dashboard-container {
+    grid-auto-rows: 36em;
   }
 }
 
 @media (max-width: 700px) {
+
+  .dashboard-view {
+    --dashboard-widgets-gap: 15px;
+  }
+
   .dashboard-container {
     --widget-header-size: 72px;
-    grid-template-rows: auto;
+    grid-auto-rows: auto;
+
+    .basic-widget {
+      &.large-widget,
+      &.medium-widget,
+      &.small-widget {
+        grid-column: 1 span;
+      }
+    }
 
     .widget-header {
       flex-wrap: wrap;

app/views/dashboards/_calendar.html.erb

@@ -1,4 +1,4 @@
-<div class="calendar-widget basic-widget">
+<div class="calendar-widget basic-widget <%= widget[:size] %>" style="order: <%= widget[:position] %>">
   <div class="dashboard-calendar"
        data-month-events-url="<%= dashboard_calendar_path %>"
        data-day-events-url="<%= day_dashboard_calendar_path %>"

app/views/dashboards/_current_tasks.html.erb

@@ -1,4 +1,4 @@
-<div class="current-tasks-widget basic-widget">
+<div class="current-tasks-widget basic-widget <%= widget[:size] %>" style="order: <%= widget[:position] %>">
   <div class="widget-header">
     <div class="widget-title"><%= t("dashboard.current_tasks.title") %></div>
     <div class="actions-container">

app/views/dashboards/_quick_start.html.erb

@@ -1,27 +1,12 @@
-<div class="quick-start-widget basic-widget">
-  <div class="widget-header">
-    <div class="widget-title">
-      <%= t("dashboard.quick_start.title") %>
-    </div>
-  </div>
-  <div class="widget-body">
-    <% if current_user.is_guest_of_team?(current_team) %>
-      <div class="widget-placeholder">
-        <p class="widget-placeholder-title"><%= t("dashboard.quick_start.placeholder.title") %></p>
-        <p class="widget-placeholder-description"><%= t("dashboard.quick_start.placeholder.description") %></p>
-      </div>
-    <% else %>
-      <div class="quick-start-description">
-        <%= t("dashboard.quick_start.description") %>
-      </div>
-      <div class="new-task btn btn-secondary btn-block"><i class="fas fa-plus"></i><%= t("dashboard.quick_start.new_task") %></div>
-      <%= link_to protocols_path, {class: "new-protocol btn btn-secondary btn-block"} do %>
-        <i class="fas fa-edit"></i><%= t("dashboard.quick_start.new_protocol") %>
-      <% end %>
-      <%= link_to reports_path, {class: "new-report btn btn-secondary btn-block"} do %>
-        <i class="fas fa-clipboard-check"></i><%= t("dashboard.quick_start.new_report") %>
-      <% end %>
+<% unless current_user.is_guest_of_team?(current_team) %>
+  <div class="quick-start-buttons">
+    <div class="new-task btn btn-secondary"><i class="fas fa-plus"></i><%= t("dashboard.quick_start.new_task") %></div>
+    <%= link_to protocols_path, {class: "new-protocol btn btn-secondary"} do %>
+      <i class="fas fa-edit"></i><%= t("dashboard.quick_start.new_protocol") %>
+    <% end %>
+    <%= link_to reports_path, {class: "new-report btn btn-secondary"} do %>
+      <i class="fas fa-clipboard-check"></i><%= t("dashboard.quick_start.new_report") %>
     <% end %>
   </div>
-</div>
-<%= render "create_task_modal" %>
+  <%= render "create_task_modal" %>
+<% end %>

app/views/dashboards/_recent_work.html.erb

@@ -1,4 +1,4 @@
-<div class="recent-work-widget basic-widget">
+<div class="recent-work-widget basic-widget <%= widget[:size] %>" style="order: <%= widget[:position] %>">
   <div class="widget-header">
     <div class="widget-title">
       <%= t('dashboard.recent_work.title') %>
@@ -37,4 +37,4 @@
       </div>
     <% end %>
    </div>
-</template>
+</template>

app/views/dashboards/show.html.erb

@@ -1,10 +1,17 @@
 <% provide :head_title, t('nav.label.dashboard') %>
 
 <% if current_team %>
-  <div class="dashboard-container">
-    <%= render "calendar" %>
-    <%= render "current_tasks" %>
-    <%= render "recent_work" %>
-    <%= render "quick_start" %>
+  <div class="dashboard-view">
+    <div class="dashboard-background"></div>
+    <div class="dashboard-header">
+      <%= render partial: 'quick_start' %>
+    </div>
+    <div class="dashboard-container">
+      <% Extends::DEFAULT_DASHBOARD_CONFIGURATION.each do |widget| %>
+        <% if widget[:visible] %>
+          <%= render partial: widget[:partial], locals: {widget: widget} %>
+        <% end %>
+      <% end %>
+    </div>
   </div>
 <% end %>

config/initializers/extends.rb

@@ -123,6 +123,12 @@ class Extends
                                'Protocol' => :description,
                                'MyModule' => :description }
 
+  DEFAULT_DASHBOARD_CONFIGURATION = [
+    { partial: 'dashboards/current_tasks', visible: true, size: 'large-widget', position: 1 },
+    { partial: 'dashboards/calendar', visible: true, size: 'small-widget', position: 2 },
+    { partial: 'dashboards/recent_work', visible: true, size: 'medium-widget', position: 3 }
+  ]
+
   ACTIVITY_SUBJECT_TYPES = %w(
     Team RepositoryBase Project Experiment MyModule Result Protocol Report RepositoryRow
   ).freeze