mirror of
https://github.com/runbear-io/beardrive.git
synced 2026-08-25 08:08:08 +02:00
Snow LeeandClaude Fable 5
442232bab2
Addresses the baseline design review's failing objective gates and layout defects; no backend or flow changes. Accessibility (was the ceiling — 3 of 4 objective gates failed): - Contrast to AA: lifted --text-faint (#6e6e6e→#8a8a8a) and --text-dim; darkened --accent-dim (#7c5cd6→#6a48e0) so white button labels reach 4.5:1; new --accent-bright (#c9b3ff) for accent text on the tinted active background (tree/project active rows, admin badge, invite/ghost buttons all lifted off sub-AA pairings). Same fix applied to the server-rendered auth pages, which now share the app's token values. - Keyboard + focus: file tree, project, and org-name rows are now focusable (tabindex/role + Enter/Space) with a global :focus-visible ring; restored input focus rings on app and auth pages. - Touch targets: every header + sidebar control is a 44x44 hit area on mobile; secondary file actions (History/Upload/Download) collapse under a "⋯ More" menu so the row still fits with zero horizontal overflow. Layout defects: - #meta no longer wraps to 5 lines / shoves the action buttons — single truncating line; #crumb truncates too. - Long tree filenames ellipsize (label span flex:1 min-width:0) instead of hard-clipping. Consistency: - Fixed the .markdown specificity leak: admin/history/onboarding views no longer inherit markdown type rules (content class toggles per view), so the admin type scale renders as declared. - Recolored the off-system gold Admin badge to the accent family; added a 3-step radius token scale; swapped the mojibake-ish ▣/⛛ markers. - Added a global [hidden] guard so explicit display rules can't override the hidden attribute. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01R7Q9ZKSZRTdvrSJkYLUmYs
57 lines
2.4 KiB
HTML
57 lines
2.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>BearDrive</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📁</text></svg>">
|
|
</head>
|
|
<body>
|
|
<div id="sb-backdrop"></div>
|
|
<aside id="sidebar">
|
|
<header id="vault">
|
|
<span id="vault-name">…</span>
|
|
<div class="vault-actions">
|
|
<button id="adminbar" class="adminbar" hidden></button>
|
|
<button id="settings-btn" class="icon-btn2" hidden title="Manage organization">⚙</button>
|
|
<a id="signout" href="/auth/logout" hidden title="Sign out" aria-label="Sign out">⏻</a>
|
|
</div>
|
|
</header>
|
|
<nav id="projects" aria-label="Projects" hidden></nav>
|
|
<nav id="tree" aria-label="Files"></nav>
|
|
<footer id="orgbar" hidden>
|
|
<span id="org-name" title="Manage organization" role="button" tabindex="0"></span>
|
|
<button id="invite-btn" hidden title="Manage this organization">Manage</button>
|
|
</footer>
|
|
</aside>
|
|
<main id="main">
|
|
<header id="topbar">
|
|
<button id="menu-btn" class="icon-btn" title="Menu" aria-label="Menu">☰</button>
|
|
<span id="crumb"></span>
|
|
<span id="meta"></span>
|
|
<button id="search-btn" class="btn ghost" title="Search (⌘K)">🔍 Search <kbd>⌘K</kbd></button>
|
|
<button id="share-btn" class="btn" hidden>Share</button>
|
|
<button id="history-btn" class="btn" hidden>History</button>
|
|
<button id="upload-btn" class="btn" hidden>Upload</button>
|
|
<input id="upload-input" type="file" hidden>
|
|
<a id="download" class="btn" hidden download>Download</a>
|
|
<button id="more-btn" class="btn icon-only" hidden title="More actions" aria-label="More actions">⋯</button>
|
|
<div id="more-menu" hidden role="menu"></div>
|
|
</header>
|
|
<article id="content" class="markdown">
|
|
<div class="empty">Select a file to read it.</div>
|
|
</article>
|
|
</main>
|
|
<div id="palette-overlay" hidden>
|
|
<div id="palette" role="dialog" aria-label="Search and quick actions">
|
|
<input id="palette-input" type="text" placeholder="Search file names, projects, actions…"
|
|
autocomplete="off" spellcheck="false">
|
|
<ul id="palette-results"></ul>
|
|
<footer id="palette-hint">↑↓ navigate · ⏎ select · esc close</footer>
|
|
</div>
|
|
</div>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|