diff --git a/build/postcss.config.js b/build/postcss.config.js index cba386d67aebbfd186643373878f3560296c95a3..8e43ebeed4dbc08ba5e5be1c924d58f28808d7f2 100644 --- a/build/postcss.config.js +++ b/build/postcss.config.js @@ -17,7 +17,8 @@ module.exports = ctx => ({ }, plugins: { autoprefixer: { - cascade: false + cascade: false, + grid: "autoplace" } } }); diff --git a/js/tabler.js b/js/tabler.js index ebb6324af90752bb595ec9c7240478901df14c3c..78fb74c3a0d1e1572ed59a83864c105ffbfa6203 100644 --- a/js/tabler.js +++ b/js/tabler.js @@ -108,8 +108,8 @@ const tabler = { $(document).ready(function() { const $body = $('body'); - $body.on('click', '[data-toggle="sidebar"]', function(e) { - $body.toggleClass('sidebar-opened'); + $body.on('click', '[data-toggle="menubar"]', function(e) { + $body.toggleClass('menu-visible'); e.preventDefault(); return false; diff --git a/pages/_includes/layout/topmenu.html b/pages/_includes/layout/topmenu.html index 1c0d46c353e499ca82bd96748191e538d76ee7fc..8b85c7ec4a802c8126f5a67d2c0322ca8ba9c671 100644 --- a/pages/_includes/layout/topmenu.html +++ b/pages/_includes/layout/topmenu.html @@ -1,5 +1,6 @@ -
+
{% include layout/menu.html top=true %}
+
diff --git a/pages/_includes/layout/topnav.html b/pages/_includes/layout/topnav.html index 62a2b5a56d43ad4d23759217621bca8ca74b4cb7..20db118cf988f4c9f8235dd8ae58512830111fa8 100644 --- a/pages/_includes/layout/topnav.html +++ b/pages/_includes/layout/topnav.html @@ -1,4 +1,4 @@ -
+
{% include parts/navbar.html logo=true search=true user-menu=1 person=1 dark=include.dark notifications=true %}
diff --git a/pages/_layouts/default.html b/pages/_layouts/default.html index d05b98e5e524844525aa144a9b05ddaace386ec7..d53f124c8e29d9faf0ece113114e332567cc802f 100644 --- a/pages/_layouts/default.html +++ b/pages/_layouts/default.html @@ -7,7 +7,7 @@ layout: base {% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %} {% include layout/topmenu.html %} -
+
{% include layout/page-title.html %} diff --git a/pages/layout-test.html b/pages/layout-test.html index 222ae946dda84ffa8b61bf6f1765828b6a38af3e..235728272a21eab5925da79755b84cbf57a134e8 100644 --- a/pages/layout-test.html +++ b/pages/layout-test.html @@ -2,12 +2,12 @@ title: Layout test sidenav: true sidenav-dark: true -site-layout: layout-with-sidebar-lg layout-with-sidebar-folded-md +site-layout: layout-collapsed-sm ---
- sidebar + sidebar

Well, she turned me into a newt.

@@ -54,10 +54,6 @@ site-layout: layout-with-sidebar-lg layout-with-sidebar-folded-md $(window).on('resize', function () { test_width(); }); - - $('[data-toggle="sidenav"]').on('click', function () { - $('body').toggleClass('show-sidenav'); - }); }); {% endcapture_global %} diff --git a/scss/_variables.scss b/scss/_variables.scss index 1873c934aef4c4343cb5e556ab30b98fa6327483..a5ffa16caaea5f6f1eb4fd13a31b943aedcf4ab9 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -182,14 +182,6 @@ $generate-colors: true !default; $enable-gradients: false !default; -$grid-breakpoints: ( - xs: 0, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1280px -) !default; - $container-max-widths: ( sm: 540px, md: 720px, @@ -255,7 +247,14 @@ $dropdown-link-hover-bg: $hover-bg !default; $dropdown-link-hover-color: inherit !default; //grid -$grid-gutter-width: 2rem !default; +$grid-gutter-width: 1.5rem !default; +$grid-breakpoints: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1280px +) !default; //loader $loader-size: 2.5rem !default; diff --git a/scss/layout/_layout.scss b/scss/layout/_layout.scss index ca8fd82719cf6c9d821598c1d991269ac63da192..92d606ad934ec90bb35bbcf33ef9445ee06ee00a 100644 --- a/scss/layout/_layout.scss +++ b/scss/layout/_layout.scss @@ -1,51 +1,126 @@ -$breakpoints: $grid-breakpoints; +/** +Layout + */ +@mixin menu-side { + align-items: 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; + } + + @at-root body.menu-visible & { + .layout-area-menu { + left: 0; + } + .layout-area-menu-backdrop { + opacity: 1; + visibility: visible; + } + } +} .layout { position: relative; display: grid; - grid-template-columns: auto 1fr; - grid-template-rows: auto; + + grid-template: + "head" auto + "menu" auto + "main" auto / + auto; } -.layout-with-sidebar { - display: none; +.layout-collapsed { + @each $breakpoint in map-keys($grid-breakpoints) { + $infix: breakpoint-infix($breakpoint); + + @debug $infix; - @each $breakpoint in map-keys($breakpoints) { - $infix: breakpoint-infix($breakpoint, $breakpoints); + @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) { - @include media-breakpoint-up($breakpoint, $breakpoints) { &#{$infix} { - .layout-menubar { + grid-template: + "menu head" auto + "menu main" auto / + auto 1fr; + + .layout-area-menu { width: $sidenav-width; - grid-column: 1; - grid-row: 1 / 10; } } &-folded#{$infix} { - .layout-menubar { + grid-template: + "menu head" auto + "menu main" auto / + auto 1fr; + + .layout-area-menu { width: $sidenav-folded-width; - grid-column: 1; - grid-row: 1 / 10; + } } } } } -.layout-topnav { - grid-column: 2/ none; +.layout-area-topnav { + grid-area: head; } -.layout-menubar { - grid-column: 2; - grid-row: 2 / none; +.layout-area-menu { + grid-area: menu; +} + +.layout-area-menu-backdrop { + display: none; } -.layout-main { - grid-column: 2; - grid-row: 4; +.layout-area-main { + grid-area: main; } diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss index f87647c98dfb446411a8b0a70fec010884624be9..a0a5ce7a76098480a64fdb2acc211fa60675cbd2 100644 --- a/scss/layout/_navbar.scss +++ b/scss/layout/_navbar.scss @@ -28,7 +28,7 @@ Navbar logo content: ''; position: absolute; - bottom: calc(-#{$navbar-padding-y} - 1px); + bottom: subtract(-$navbar-padding-y, 1px); right: $navbar-nav-link-padding-x; left: $navbar-nav-link-padding-x; border-bottom: 1px solid $primary; diff --git a/scss/ui/_lists.scss b/scss/ui/_lists.scss index 3e27010b55d9417089d7fc3305bf5a79df8c7b0f..963a2e2b4cd56f07b9e36ad8449e50537ea62aed 100644 --- a/scss/ui/_lists.scss +++ b/scss/ui/_lists.scss @@ -56,7 +56,7 @@ position: absolute; top: 0; bottom: 0; - left: calc(7.5rem + 2px); + left: add(7.5rem, 2px); z-index: 1; display: block; width: 4px; diff --git a/scss/ui/_steps.scss b/scss/ui/_steps.scss index f1f5f9a45392833dbbb7968e1b147ce4db260cc4..0176ced01c23f60203aa2632fe6bd4cca1d7183e 100644 --- a/scss/ui/_steps.scss +++ b/scss/ui/_steps.scss @@ -2,10 +2,10 @@ @mixin step-size($border-width, $dot-size: 1rem) { .step-item { - padding-top: calc(#{$dot-size} + 4px); + padding-top: add($dot-size, 4px); &::after { - top: calc(#{$dot-size / 2} + 2px); + top: add($dot-size / 2, 2px); height: $border-width; }