docs(mockups): static HTML wireframes for Library scaling concepts
CI / test (push) Has been cancelled
CI / test (push) Has been cancelled
Renders the five design concepts from _bmad-output/planning-artifacts/library-many-frames-design-ideas.md as standalone HTML so Matt can compare them in a browser without spinning up the SPA. Mockups live at /mockups/library/ and reuse the project's design tokens for visual consistency: index.html landing page with concept links current.html the chip-explosion state we're shipping today concept-a.html photo + status badge → DevicePicker sheet (recommended) concept-b.html device-first tab concept-c.html multi-select bulk action bar concept-d.html device chip filter + photo dots Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,146 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Concept 🅓 — Chip filter + dots</title>
|
||||
<link rel="stylesheet" href="shared.css">
|
||||
<style>
|
||||
.filter-row {
|
||||
overflow-x: auto;
|
||||
display: flex; gap: var(--space-2);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
.filter-row::-webkit-scrollbar { display: none; }
|
||||
.filter-row button { white-space: nowrap; }
|
||||
|
||||
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); padding: var(--space-4); }
|
||||
.item__row {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: var(--space-1);
|
||||
}
|
||||
.item__dots {
|
||||
display: flex; gap: 4px;
|
||||
}
|
||||
.dot {
|
||||
width: 18px; height: 18px; border-radius: 50%;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font-size: 9px; font-weight: 700;
|
||||
background: var(--color-surface-2); color: var(--color-text-muted);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
.dot--on { background: var(--color-primary); color: white; border-color: var(--color-primary); }
|
||||
.dot--lock { background: var(--color-lock); color: white; border-color: var(--color-lock); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="frame">
|
||||
<header class="topbar">
|
||||
<h1>Library</h1>
|
||||
<div class="topbar__tabs">
|
||||
<button class="topbar__tab topbar__tab--active">My Photos</button>
|
||||
<button class="topbar__tab">Shared</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="filter-row">
|
||||
<button class="chip chip--on">All</button>
|
||||
<button class="chip">Living Room</button>
|
||||
<button class="chip">Kitchen</button>
|
||||
<button class="chip">Bedroom</button>
|
||||
<button class="chip">Mom's Place</button>
|
||||
<button class="chip">Cabin</button>
|
||||
</div>
|
||||
|
||||
<div class="note">
|
||||
<b>🅓</b> A horizontally-scrolling chip bar at the top filters the grid
|
||||
by frame. Each photo shows little colour dots representing the frames it's
|
||||
on (initials, lock-flag for the locked frame). Tap a photo to manage in
|
||||
a sheet. Works at any N because the dots can scroll-truncate.
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="item">
|
||||
<div class="photo photo--p1"></div>
|
||||
<div class="item__row">
|
||||
<div class="item__dots">
|
||||
<span class="dot dot--on dot--lock" title="Locked on Living Room">LR</span>
|
||||
<span class="dot dot--on">KT</span>
|
||||
<span class="dot dot--on">MP</span>
|
||||
<span class="dot">BR</span>
|
||||
<span class="dot">CA</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="photo photo--p2"></div>
|
||||
<div class="item__row">
|
||||
<div class="item__dots">
|
||||
<span class="dot dot--on dot--lock">LR</span>
|
||||
<span class="dot dot--on">BR</span>
|
||||
<span class="dot">KT</span>
|
||||
<span class="dot">MP</span>
|
||||
<span class="dot">CA</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="photo photo--p3"></div>
|
||||
<div class="item__row">
|
||||
<div class="item__dots">
|
||||
<span class="dot dot--on">LR</span>
|
||||
<span class="dot dot--on">KT</span>
|
||||
<span class="dot dot--on">BR</span>
|
||||
<span class="dot dot--on">MP</span>
|
||||
<span class="dot dot--on">CA</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="photo photo--p4"></div>
|
||||
<div class="item__row">
|
||||
<div class="item__dots">
|
||||
<span class="dot dot--on dot--lock">MP</span>
|
||||
<span class="dot dot--on">KT</span>
|
||||
<span class="dot">LR</span>
|
||||
<span class="dot">BR</span>
|
||||
<span class="dot">CA</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="photo photo--p5"></div>
|
||||
<div class="item__row">
|
||||
<div class="item__dots">
|
||||
<span class="dot dot--on">LR</span>
|
||||
<span class="dot dot--on">CA</span>
|
||||
<span class="dot">KT</span>
|
||||
<span class="dot">BR</span>
|
||||
<span class="dot">MP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="photo photo--p6"></div>
|
||||
<div class="item__row">
|
||||
<div class="item__dots">
|
||||
<span class="dot dot--on">LR</span>
|
||||
<span class="dot dot--on">KT</span>
|
||||
<span class="dot dot--on">BR</span>
|
||||
<span class="dot">MP</span>
|
||||
<span class="dot">CA</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="bottomnav">
|
||||
<div class="bottomnav__item">🏠<span>Home</span></div>
|
||||
<div class="bottomnav__item bottomnav__item--active">📷<span>Library</span></div>
|
||||
<div class="bottomnav__item">⚙️<span>Settings</span></div>
|
||||
</nav>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user