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

Make navbar horizontal until breakpoint is reached

pull/10616/head
Alex P 2018-09-25 14:09:31 -07:00
parent ce560b1322
commit 7c80201782
3 changed files with 30 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
chronograf/ui/src/page_layout/PageLayout.scss
View File

@ -4,7 +4,7 @@
*/ */
$nav-size: 54px; $nav-size: 54px;
$nav-breakpoint: 660px; $nav-breakpoint: 800px;
$page-header-size: 80px; $page-header-size: 80px;
$page-max-width: 1300px; $page-max-width: 1300px;
$page-gutter: 32px; $page-gutter: 32px;

34
chronograf/ui/src/page_layout/components/Nav.scss
View File

@ -10,10 +10,10 @@ $nav--bg-accent: $c-comet;
.nav { .nav {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
background-color: $g3-castle; background-color: $g3-castle;
border-radius: 0 $radius $radius 0; border-radius: 0 0 $radius $radius;
width: $nav-size; height: $nav-size;
a:link, a:link,
a:active, a:active,
@ -49,13 +49,14 @@ $nav--bg-accent: $c-comet;
.nav--item-menu { .nav--item-menu {
position: absolute; position: absolute;
top: 0; top: $nav-size;
left: $nav-size; left: 50%;
@include gradient-h($nav--bg,$nav--bg-accent); transform: translateX(-50%);
@include gradient-v($nav--bg,$nav--bg-accent);
display: none; display: none;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
border-radius: 0 $radius $radius 0; border-radius: $radius;
overflow: hidden; overflow: hidden;
} }
@ -106,3 +107,22 @@ $nav--bg-accent: $c-comet;
0 0 20px $c-laser; 0 0 20px $c-laser;
} }
} }
// Vertical Menu
@media screen and (min-width: $nav-breakpoint) {
.nav {
flex-direction: column;
height: auto;
width: $nav-size;
border-radius: 0 $radius $radius 0;
}
.nav--item-menu {
top: 0;
left: $nav-size;
border-radius: 0 $radius $radius 0;
transform: translateX(0);
@include gradient-h($nav--bg,$nav--bg-accent);
}
}

4
chronograf/ui/src/page_layout/components/Page.scss
View File

@ -20,7 +20,6 @@
.page-header { .page-header {
height: $page-header-size; height: $page-header-size;
padding: 0 $page-gutter;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -28,11 +27,12 @@
.page-header--container { .page-header--container {
display: flex; display: flex;
padding: 0 $page-gutter;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
flex-wrap: nowrap; flex-wrap: nowrap;
width: 100%; width: 100%;
max-width: ($page-max-width - ($page-gutter * 2)); max-width: $page-max-width;
} }
.page-header.full-width .page-header--container { .page-header.full-width .page-header--container {