44r0n7/vidflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Layout: move ticker above scrubber, shrink scrubber, sidebar closes on channel select

Browse Source 
- #pb-wrap height 16px → 10px (less imposing hit target)
- #np-strip bottom raised to calc(var(--bot-h) + 10px) — sits directly above scrubber
- loadChSB() always closes sidebar (was desktop-only skip; now consistent with addPlayCh)

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
Aaron
2026-05-23 19:13:54 -04:00
parent c0219932a0
commit d7c25573be
1 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vidflow.html
+4 -3
View File
@@ -121,7 +121,7 @@ html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-famil
/* ── PROGRESS BAR ── */ /* ── PROGRESS BAR ── */
/* Progress bar */ /* Progress bar */
#pb-wrap{position:absolute;bottom:var(--bot-h);left:0;right:0;height:16px;display:flex;align-items:flex-end;z-index:5;background:rgba(255,255,255,.07);cursor:pointer} #pb-wrap{position:absolute;bottom:var(--bot-h);left:0;right:0;height:10px;display:flex;align-items:flex-end;z-index:5;background:rgba(255,255,255,.07);cursor:pointer}
#pb-wrap:hover #pb-thumb{opacity:1} #pb-wrap:hover #pb-thumb{opacity:1}
#pb-wrap:hover #pb{height:6px} #pb-wrap:hover #pb{height:6px}
#pb{height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));width:0%;transition:height .15s,width .5s linear;pointer-events:none;position:relative} #pb{height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));width:0%;transition:height .15s,width .5s linear;pointer-events:none;position:relative}
@@ -129,7 +129,7 @@ html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-famil
/* ── BOTTOM BAR & NOW-PLAYING TICKER ── */ /* ── BOTTOM BAR & NOW-PLAYING TICKER ── */
/* Bottom bar */ /* Bottom bar */
#np-strip{position:absolute;bottom:calc(var(--bot-h) + 3px);left:0;right:0;height:26px;z-index:5;display:flex;align-items:center;padding:0 14px;gap:8px;pointer-events:none} #np-strip{position:absolute;bottom:calc(var(--bot-h) + 10px);left:0;right:0;height:26px;z-index:5;display:flex;align-items:center;padding:0 14px;gap:8px;pointer-events:none}
#bb{position:absolute;bottom:0;left:0;right:0;height:var(--bot-h);z-index:5;display:flex;align-items:center;justify-content:center;padding:0 14px} #bb{position:absolute;bottom:0;left:0;right:0;height:var(--bot-h);z-index:5;display:flex;align-items:center;justify-content:center;padding:0 14px}
.np-lbl{font-family:var(--font-d);font-size:12px;letter-spacing:2.5px;color:var(--accent);flex-shrink:0;display:flex;align-items:center;gap:5px;white-space:nowrap} .np-lbl{font-family:var(--font-d);font-size:12px;letter-spacing:2.5px;color:var(--accent);flex-shrink:0;display:flex;align-items:center;gap:5px;white-space:nowrap}
.np-lbl-dot{width:5px;height:5px;background:var(--accent);border-radius:50%;animation:dot-p 1s ease-in-out infinite} .np-lbl-dot{width:5px;height:5px;background:var(--accent);border-radius:50%;animation:dot-p 1s ease-in-out infinite}
@@ -766,7 +766,8 @@ function renderChTab(){
} }
// Loads a channel; closes sidebar on mobile (< 600px) // Loads a channel; closes sidebar on mobile (< 600px)
function loadChSB(i){ loadCh(i); if(window.innerWidth<600) closeSB(); } // Loads a channel and always closes the sidebar (mobile + desktop)
function loadChSB(i){ loadCh(i); closeSB(); }
// Renders the search UI. doSearch is a closure so results survive re-tab; ADD button keeps results visible by not calling renderTab // Renders the search UI. doSearch is a closure so results survive re-tab; ADD button keeps results visible by not calling renderTab
function renderSearchTab(){ function renderSearchTab(){