feat: mobile-first redesign (design-taste-frontend)
- responsive nav: compact sticky topbar + bottom tab bar on mobile (SVG icons, safe-area insets), inline top nav on desktop; no more horizontal overflow - previews show full aspect ratio (object-fit contain) on subtle checker bg for transparency (library, studio, queue) - 16px inputs on mobile (no iOS zoom), tactile :active feedback, larger touch targets - keeps Klarbild identity (Space Grotesk/Mono, blue, paper, regmark), no glows/gradients
This commit is contained in:
+83
-19
@@ -8,50 +8,114 @@ import '../styles/tokens.css';
|
||||
interface Props { title?: string }
|
||||
const { title = 'Klarbild' } = Astro.props;
|
||||
const user = Astro.locals.user;
|
||||
const path = Astro.url.pathname;
|
||||
const active = (href: string) => href === '/' ? path === '/' : path.startsWith(href);
|
||||
|
||||
const nav = [
|
||||
{ href: '/', label: 'Studio', icon: 'studio' },
|
||||
{ href: '/bibliothek', label: 'Bibliothek', icon: 'library' },
|
||||
{ href: '/warteschlange', label: 'Warteschlange', icon: 'queue' },
|
||||
...(user?.role === 'admin' ? [{ href: '/admin', label: 'Admin', icon: 'admin' }] : []),
|
||||
];
|
||||
|
||||
const S = 'fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"';
|
||||
const ICONS: Record<string, string> = {
|
||||
studio: `<svg viewBox="0 0 24 24" ${S}><rect x="3.5" y="3.5" width="17" height="17" rx="4"/><path d="M12 8.5v7M8.5 12h7"/></svg>`,
|
||||
library: `<svg viewBox="0 0 24 24" ${S}><rect x="3.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="3.5" y="13.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="13.5" width="7" height="7" rx="1.5"/></svg>`,
|
||||
queue: `<svg viewBox="0 0 24 24" ${S}><path d="M9 6h11M9 12h11M9 18h7"/><circle cx="4.5" cy="6" r="1.15" fill="currentColor" stroke="none"/><circle cx="4.5" cy="12" r="1.15" fill="currentColor" stroke="none"/><circle cx="4.5" cy="18" r="1.15" fill="currentColor" stroke="none"/></svg>`,
|
||||
admin: `<svg viewBox="0 0 24 24" ${S}><path d="M4 8h9M17 8h3M4 16h3M11 16h9"/><circle cx="15" cy="8" r="2.2"/><circle cx="9" cy="16" r="2.2"/></svg>`,
|
||||
};
|
||||
---
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<meta name="theme-color" content="#0e5f6e" />
|
||||
<meta name="theme-color" content="#EAEAE3" />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
{user && (
|
||||
<header class="topbar">
|
||||
<a href="/" class="brand"><span class="regmark"></span>klarbild</a>
|
||||
<nav>
|
||||
<a href="/">Studio</a>
|
||||
<a href="/bibliothek">Bibliothek</a>
|
||||
<a href="/warteschlange">Warteschlange</a>
|
||||
{user.role === 'admin' && <a href="/admin">Admin</a>}
|
||||
<nav class="topnav">
|
||||
{nav.map((n) => (
|
||||
<a href={n.href} class:list={['tnav', { on: active(n.href) }]}>{n.label}</a>
|
||||
))}
|
||||
</nav>
|
||||
<form method="post" action="/api/auth/logout" class="logout">
|
||||
<span>{user.name}</span>
|
||||
<button type="submit">Abmelden</button>
|
||||
<span class="uname">{user.name}</span>
|
||||
<button type="submit" aria-label="Abmelden">Abmelden</button>
|
||||
</form>
|
||||
</header>
|
||||
)}
|
||||
|
||||
<main class="wrap"><slot /></main>
|
||||
|
||||
{user && (
|
||||
<nav class="tabbar" aria-label="Hauptnavigation">
|
||||
{nav.map((n) => (
|
||||
<a href={n.href} class:list={['tab', { on: active(n.href) }]}>
|
||||
<span class="ticon" set:html={ICONS[n.icon]} />
|
||||
<span class="tlabel">{n.label}</span>
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
)}
|
||||
|
||||
<style is:global>
|
||||
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 24px 20px 80px; }
|
||||
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 20px 16px calc(88px + env(safe-area-inset-bottom)); }
|
||||
@media (min-width: 768px) { .wrap { padding: 26px 22px 80px; } }
|
||||
|
||||
/* Top bar */
|
||||
.topbar {
|
||||
display: flex; align-items: center; gap: 20px;
|
||||
padding: 12px 20px; border-bottom: 1px solid var(--line);
|
||||
background: var(--surface); position: sticky; top: 0; z-index: 10;
|
||||
display: flex; align-items: center; gap: 14px;
|
||||
padding: 10px 16px; border-bottom: 1px solid var(--line);
|
||||
background: color-mix(in oklab, var(--card) 88%, transparent);
|
||||
backdrop-filter: saturate(1.2) blur(8px);
|
||||
position: sticky; top: 0; z-index: 20;
|
||||
padding-top: calc(10px + env(safe-area-inset-top));
|
||||
}
|
||||
.brand { display: inline-flex; align-items: center; gap: 8px;
|
||||
font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
|
||||
font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
|
||||
color: var(--ink); text-decoration: none; letter-spacing: -0.02em; }
|
||||
.brand .regmark { transform: translateY(1px); }
|
||||
.topbar nav { display: flex; gap: 16px; margin-left: 8px; }
|
||||
.topbar nav a { color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; }
|
||||
.topbar nav a:hover { color: var(--ink); }
|
||||
.logout { margin-left: auto; display: flex; align-items: center; gap: 10px;
|
||||
color: var(--ink-mute); font-size: 0.9rem; }
|
||||
.topnav { display: none; }
|
||||
@media (min-width: 768px) {
|
||||
.topnav { display: flex; gap: 4px; margin-left: 8px; }
|
||||
.tnav { padding: 7px 12px; border-radius: 999px; color: var(--ink-soft);
|
||||
text-decoration: none; font-size: 0.92rem; transition: background .15s, color .15s; }
|
||||
.tnav:hover { color: var(--ink); background: var(--surface-2, var(--paper)); }
|
||||
.tnav.on { color: var(--accent); background: var(--accent-bg); font-weight: 600; }
|
||||
}
|
||||
.logout { margin-left: auto; display: flex; align-items: center; gap: 10px; }
|
||||
.uname { color: var(--ink-mute, var(--soft)); font-size: 0.9rem; display: none; }
|
||||
@media (min-width: 480px) { .uname { display: inline; } }
|
||||
.logout button { background: none; border: 1px solid var(--line); border-radius: 999px;
|
||||
padding: 5px 12px; color: var(--ink-soft); cursor: pointer; }
|
||||
padding: 7px 14px; color: var(--ink-soft); cursor: pointer; font-family: inherit; font-size: 0.85rem;
|
||||
transition: transform .06s ease, background .15s; min-height: 36px; }
|
||||
.logout button:active { transform: scale(0.96); }
|
||||
|
||||
/* Bottom tab bar (mobile-first) */
|
||||
.tabbar {
|
||||
position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
|
||||
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
|
||||
background: color-mix(in oklab, var(--card) 92%, transparent);
|
||||
backdrop-filter: saturate(1.3) blur(12px);
|
||||
border-top: 1px solid var(--line);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px;
|
||||
padding: 9px 4px 8px; text-decoration: none; color: var(--ink-mute, var(--soft));
|
||||
font-size: 10.5px; letter-spacing: .01em; transition: color .15s, transform .06s; }
|
||||
.tab:active { transform: scale(0.94); }
|
||||
.tab.on { color: var(--accent); }
|
||||
.tab .ticon { width: 22px; height: 22px; display: grid; place-items: center; }
|
||||
.tab .ticon svg { width: 22px; height: 22px; }
|
||||
.tlabel { line-height: 1; }
|
||||
@media (min-width: 768px) { .tabbar { display: none; } }
|
||||
|
||||
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user