Tighten UI Proportions (#1767)

* Adjust proportions

* Ensure contents don't touch the bottom of the viewport
pull/10616/head
alexpaxton 2018-12-06 12:28:07 -08:00 committed by GitHub
parent 83c23c89ef
commit 0abac380bf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 13 additions and 13 deletions

View File

@ -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});
}

View File

@ -8,5 +8,5 @@
.data-explorer {
width: 100%;
height: 100%;
padding-bottom: $ix-marg-d;
padding-bottom: $page-gutter;
}

View File

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

View File

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

View File

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

View File

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