Navbar updates

This commit is contained in:
Andrea 2024-01-13 23:24:22 +01:00
parent c9a7e5da8a
commit 2662ece8ab
8 changed files with 169 additions and 42 deletions

1
res/icons/close.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 188 B

1
res/icons/menu.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 125 B

23
res/scripts/base.js Normal file
View File

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

View File

@ -2,11 +2,21 @@
@import url('propic.css'); @import url('propic.css');
@import url('admin.css'); @import url('admin.css');
@import url('room.css'); @import url('room.css');
@import url('navbar.css');
a[role=button] {
margin: 0.25em 0;
}
summary:has(span.status) { summary:has(span.status) {
background-color: #ffaf0377; background-color: #ffaf0377;
} }
/* Dark theme */
@media only screen and (prefers-color-scheme: dark) {
.icon {filter: invert(1);}
}
/* Mobile only */ /* Mobile only */
@media only screen and ((max-width: 500px) or (hover: none)) { @media only screen and ((max-width: 500px) or (hover: none)) {
.propic-border.blurred { .propic-border.blurred {

104
res/styles/navbar.css Normal file
View File

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

View File

@ -99,6 +99,9 @@ svg.propic-border-filter {
.control-login-as:hover::before{ .control-login-as:hover::before{
background-color: #2f4e5cc5; background-color: #2f4e5cc5;
position: absolute; position: absolute;
display: inline-flex;
justify-content: center;
align-items: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
content: 'Enter as'; content: 'Enter as';

View File

@ -16,14 +16,12 @@
main {min-height: 30em;} main {min-height: 30em;}
mark {background:#0f0;}
h1 img {max-height:1.4em;} h1 img {max-height:1.4em;}
.notice {padding:0.8em;border-radius:3px;background:#e53935;color:#eee;} .notice {padding:0.8em;border-radius:3px;background:#e53935;color:#eee;}
.notice a {color:#eee;text-decoration:underline;} .notice a {color:#eee;text-decoration:underline;}
.container {max-width:40em;padding:1em;box-sizing:border-box;} .container {max-width:40em;padding:1em;box-sizing:border-box;}
td > a[role=button] {padding: 0.3em 0.7em;} td > a[role=button] {padding: 0.3em 0.7em;}
td {padding-left: 0.2em;padding-right: 0.2em;} td {padding-left: 0.2em;padding-right: 0.2em;}
a[role=button] {margin: 0.25em 0;}
td > input[type=file] {margin:0;padding:0;} td > input[type=file] {margin:0;padding:0;}
section {margin-bottom:3em;} section {margin-bottom:3em;}
@media (min-width: 500px) {body .grid {grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));}} @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[role=button] {background:var(--primary-focus);color:var(--contrast);}
summary img, td img {height:1.2em;width:2em;box-sizing: border-box;} 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 } body .grid.people { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important }
.status {float:right;} .status {float:right;}
@ -55,22 +46,6 @@
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-template-rows: 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> </style>
<!-- Matomo --> <!-- Matomo -->
@ -91,25 +66,12 @@
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})(); })();
</script> </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> <noscript><p><img src="https://y.foxo.me/matomo.php?idsite=2&amp;rec=1" style="border:0;" alt="" /></p></noscript>
<!-- End Matomo Code --> <!-- End Matomo Code -->
</head> </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 %} {% block main %}{% endblock %}
<script type="text/javascript"> <script type="text/javascript">

23
tpl/blocks/navbar.html Normal file
View File

@ -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>