Made the grid go all the way to bottom

getredash · Apr 14, 2019 · cbbadb5 · cbbadb5
1 parent d4cc9d7
commit cbbadb5
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 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/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
@@ -90,7 +90,7 @@ <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" id="dashboard-container" ng-class="{'preview-mode': !$ctrl.layoutEditing, 'editing-mode': $ctrl.layoutEditing, 'grid-enabled': !$ctrl.isGridDisabled}">
+  <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 && !$ctrl.saveInProgress" batch-update="$ctrl.updateGridItems"
       is-one-column-mode="$ctrl.isGridDisabled" class="dashboard-wrapper">
       <div class="dashboard-widget-wrapper"

diff --git a/client/app/pages/dashboards/dashboard.less b/client/app/pages/dashboards/dashboard.less
@@ -139,9 +139,20 @@
 /****
   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);