Style: Make header adaptive by intro. a hamburg. menu for mobile viewp.
Co-authored-by: c6ristian <c6ristian@christian.moe>
This commit is contained in:
parent
80a9b0a2d3
commit
7fa5fea2a9
4 changed files with 210 additions and 11 deletions
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"));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -127,6 +127,7 @@ body>main {
|
|||
line-height: 1.0em;
|
||||
max-width: 8em;
|
||||
padding: 5px;
|
||||
white-space: nowrap;
|
||||
|
||||
color: $roomstate_color_unknown;
|
||||
|
||||
|
|
@ -143,7 +144,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);
|
||||
|
|
@ -252,6 +253,166 @@ 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);
|
||||
}
|
||||
}
|
||||
|
||||
// Use the brakpoints and viewports, which we need, from here:
|
||||
// https://github.com/picocss/pico/blob/5f6e3c1abd56a4e55d395f16b526f9e5548bda34/scss/_variables.scss#L46
|
||||
$breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
) !default;
|
||||
$viewports: (
|
||||
sm: 510px,
|
||||
) !default;
|
||||
|
||||
// When the header content doesn't display nicely anymore, switch to mobile mode.
|
||||
@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;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
// Use the media queries, which we need, from here:
|
||||
// https://github.com/picocss/pico/blob/5f6e3c1abd56a4e55d395f16b526f9e5548bda34/scss/layout/_container.scss#L15
|
||||
@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">
|
||||
<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">
|
||||
{{- partial "menu.html" (dict "menuID" "main" "page" . ) -}}
|
||||
</nav>
|
||||
<div class="roomstate" id="roomstate">
|
||||
<span class="state">unbekannt</span><br><span class="duration">(seit )</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -2,10 +2,9 @@
|
|||
{{- $menuID := .menuID -}}
|
||||
{{- $menuContent := index site.Menus .menuID -}}
|
||||
|
||||
<ul>
|
||||
<ul class="main-nav">
|
||||
{{- if compare.Eq $menuID "main" -}}
|
||||
{{- $image := resources.Get "images/logo.svg" }}
|
||||
<li><a href="/{{ .Site.Home.URL }}"><img src="{{ $image.RelPermalink }}" class="invert-on-light" width="150px" alt="CCCHH Icon"></a></li>
|
||||
<li><a href="/{{ .Site.Home.RelPermalink }}" class="in-nav-home">Home</a></li>
|
||||
{{- end }}
|
||||
{{- range $menuContent }}
|
||||
<li>
|
||||
|
|
@ -22,10 +21,3 @@
|
|||
>{{ or (T .Identifier) .Name | safeHTML }}</a></li>
|
||||
{{- end }}
|
||||
</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