From 16152d63609c5722186087742ad821779fb20fc0 Mon Sep 17 00:00:00 2001 From: Henk Verlinde Date: Fri, 10 Jun 2022 16:33:08 +0200 Subject: [PATCH 1/5] feat: add all in single navbar --- assets/scss/common/_global.scss | 8 + assets/scss/components/_buttons.scss | 34 ++-- assets/scss/components/_search.scss | 14 +- assets/scss/layouts/_header.scss | 45 +++++- config/_default/params.toml | 1 + layouts/docs/single.html | 4 +- layouts/partials/footer/script-footer.html | 4 +- layouts/partials/header/header.html | 180 +++++++++++---------- layouts/partials/sidebar/docs-toc.html | 20 ++- 9 files changed, 193 insertions(+), 117 deletions(-) diff --git a/assets/scss/common/_global.scss b/assets/scss/common/_global.scss index 7e6c572..cbc8e41 100644 --- a/assets/scss/common/_global.scss +++ b/assets/scss/common/_global.scss @@ -130,6 +130,10 @@ body { z-index: 1000; height: calc(100vh - 4rem); } + + .docs-sidebar-top { + top: 0; + } } } @@ -173,6 +177,10 @@ body { height: calc(100vh - 4rem); overflow-y: auto; } + + .docs-toc-top { + top: 0; + } } .docs-content { diff --git a/assets/scss/components/_buttons.scss b/assets/scss/components/_buttons.scss index 235d6ea..e923ab3 100644 --- a/assets/scss/components/_buttons.scss +++ b/assets/scss/components/_buttons.scss @@ -4,9 +4,7 @@ } #mode { - padding-right: 0.25rem; - padding-left: 0.25rem; - margin-right: -0.25rem; + padding: 0.5rem; } .btn-link:focus { @@ -18,10 +16,10 @@ margin-left: 1.25rem; } -@include media-breakpoint-up(md) { +@include media-breakpoint-up(lg) { #mode { - margin-left: 1.125rem; - margin-right: -0.375rem; + margin-left: 0.5rem; + margin-right: 0.25rem; } .navbar .btn-link { @@ -187,6 +185,20 @@ pre { color: $link-color; } +.dropdown-menu { + /* + width: 100%; + */ + + width: auto; +} + +@include media-breakpoint-up(lg) { + .dropdown-menu { + width: auto; + } +} + .doks-navbar .dropdown-menu, .doks-subnavbar .dropdown-menu { font-size: 0.875rem; @@ -219,16 +231,6 @@ pre { margin-right: -0.3125rem; } -.dropdown-menu.dropdown-menu-main { - width: 100%; -} - -@include media-breakpoint-up(md) { - .dropdown-menu.dropdown-menu-main { - width: auto; - } -} - .dropdown-menu-main .dropdown-item { color: inherit; font-size: $font-size-base; diff --git a/assets/scss/components/_search.scss b/assets/scss/components/_search.scss index 45ec2af..531121a 100644 --- a/assets/scss/components/_search.scss +++ b/assets/scss/components/_search.scss @@ -4,10 +4,19 @@ #suggestions { position: absolute; - left: 0; + right: 0; margin-top: 0.5rem; width: calc(100vw - 3rem); + max-width: calc(400px - 3rem); z-index: $zindex-dropdown; + + @include media-breakpoint-up(md) { + right: -2rem; + } + + @include media-breakpoint-up(lg) { + right: 0; + } } #suggestions a, @@ -57,9 +66,10 @@ color: $gray-700; } -@include media-breakpoint-up(sm) { +@include media-breakpoint-up(lg) { #suggestions { width: 31.125rem; + max-width: 31.125rem; } #suggestions a { diff --git a/assets/scss/layouts/_header.scss b/assets/scss/layouts/_header.scss index cb85c32..f53d1bf 100644 --- a/assets/scss/layouts/_header.scss +++ b/assets/scss/layouts/_header.scss @@ -39,6 +39,8 @@ @include media-breakpoint-up(lg) { .navbar { z-index: 1025; + padding-top: 0.25rem; + padding-bottom: 0.25rem; } } @@ -87,13 +89,19 @@ } button#doks-languages { - margin-right: -0.5625rem; - margin-left: 0.75rem; + margin: 0.25rem 0 0; + + @include media-breakpoint-up(lg) { + margin: 0.25rem 0.5rem 0 0.25rem; + } } button#doks-versions { - margin-right: -0.5625rem; - margin-left: 0; + margin: 0.25rem 0 0; + + @include media-breakpoint-up(lg) { + margin: 0.25rem 0.5rem 0 0.25rem; + } } .offcanvas .nav-link { @@ -185,6 +193,14 @@ button#doks-versions { padding-right: 4rem; border: 1px solid transparent; background: $gray-100; + + @include media-breakpoint-up(md) { + width: calc(100% + 2rem); + } + + @include media-breakpoint-up(lg) { + width: 100%; + } } .form-control.is-search:focus { @@ -206,6 +222,14 @@ button#doks-versions { content: "Ctrl + /"; border: 1px solid $gray-300; border-radius: 0.25rem; + + @include media-breakpoint-up(md) { + right: -1.4625rem; + } + + @include media-breakpoint-up(lg) { + right: 0.3125rem; + } } /* @@ -443,3 +467,16 @@ button#doks-versions { .dropdown-item:active { color: inherit; } + +.social-link { + padding-left: 0.5rem; + + @include media-breakpoint-up(md) { + padding-left: 0; + } + + @include media-breakpoint-up(lg) { + padding-right: 0.5rem; + padding-left: 0.5rem; + } +} diff --git a/config/_default/params.toml b/config/_default/params.toml index 3b88444..e4006f7 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -88,6 +88,7 @@ lastMod = false multilingualMode = false docsVersioning = false fullWidth = false + navbarSticky = true [menu] [menu.section] diff --git a/layouts/docs/single.html b/layouts/docs/single.html index d1aec30..3f88e71 100644 --- a/layouts/docs/single.html +++ b/layouts/docs/single.html @@ -1,12 +1,12 @@ {{ define "main" }}
-
+
{{ if ne .Params.toc false -}} -