Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Allow template control bar to grow without disrupting page layout

pull/3215/head
Alex P 2018-04-16 14:49:21 -07:00
parent 03ee5a0070
commit 270494905c
2 changed files with 29 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
ui/src/style/components/template-control-bar.scss
View File

@ -11,10 +11,7 @@ $template-control-dropdown-min-width: 146px;
$template-control-dropdown-max-width: 300px; $template-control-dropdown-max-width: 300px;
.template-control-bar { .template-control-bar {
position: absolute; position: relative;
top: $chronograf-page-header-height;
left: 0;
width: 100%;
display: none; display: none;
background-color: $g3-castle; background-color: $g3-castle;
@ -24,12 +21,12 @@ $template-control-dropdown-max-width: 300px;
} }
.template-control--container { .template-control--container {
width: 100%; width: 100%;
height: $chronograf-page-header-height; min-height: $chronograf-page-header-height;
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 60px; padding: 8px 60px;
} }
.template-control--heading { .template-control--heading {
font-size: 16px; font-size: 16px;
@ -45,36 +42,7 @@ button.btn.template-control--manage {
.template-control--controls { .template-control--controls {
display: flex; display: flex;
flex: 1 0 0%; flex: 1 0 0%;
flex-wrap: nowrap; flex-wrap: wrap;
overflow-x: auto;
overflow-y: hidden;
&::-webkit-scrollbar {
height: 8px;
&-button {
display: none;
}
&-track {
background-color: $g3-castle;
}
&-track-piece {
background-color: $g3-castle;
border: 2px solid $g3-castle;
border-radius: 4px;
}
&-thumb {
background-color: $g6-smoke;
border: 2px solid $g3-castle;
border-radius: 4px;
}
&-corner {
display: none;
}
}
&::-webkit-resizer {
display: none;
}
} }
.template-control--empty { .template-control--empty {
color: $g11-sidewalk; color: $g11-sidewalk;

26
ui/src/style/layout/page.scss
View File

@ -1,6 +1,6 @@
/* /*
Page Layout Page Layout
---------------------------------------------- ----------------------------------------------------------------------------
*/ */
.chronograf-root { .chronograf-root {
display: flex; display: flex;
@ -55,3 +55,27 @@
.container-fluid {padding: 8px !important;} .container-fluid {padding: 8px !important;}
.template-control--manage {display: none;} .template-control--manage {display: none;}
} }
/*
Dashboard Page
------------------------------------------------------------------------------
Using a flex based layout so that the Template Variable Control Bar can
have any height without disrupting the layout
*/
.page.dashboard-page {
display: flex;
flex-direction: column;
align-items: stretch;
flex-wrap: nowrap;
.page-header {
position: relative;
}
.page-contents {
position: relative !important;
flex: 1 0 0;
height: 100% !important;
top: 0;
}
}