mobile: hamburger drawer (right-side slide-out)
≤480px gets a hamburger button in the topbar and a fixed slide-out panel from the right edge (width min(82vw, 320px)). The topbar keeps only brand + tone toggle + hamburger visible; nav and the header-right widgets (theme, lang, user menu, version meta) move into the drawer. Markup change: nav and .header-right are now wrapped in .mobile-drawer, which is display:contents on desktop (no layout effect) and a fixed translateX panel on mobile. The user-menu dropdown chip hides on mobile and its links surface flat inside the drawer. JS: ~50 lines of vanilla. Tap hamburger / backdrop / ESC / swipe- right-on-drawer all close. Clicking a nav link inside the drawer closes it after the navigation kicks off so the panel doesn't linger on the next page. CSS: per-file @media block at the bottom of layout.css per the agreed-upon organisation.
This commit is contained in:
parent
4c1793e4e9
commit
2b3ea33884
2 changed files with 292 additions and 45 deletions
|
|
@ -51,7 +51,46 @@ a:hover { text-decoration: underline; }
|
|||
.app-header nav a.active { color: var(--text); }
|
||||
.app-header .meta { color: var(--muted); font-size: 11px; }
|
||||
|
||||
/* On desktop the mobile-drawer wrapper has no layout effect — its
|
||||
* children (nav, header-right) flow as if it weren't there. On mobile
|
||||
* the @media block at the bottom converts it to a fixed slide-out. */
|
||||
.mobile-drawer { display: contents; }
|
||||
|
||||
.app-header .header-right { display: flex; align-items: center; gap: 14px; }
|
||||
|
||||
/* Hamburger button — only visible at ≤480px (rule in the mobile block).
|
||||
* Three thin bars; uses the same border/muted treatment as the other
|
||||
* header buttons so the visual rhythm matches. */
|
||||
.drawer-toggle {
|
||||
display: none;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
cursor: pointer;
|
||||
padding: 6px 8px;
|
||||
width: 36px;
|
||||
height: 32px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
}
|
||||
.drawer-toggle:hover { border-color: var(--accent); }
|
||||
.drawer-toggle__bar {
|
||||
display: block;
|
||||
height: 2px;
|
||||
background: var(--muted);
|
||||
width: 100%;
|
||||
}
|
||||
.drawer-toggle:hover .drawer-toggle__bar { background: var(--accent); }
|
||||
|
||||
.drawer-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
z-index: 90;
|
||||
opacity: 0;
|
||||
transition: opacity 120ms ease-out;
|
||||
}
|
||||
body.drawer-open .drawer-backdrop { opacity: 1; }
|
||||
.theme-toggle {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
|
|
@ -183,3 +222,140 @@ a:hover { text-decoration: underline; }
|
|||
::-webkit-scrollbar-track { background: var(--bg); }
|
||||
::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 0; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
|
||||
|
||||
|
||||
/* --- Mobile (≤480px) -------------------------------------------------- */
|
||||
|
||||
@media (max-width: 480px) {
|
||||
/* Tighten the topbar so the brand, tone toggle and hamburger all fit
|
||||
on a 360px phone. Drop the letter-spacing because at 11px tracking
|
||||
eats horizontal space the brand cannot spare. */
|
||||
.app-header {
|
||||
padding: 8px 12px;
|
||||
gap: 8px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.app-header .brand {
|
||||
font-size: 12px;
|
||||
/* Shrink the leading glyph but don't remove it — keeps brand identity. */
|
||||
}
|
||||
.beta-chip { display: none; }
|
||||
|
||||
/* Show the hamburger; the rest of the header widgets collapse into
|
||||
the drawer (the .mobile-drawer block below). */
|
||||
.drawer-toggle { display: flex; margin-left: auto; }
|
||||
|
||||
/* Keep the tone toggle visible but trim it: just N / I letters so it
|
||||
fits next to brand + hamburger. */
|
||||
.tone-toggle--header {
|
||||
font-size: 9.5px;
|
||||
}
|
||||
.tone-toggle--header button {
|
||||
padding: 4px 7px;
|
||||
}
|
||||
|
||||
/* The drawer wrapper: full-height slide-out from the right. The
|
||||
content inside (nav + header-right) becomes a vertical stack
|
||||
with comfortable touch targets. */
|
||||
.mobile-drawer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: min(82vw, 320px);
|
||||
background: var(--surface);
|
||||
border-left: 1px solid var(--border);
|
||||
box-shadow: -2px 0 12px rgba(0, 0, 0, 0.18);
|
||||
transform: translateX(100%);
|
||||
transition: transform 180ms ease-out;
|
||||
z-index: 100;
|
||||
overflow-y: auto;
|
||||
padding: 56px 18px 24px;
|
||||
text-transform: none;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
body.drawer-open .mobile-drawer { transform: translateX(0); }
|
||||
|
||||
/* Vertical nav inside the drawer — links become big-tap rows, no
|
||||
leading margin like the desktop horizontal nav. */
|
||||
.mobile-drawer nav { display: flex; flex-direction: column; }
|
||||
.mobile-drawer nav a {
|
||||
margin-left: 0;
|
||||
padding: 12px 4px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.mobile-drawer nav a.active {
|
||||
color: var(--accent);
|
||||
border-left: 2px solid var(--accent);
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
/* header-right widgets vertically stacked inside the drawer. */
|
||||
.mobile-drawer .header-right {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 14px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.mobile-drawer .theme-toggle,
|
||||
.mobile-drawer .lang-toggle {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
.mobile-drawer .lang-toggle { display: inline-flex; }
|
||||
.mobile-drawer .lang-toggle button,
|
||||
.mobile-drawer .theme-toggle { padding: 10px; font-size: 11.5px; }
|
||||
|
||||
/* The user-menu's dropdown becomes redundant inside the drawer —
|
||||
surface its links flat as a list, and hide the chip button. */
|
||||
.mobile-drawer .user-menu { width: 100%; }
|
||||
.mobile-drawer .user-chip { display: none; }
|
||||
.mobile-drawer .user-menu__panel {
|
||||
display: block !important; /* override the hidden attribute */
|
||||
position: static;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.mobile-drawer .user-menu__panel[hidden] { display: block !important; }
|
||||
.mobile-drawer .user-menu__item {
|
||||
display: block;
|
||||
padding: 10px 4px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.mobile-drawer .meta {
|
||||
margin-top: auto;
|
||||
padding-top: 18px;
|
||||
text-align: center;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* The drawer container itself sits above the topbar in z-stacking;
|
||||
we still want the close button accessible while it's open, so push
|
||||
a close target into the top-right corner of the drawer via a
|
||||
repurposed pseudo-element. (Simpler than adding new markup.) */
|
||||
.mobile-drawer::before {
|
||||
content: "✕";
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 18px;
|
||||
font-size: 18px;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
pointer-events: none; /* tap handled by the backdrop / hamburger */
|
||||
}
|
||||
|
||||
/* Body-level layout: tighten main padding too — saves another 16px
|
||||
of horizontal real estate which the indicator table and chat
|
||||
bubbles all benefit from. */
|
||||
.app-main { padding: 10px 8px; gap: 10px; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -207,57 +207,78 @@
|
|||
<header class="app-header">
|
||||
<a href="/" class="brand" aria-label="Dashboard">{{ BRAND_NAME }}</a>
|
||||
{% if BETA_MODE %}<span class="beta-chip" title="Beta — feedback welcome at hello@read.markets">BETA</span>{% endif %}
|
||||
<nav>
|
||||
<a href="/" class="{% if request.url.path == '/' %}active{% endif %}">Dashboard</a>
|
||||
<a href="/news" class="{% if request.url.path == '/news' %}active{% endif %}">News</a>
|
||||
<a href="/log" class="{% if request.url.path.startswith('/log') %}active{% endif %}">Log</a>
|
||||
</nav>
|
||||
<div class="header-right">
|
||||
<div id="tone-toggle" class="tone-toggle" data-tone="INTERMEDIATE"
|
||||
role="group" aria-label="Explanation level">
|
||||
<button type="button" data-value="NOVICE"
|
||||
onclick="cassandraSetTone('NOVICE')">Novice</button>
|
||||
<button type="button" data-value="INTERMEDIATE"
|
||||
onclick="cassandraSetTone('INTERMEDIATE')">Intermediate</button>
|
||||
</div>
|
||||
<button class="theme-toggle" type="button" aria-label="Toggle theme"
|
||||
onclick="cassandraToggleTheme()">
|
||||
<span class="theme-toggle__label"></span>
|
||||
</button>
|
||||
{% set cu = request.state.current_user if request.state and request.state.current_user is defined else None %}
|
||||
{% if cu and cu.user %}
|
||||
<div id="lang-toggle" class="lang-toggle" data-lang="{{ cu.user.lang or 'en' }}"
|
||||
role="group" aria-label="AI output language"
|
||||
title="Language the AI uses for the log, digest and portfolio commentary">
|
||||
<button type="button" data-value="en"
|
||||
onclick="cassandraSetLang('en')">EN</button>
|
||||
<button type="button" data-value="it"
|
||||
onclick="cassandraSetLang('it')">IT</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if cu and (cu.user or cu.is_admin) %}
|
||||
<div class="user-menu">
|
||||
<button type="button" id="user-menu-toggle" class="user-chip"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
{% if cu.user %}{{ cu.user.email }}{% else %}admin{% endif %}
|
||||
<span class="user-menu__caret">▾</span>
|
||||
|
||||
{# Tone toggle is the one widget we keep visible in the mobile
|
||||
header even when the drawer is closed — it directly affects the
|
||||
readability of the content right next to it. #}
|
||||
<div id="tone-toggle" class="tone-toggle tone-toggle--header" data-tone="INTERMEDIATE"
|
||||
role="group" aria-label="Explanation level">
|
||||
<button type="button" data-value="NOVICE"
|
||||
onclick="cassandraSetTone('NOVICE')">Novice</button>
|
||||
<button type="button" data-value="INTERMEDIATE"
|
||||
onclick="cassandraSetTone('INTERMEDIATE')">Intermediate</button>
|
||||
</div>
|
||||
|
||||
{# Mobile hamburger — shown only at ≤480px via CSS. #}
|
||||
<button type="button" id="drawer-toggle" class="drawer-toggle"
|
||||
aria-label="Open menu" aria-controls="mobile-drawer" aria-expanded="false">
|
||||
<span class="drawer-toggle__bar"></span>
|
||||
<span class="drawer-toggle__bar"></span>
|
||||
<span class="drawer-toggle__bar"></span>
|
||||
</button>
|
||||
|
||||
{# Wrapper: display:contents on desktop (zero layout effect), fixed
|
||||
slide-out panel on mobile. Holds nav + header-right widgets. #}
|
||||
<div id="mobile-drawer" class="mobile-drawer">
|
||||
<nav>
|
||||
<a href="/" class="{% if request.url.path == '/' %}active{% endif %}">Dashboard</a>
|
||||
<a href="/news" class="{% if request.url.path == '/news' %}active{% endif %}">News</a>
|
||||
<a href="/log" class="{% if request.url.path.startswith('/log') %}active{% endif %}">Log</a>
|
||||
</nav>
|
||||
<div class="header-right">
|
||||
<button class="theme-toggle" type="button" aria-label="Toggle theme"
|
||||
onclick="cassandraToggleTheme()">
|
||||
<span class="theme-toggle__label"></span>
|
||||
</button>
|
||||
<div id="user-menu" class="user-menu__panel" role="menu" hidden>
|
||||
{% if cu.user %}
|
||||
<a href="/settings" role="menuitem" class="user-menu__item">Settings</a>
|
||||
{% endif %}
|
||||
<a href="/pricing" role="menuitem" class="user-menu__item">Pricing</a>
|
||||
<a href="/terms" role="menuitem" class="user-menu__item">Terms</a>
|
||||
<a href="/privacy" role="menuitem" class="user-menu__item">Privacy</a>
|
||||
<a href="/disclaimer" role="menuitem" class="user-menu__item">Disclaimer</a>
|
||||
<a href="/logout" role="menuitem" class="user-menu__item">Logout</a>
|
||||
{% set cu = request.state.current_user if request.state and request.state.current_user is defined else None %}
|
||||
{% if cu and cu.user %}
|
||||
<div id="lang-toggle" class="lang-toggle" data-lang="{{ cu.user.lang or 'en' }}"
|
||||
role="group" aria-label="AI output language"
|
||||
title="Language the AI uses for the log, digest and portfolio commentary">
|
||||
<button type="button" data-value="en"
|
||||
onclick="cassandraSetLang('en')">EN</button>
|
||||
<button type="button" data-value="it"
|
||||
onclick="cassandraSetLang('it')">IT</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if cu and (cu.user or cu.is_admin) %}
|
||||
<div class="user-menu">
|
||||
<button type="button" id="user-menu-toggle" class="user-chip"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
{% if cu.user %}{{ cu.user.email }}{% else %}admin{% endif %}
|
||||
<span class="user-menu__caret">▾</span>
|
||||
</button>
|
||||
<div id="user-menu" class="user-menu__panel" role="menu" hidden>
|
||||
{% if cu.user %}
|
||||
<a href="/settings" role="menuitem" class="user-menu__item">Settings</a>
|
||||
{% endif %}
|
||||
<a href="/pricing" role="menuitem" class="user-menu__item">Pricing</a>
|
||||
<a href="/terms" role="menuitem" class="user-menu__item">Terms</a>
|
||||
<a href="/privacy" role="menuitem" class="user-menu__item">Privacy</a>
|
||||
<a href="/disclaimer" role="menuitem" class="user-menu__item">Disclaimer</a>
|
||||
<a href="/logout" role="menuitem" class="user-menu__item">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<span class="meta">v0.1 · UTC</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<span class="meta">v0.1 · UTC</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{# Drawer backdrop. Hidden by default; CSS shows it when
|
||||
body.drawer-open is set. Click closes the drawer. #}
|
||||
<div id="drawer-backdrop" class="drawer-backdrop" hidden></div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var btn = document.getElementById('user-menu-toggle');
|
||||
|
|
@ -278,6 +299,56 @@
|
|||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Mobile drawer (hamburger → right-side slide-out panel). The CSS
|
||||
// gates visibility of #drawer-toggle to ≤480px, so on desktop this
|
||||
// wiring is harmless — the click handler is attached but nobody
|
||||
// can fire it.
|
||||
(function () {
|
||||
var btn = document.getElementById('drawer-toggle');
|
||||
var drawer = document.getElementById('mobile-drawer');
|
||||
var backdrop = document.getElementById('drawer-backdrop');
|
||||
if (!btn || !drawer || !backdrop) return;
|
||||
function open() {
|
||||
document.body.classList.add('drawer-open');
|
||||
backdrop.hidden = false;
|
||||
btn.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
function close() {
|
||||
document.body.classList.remove('drawer-open');
|
||||
backdrop.hidden = true;
|
||||
btn.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
btn.addEventListener('click', function () {
|
||||
if (document.body.classList.contains('drawer-open')) close(); else open();
|
||||
});
|
||||
backdrop.addEventListener('click', close);
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape' && document.body.classList.contains('drawer-open')) close();
|
||||
});
|
||||
// Swipe-right inside the drawer closes — small native feel.
|
||||
// Tracks pointer down then up; if the user moves >40px right
|
||||
// and stays within 60° of horizontal, treat as a close gesture.
|
||||
var startX = null, startY = null;
|
||||
drawer.addEventListener('pointerdown', function (e) {
|
||||
if (!document.body.classList.contains('drawer-open')) return;
|
||||
startX = e.clientX; startY = e.clientY;
|
||||
});
|
||||
drawer.addEventListener('pointerup', function (e) {
|
||||
if (startX === null) return;
|
||||
var dx = e.clientX - startX;
|
||||
var dy = Math.abs(e.clientY - startY);
|
||||
startX = startY = null;
|
||||
if (dx > 40 && dy < dx * 0.6) close();
|
||||
});
|
||||
// If a nav link inside the drawer is clicked, close after the
|
||||
// navigation kicks off so the panel doesn't linger on the next page.
|
||||
drawer.addEventListener('click', function (e) {
|
||||
if (e.target.tagName === 'A') close();
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<main class="app-main">
|
||||
{% block main %}{% endblock %}
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue