feat(ui): resizable rail and peek pane
- Drag handles between rail/center and center/peek - Rail: 120–360px range, peek: 250–700px range - Widths persisted in localStorage - Handles hidden when panel is collapsed (zen mode) - Transition disabled during drag for smooth resize
This commit is contained in:
+24
-7
@@ -177,17 +177,34 @@ nav { display: flex; gap: 2px; }
|
||||
/* ── MAIN LAYOUT ────────────────────────────────────── */
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns: 192px 1fr 400px;
|
||||
grid-template-columns: var(--rail-w, 192px) 4px 1fr 4px var(--peek-w, 400px);
|
||||
overflow: hidden;
|
||||
transition: grid-template-columns var(--t-base);
|
||||
}
|
||||
|
||||
main.hide-rail { grid-template-columns: 0px 1fr 400px; }
|
||||
main.hide-peek { grid-template-columns: 192px 1fr 0px; }
|
||||
main.hide-rail.hide-peek { grid-template-columns: 0px 1fr 0px; }
|
||||
main.resizing { transition: none; }
|
||||
main:not(.resizing) { transition: grid-template-columns var(--t-base); }
|
||||
|
||||
main.hide-rail #tag-rail { overflow: hidden; border-right: none; }
|
||||
main.hide-peek #detail-pane { overflow: hidden; border-left: none; }
|
||||
main.hide-rail { grid-template-columns: 0px 0px 1fr 4px var(--peek-w, 400px); }
|
||||
main.hide-peek { grid-template-columns: var(--rail-w, 192px) 4px 1fr 0px 0px; }
|
||||
main.hide-rail.hide-peek { grid-template-columns: 0px 0px 1fr 0px 0px; }
|
||||
|
||||
main.hide-rail #tag-rail { overflow: hidden; border-right: none; min-width: 0; }
|
||||
main.hide-peek #detail-pane { overflow: hidden; border-left: none; min-width: 0; }
|
||||
main.hide-rail .resize-handle[data-panel="rail"] { visibility: hidden; }
|
||||
main.hide-peek .resize-handle[data-panel="peek"] { visibility: hidden; }
|
||||
|
||||
.resize-handle {
|
||||
cursor: col-resize;
|
||||
background: transparent;
|
||||
transition: background var(--t-fast);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.resize-handle:hover,
|
||||
.resize-handle.active {
|
||||
background: var(--accent);
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
/* ── TAG RAIL ───────────────────────────────────────── */
|
||||
#tag-rail {
|
||||
|
||||
Reference in New Issue
Block a user