admin
352 lines
13 KiB
HTML
352 lines
13 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Pinkudex — Selection Bar Layout Options</title>
|
|
<style>
|
|
:root {
|
|
--bg-0: #0e0a14;
|
|
--bg-1: #18121f;
|
|
--fg: #ece6f5;
|
|
--fg-dim: #b9b1c6;
|
|
--fg-muted: #7d7388;
|
|
--cyan: #4dd9e6;
|
|
--violet: #b87cf6;
|
|
--coral: #ff7a8a;
|
|
--mint: #79e6b2;
|
|
--amber: #fbbf24;
|
|
--glass-border: #2a2434;
|
|
--glass-border-strong: #3d3548;
|
|
--glass: rgba(40, 32, 56, 0.5);
|
|
--glass-strong: rgba(56, 46, 76, 0.7);
|
|
}
|
|
* { box-sizing: border-box; }
|
|
html, body {
|
|
margin: 0;
|
|
background: radial-gradient(1200px 600px at 70% -10%, rgba(184,124,246,0.08), transparent),
|
|
radial-gradient(800px 500px at 10% 110%, rgba(77,217,230,0.06), transparent),
|
|
var(--bg-0);
|
|
color: var(--fg);
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
|
|
font-size: 14px;
|
|
}
|
|
.page { max-width: 1200px; margin: 0 auto; padding: 32px 24px 96px; }
|
|
h1 { font-size: 26px; margin: 0 0 8px; font-weight: 600; }
|
|
.lede { color: var(--fg-dim); margin: 0 0 32px; max-width: 760px; line-height: 1.5; }
|
|
h2 {
|
|
margin: 32px 0 4px;
|
|
font-size: 13px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--cyan);
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
}
|
|
.desc { color: var(--fg-dim); font-size: 13px; margin: 0 0 12px; max-width: 820px; line-height: 1.5; }
|
|
|
|
.stage {
|
|
background: var(--bg-1);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: 16px;
|
|
padding: 28px 20px;
|
|
margin-bottom: 24px;
|
|
position: relative;
|
|
min-height: 120px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* selection bar — mimics SelectionBar.tsx */
|
|
.sb {
|
|
border: 1px solid var(--glass-border-strong);
|
|
background: color-mix(in oklch, var(--bg-0) 85%, transparent);
|
|
backdrop-filter: blur(20px);
|
|
border-radius: 16px;
|
|
padding: 10px 16px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
box-shadow: 0 12px 30px rgba(0,0,0,0.4);
|
|
}
|
|
.sel-count {
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
}
|
|
.sel-count .n { color: var(--cyan); font-weight: 600; }
|
|
.sel-count .l { color: var(--fg-dim); }
|
|
.sep { width: 1px; height: 20px; background: var(--glass-border); }
|
|
|
|
.btn {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 6px 12px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--glass-border);
|
|
background: var(--glass);
|
|
color: var(--fg-dim);
|
|
font-size: 12px;
|
|
cursor: default;
|
|
}
|
|
.btn svg { width: 13px; height: 13px; }
|
|
.btn-mint { background: rgba(121,230,178,0.15); border-color: rgba(121,230,178,0.4); color: var(--mint); }
|
|
.btn-coral { background: rgba(255,122,138,0.15); border-color: rgba(255,122,138,0.4); color: var(--coral); }
|
|
.btn-cyan { background: rgba(77,217,230,0.15); border-color: rgba(77,217,230,0.4); color: var(--cyan); }
|
|
.btn-amber { background: rgba(251,191,36,0.15); border-color: rgba(251,191,36,0.4); color: var(--amber); }
|
|
.btn-icon-only { padding: 6px 8px; }
|
|
.btn .caret { font-size: 9px; opacity: 0.7; }
|
|
.btn-clear { color: var(--fg-muted); border-color: transparent; background: transparent; }
|
|
|
|
.pros-cons {
|
|
display: flex; gap: 12px; margin-top: 12px; font-size: 12px;
|
|
}
|
|
.pros, .cons {
|
|
flex: 1; padding: 8px 10px; border-radius: 8px;
|
|
border: 1px solid var(--glass-border);
|
|
}
|
|
.pros { border-color: rgba(121,230,178,0.2); }
|
|
.cons { border-color: rgba(255,122,138,0.2); }
|
|
.pros strong { color: var(--mint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
|
|
.cons strong { color: var(--coral); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
|
|
.pros ul, .cons ul { margin: 4px 0 0; padding-left: 16px; color: var(--fg-dim); }
|
|
.pros li, .cons li { margin: 2px 0; }
|
|
|
|
/* Mock dropdown */
|
|
.menu {
|
|
position: absolute;
|
|
top: calc(100% + 6px);
|
|
right: 0;
|
|
background: var(--bg-0);
|
|
border: 1px solid var(--glass-border-strong);
|
|
border-radius: 10px;
|
|
padding: 4px;
|
|
width: 180px;
|
|
box-shadow: 0 16px 40px rgba(0,0,0,0.7);
|
|
z-index: 5;
|
|
}
|
|
.menu .row {
|
|
display: flex; align-items: center; gap: 8px;
|
|
padding: 7px 10px;
|
|
border-radius: 6px;
|
|
color: var(--fg-dim);
|
|
font-size: 13px;
|
|
}
|
|
.menu .row svg { width: 14px; height: 14px; }
|
|
.menu .row:hover { background: var(--glass); color: var(--fg); }
|
|
.menu .row.mint { color: var(--mint); }
|
|
.menu .row.cyan { color: var(--cyan); }
|
|
.menu .row.amber { color: var(--amber); }
|
|
.menu .row.muted { color: var(--fg-muted); }
|
|
.menu .divider { height: 1px; background: var(--glass-border); margin: 4px 0; }
|
|
|
|
.has-menu { position: relative; }
|
|
|
|
.stage-label {
|
|
position: absolute; top: 8px; left: 12px;
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--fg-muted);
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
}
|
|
code {
|
|
background: var(--glass); padding: 1px 5px; border-radius: 4px;
|
|
font-size: 12px; color: var(--cyan);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<h1>Selection Bar — Bulk VIP / Favorite Options</h1>
|
|
<p class="lede">
|
|
Five layouts for adding bulk VIP / Favorite to the selection bar without it becoming a 7-button mess.
|
|
All assume 2 covers selected. Dropdowns are shown "open" inline so you can see their content.
|
|
</p>
|
|
|
|
<!-- Current -->
|
|
<h2>Current — for reference</h2>
|
|
<p class="desc">5 buttons. No way to bulk Mark / Favorite.</p>
|
|
<div class="stage">
|
|
<div class="stage-label">Current</div>
|
|
<div class="sb">
|
|
<span class="sel-count"><span class="n">2</span><span class="l"> selected</span></span>
|
|
<div class="sep"></div>
|
|
<span class="btn">📋 All (26)</span>
|
|
<span class="btn btn-mint">👁 Watched</span>
|
|
<span class="btn">🚫 Unwatched</span>
|
|
<span class="btn btn-coral">🗑 Delete</span>
|
|
<span class="btn btn-clear">✕ Clear</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Option A -->
|
|
<h2>Option A — Just add two more buttons</h2>
|
|
<p class="desc">Straightforward: VIP and Favorite chips alongside Watched/Unwatched. Quick and obvious; bar gets crowded.</p>
|
|
<div class="stage">
|
|
<div class="stage-label">A · 7 buttons</div>
|
|
<div class="sb">
|
|
<span class="sel-count"><span class="n">2</span><span class="l"> selected</span></span>
|
|
<div class="sep"></div>
|
|
<span class="btn">📋 All (26)</span>
|
|
<span class="btn btn-mint">👁 Watched</span>
|
|
<span class="btn">🚫 Unwatched</span>
|
|
<span class="btn btn-cyan">💎 VIP</span>
|
|
<span class="btn btn-amber">★ Favorite</span>
|
|
<span class="btn btn-coral">🗑 Delete</span>
|
|
<span class="btn btn-clear">✕ Clear</span>
|
|
</div>
|
|
<div class="pros-cons">
|
|
<div class="pros"><strong>Pros</strong><ul>
|
|
<li>One click for everything</li>
|
|
<li>All actions visible</li>
|
|
</ul></div>
|
|
<div class="cons"><strong>Cons</strong><ul>
|
|
<li>7 buttons — visually busy</li>
|
|
<li>Doesn't scale to more bulk actions</li>
|
|
</ul></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Option B -->
|
|
<h2>Option B — Collapse all toggles into one <code>Set ▾</code> menu <span style="color:var(--fg-muted)">(my recommendation)</span></h2>
|
|
<p class="desc">Single "Set ▾" dropdown houses Watched/Unwatched and VIP/Favorite/Unmark. Bar drops to 4 buttons.</p>
|
|
<div class="stage" style="padding-top: 60px; padding-bottom: 60px;">
|
|
<div class="stage-label">B · 4 buttons + 1 menu</div>
|
|
<div class="sb">
|
|
<span class="sel-count"><span class="n">2</span><span class="l"> selected</span></span>
|
|
<div class="sep"></div>
|
|
<span class="btn">📋 All (26)</span>
|
|
<span class="has-menu">
|
|
<span class="btn">⚙ Set <span class="caret">▾</span></span>
|
|
<div class="menu">
|
|
<div class="row mint">👁 Watched</div>
|
|
<div class="row">🚫 Unwatched</div>
|
|
<div class="divider"></div>
|
|
<div class="row cyan">💎 VIP</div>
|
|
<div class="row amber">★ Favorite</div>
|
|
<div class="row muted">⊘ Unmark</div>
|
|
</div>
|
|
</span>
|
|
<span class="btn btn-coral">🗑 Delete</span>
|
|
<span class="btn btn-clear">✕ Clear</span>
|
|
</div>
|
|
<div class="pros-cons">
|
|
<div class="pros"><strong>Pros</strong><ul>
|
|
<li>Cleanest bar</li>
|
|
<li>Scales to more actions (e.g. "Add to Collection…", "Tag…")</li>
|
|
<li>Consistent with FilterBar's dropdown pattern</li>
|
|
</ul></div>
|
|
<div class="cons"><strong>Cons</strong><ul>
|
|
<li>2 clicks for Watched (was 1)</li>
|
|
<li>Bulk Watched is your most-frequent action — extra click hurts</li>
|
|
</ul></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Option C -->
|
|
<h2>Option C — Keep Watched/Unwatched, add only <code>Mark ▾</code></h2>
|
|
<p class="desc">Preserves one-click Watched. Adds a single "Mark ▾" dropdown for VIP / Favorite / Unmark. 6 buttons.</p>
|
|
<div class="stage" style="padding-top: 60px; padding-bottom: 60px;">
|
|
<div class="stage-label">C · 5 buttons + 1 menu</div>
|
|
<div class="sb">
|
|
<span class="sel-count"><span class="n">2</span><span class="l"> selected</span></span>
|
|
<div class="sep"></div>
|
|
<span class="btn">📋 All (26)</span>
|
|
<span class="btn btn-mint">👁 Watched</span>
|
|
<span class="btn">🚫 Unwatched</span>
|
|
<span class="has-menu">
|
|
<span class="btn">🔖 Mark <span class="caret">▾</span></span>
|
|
<div class="menu">
|
|
<div class="row cyan">💎 VIP</div>
|
|
<div class="row amber">★ Favorite</div>
|
|
<div class="row muted">⊘ Unmark</div>
|
|
</div>
|
|
</span>
|
|
<span class="btn btn-coral">🗑 Delete</span>
|
|
<span class="btn btn-clear">✕ Clear</span>
|
|
</div>
|
|
<div class="pros-cons">
|
|
<div class="pros"><strong>Pros</strong><ul>
|
|
<li>One-click Watched preserved (your most-used)</li>
|
|
<li>Mark grouped logically (VIP/Favorite are one axis)</li>
|
|
</ul></div>
|
|
<div class="cons"><strong>Cons</strong><ul>
|
|
<li>Still 6 visible buttons — middle ground</li>
|
|
<li>Two click-patterns: direct vs dropdown</li>
|
|
</ul></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Option D -->
|
|
<h2>Option D — Single <code>Actions ▾</code> kebab</h2>
|
|
<p class="desc">Hide everything except Delete behind one "Actions" menu. Most minimal but loses quick-access to Watched.</p>
|
|
<div class="stage" style="padding-top: 60px; padding-bottom: 100px;">
|
|
<div class="stage-label">D · 3 buttons + 1 menu</div>
|
|
<div class="sb">
|
|
<span class="sel-count"><span class="n">2</span><span class="l"> selected</span></span>
|
|
<div class="sep"></div>
|
|
<span class="btn">📋 All (26)</span>
|
|
<span class="has-menu">
|
|
<span class="btn">⋯ Actions <span class="caret">▾</span></span>
|
|
<div class="menu" style="width: 200px;">
|
|
<div class="row mint">👁 Mark Watched</div>
|
|
<div class="row">🚫 Mark Unwatched</div>
|
|
<div class="divider"></div>
|
|
<div class="row cyan">💎 Set VIP</div>
|
|
<div class="row amber">★ Set Favorite</div>
|
|
<div class="row muted">⊘ Unmark</div>
|
|
</div>
|
|
</span>
|
|
<span class="btn btn-coral">🗑 Delete</span>
|
|
<span class="btn btn-clear">✕ Clear</span>
|
|
</div>
|
|
<div class="pros-cons">
|
|
<div class="pros"><strong>Pros</strong><ul>
|
|
<li>Smallest bar — 4 visible items</li>
|
|
<li>Easy to add more actions (Add to Collection, Tag, Export, …)</li>
|
|
</ul></div>
|
|
<div class="cons"><strong>Cons</strong><ul>
|
|
<li>2 clicks for any state-change action</li>
|
|
<li>Discoverability hit — new users won't know the menu's there</li>
|
|
</ul></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Option E -->
|
|
<h2>Option E — Icon-only Watched buttons + <code>Mark ▾</code></h2>
|
|
<p class="desc">Trim Watched/Unwatched to bare icons (with tooltip), add Mark ▾. Saves horizontal space without hiding actions.</p>
|
|
<div class="stage" style="padding-top: 60px; padding-bottom: 60px;">
|
|
<div class="stage-label">E · 6 buttons (compact) + 1 menu</div>
|
|
<div class="sb">
|
|
<span class="sel-count"><span class="n">2</span><span class="l"> selected</span></span>
|
|
<div class="sep"></div>
|
|
<span class="btn">📋 All (26)</span>
|
|
<span class="btn btn-mint btn-icon-only" title="Mark watched">👁</span>
|
|
<span class="btn btn-icon-only" title="Mark unwatched">🚫</span>
|
|
<span class="has-menu">
|
|
<span class="btn">🔖 Mark <span class="caret">▾</span></span>
|
|
<div class="menu">
|
|
<div class="row cyan">💎 VIP</div>
|
|
<div class="row amber">★ Favorite</div>
|
|
<div class="row muted">⊘ Unmark</div>
|
|
</div>
|
|
</span>
|
|
<span class="btn btn-coral">🗑 Delete</span>
|
|
<span class="btn btn-clear">✕ Clear</span>
|
|
</div>
|
|
<div class="pros-cons">
|
|
<div class="pros"><strong>Pros</strong><ul>
|
|
<li>One-click Watched preserved, takes less space</li>
|
|
<li>Mark dropdown adds bulk VIP/Favorite cleanly</li>
|
|
</ul></div>
|
|
<div class="cons"><strong>Cons</strong><ul>
|
|
<li>Icons less discoverable than labels</li>
|
|
<li>Mixed style (label + icon-only on the same row)</li>
|
|
</ul></div>
|
|
</div>
|
|
</div>
|
|
|
|
<p style="margin-top: 24px; font-size: 11px; color: var(--fg-muted); font-family: ui-monospace;">
|
|
Pick based on what you do most: B if you mark covers more than you watch, C/E if you watch more than mark.
|
|
</p>
|
|
</div>
|
|
</body>
|
|
</html>
|