Tighten UI Proportions (#1767)

* Adjust proportions * Ensure contents don't touch the bottom of the viewport
influxdata · Dec 6, 2018 · 0abac38 · 0abac38
1 parent 83c23c8
commit 0abac38
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 13 deletions.
diff --git a/ui/src/dashboards/components/VEO.scss b/ui/src/dashboards/components/VEO.scss
@@ -6,8 +6,8 @@
 @import 'src/style/modules';
 
 .veo {
-  width: calc(100% - 60px);
-  height: calc(100% - 30px);
+  width: calc(100% - #{$ix-marg-e});
+  height: calc(100% - #{$ix-marg-d});
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -16,7 +16,7 @@
 }
 
 .veo .time-machine {
-  padding: 8px 32px;
+  padding: $page-gutter;
   padding-top: 0;
-  height: calc(100% - 80px);
+  height: calc(100% - #{$page-header-size});
 }
diff --git a/ui/src/dataExplorer/components/DataExplorer.scss b/ui/src/dataExplorer/components/DataExplorer.scss
@@ -8,5 +8,5 @@
 .data-explorer {
   width: 100%;
   height: 100%;
-  padding-bottom: $ix-marg-d;
+  padding-bottom: $page-gutter;
 }
diff --git a/ui/src/pageLayout/components/Page.scss b/ui/src/pageLayout/components/Page.scss
@@ -85,8 +85,8 @@
 
 .container-fluid {
   margin: 0 auto;
+  padding: $page-gutter;
   padding-top: 0;
-  padding: 0 $page-gutter;
   max-width: $page-max-width;
 
   &.full-width {

diff --git a/ui/src/shared/components/TimeMachine.tsx b/ui/src/shared/components/TimeMachine.tsx
@@ -11,7 +11,7 @@ import TimeMachineVis from 'src/shared/components/TimeMachineVis'
 import TimeSeries from 'src/shared/components/TimeSeries'
 
 // Constants
-const INITIAL_RESIZER_HANDLE = 0.4
+const INITIAL_RESIZER_HANDLE = 0.6
 
 // Utils
 import {getActiveTimeMachine} from 'src/shared/selectors/timeMachines'

diff --git a/ui/src/style/_grid.scss b/ui/src/style/_grid.scss
@@ -4,10 +4,10 @@
    This more or less copies what Bootstrap uses
 */
 
-$grid--gutter: 14px;
+$grid--gutter: 8px;
 $grid--form-gutter: 6px;
 
-$grid--breakpoint-sm: 768px;
+$grid--breakpoint-sm: 750px;
 $grid--breakpoint-md: 992px;
 $grid--breakpoint-lg: 1200px;
 

diff --git a/ui/src/style/_variables.scss b/ui/src/style/_variables.scss
@@ -5,14 +5,14 @@
 
 /* Page Layout */
 
-$nav-size: 54px;
+$nav-size: 50px;
 $nav-breakpoint: 800px;
-$page-header-size: 80px;
+$page-header-size: 66px;
 $page-max-width: 1300px;
-$page-gutter: 32px;
+$page-gutter: 16px;
 $page-title-size: 21px;
 $page-title-weight: 400;
-$sidebar--width: 54px; //delete this later
+$sidebar--width: 50px; //delete this later
 
 /* Z Variables */