From 302946b149899bcd0e92aafd4c8f077c5a1e034c Mon Sep 17 00:00:00 2001 From: codecalm Date: Sun, 8 Dec 2019 19:51:59 +0100 Subject: [PATCH] navbar layout refactor --- pages/_includes/layout/menu.html | 19 +- pages/_includes/layout/topmenu.html | 11 +- pages/_includes/layout/topnav.html | 9 +- pages/_includes/parts/navbar-search.html | 10 + pages/_includes/parts/navbar.html | 80 +---- pages/_layouts/default.html | 4 +- scss/_variables.scss | 19 +- scss/layout/_layout.scss | 368 ++++++++++++----------- scss/layout/_navbar.scss | 37 ++- 9 files changed, 259 insertions(+), 298 deletions(-) create mode 100644 pages/_includes/parts/navbar-search.html diff --git a/pages/_includes/layout/menu.html b/pages/_includes/layout/menu.html index bf699d48..da13be2e 100644 --- a/pages/_includes/layout/menu.html +++ b/pages/_includes/layout/menu.html @@ -6,7 +6,7 @@ {% assign icon = level-1[1].icon %} {% assign has-children = false %} - {% if level-1[1].children or level-1[1].docs %} + {% if level-1[1].children %} {% assign has-children = true %} {% endif %} @@ -31,23 +31,6 @@ {% if has-children %}
- {% if level-1[1].docs %} - {% for d in site.data.docs %} - {% assign doc = site.docs | where: "slug", d.page | first %} - {% if doc %} - - - {{ doc.title }} - - {% if doc.new %} - new - {% endif %} - - - {% endif %} - {% endfor %} - {% endif %} - {% for level-2 in level-1[1].children %}
- - - - {% if include.icon %}{% include_cached ui/icon.html icon=include.icon %}{% endif %} - {% if include.stamp %}UI{% endif %} - {% if include.logo %} - - - {% endif %} - {% if include.title %}{{ include.title }}{% endif %} + + -
- {% endif %} - - {% if include.manage %} -
  • - Manage Widgets -
    • - {% endif %} - - {% if include.register %} -
  • - - Sign in - -
    • -
  • - - Register - -
    • - {% endif %} - - {% if include.plus %} -
  • - {% include_cached ui/icon.html icon="plus" %} -
    • - {% endif %} - - {% if include.premium %} -
  • - Go Premium -
    • - {% endif %} - - {% if include.sync %} -
  • - {% include_cached ui/icon.html icon="rotate-cw" class="mr-2" %}Sync -
    • - {% endif %} diff --git a/pages/_layouts/default.html b/pages/_layouts/default.html index a779a68f..0ee2ae0f 100644 --- a/pages/_layouts/default.html +++ b/pages/_layouts/default.html @@ -7,9 +7,9 @@ layout: base {% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %} {% include layout/topmenu.html %} -
    +
    -
    +
    {% include layout/page-title.html %} {{ content }} diff --git a/scss/_variables.scss b/scss/_variables.scss index 5e527347..1736864f 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -117,7 +117,7 @@ $avatar-sizes: ( //Fonts $font-size-base: 1rem !default; $font-weight-base: 400 !default; -$line-height-base: 1.6 !default; +$line-height-base: 1.5 !default; $body-letter-spacing: null !default; $border-radius: 3px !default; @@ -266,11 +266,19 @@ $loader-size: 2.5rem !default; //navbar $navbar-bg: $white !default; +$navbar-height: 3.5rem !default; $navbar-border-color: $border-color !default; $navbar-border-color: $border-color !default; //nav -$nav-link-padding-y: .25rem !default; +$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; +$navbar-light-active-color: $primary !default; +$navbar-light-hover-color: $body-color !default; //pagination $pagination-border-width: 0 !default; @@ -289,13 +297,6 @@ $sidenav-border-color: $border-color-alpha !default; $sidenav-dark-bg: $dark !default; $sidenav-link-padding-x: .75rem !default; -$navbar-padding-x: .75rem !default; -$navbar-padding-y: .75rem !default; -$navbar-nav-link-padding-x: .75rem !default; -$navbar-light-color: $text-muted !default; -$navbar-light-active-color: $primary !default; -$navbar-light-hover-color: $body-color !default; - //steps $steps-border-width: 2px !default; $steps-color-inactive: #f3f5f5 !default; diff --git a/scss/layout/_layout.scss b/scss/layout/_layout.scss index f0aebc2b..a3ed9e4a 100644 --- a/scss/layout/_layout.scss +++ b/scss/layout/_layout.scss @@ -1,182 +1,196 @@ -/** -Layout - */ -@mixin menu-side { - align-items: flex-start; -} - -@mixin menu-collapsed { - .layout-area-menu { - position: fixed; - left: -($sidenav-width); - top: 0; - bottom: 0; - background: $dark; - color: $white; - width: $sidenav-width; - z-index: $zindex-fixed; - transition: .3s left; - - @include menu-side; - } - - .layout-area-menu-backdrop { - display: block; - position: fixed; - top: 0; - left: 0; - bottom: 0; - width: 100vw; - background: rgba($dark, .1); - z-index: $zindex-fixed - 1; - visibility: hidden; - opacity: 0; - } - - .layout-toggler { - display: block; - } - - @at-root body.aside-visible & { - .layout-area-menu { - left: 0; - } - - .layout-area-menu-backdrop { - opacity: 1; - visibility: visible; - } - } -} - -.layout { - position: relative; - display: grid; - - grid-template: "head" auto "menu" auto "main" auto / - 100%; -} - -.layout-collapsed { - @each $breakpoint in map-keys($grid-breakpoints) { - $infix: breakpoint-infix($breakpoint); - - @if $infix != '' { - @include media-breakpoint-down($breakpoint) { - - &#{$infix} { - @include menu-collapsed; - } - } - } @else { - @include menu-collapsed; - } - } -} - -.layout-sidebar { - @each $breakpoint in map-keys($grid-breakpoints) { - $infix: breakpoint-infix($breakpoint); - - @include media-breakpoint-up($breakpoint) { - .layout-toggler { - display: none; - } - - &#{$infix} { - grid-template: "menu head" auto "menu main" auto / - auto 1fr; - - .layout-area-menu { - width: $sidenav-width; - } - } - - &-folded#{$infix} { - grid-template: "menu head" auto "menu main" auto / - auto 1fr; - - .layout-area-menu { - width: $sidenav-folded-width; - } - } - } +.topnav { + border-bottom: 1px solid; + background-color: $navbar-bg; + border-color: $navbar-border-color; + + .navbar { + margin: 0; + padding: 0; + min-height: $navbar-height; } } -.layout-toggler { - display: none; - width: 2rem; - height: 2rem; - cursor: pointer; - position: relative; - opacity: .8; - - &-icon { - top: 50%; - left: 50%; - display: block; - margin-top: -2px; - margin-left: -.75rem; - - transition-timing-function: cubic-bezier(.55, .055, .675, .19); - transition-duration: 75ms; - - &, - &:after, - &:before { - content: ''; - width: 1.5rem; - height: 2px; - background: currentColor; - position: absolute; - border-radius: 4px; - } - - &:before { - top: -.5rem; - transition: top 75ms ease .12s, opacity 75ms ease; - } - - &:after { - bottom: -.5rem; - transition: bottom 75ms ease .12s, transform 75ms cubic-bezier(.55, .055, .675, .19); - } - - @at-root body.aside-visible & { - transform: rotate(45deg); - transition-delay: .12s; - transition-timing-function: cubic-bezier(.215, .61, .355, 1); - &:before { - top: 0; - transition: top 75ms ease, opacity 75ms ease .12s; - opacity: 0; - } - &:after { - bottom: 0; - transition: bottom 75ms ease, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s; - transform: rotate(-90deg); - } - } - } -} - -.layout-area-topnav { - grid-area: head; - padding-left: 0; - padding-right: 0; -} - -.layout-area-menu { - grid-area: menu; -} - -.layout-area-menu-backdrop { - display: none; -} - -.layout-area-main { - grid-area: main; -} +///** +//Layout +// */ +//@mixin menu-side { +// align-items: flex-start; +//} +// +//@mixin menu-collapsed { +// .layout-area-menu { +// position: fixed; +// left: -($sidenav-width); +// top: 0; +// bottom: 0; +// background: $dark; +// color: $white; +// width: $sidenav-width; +// z-index: $zindex-fixed; +// transition: .3s left; +// +// @include menu-side; +// } +// +// .layout-area-menu-backdrop { +// display: block; +// position: fixed; +// top: 0; +// left: 0; +// bottom: 0; +// width: 100vw; +// background: rgba($dark, .1); +// z-index: $zindex-fixed - 1; +// visibility: hidden; +// opacity: 0; +// } +// +// .layout-toggler { +// display: block; +// } +// +// @at-root body.aside-visible & { +// .layout-area-menu { +// left: 0; +// } +// +// .layout-area-menu-backdrop { +// opacity: 1; +// visibility: visible; +// } +// } +//} +// +//.layout { +// position: relative; +// display: grid; +// +// grid-template: "head" auto "menu" auto "main" auto / +// 100%; +//} +// +//.layout-collapsed { +// @each $breakpoint in map-keys($grid-breakpoints) { +// $infix: breakpoint-infix($breakpoint); +// +// @if $infix != '' { +// @include media-breakpoint-down($breakpoint) { +// +// &#{$infix} { +// @include menu-collapsed; +// } +// } +// } @else { +// @include menu-collapsed; +// } +// } +//} +// +//.layout-sidebar { +// @each $breakpoint in map-keys($grid-breakpoints) { +// $infix: breakpoint-infix($breakpoint); +// +// @include media-breakpoint-up($breakpoint) { +// .layout-toggler { +// display: none; +// } +// +// &#{$infix} { +// grid-template: "menu head" auto "menu main" auto / +// auto 1fr; +// +// .layout-area-menu { +// width: $sidenav-width; +// } +// } +// +// &-folded#{$infix} { +// grid-template: "menu head" auto "menu main" auto / +// auto 1fr; +// +// .layout-area-menu { +// width: $sidenav-folded-width; +// } +// } +// } +// } +//} +// +//.layout-toggler { +// display: none; +// width: 2rem; +// height: 2rem; +// cursor: pointer; +// position: relative; +// opacity: .8; +// +// &-icon { +// top: 50%; +// left: 50%; +// display: block; +// margin-top: -2px; +// margin-left: -.75rem; +// +// transition-timing-function: cubic-bezier(.55, .055, .675, .19); +// transition-duration: 75ms; +// +// &, +// &:after, +// &:before { +// content: ''; +// width: 1.5rem; +// height: 2px; +// background: currentColor; +// position: absolute; +// border-radius: 4px; +// } +// +// &:before { +// top: -.5rem; +// transition: top 75ms ease .12s, opacity 75ms ease; +// } +// +// &:after { +// bottom: -.5rem; +// transition: bottom 75ms ease .12s, transform 75ms cubic-bezier(.55, .055, .675, .19); +// } +// +// @at-root body.aside-visible & { +// transform: rotate(45deg); +// transition-delay: .12s; +// transition-timing-function: cubic-bezier(.215, .61, .355, 1); +// +// &:before { +// top: 0; +// transition: top 75ms ease, opacity 75ms ease .12s; +// opacity: 0; +// } +// +// &:after { +// bottom: 0; +// transition: bottom 75ms ease, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s; +// transform: rotate(-90deg); +// } +// } +// } +//} +// +//.layout-area-topnav { +// grid-area: head; +// padding-left: 0; +// padding-right: 0; +//} +// +//.layout-area-menu { +// grid-area: menu; +//} +// +//.layout-area-menu-backdrop { +// display: none; +//} +// +//.layout-area-main { +// grid-area: main; +//} diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss index a0a5ce7a..6cc26df1 100644 --- a/scss/layout/_navbar.scss +++ b/scss/layout/_navbar.scss @@ -1,7 +1,6 @@ .navbar { - border-bottom: 1px solid; - background-color: $navbar-bg; - border-color: $navbar-border-color; + //padding-top: 0; + //padding-bottom: 0; } /** @@ -21,19 +20,33 @@ Navbar logo padding-right: $navbar-nav-link-padding-x; } - .nav-item.active .nav-link { - position: relative; + .nav-item { + &.active .nav-link { + position: relative; - &:after { - content: ''; - position: absolute; + &:after { + content: ''; + position: absolute; - bottom: subtract(-$navbar-padding-y, 1px); - right: $navbar-nav-link-padding-x; - left: $navbar-nav-link-padding-x; - border-bottom: 1px solid $primary; + bottom: -1px; + right: $navbar-nav-link-padding-x; + left: $navbar-nav-link-padding-x; + border-bottom: 1px solid $primary; + } + } + + &:hover { + .dropdown-menu { + display: block; + } } } } +.navbar-brand { + padding: 0; +} +.nav-link { + +} -- GitLab