Dashboard grid markings (getredash#3656)

pushpay · Nov 14, 2019 · a4c1ffc · a4c1ffc
1 parent 127e0cd
commit a4c1ffc
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 8 deletions.
diff --git a/client/app/assets/less/inc/base.less b/client/app/assets/less/inc/base.less
@@ -29,6 +29,16 @@ body {
     }
 }
 
+app-view {
+    min-height: 100vh;
+}
+
+app-view, #app-content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
 strong {
     font-weight: 500;
 }

diff --git a/client/app/assets/less/redash/redash-newstyle.less b/client/app/assets/less/redash/redash-newstyle.less
@@ -23,7 +23,6 @@ body {
 
   &.headless {
     padding-top: 10px;
-    padding-bottom: 15px;
 
     .navbar {
       display: none !important;

diff --git a/client/app/components/app-view/template.html b/client/app/components/app-view/template.html
@@ -13,4 +13,4 @@ <h4>{{ $ctrl.handler.error.message }}</h4>
     </div>
   </div>
 </div>
-<div ng-if="!$ctrl.handler.error" ng-view></div>
+<div id="app-content" ng-if="!$ctrl.handler.error" ng-view></div>
diff --git a/client/app/pages/dashboards/dashboard.html b/client/app/pages/dashboards/dashboard.html
@@ -101,10 +101,9 @@ <h3>
     <filters filters="$ctrl.filters" on-change="$ctrl.filtersOnChange(filter, $modal)"></filters>
   </div>
 
-  <div style="padding-bottom: 5px;" ng-if="$ctrl.dashboard.widgets.length > 0">
+  <div ng-if="$ctrl.dashboard.widgets.length > 0"  id="dashboard-container" ng-class="{'preview-mode': !$ctrl.layoutEditing, 'editing-mode': $ctrl.layoutEditing, 'grid-enabled': !$ctrl.isGridDisabled}">
     <div gridstack editing="$ctrl.layoutEditing" on-layout-changed="$ctrl.onLayoutChanged"
-      is-one-column-mode="$ctrl.isGridDisabled" class="dashboard-wrapper"
-      ng-class="{'preview-mode': !$ctrl.layoutEditing, 'editing-mode': $ctrl.layoutEditing}">
+      is-one-column-mode="$ctrl.isGridDisabled" class="dashboard-wrapper">
       <div class="dashboard-widget-wrapper"
         ng-repeat="widget in $ctrl.dashboard.widgets track by widget.id"
         gridstack-item="widget.options.position" gridstack-item-id="{{ widget.id }}"  data-test="WidgetId{{ widget.id }}">

diff --git a/client/app/pages/dashboards/dashboard.less b/client/app/pages/dashboards/dashboard.less
@@ -17,7 +17,7 @@
     overflow: visible;
   }
 
-  &.preview-mode {
+  .preview-mode & {
     .widget-menu-regular {
       display: block;
     }
@@ -26,7 +26,7 @@
     }
   }
 
-  &.editing-mode {
+  .editing-mode & {
     .widget-menu-regular {
       display: none;
     }
@@ -176,9 +176,52 @@ public-dashboard-page {
   .container {
     min-height: calc(100vh - 95px);
   }
-  
+
   #footer {
     height: 95px;
     text-align: center;  
   }
 }
+
+/****
+  grid bg - based on 6 cols, 35px rows and 15px spacing
+****/
+
+// let the bg go all the way to the bottom
+dashboard-page, dashboard-page .container {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  width: 100%;
+}
+
+#dashboard-container {
+  position: relative;
+  flex-grow: 1;
+  margin-bottom: 50px; // but not ALL the way ಠ_ಠ
+
+  &.editing-mode.grid-enabled {
+    /* Y axis lines */
+    background: linear-gradient(to right, transparent, transparent 1px, #F6F8F9 1px, #F6F8F9), linear-gradient(to bottom, #B3BABF, #B3BABF 1px, transparent 1px, transparent);
+    background-size: 5px 50px;
+    background-position-y: -8px;
+
+    /* X axis lines */
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 15px;
+      background: linear-gradient(to bottom, transparent, transparent 2px, #F6F8F9 2px, #F6F8F9 5px), linear-gradient(to left, #B3BABF, #B3BABF 1px, transparent 1px, transparent);
+      background-size: calc((100vw - 15px) / 6) 5px;
+      background-position: -7px 1px;
+    }
+  }
+}
+
+// placeholder bg color
+.grid-stack-placeholder > .placeholder-content {
+  background-color: rgba(224, 230, 235, 0.5) !important;
+}