admin/pinkudex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
admin
2026-05-26 22:46:00 +02:00
commit 7e2c2ff89c
256 changed files with 51523 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mockups/active-strip-overlap-mockup.html
+525
View File
@@ -0,0 +1,525 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Pinkudex · Dropdown vs. ACTIVE strip — 10 fixes</title>
<style>
:root {
--bg-0: #0a0710;
--bg-1: #14101e;
--bg-2: #1c1729;
--fg: #e8e6f0;
--fg-dim: #a8a4b8;
--fg-muted: #6e6a80;
--cyan: #22d3ee;
--violet: #a78bfa;
--mint: #34d399;
--coral: #fb7185;
--amber: #fbbf24;
--glass: rgba(255,255,255,0.04);
--glass-strong: rgba(255,255,255,0.08);
--border: rgba(255,255,255,0.08);
--border-strong: rgba(255,255,255,0.18);
}
* { box-sizing: border-box; }
body {
margin: 0; background: var(--bg-0); color: var(--fg);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
line-height: 1.45;
}
.page { max-width: 1500px; margin: 0 auto; padding: 24px; }
.page-header {
margin-bottom: 24px; padding: 16px 20px; border-radius: 16px;
background: linear-gradient(135deg, rgba(34,211,238,0.08), rgba(167,139,250,0.05));
border: 1px solid var(--border);
}
.page-header h1 { margin: 0 0 8px 0; font-size: 22px; font-weight: 600; }
.page-header p { margin: 0; color: var(--fg-dim); font-size: 13px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.variant {
border: 1px solid var(--border); border-radius: 14px; background: var(--bg-1);
overflow: hidden;
}
.variant-head {
padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--glass);
display: flex; align-items: center; gap: 12px;
}
.variant-num {
width: 26px; height: 26px; border-radius: 50%;
background: linear-gradient(135deg, var(--cyan), var(--violet));
display: grid; place-items: center;
font-weight: 700; font-size: 12px; color: #0a0710;
flex-shrink: 0;
}
.variant-title { font-size: 15px; font-weight: 600; }
.variant-desc { color: var(--fg-dim); font-size: 12px; }
.variant-body {
padding: 24px 18px; background: var(--bg-0);
min-height: 320px;
display: flex; align-items: flex-start; justify-content: center;
}
/* shared bits */
.toolbar {
display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 12px; border-radius: 999px;
background: var(--glass); border: 1px solid var(--border-strong);
font-size: 12px; color: var(--fg-dim);
white-space: nowrap; min-width: 100px; justify-content: space-between;
}
.pill .cv { font-size: 9px; opacity: 0.5; }
.pill.all { background: rgba(34,211,238,0.15); border-color: rgba(34,211,238,0.4); color: var(--cyan); min-width: auto; }
.pill.active { background: rgba(34,211,238,0.10); border-color: rgba(34,211,238,0.4); color: var(--cyan); }
.pill.disabled { opacity: 0.4; }
.pill .badge {
background: var(--cyan); color: #0a0710; padding: 0 5px;
border-radius: 999px; font-size: 9px; font-weight: 700;
font-family: ui-monospace, monospace; min-width: 16px;
height: 16px; display: inline-grid; place-items: center;
}
.strip {
display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
padding: 6px 10px; border: 1px dashed var(--border-strong);
background: rgba(34,211,238,0.05);
border-radius: 10px;
font-size: 11px;
margin-top: 8px;
}
.strip .label {
color: var(--fg-muted); font-family: ui-monospace, monospace;
font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
margin-right: 4px;
}
.chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 4px 2px 10px; border-radius: 999px;
background: rgba(34,211,238,0.12); border: 1px solid rgba(34,211,238,0.4);
color: var(--cyan); font-family: ui-monospace, monospace; font-size: 11px;
}
.chip.amber { background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.4); color: var(--amber); }
.chip.violet { background: rgba(167,139,250,0.12); border-color: rgba(167,139,250,0.4); color: var(--violet); }
.chip .x { padding: 0 4px; opacity: 0.6; cursor: pointer; }
.dropdown {
background: var(--bg-0);
border: 1px solid var(--border-strong);
border-radius: 12px;
box-shadow: 0 16px 40px rgba(0,0,0,0.6);
width: 320px; padding: 14px;
color: var(--fg-dim); font-size: 13px;
}
.dropdown .row { padding: 6px 0; display: flex; gap: 8px; }
.dropdown .row.on { color: var(--cyan); }
.dropdown .seg {
display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
margin: 2px 0;
}
.dropdown .seg .opt {
flex: 1; text-align: center; padding: 4px;
font-size: 10px; color: var(--fg-muted); font-family: ui-monospace, monospace;
border-right: 1px solid var(--border);
}
.dropdown .seg .opt:last-child { border: 0; }
.dropdown .seg .opt.on { background: rgba(34,211,238,0.2); color: var(--cyan); }
.arrow {
color: var(--coral); font-size: 18px; align-self: center;
margin: 0 4px;
}
.note { color: var(--fg-muted); font-size: 11px; padding: 6px 0; font-style: italic; }
/* layout helpers per variant */
.stack { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
.canvas {
width: 100%;
border-radius: 8px;
background: linear-gradient(rgba(255,255,255,0.02), rgba(255,255,255,0));
padding: 10px;
border: 1px solid var(--border);
min-height: 280px;
position: relative;
}
.placeholder {
height: 60px; border: 1px dashed var(--border); border-radius: 8px;
margin-top: 8px;
display: grid; place-items: center; color: var(--fg-muted);
font-size: 11px; font-style: italic;
}
.pos-rel { position: relative; }
.pop-down { position: absolute; left: 220px; top: 38px; z-index: 4; }
.pop-up { position: absolute; left: 220px; bottom: 38px; z-index: 4; }
.pop-side { position: absolute; left: calc(100% + 6px); top: 0; z-index: 4; }
.pick {
margin: 32px 0 12px; padding: 14px 18px;
border-radius: 12px; background: rgba(52,211,153,0.07);
border: 1px solid rgba(52,211,153,0.25); color: var(--mint); font-size: 13px;
}
.pick strong { color: var(--mint); }
.pick em { color: var(--fg); font-style: normal; }
</style>
</head>
<body>
<div class="page">
<div class="page-header">
<h1>Active strip vs. dropdown — 10 fixes</h1>
<p>Currently the Filter dropdown opens downward and covers the ACTIVE strip below the toolbar. 10 ways to solve it.</p>
</div>
<div class="grid">
<!-- 1 -->
<div class="variant">
<div class="variant-head">
<div class="variant-num">1</div>
<div>
<div class="variant-title">Move ACTIVE above the toolbar</div>
<div class="variant-desc">Strip pinned to the top. Dropdown opens down into empty space, never collides.</div>
</div>
</div>
<div class="variant-body">
<div class="canvas">
<div class="strip">
<span class="label">ACTIVE</span>
<span class="chip">VIP <span class="x">×</span></span>
<span class="chip amber">Favorite <span class="x">×</span></span>
<span class="chip violet">Owned <span class="x">×</span></span>
</div>
<div style="height: 8px;"></div>
<div class="toolbar pos-rel">
<span class="pill all">ALL</span>
<span class="pill"><span>📁 Browse</span><span class="cv">▾</span></span>
<span class="pill active"><span>🔖 Filter <span class="badge">3</span></span><span class="cv">▾</span></span>
<div class="pop-down">
<div class="dropdown">
<div class="row on">◆ VIP ✓</div>
<div class="row on amber" style="color: var(--amber);">★ Favorite ✓</div>
<div class="row on violet" style="color: var(--violet);">▣ Owned ✓</div>
<div class="row">⊖ Unmarked</div>
</div>
</div>
</div>
<div class="placeholder">Cover grid</div>
</div>
</div>
</div>
<!-- 2 -->
<div class="variant">
<div class="variant-head">
<div class="variant-num">2</div>
<div>
<div class="variant-title">Open dropdown upward</div>
<div class="variant-desc">Drop direction flips when the strip is present. Strip stays put.</div>
</div>
</div>
<div class="variant-body">
<div class="canvas" style="padding-top: 80px;">
<div class="toolbar pos-rel">
<span class="pill all">ALL</span>
<span class="pill"><span>📁 Browse</span><span class="cv">▾</span></span>
<span class="pill active"><span>🔖 Filter <span class="badge">3</span></span><span class="cv">▾</span></span>
<div class="pop-up">
<div class="dropdown">
<div class="row on">◆ VIP ✓</div>
<div class="row" style="color: var(--amber);">★ Favorite ✓</div>
<div class="row" style="color: var(--violet);">▣ Owned ✓</div>
<div class="row">⊖ Unmarked</div>
</div>
</div>
</div>
<div class="strip">
<span class="label">ACTIVE</span>
<span class="chip">VIP <span class="x">×</span></span>
<span class="chip amber">Favorite <span class="x">×</span></span>
<span class="chip violet">Owned <span class="x">×</span></span>
</div>
<div class="placeholder">Cover grid</div>
</div>
</div>
</div>
<!-- 3 -->
<div class="variant">
<div class="variant-head">
<div class="variant-num">3</div>
<div>
<div class="variant-title">Inline expand (push, don't overlay)</div>
<div class="variant-desc">Dropdown is part of the flow. Opening it slides everything below down.</div>
</div>
</div>
<div class="variant-body">
<div class="canvas">
<div class="toolbar">
<span class="pill all">ALL</span>
<span class="pill"><span>📁 Browse</span><span class="cv">▾</span></span>
<span class="pill active"><span>🔖 Filter <span class="badge">3</span></span><span class="cv">▴</span></span>
</div>
<div class="dropdown" style="margin-top: 6px; width: 100%;">
<div class="row on">◆ VIP ✓ &nbsp;&nbsp; <span style="color: var(--amber);">★ Favorite ✓</span> &nbsp;&nbsp; <span style="color: var(--violet);">▣ Owned ✓</span> &nbsp;&nbsp; ⊖ Unmarked</div>
</div>
<div class="strip">
<span class="label">ACTIVE</span>
<span class="chip">VIP <span class="x">×</span></span>
<span class="chip amber">Favorite <span class="x">×</span></span>
<span class="chip violet">Owned <span class="x">×</span></span>
</div>
<div class="placeholder">Cover grid (pushed down)</div>
</div>
</div>
</div>
<!-- 4 -->
<div class="variant">
<div class="variant-head">
<div class="variant-num">4</div>
<div>
<div class="variant-title">Chips inside the dropdown header</div>
<div class="variant-desc">Active state lives inside the popover top — visible while editing, vanishes when closed.</div>
</div>
</div>
<div class="variant-body">
<div class="canvas">
<div class="toolbar pos-rel">
<span class="pill all">ALL</span>
<span class="pill"><span>📁 Browse</span><span class="cv">▾</span></span>
<span class="pill active"><span>🔖 Filter <span class="badge">3</span></span><span class="cv">▾</span></span>
<div class="pop-down">
<div class="dropdown">
<div class="strip" style="margin: 0 0 10px 0;">
<span class="chip">VIP <span class="x">×</span></span>
<span class="chip amber">Favorite <span class="x">×</span></span>
<span class="chip violet">Owned <span class="x">×</span></span>
</div>
<div class="row">◆ VIP ✓</div>
<div class="row" style="color: var(--amber);">★ Favorite ✓</div>
<div class="row" style="color: var(--violet);">▣ Owned ✓</div>
<div class="row">⊖ Unmarked</div>
</div>
</div>
</div>
<div class="placeholder">Cover grid (no strip below)</div>
</div>
</div>
</div>
<!-- 5 -->
<div class="variant">
<div class="variant-head">
<div class="variant-num">5</div>
<div>
<div class="variant-title">Sidebar dropdown — opens to the right</div>
<div class="variant-desc">Popover anchors to the side of the button. Below stays untouched.</div>
</div>
</div>
<div class="variant-body">
<div class="canvas">
<div class="toolbar pos-rel">
<span class="pill all">ALL</span>
<span class="pill"><span>📁 Browse</span><span class="cv">▾</span></span>
<span class="pill active" style="position: relative;">
<span>🔖 Filter <span class="badge">3</span></span><span class="cv">▸</span>
<div class="pop-side">
<div class="dropdown">
<div class="row on">◆ VIP ✓</div>
<div class="row" style="color: var(--amber);">★ Favorite ✓</div>
<div class="row" style="color: var(--violet);">▣ Owned ✓</div>
</div>
</div>
</span>
</div>
<div class="strip">
<span class="label">ACTIVE</span>
<span class="chip">VIP <span class="x">×</span></span>
<span class="chip amber">Favorite <span class="x">×</span></span>
<span class="chip violet">Owned <span class="x">×</span></span>
</div>
<div class="placeholder">Cover grid</div>
</div>
</div>
</div>
<!-- 6 -->
<div class="variant">
<div class="variant-head">
<div class="variant-num">6</div>
<div>
<div class="variant-title">Auto-flip based on space</div>
<div class="variant-desc">If chips are below, open up. If at top of page, open down. Hands-off heuristic.</div>
</div>
</div>
<div class="variant-body">
<div class="canvas" style="padding-top: 80px;">
<div class="toolbar pos-rel">
<span class="pill all">ALL</span>
<span class="pill"><span>📁 Browse</span><span class="cv">▾</span></span>
<span class="pill active"><span>🔖 Filter <span class="badge">3</span></span><span class="cv">▴</span></span>
<div class="pop-up">
<div class="dropdown">
<div class="row on">◆ VIP ✓</div>
<div class="row" style="color: var(--amber);">★ Favorite ✓</div>
</div>
</div>
</div>
<div class="strip">
<span class="label">ACTIVE</span>
<span class="chip">VIP <span class="x">×</span></span>
<span class="chip amber">Favorite <span class="x">×</span></span>
</div>
<div class="note">Same control, but opens up only when the strip is present below. Down otherwise.</div>
</div>
</div>
</div>
<!-- 7 -->
<div class="variant">
<div class="variant-head">
<div class="variant-num">7</div>
<div>
<div class="variant-title">Floating chip dock — bottom of viewport</div>
<div class="variant-desc">Chips never live in the toolbar's vertical column at all.</div>
</div>
</div>
<div class="variant-body">
<div class="canvas" style="padding-bottom: 60px; position: relative;">
<div class="toolbar pos-rel">
<span class="pill all">ALL</span>
<span class="pill"><span>📁 Browse</span><span class="cv">▾</span></span>
<span class="pill active"><span>🔖 Filter <span class="badge">3</span></span><span class="cv">▾</span></span>
<div class="pop-down">
<div class="dropdown">
<div class="row on">◆ VIP ✓</div>
<div class="row" style="color: var(--amber);">★ Favorite ✓</div>
<div class="row" style="color: var(--violet);">▣ Owned ✓</div>
<div class="row">⊖ Unmarked</div>
</div>
</div>
</div>
<div class="placeholder">Cover grid</div>
<div style="position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);">
<div class="strip" style="background: var(--bg-1); border: 1px solid var(--border-strong); box-shadow: 0 8px 24px rgba(0,0,0,0.6);">
<span class="label">ACTIVE</span>
<span class="chip">VIP <span class="x">×</span></span>
<span class="chip amber">Favorite <span class="x">×</span></span>
<span class="chip violet">Owned <span class="x">×</span></span>
</div>
</div>
</div>
</div>
</div>
<!-- 8 -->
<div class="variant">
<div class="variant-head">
<div class="variant-num">8</div>
<div>
<div class="variant-title">Drawer style — full-width slide from top</div>
<div class="variant-desc">Filter expands as a horizontal drawer. Strip stays visible because the drawer occupies its own row above.</div>
</div>
</div>
<div class="variant-body">
<div class="canvas">
<div class="toolbar">
<span class="pill all">ALL</span>
<span class="pill"><span>📁 Browse</span><span class="cv">▾</span></span>
<span class="pill active"><span>🔖 Filter <span class="badge">3</span></span><span class="cv">▴</span></span>
</div>
<div style="margin-top: 8px; padding: 12px; background: var(--bg-0); border: 1px solid var(--border-strong); border-radius: 12px; display: flex; gap: 18px; flex-wrap: wrap;">
<div style="font-family: ui-monospace, monospace; font-size: 10px; color: var(--cyan); text-transform: uppercase;">Marks · ✓ VIP &nbsp; ✓ Favorite &nbsp; ✓ Owned &nbsp; ⊖ Unmarked</div>
<div style="font-family: ui-monospace, monospace; font-size: 10px; color: var(--cyan); text-transform: uppercase;">Watch · 👁 ALL &nbsp; ★ ALL</div>
<div style="font-family: ui-monospace, monospace; font-size: 10px; color: var(--cyan); text-transform: uppercase;">Has · 📂 ALL &nbsp; 🏷 ALL</div>
</div>
<div class="strip">
<span class="label">ACTIVE</span>
<span class="chip">VIP <span class="x">×</span></span>
<span class="chip amber">Favorite <span class="x">×</span></span>
<span class="chip violet">Owned <span class="x">×</span></span>
</div>
<div class="placeholder">Cover grid</div>
</div>
</div>
</div>
<!-- 9 -->
<div class="variant">
<div class="variant-head">
<div class="variant-num">9</div>
<div>
<div class="variant-title">Hide strip while popover open</div>
<div class="variant-desc">Strip fades out when the popover opens (chips visible inside the popover instead). Restores on close.</div>
</div>
</div>
<div class="variant-body">
<div class="canvas">
<div class="toolbar pos-rel">
<span class="pill all">ALL</span>
<span class="pill"><span>📁 Browse</span><span class="cv">▾</span></span>
<span class="pill active"><span>🔖 Filter <span class="badge">3</span></span><span class="cv">▾</span></span>
<div class="pop-down">
<div class="dropdown">
<div class="row on">◆ VIP ✓</div>
<div class="row" style="color: var(--amber);">★ Favorite ✓</div>
<div class="row" style="color: var(--violet);">▣ Owned ✓</div>
<div class="row">⊖ Unmarked</div>
</div>
</div>
</div>
<div class="strip" style="opacity: 0.18;">
<span class="label">ACTIVE</span>
<span class="chip">VIP <span class="x">×</span></span>
<span class="chip amber">Favorite <span class="x">×</span></span>
<span class="chip violet">Owned <span class="x">×</span></span>
</div>
<div class="note">Strip dimmed (or hidden) while menu open; reappears when closed.</div>
</div>
</div>
</div>
<!-- 10 -->
<div class="variant">
<div class="variant-head">
<div class="variant-num">10</div>
<div>
<div class="variant-title">Toolbar &amp; strip share a row</div>
<div class="variant-desc">Strip lives <em>inside</em> the toolbar to the right of the buttons. Dropdown opens below, but there's nothing for it to cover.</div>
</div>
</div>
<div class="variant-body">
<div class="canvas">
<div class="toolbar pos-rel" style="flex-wrap: nowrap; overflow-x: auto;">
<span class="pill all">ALL</span>
<span class="pill"><span>📁 Browse</span><span class="cv">▾</span></span>
<span class="pill active"><span>🔖 Filter <span class="badge">3</span></span><span class="cv">▾</span></span>
<span class="pill disabled"><span>🏷 Mark As</span><span class="cv">▾</span></span>
<span style="margin: 0 4px; color: var(--fg-muted);">|</span>
<span class="chip">VIP <span class="x">×</span></span>
<span class="chip amber">Favorite <span class="x">×</span></span>
<span class="chip violet">Owned <span class="x">×</span></span>
<div class="pop-down">
<div class="dropdown">
<div class="row on">◆ VIP ✓</div>
<div class="row" style="color: var(--amber);">★ Favorite ✓</div>
<div class="row" style="color: var(--violet);">▣ Owned ✓</div>
<div class="row">⊖ Unmarked</div>
</div>
</div>
</div>
<div class="placeholder" style="margin-top: 60px;">Cover grid</div>
</div>
</div>
</div>
</div>
<div class="pick">
<strong>My pick: #1 (move ACTIVE above the toolbar).</strong> Simplest fix, no popover gymnastics, chips stay readable while editing because the strip is now permanently above the dropdown anchor. <em>Runner-up: #2 (open upward)</em> — keeps the page chrome unchanged but flips the menu direction when chips are present.
</div>
</div>
</body>
</html>