From 2662ece8abf60f1ea0fd21e19d7d75e4c4b5c05f Mon Sep 17 00:00:00 2001 From: Andrea Date: Sat, 13 Jan 2024 23:24:22 +0100 Subject: [PATCH] Navbar updates --- res/icons/close.svg | 1 + res/icons/menu.svg | 1 + res/scripts/base.js | 23 +++++++++ res/styles/base.css | 10 ++++ res/styles/navbar.css | 104 +++++++++++++++++++++++++++++++++++++++++ res/styles/propic.css | 3 ++ tpl/base.html | 46 ++---------------- tpl/blocks/navbar.html | 23 +++++++++ 8 files changed, 169 insertions(+), 42 deletions(-) create mode 100644 res/icons/close.svg create mode 100644 res/icons/menu.svg create mode 100644 res/scripts/base.js create mode 100644 res/styles/navbar.css create mode 100644 tpl/blocks/navbar.html diff --git a/res/icons/close.svg b/res/icons/close.svg new file mode 100644 index 0000000..096198c --- /dev/null +++ b/res/icons/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/res/icons/menu.svg b/res/icons/menu.svg new file mode 100644 index 0000000..cad83c2 --- /dev/null +++ b/res/icons/menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/res/scripts/base.js b/res/scripts/base.js new file mode 100644 index 0000000..8f0bb6c --- /dev/null +++ b/res/scripts/base.js @@ -0,0 +1,23 @@ +function onScrollNav () { + if (Number(window.currentScroll) == 0) { + window.currentScroll = window.scrollY || document.documentElement.scrollTop; + return; + } + let newOffset = window.scrollY || document.documentElement.scrollTop; + + document.getElementById('topbar').classList.toggle('closed', newOffset > window.currentScroll); + window.currentScroll = newOffset <= 0 ? 0 : newOffset; +} + +document.getElementById('mobileMenu').addEventListener('click', function (e) { + menuClick (e.target); + e.stopPropagation(); +}); + +function menuClick (e, force){ + let menuItem = e.closest('img'); + let isOpen = false; + isOpen = document.querySelector('nav div.navbar-container').classList.toggle('open', force); + + menuItem.setAttribute('src', isOpen ? '/res/icons/close.svg' : '/res/icons/menu.svg'); +} \ No newline at end of file diff --git a/res/styles/base.css b/res/styles/base.css index 1367190..52cf4fb 100644 --- a/res/styles/base.css +++ b/res/styles/base.css @@ -2,11 +2,21 @@ @import url('propic.css'); @import url('admin.css'); @import url('room.css'); +@import url('navbar.css'); + +a[role=button] { + margin: 0.25em 0; +} summary:has(span.status) { background-color: #ffaf0377; } +/* Dark theme */ +@media only screen and (prefers-color-scheme: dark) { + .icon {filter: invert(1);} +} + /* Mobile only */ @media only screen and ((max-width: 500px) or (hover: none)) { .propic-border.blurred { diff --git a/res/styles/navbar.css b/res/styles/navbar.css new file mode 100644 index 0000000..ec1ade5 --- /dev/null +++ b/res/styles/navbar.css @@ -0,0 +1,104 @@ +nav#topbar.closed { + top: -10rem; +} + +nav#topbar { + background-color :var(--card-background-color); + width: 100vw; + position: sticky; + display: inline-block; + z-index: 9999; + padding: 0.2rem 0.7em; + margin: 0; + white-space: nowrap; + top: 0rem; + transition: top 300ms; + line-height: 2em; +} + +nav#topbar a { + display: inline-block; + padding: 0 0.6em; + line-height: 2em; + margin: 0; + white-space: nowrap; + vertical-align: middle; +} + +nav#topbar .navbar-propic { + margin-right: 0.3rem; + border-radius: 0.2rem; + vertical-align: sub; +} + +nav#topbar a.align-right { + float: right; +} + +nav img { + height: 1.2em; + display: inline; + vertical-align:middle; + box-sizing: border-box; +} + +a.rainbow-text { + background-image: repeating-linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff); + background-size: 2000% 2000%; + color: transparent; + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + animation: rainbow 4s linear infinite; +} + +@keyframes rainbow { + 0% { background-position:0% 0%; } + 100% { background-position:57.75% 0%; } +} + +nav a#mobileMenu { + display: none; +} + +nav .navbar-container { + overflow: hidden; +} + +@media only screen and (max-width: 924px) { + + nav#topbar::before { + transition-delay: 200ms; + transition-property: background-image; + } + + nav#topbar:has(.navbar-container:not(.open))::before{ + background-image: url('/res/furizon.png'); + background-size: contain; + background-position: 50%; + background-origin: content-box; + } + + nav#topbar.closed { + top: -100rem; + } + + nav#topbar a#mobileMenu { + display: block; + max-width: 3rem; + } + + nav#topbar .navbar-container { + transition: max-height 200ms; + display: flex; + flex-direction: column; + } + + nav#topbar .navbar-container:not(.open) { + max-height: 0rem; + } + + nav#topbar .navbar-container.open { + max-height: 30rem; + } +} \ No newline at end of file diff --git a/res/styles/propic.css b/res/styles/propic.css index 35cba1f..c45dcbc 100644 --- a/res/styles/propic.css +++ b/res/styles/propic.css @@ -99,6 +99,9 @@ svg.propic-border-filter { .control-login-as:hover::before{ background-color: #2f4e5cc5; position: absolute; + display: inline-flex; + justify-content: center; + align-items: center; width: 100%; height: 100%; content: 'Enter as'; diff --git a/tpl/base.html b/tpl/base.html index 075818c..b2679c6 100644 --- a/tpl/base.html +++ b/tpl/base.html @@ -16,14 +16,12 @@ main {min-height: 30em;} - mark {background:#0f0;} h1 img {max-height:1.4em;} .notice {padding:0.8em;border-radius:3px;background:#e53935;color:#eee;} .notice a {color:#eee;text-decoration:underline;} .container {max-width:40em;padding:1em;box-sizing:border-box;} td > a[role=button] {padding: 0.3em 0.7em;} td {padding-left: 0.2em;padding-right: 0.2em;} - a[role=button] {margin: 0.25em 0;} td > input[type=file] {margin:0;padding:0;} section {margin-bottom:3em;} @media (min-width: 500px) {body .grid {grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));}} @@ -32,15 +30,8 @@ summary[role=button] {background:var(--primary-focus);color:var(--contrast);} summary img, td img {height:1.2em;width:2em;box-sizing: border-box;} - - @media only screen and (prefers-color-scheme: dark) { - .icon {filter: invert(1);} - } - nav {justify-content: normal;padding:0 0.5em;background:var(--card-background-color);} - nav a {display:inline-block;padding:0 0.6em;line-height:2em;margin:0;white-space:nowrap} - nav img {height:1.2em;display:inline;vertical-align:middle;box-sizing: border-box;} - nav {display:block;} + body .grid.people { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important } .status {float:right;} @@ -55,22 +46,6 @@ grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); } - - .rainbow-text { - background-image: repeating-linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff); - text-align: center; - background-size: 2000% 2000%; - color: transparent; - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - animation: rainbow 4s linear infinite; - } - - @keyframes rainbow { - 0%{background-position:0% 0%} - 100%{background-position:57.75% 0%} - } @@ -91,25 +66,12 @@ g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); + - - + + {% include 'blocks/navbar.html' %} {% block main %}{% endblock %}