From f05175372ce585914585375da6ebd448502d1ac7 Mon Sep 17 00:00:00 2001 From: June Date: Tue, 31 Oct 2023 00:11:46 +0100 Subject: [PATCH] Style: Make header adaptive by intro. a hamburg. menu for mobile viewp. Co-authored-by: c6ristian --- themes/ccchh/assets/js/hamburgerAdditional.js | 33 ++++ themes/ccchh/assets/sass/main.scss | 164 +++++++++++++++++- themes/ccchh/layouts/partials/header.html | 13 ++ themes/ccchh/layouts/partials/menu.html | 12 +- 4 files changed, 211 insertions(+), 11 deletions(-) create mode 100644 themes/ccchh/assets/js/hamburgerAdditional.js diff --git a/themes/ccchh/assets/js/hamburgerAdditional.js b/themes/ccchh/assets/js/hamburgerAdditional.js new file mode 100644 index 0000000..73c602f --- /dev/null +++ b/themes/ccchh/assets/js/hamburgerAdditional.js @@ -0,0 +1,33 @@ +"use strict"; + +function setScrolling(enable = true) { + const body = document.body; + if (enable) { + body.style.overflow = "unset"; + } + else { + body.style.overflow = "hidden"; + } +}; + +document.addEventListener("DOMContentLoaded", () => { + const hamburgerMenuCheckbox = document.querySelector(".menu-button"); + + // When the hamburger menu is open, disable scrolling. + hamburgerMenuCheckbox.addEventListener("change", () => { + if (hamburgerMenuCheckbox.checked) { + setScrolling(false); + } + else { + setScrolling(true); + } + }); + + window.addEventListener("resize", () => { + if (window.innerWidth > 768 && hamburgerMenuCheckbox.checked) { + // Uncheck the checkbox to disable scrolling and to get to the original state. + hamburgerMenuCheckbox.checked = false; + hamburgerMenuCheckbox.dispatchEvent(new Event("change")); + } + }); +}); diff --git a/themes/ccchh/assets/sass/main.scss b/themes/ccchh/assets/sass/main.scss index b087d0b..1f14821 100644 --- a/themes/ccchh/assets/sass/main.scss +++ b/themes/ccchh/assets/sass/main.scss @@ -128,6 +128,7 @@ body>main { line-height: 1.0em; max-width: 8em; padding: 5px; + white-space: nowrap; color: $roomstate_color_unknown; @@ -144,7 +145,7 @@ body>main { } } -// CCCHH Icon in Menu +// CCCHH icon & hamburger menu in header @media only screen and (prefers-color-scheme: light) { .invert-on-light { filter: invert(1); @@ -253,6 +254,167 @@ body>main { box-shadow: var(--card-box-shadow); padding: 0; margin: 0; + + --main-header-content-height: calc(var(--font-size) * var(--line-height)); + + .container { + display: block flex; + position: relative; + flex-direction: row; + justify-content: start; + align-items: center; + column-gap: var(--spacing); + } + + .menu-button, + .hamburger, + .in-nav-home { + // Don't display, when not in mobile mode. + display: none; + } + + .menu { + // Set this to 100% to force the roomstate to "right-align". + width: 100%; + } + + .ccchh-logo { + padding-top: var(--nav-element-spacing-vertical); + padding-bottom: var(--nav-element-spacing-vertical); + + img { + height: var(--main-header-content-height); + } + } + + + // When the header content doesn't display nicely anymore, switch to mobile mode. + @import "../pico-1.5.11/scss/variables"; + + @media (max-width: map-get($breakpoints, md)) { + .hamburger-button { + display: unset; + position: absolute; + top: calc(var(--nav-element-spacing-vertical)); + right: var(--spacing); + height: var(--main-header-content-height); + // To have an attempt at a good-looking cross, when converting the burger + // stack to one, set the width to the height / sin(45). + width: calc(var(--main-header-content-height) / 0.707106781); + } + + .menu-button { + z-index: 3; + opacity: 0%; + border: 0; + margin: 0; + } + + .hamburger { + display: flex; + flex-direction: column; + justify-content: space-between; + + .hamburger-line { + height: 4px; + width: 100%; + background-color: white; + } + } + + .in-nav-home { + display: unset; + } + + // Don't display the menu per default in mobile mode. + .menu { + display: none; + } + + .menu-button:checked~.menu { + display: unset; + position: fixed; + width: 100%; + height: 100%; + top: calc(var(--main-header-content-height) + (var(--nav-element-spacing-vertical) * 2) + 3px); + left: 0; + background-color: var(--background-color); + + ul, + li { + display: block; + padding-top: calc(var(--nav-element-spacing-vertical) * 0.5); + padding-bottom: calc(var(--nav-element-spacing-vertical) * 0.5); + } + + ul { + padding-left: var(--spacing); + padding-right: var(--spacing); + } + + li { + padding-left: 0; + padding-right: 0; + border-bottom: 0.2em solid var(--muted-border-color); + display: flex; + + // borrowed form pico css for li + margin-bottom: calc(var(--typography-spacing-vertical) * .25); + } + + a { + flex-grow: 1; + } + + .main-nav { + margin: auto; + } + + // Use the media queries, which we need, from here: + @if map-get($breakpoints, "sm") { + @media (min-width: map-get($breakpoints, "sm")) { + ul { + padding-left: 0; + padding-right: 0; + } + + .main-nav { + max-width: map-get($viewports, "sm"); + } + } + } + } + + .hamburger-line-top { + transform-origin: top right; + transition: all 0.4s ease-in-out; + } + + .hamburger-line-middle { + transition: all 0.2s ease-in-out; + } + + .hamburger-line-bottom { + transform-origin: bottom right; + transition: all 0.4s ease-in-out; + } + + .menu-button:checked~.hamburger { + .hamburger-line-top { + // After some adjustments to make the cross look decent, rotate -45deg. + transform: translateX(-1.5px) translateY(-1.5px) rotate(-45deg); + } + + .hamburger-line-middle { + transform: scaleY(0); + } + + .hamburger-line-bottom { + // After some adjustments to make the cross look decent, rotate 45deg. + transform: translateX(-1.5px) translateY(1.5px) rotate(45deg); + } + } + } } diff --git a/themes/ccchh/layouts/partials/header.html b/themes/ccchh/layouts/partials/header.html index dafcd8f..154a775 100644 --- a/themes/ccchh/layouts/partials/header.html +++ b/themes/ccchh/layouts/partials/header.html @@ -1,8 +1,21 @@
+ {{ $image := resources.Get "images/logo.svg" }} + + +
+
+
+
+
+
+ unbekannt
(seit ) +
diff --git a/themes/ccchh/layouts/partials/menu.html b/themes/ccchh/layouts/partials/menu.html index 84dea8d..7d3bda2 100644 --- a/themes/ccchh/layouts/partials/menu.html +++ b/themes/ccchh/layouts/partials/menu.html @@ -2,10 +2,9 @@ {{- $menuID := .menuID -}} {{- $menuContent := index site.Menus .menuID -}} -