From 1007cf958de028f26664da1647cca0457f90f2ee Mon Sep 17 00:00:00 2001 From: codecalm Date: Tue, 21 Jan 2020 00:28:59 +0100 Subject: [PATCH] navbar refactoring --- pages/_includes/layout/homepage.html | 2 +- pages/_includes/layout/navbar-search.html | 2 +- pages/_includes/layout/navbar.html | 47 ---- pages/_includes/layout/topmenu.html | 11 +- pages/_includes/layout/topnav.html | 70 +++++- pages/_layouts/default.html | 2 +- scss/_variables.scss | 12 +- scss/layout/_layout.scss | 251 +++++++++++----------- scss/layout/_navbar.scss | 78 ++++++- scss/ui/_cards.scss | 4 + scss/ui/_grid.scss | 12 ++ 11 files changed, 298 insertions(+), 193 deletions(-) diff --git a/pages/_includes/layout/homepage.html b/pages/_includes/layout/homepage.html index a9760050e..5b4ad9b0f 100644 --- a/pages/_includes/layout/homepage.html +++ b/pages/_includes/layout/homepage.html @@ -1,4 +1,4 @@ -
+
{% include cards/charts/sales.html %}
diff --git a/pages/_includes/layout/navbar-search.html b/pages/_includes/layout/navbar-search.html index 08146c993..ebdfc7b7f 100644 --- a/pages/_includes/layout/navbar-search.html +++ b/pages/_includes/layout/navbar-search.html @@ -1,4 +1,4 @@ -
+
{% include ui/form/input-icon.html prepend=true %}
diff --git a/pages/_includes/layout/navbar.html b/pages/_includes/layout/navbar.html index 6f6ee2dea..e69de29bb 100644 --- a/pages/_includes/layout/navbar.html +++ b/pages/_includes/layout/navbar.html @@ -1,47 +0,0 @@ -{% assign person-id = include.person-id | default: 12 | minus: 1 %} -{% assign person = site.data.people[person-id] %} - -{% if page.sidebar %} -{% include layout/navbar-search.html class="mr-4" %} -{% else %} -{% include layout/navbar-logo.html class="mr-4" dark=include.dark %} -{% endif %} - - diff --git a/pages/_includes/layout/topmenu.html b/pages/_includes/layout/topmenu.html index 98e2329a2..80ca4dbda 100644 --- a/pages/_includes/layout/topmenu.html +++ b/pages/_includes/layout/topmenu.html @@ -1,9 +1,12 @@ -
-
-
+{% assign fixed = page.topnav-fixed %} +{% assign fixed = true %} + +
+ \ No newline at end of file diff --git a/pages/_includes/layout/topnav.html b/pages/_includes/layout/topnav.html index 06245e98b..c82999c90 100644 --- a/pages/_includes/layout/topnav.html +++ b/pages/_includes/layout/topnav.html @@ -1,8 +1,68 @@ -
-
-
- {% include layout/navbar.html dark=page.topnav-dark menu-layout=page.menu-layout %} -
+{% assign expand = 'lg' %} +{% assign person-id = include.person-id | default: 12 | minus: 1 %} +{% assign person = site.data.people[person-id] %} + +{% assign dark = page.topnav-dark %} +{% assign fixed = page.topnav-fixed %} +{% assign fixed = true %} + +
+
+ + + + + + + + {% comment %} + {% if page.sidebar %} + {% include layout/navbar-search.html class="mr-4" %} + {% endif %} + {% endcomment %} + + + +
diff --git a/pages/_layouts/default.html b/pages/_layouts/default.html index 6952d70e4..6a4b8d06a 100644 --- a/pages/_layouts/default.html +++ b/pages/_layouts/default.html @@ -2,7 +2,7 @@ layout: base --- -
+
{% if page.sidebar %} {% include layout/sidebar.html %} {% endif %} diff --git a/scss/_variables.scss b/scss/_variables.scss index a40f095bf..15e32b478 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -245,6 +245,7 @@ $card-cap-bg: $min-black !default; $card-active-border-color: $primary !default; $card-status-size: $border-width-wide !default; $card-group-margin: 1.5rem !default; +$card-group-margin-sm: .75rem !default; $card-shadow: rgba($dark, .04) 0 2px 4px 0 !default; $card-shadow-hover: rgba($dark, .16) 0 2px 16px 0 !default; @@ -297,17 +298,22 @@ $modal-md: 540px !default; $modal-sm: 300px !default; //navbar -$navbar-bg: $white !default; -$navbar-height: 3.5rem !default; +$navbar-padding-y: .5rem !default; +$navbar-height: 3.75rem !default; $navbar-border-color: $border-color !default; +$navbar-toggler-padding-y: .75rem !default; +$navbar-toggler-padding-x: .75rem !default; +$navbar-toggler-margin: -.75rem !default; +$navbar-toggler-font-size: 1rem !default; +$navbar-toggler-size: 1.5rem !default; + //popover $popover-border-color: $border-color !default; //nav //$nav-link-padding-y: 1rem !default; -$navbar-padding-x: .75rem !default; $navbar-padding-y: .75rem !default; $navbar-nav-link-padding-x: .75rem !default; $navbar-light-color: $text-muted !default; diff --git a/scss/layout/_layout.scss b/scss/layout/_layout.scss index cdcc47909..65df575ee 100644 --- a/scss/layout/_layout.scss +++ b/scss/layout/_layout.scss @@ -112,14 +112,41 @@ $sidenav-folded-item-height: 3.5rem; display: none; } + + .content { + margin-left: $sidenav-width-narrow; + + .navbar.fixed-top { + left: $sidenav-width-narrow; + } + } + + &.sidebar-right { + + .content { + margin-left: 0; + margin-right: $sidenav-width-narrow; + + .navbar.fixed-top { + left: 0; + right: $sidenav-width-narrow; + } + } + } + .hide-sidebar-narrow { display: none !important } } -@mixin sidebar-show($breakpoint-show) { - @include media-breakpoint-down($breakpoint-show) { - display: none; +@mixin sidebar-visible { + display: flex; + + + .content .navbar.fixed-top { + left: $sidenav-width; + } + + .hide-sidebar-visible, + + .content .hide-sidebar-visible { + display: none !important; } } @@ -127,97 +154,91 @@ $sidenav-folded-item-height: 3.5rem; /** Top nav */ -.topnav { - background-color: $navbar-bg; - position: absolute; - top: 0; - right: 0; - left: 0; - z-index: $zindex-sticky; - min-height: $navbar-height; - box-shadow: inset 0 -1px 0 0px $navbar-border-color; - user-select: none; - - & + & { - top: $navbar-height; - z-index: $zindex-sticky - 1; - } - - & + & + & { - top: $navbar-height * 2; - z-index: $zindex-sticky - 2; - } - - @media print { - display: none; - } - - .navbar { - margin: 0; - padding: 0; - min-height: $navbar-height; - } - - .nav-link { - height: $navbar-height; - } - - .nav-item { - &.active { - position: relative; - - &:after { - content: ''; - position: absolute; - bottom: 0; - left: 2px; - right: 2px; - border-bottom: 1px solid $primary; - } - } - } - - .navbar-brand-logo { - &-sm { - display: none; - } - - @include media-breakpoint-down($sidenav-breakpoint-show) { - &-lg { - display: none; - } - - &-sm { - display: block; - } - } - } - - .sidebar + .content & { - left: $sidenav-width; - - @if $sidenav-breakpoint-folded { - @include media-breakpoint-down($sidenav-breakpoint-folded) { - left: $sidenav-width-narrow; - } - } - - @include media-breakpoint-down($sidenav-breakpoint-show) { - left: 0; - padding: 0; - } - } -} - -.topnav-fixed { - position: fixed; - z-index: $zindex-fixed; -} +//.navbar-top { +// background-color: $navbar-bg; +// position: absolute; +// top: 0; +// right: 0; +// left: 0; +// z-index: $zindex-sticky; +// min-height: $navbar-height; +// box-shadow: inset 0 -1px 0 0px $navbar-border-color; +// user-select: none; +// +// & + & { +// top: $navbar-height; +// z-index: $zindex-sticky - 1; +// } +// +// & + & + & { +// top: $navbar-height * 2; +// z-index: $zindex-sticky - 2; +// } +// +// @media print { +// display: none; +// } +// +// .nav-link { +// height: $navbar-height; +// } +// +// .nav-item { +// &.active { +// position: relative; +// +// &:after { +// content: ''; +// position: absolute; +// bottom: 0; +// left: 2px; +// right: 2px; +// border-bottom: 1px solid $primary; +// } +// } +// } +// +// .navbar-brand-logo { +// &-sm { +// display: none; +// } +// +// @include media-breakpoint-down($sidenav-breakpoint-show) { +// &-lg { +// display: none; +// } +// +// &-sm { +// display: block; +// } +// } +// } +// +// .sidebar + .content & { +// left: $sidenav-width; +// +// @if $sidenav-breakpoint-folded { +// @include media-breakpoint-down($sidenav-breakpoint-folded) { +// left: $sidenav-width-narrow; +// } +// } +// +// @include media-breakpoint-down($sidenav-breakpoint-show) { +// left: 0; +// padding: 0; +// } +// } +//} +// +//.topnav-fixed { +// position: fixed; +// z-index: $zindex-fixed; +//} /** Wrapper */ -.wrapper { +.page { height: 100%; overflow: hidden; width: 100%; @@ -229,7 +250,6 @@ Content .content { overflow: hidden; min-height: 100vh; - padding: 0 .5rem 0; display: flex; flex-direction: column; @@ -254,21 +274,14 @@ Content flex: 1; display: flex; + @include media-breakpoint-up(md) { + padding-left: $card-group-margin-sm; + padding-right: $card-group-margin-sm; + } + @media print { padding-top: 0 !important; } - - .topnav + & { - padding-top: add($navbar-height, 1px); - } - - .topnav + .topnav + & { - padding-top: add($navbar-height * 2, 2px); - } - - .topnav + .topnav + .topnav + & { - padding-top: add($navbar-height * 3, 3px); - } } /** @@ -283,16 +296,18 @@ Sidebar box-shadow: inset -1px 0 $sidenav-border-color; top: 0; bottom: 0; - display: flex; + display: none; flex-direction: column; - + + @include media-breakpoint-up($sidenav-breakpoint-show) { + @include sidebar-visible; + } + @if $sidenav-breakpoint-folded { @include media-breakpoint-between($sidenav-breakpoint-show, $sidenav-breakpoint-folded) { @include sidebar-narrow; } } - - @include sidebar-show($sidenav-breakpoint-show); } .sidebar-brand { @@ -448,7 +463,7 @@ Right sidebar margin-left: 0; margin-right: $sidenav-width; - .topnav { + .navbar.fixed-top { left: 0; right: $sidenav-width; } @@ -460,24 +475,4 @@ Folded sidebar */ .sidebar-narrow { @include sidebar-narrow; - - + .content { - margin-left: $sidenav-width-narrow; - - .topnav { - left: $sidenav-width-narrow; - } - } - - &.sidebar-right { - + .content { - margin-left: 0; - margin-right: $sidenav-width-narrow; - - .topnav { - left: 0; - right: $sidenav-width-narrow; - } - } - } } diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss index ce698405a..687f19180 100644 --- a/scss/layout/_navbar.scss +++ b/scss/layout/_navbar.scss @@ -1,6 +1,79 @@ .navbar { - //padding-top: 0; - //padding-bottom: 0; + min-height: $navbar-height; + + &.fixed-top { + + .content-page { + padding-top: $navbar-height; + } + + + .navbar.fixed-top { + top: $navbar-height; + + + .content-page { + padding-top: $navbar-height * 2; + } + + + .navbar.fixed-top { + top: $navbar-height * 2; + + + .content-page { + padding-top: $navbar-height * 3; + } + } + } + } +} + +/** +navbar toggler + */ +.navbar-toggler { + border: 0; + font-size: $navbar-toggler-font-size; + width: add($navbar-toggler-size, $navbar-toggler-padding-x * 2); + height: add($navbar-toggler-size, $navbar-toggler-padding-y * 2); + margin: $navbar-toggler-margin; + position: relative; +} + +.navbar-toggler-icon { + background-image: none !important; + position: absolute; + width: 1.5rem; + height: 2px; + border-radius: 3px; + + left: 50%; + top: 50%; + + background: currentColor; + transform: translateX(-50%); + + &:before, + &:after { + content: ''; + background: inherit; + position: absolute; + height: inherit; + width: inherit; + left: 0; + border-radius: inherit; + } + + &:before { + top: .5rem; + } + + &:after { + bottom: .5rem; + } +} + +/** +navbar with border +*/ +.navbar-border { + box-shadow: inset 0 -1px 0 0px $navbar-border-color; } /** @@ -11,7 +84,6 @@ Navbar logo } .navbar-nav { - flex-direction: row; margin-right: -($navbar-padding-x); margin-left: -($navbar-padding-x); diff --git a/scss/ui/_cards.scss b/scss/ui/_cards.scss index f0e27d691..83d0e7f21 100644 --- a/scss/ui/_cards.scss +++ b/scss/ui/_cards.scss @@ -2,6 +2,10 @@ margin-bottom: $card-group-margin; box-shadow: $card-shadow; + @include media-breakpoint-down(sm) { + margin-bottom: $card-group-margin-sm; + } + @media print { border: none; box-shadow: none; diff --git a/scss/ui/_grid.scss b/scss/ui/_grid.scss index 467c02b65..6d27e966a 100644 --- a/scss/ui/_grid.scss +++ b/scss/ui/_grid.scss @@ -30,3 +30,15 @@ } } } + +.row-cards { + @include media-breakpoint-down(sm) { + margin-left: -($card-group-margin-sm / 2); + margin-right: -($card-group-margin-sm / 2); + + >* { + padding-left: $card-group-margin-sm / 2; + padding-right: $card-group-margin-sm / 2; + } + } +} \ No newline at end of file