Merge pull request 'Added navbar' (#14) from drew-dev into stranck-dev

Reviewed-on: #14

res/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /></svg>

res/icons/menu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" /></svg>

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');
+}

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 {

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;
+    }
+}

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';

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%}
-			}
 		</style>
 		
 		<!-- Matomo -->
@@ -91,25 +66,12 @@
 				g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
 			})();
 		</script>
+		<script src="/res/scripts/base.js" defer></script>
 		<noscript><p><img src="https://y.foxo.me/matomo.php?idsite=2&amp;rec=1" style="border:0;" alt="" /></p></noscript>
 		<!-- End Matomo Code -->
 	</head>
-	<body>
+	<body onscroll="onScrollNav()">
-		<nav id="topbar">
+		{% include 'blocks/navbar.html' %}
-			{% if order %}
-				<a href="/manage/welcome">Your Booking</a>
-			{% endif %}
-			<a href="/manage/nosecount">Nose Count</a>
-			<a href="/manage/fursuitcount">Fursuit Count</a>
-			<a href="/manage/sponsorcount" class="rainbow-text">Sponsor Count</a>
-			{% if order %}
-				<a href="/manage/carpooling">Carpooling</a>
-				<a style="float:right;" href="/manage/logout">Logout</a>
-				{% if order.isAdmin() %}<a style="float:right;" href="/manage/admin">Admin panel</a>{% endif %}
-				<a style="float:right;color: #b1b1b1;">Logged in as <i>{{order.ans('fursona_name')}}</i></a>
-			{% endif %}
-			<br clear="both" />
-		</nav>
 		{% block main %}{% endblock %}
 		
 		<script type="text/javascript">

tpl/blocks/navbar.html

@@ -0,0 +1,23 @@
+<nav id="topbar">
+    <a id="mobileMenu">
+        <img class="nav-hamburger icon" src="/res/icons/menu.svg"/>
+    </a>
+    <div class="navbar-container">
+        {% if order %}
+        <a href="/manage/welcome">
+            <img class="navbar-propic" src="{{'/res/propic/' + (order.ans('propic') or 'default.png')}}"></img>{{order.ans('fursona_name')}}'s Booking
+        </a>
+        {% if order.isAdmin() %}<a class="" href="/manage/admin">Admin panel</a>{% endif %}
+        {% endif %}
+        <a href="/manage/nosecount">Nose Count</a>
+        <a href="/manage/fursuitcount">Fursuit Count</a>
+        <a href="/manage/sponsorcount" class="rainbow-text">Sponsor Count</a>
+        {% if order %}
+            <a href="/manage/carpooling">Carpooling</a>
+            
+            
+            <a class="align-right" href="/manage/logout">Logout</a>
+        {% endif %}
+        <br clear="both" />
+    </div>
+</nav>