Greg/SportAttendanceSheet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Header menu with show options V3

Browse Source
This commit is contained in:
Greg 2025-05-10 18:10:41 +02:00
parent 28a86f3f8b
commit 5eae0d3b2b
2 changed files with 66 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
static/app.js
View File

@ -193,10 +193,33 @@ window.onload = () => {
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const showAll = document.getElementById('show-all-matches'); const showAll = document.getElementById('show-all-matches');
const showFuture = document.getElementById('show-future-matches'); const showFuture = document.getElementById('show-future-matches');
if (showAll) showAll.onclick = () => { matchViewMode = 'all'; renderTable(); }; const dropdown = document.querySelector('.menu-bar .dropdown');
if (showFuture) showFuture.onclick = () => { matchViewMode = 'future'; renderTable(); }; const dropdownContent = document.getElementById('show-menu-dropdown');
// Clicking the menu resets to default
const showMenuBtn = document.getElementById('show-menu-btn'); const showMenuBtn = document.getElementById('show-menu-btn');
if (showMenuBtn) showMenuBtn.onclick = () => { matchViewMode = 'fromLast'; renderTable(); }; let menuOpen = false;
function openMenu() {
dropdownContent.style.opacity = '1';
dropdownContent.style.visibility = 'visible';
dropdownContent.style.pointerEvents = 'auto';
showMenuBtn.setAttribute('aria-expanded', 'true');
menuOpen = true;
}
function closeMenu() {
dropdownContent.style.opacity = '';
dropdownContent.style.visibility = '';
dropdownContent.style.pointerEvents = '';
showMenuBtn.setAttribute('aria-expanded', 'false');
menuOpen = false;
}
if (dropdown && dropdownContent && showMenuBtn) {
dropdown.addEventListener('mouseenter', openMenu);
dropdown.addEventListener('mouseleave', closeMenu);
showMenuBtn.addEventListener('focus', openMenu);
showMenuBtn.addEventListener('blur', closeMenu);
}
if (showAll) showAll.onclick = () => { matchViewMode = 'all'; renderTable(); closeMenu(); };
if (showFuture) showFuture.onclick = () => { matchViewMode = 'future'; renderTable(); closeMenu(); };
}); });
}; };

40
templates/index.html
View File

@ -51,6 +51,44 @@
color: #DFD0B8; color: #DFD0B8;
} }
.name-col { width: 140px; min-width: 100px; max-width: 180px; } .name-col { width: 140px; min-width: 100px; max-width: 180px; }
.menu-bar .dropdown-content {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.15s;
display: block;
position: absolute;
left: 0;
top: 100%;
background: #393E46;
min-width: 170px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
border-radius: 4px;
z-index: 10;
}
.menu-bar .dropdown:hover .dropdown-content,
.menu-bar .dropdown:focus-within .dropdown-content,
.menu-bar .dropdown .dropdown-content:focus,
.menu-bar .dropdown .dropdown-content:active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.menu-bar .dropdown-content li {
padding: 0.7em 1em;
cursor: pointer;
color: #DFD0B8;
border-bottom: 1px solid #22283133;
background: none;
transition: background 0.15s, color 0.15s;
}
.menu-bar .dropdown-content li:last-child {
border-bottom: none;
}
.menu-bar .dropdown-content li:hover, .menu-bar .dropdown-content li:focus {
background: #948979;
color: #222831;
}
@media (max-width: 900px) { @media (max-width: 900px) {
body { margin: 1em; } body { margin: 1em; }
.name-col { width: 110px; min-width: 80px; max-width: 140px; font-size: 0.95em; } .name-col { width: 110px; min-width: 80px; max-width: 140px; font-size: 0.95em; }
@ -73,7 +111,7 @@
<nav class="menu-bar"> <nav class="menu-bar">
<ul> <ul>
<li class="dropdown"> <li class="dropdown">
<span id="show-menu-btn">Show ▾</span> <span id="show-menu-btn" tabindex="0" aria-haspopup="true" aria-expanded="false">Show ▾</span>
<ul class="dropdown-content" id="show-menu-dropdown"> <ul class="dropdown-content" id="show-menu-dropdown">
<li id="show-all-matches">Show all matches</li> <li id="show-all-matches">Show all matches</li>
<li id="show-future-matches">Show future matches</li> <li id="show-future-matches">Show future matches</li>