jfork/octane-website
1
0
Fork 0
mirror of https://github.com/nfonteyne/octane-website.git synced 2026-09-03 23:24:48 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

update: better phone mode

Browse source
This commit is contained in:
Nathan FONTEYNE 2026-07-08 17:29:42 +02:00
parent 1b792eecfb
commit 061df3b1c6
2 changed files with 63 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

49
public/css/style.css
View file

@ -120,6 +120,12 @@ nav#main-nav {
color: var(--accent); color: var(--accent);
} }
.nav-controls {
display: flex;
align-items: center;
gap: 0.5rem;
}
.nav-toggle { .nav-toggle {
display: none; display: none;
background: transparent; background: transparent;
@ -131,6 +137,15 @@ nav#main-nav {
line-height: 1; line-height: 1;
} }
.nav-menu {
display: flex;
align-items: center;
justify-content: space-between;
flex: 1 1 auto;
gap: 1rem;
flex-wrap: wrap;
}
.nav-links { .nav-links {
display: flex; display: flex;
align-items: center; align-items: center;
@ -1019,20 +1034,30 @@ a.back-link:hover { color: var(--accent); }
.nav-toggle { display: inline-flex; } .nav-toggle { display: inline-flex; }
.nav-links { /* Only the brand + theme toggle + hamburger stay in the top row; the
rest (page links, account/profile/logout) collapses into one dropdown
so the bar doesn't get crowded on a phone-width screen. */
.nav-menu {
order: 3; order: 3;
flex-basis: 100%; flex-basis: 100%;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: stretch;
gap: 0.1rem; gap: 0;
max-height: 0; max-height: 0;
overflow: hidden; overflow: hidden;
transition: max-height 0.2s ease; transition: max-height 0.25s ease;
} }
.nav-links.open { .nav-menu.open {
max-height: 260px; max-height: 420px;
padding: 0.4rem 0 0.8rem; padding-bottom: 0.6rem;
}
.nav-links {
flex-direction: column;
align-items: flex-start;
gap: 0.1rem;
padding-top: 0.4rem;
} }
.nav-links a { .nav-links a {
@ -1042,9 +1067,19 @@ a.back-link:hover { color: var(--accent); }
} }
.nav-user { .nav-user {
flex-direction: column;
align-items: flex-start;
gap: 0;
margin-left: 0; margin-left: 0;
} }
.nav-user > a,
.nav-user > .nav-profile-link {
width: 100%;
padding: 0.5rem 0;
border-bottom: 1px solid var(--border);
}
main { padding: 1.25rem 0.9rem 3rem; } main { padding: 1.25rem 0.9rem 3rem; }
.card-grid { grid-template-columns: 1fr; } .card-grid { grid-template-columns: 1fr; }

14
public/js/nav.js
View file

@ -24,7 +24,7 @@ async function initNav(activePage) {
const nav = document.getElementById('main-nav'); const nav = document.getElementById('main-nav');
nav.innerHTML = ` nav.innerHTML = `
<a class="brand" href="/index.html"><span class="brand-dot">&#9835;</span> Octane</a> <a class="brand" href="/index.html"><span class="brand-dot">&#9835;</span> Octane</a>
<button type="button" class="nav-toggle" id="nav-toggle" aria-label="Menu">&#9776;</button> <div class="nav-menu" id="nav-menu">
<div class="nav-links" id="nav-links"> <div class="nav-links" id="nav-links">
<a href="/index.html" class="${activePage === 'repertoire' ? 'active' : ''}">Répertoire</a> <a href="/index.html" class="${activePage === 'repertoire' ? 'active' : ''}">Répertoire</a>
<a href="/suggestions.html" class="${activePage === 'suggestions' ? 'active' : ''}">Suggestions</a> <a href="/suggestions.html" class="${activePage === 'suggestions' ? 'active' : ''}">Suggestions</a>
@ -33,7 +33,6 @@ async function initNav(activePage) {
<a href="/history.html" class="${activePage === 'history' ? 'active' : ''}">Historique</a> <a href="/history.html" class="${activePage === 'history' ? 'active' : ''}">Historique</a>
</div> </div>
<div class="nav-user"> <div class="nav-user">
<button type="button" class="icon-btn secondary" id="theme-toggle" title="Changer de thème" aria-label="Changer de thème"></button>
${me.authentikAccountUrl ? `<a href="${escapeHtml(me.authentikAccountUrl)}" target="_blank" rel="noopener" title="Gérer mon compte Authentik (mot de passe, etc.)">Mon compte</a>` : ''} ${me.authentikAccountUrl ? `<a href="${escapeHtml(me.authentikAccountUrl)}" target="_blank" rel="noopener" title="Gérer mon compte Authentik (mot de passe, etc.)">Mon compte</a>` : ''}
<a class="nav-profile-link" href="/profile.html"> <a class="nav-profile-link" href="/profile.html">
${avatarHtml(me, 'avatar-sm')} ${avatarHtml(me, 'avatar-sm')}
@ -41,12 +40,17 @@ async function initNav(activePage) {
</a> </a>
<a href="/auth/logout">Se déconnecter</a> <a href="/auth/logout">Se déconnecter</a>
</div> </div>
</div>
<div class="nav-controls">
<button type="button" class="icon-btn secondary" id="theme-toggle" title="Changer de thème" aria-label="Changer de thème"></button>
<button type="button" class="nav-toggle" id="nav-toggle" aria-label="Menu">&#9776;</button>
</div>
`; `;
const toggle = document.getElementById('nav-toggle'); const toggle = document.getElementById('nav-toggle');
const links = document.getElementById('nav-links'); const menu = document.getElementById('nav-menu');
toggle.addEventListener('click', () => links.classList.toggle('open')); toggle.addEventListener('click', () => menu.classList.toggle('open'));
links.querySelectorAll('a').forEach((a) => a.addEventListener('click', () => links.classList.remove('open'))); menu.querySelectorAll('a').forEach((a) => a.addEventListener('click', () => menu.classList.remove('open')));
updateThemeToggleIcon(); updateThemeToggleIcon();
document.getElementById('theme-toggle').addEventListener('click', () => { document.getElementById('theme-toggle').addEventListener('click', () => {