Style: Make header adaptive by intro. a hamburg. menu for mobile viewp.
All checks were successful
/ build (push) Successful in 12s
All checks were successful
/ build (push) Successful in 12s
Co-authored-by: c6ristian <c6ristian@christian.moe>
This commit is contained in:
parent
0471b5f348
commit
75cdbad994
33
themes/ccchh/assets/js/hamburgerAdditional.js
Normal file
33
themes/ccchh/assets/js/hamburgerAdditional.js
Normal file
|
@ -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"));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
|
@ -128,6 +128,7 @@ body>main {
|
||||||
line-height: 1.0em;
|
line-height: 1.0em;
|
||||||
max-width: 8em;
|
max-width: 8em;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
color: $roomstate_color_unknown;
|
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) {
|
@media only screen and (prefers-color-scheme: light) {
|
||||||
.invert-on-light {
|
.invert-on-light {
|
||||||
filter: invert(1);
|
filter: invert(1);
|
||||||
|
@ -253,6 +254,167 @@ body>main {
|
||||||
box-shadow: var(--card-box-shadow);
|
box-shadow: var(--card-box-shadow);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,8 +1,21 @@
|
||||||
|
|
||||||
<header class="main-header header">
|
<header class="main-header header">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
{{ $image := resources.Get "images/logo.svg" }}
|
||||||
|
<a href="{{ .Site.Home.RelPermalink }}" class="ccchh-logo">
|
||||||
|
<img src="{{ $image.RelPermalink }}" class="invert-on-light" alt="CCCHH Icon">
|
||||||
|
</a>
|
||||||
|
<input class="menu-button hamburger-button" type="checkbox">
|
||||||
|
<div class="hamburger hamburger-button invert-on-light">
|
||||||
|
<div class="hamburger-line hamburger-line-top"></div>
|
||||||
|
<div class="hamburger-line hamburger-line-middle"></div>
|
||||||
|
<div class="hamburger-line hamburger-line-bottom"></div>
|
||||||
|
</div>
|
||||||
<nav class="menu">
|
<nav class="menu">
|
||||||
{{- partial "menu.html" (dict "menuID" "main" "page" . ) -}}
|
{{- partial "menu.html" (dict "menuID" "main" "page" . ) -}}
|
||||||
</nav>
|
</nav>
|
||||||
|
<div class="roomstate" id="roomstate">
|
||||||
|
<span class="state">unbekannt</span><br><span class="duration">(seit )</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
|
@ -2,10 +2,9 @@
|
||||||
{{- $menuID := .menuID -}}
|
{{- $menuID := .menuID -}}
|
||||||
{{- $menuContent := index site.Menus .menuID -}}
|
{{- $menuContent := index site.Menus .menuID -}}
|
||||||
|
|
||||||
<ul>
|
<ul class="main-nav">
|
||||||
{{- if compare.Eq $menuID "main" -}}
|
{{- if compare.Eq $menuID "main" -}}
|
||||||
{{- $image := resources.Get "images/logo.svg" }}
|
<li><a href="/{{ .Site.Home.RelPermalink }}" class="in-nav-home">Home</a></li>
|
||||||
<li><a href="/{{ .Site.Home.URL }}"><img src="{{ $image.RelPermalink }}" class="invert-on-light" width="150px" alt="CCCHH Icon"></a></li>
|
|
||||||
{{- end }}
|
{{- end }}
|
||||||
{{- range $menuContent }}
|
{{- range $menuContent }}
|
||||||
<li>
|
<li>
|
||||||
|
@ -22,10 +21,3 @@
|
||||||
>{{ or (T .Identifier) .Name | safeHTML }}</a></li>
|
>{{ or (T .Identifier) .Name | safeHTML }}</a></li>
|
||||||
{{- end }}
|
{{- end }}
|
||||||
</ul>
|
</ul>
|
||||||
{{ if compare.Eq $menuID "main" -}}
|
|
||||||
<ul>
|
|
||||||
<li class="roomstate" id="roomstate">
|
|
||||||
<span class="state">unbekannt</span><br><span class="duration">(seit )</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
{{- end -}}
|
|
||||||
|
|
Loading…
Reference in a new issue