ui: streams header — left/right groups span full card width
Server badges + media type anchor to the left; device/res/codec anchor to the right via justify-content:space-between. Right group still disappears at ≤1024px (now a single display:none on .vv-stream-right). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 4.6
parent
3e89997ab5
commit
3e9c7b4921
@@ -215,8 +215,8 @@
|
||||
#vv-parity-card { grid-column: auto !important; }
|
||||
#vv-storage-card { grid-column: auto !important; }
|
||||
#vv-array-card { grid-column: auto !important; }
|
||||
/* Streams header: hide device/resolution/codec groups, keep server badges + media type */
|
||||
.vv-chip-group-device, .vv-chip-group-res, .vv-chip-group-codec { display: none; }
|
||||
/* Streams header: hide right chip group entirely, keep server badges + media type */
|
||||
.vv-stream-right { display: none; }
|
||||
}
|
||||
|
||||
/* Containers+VMs: single column when viewport is narrow */
|
||||
@@ -750,7 +750,12 @@ mark { background: #5d4037; color: #ffcc80; border-radius: 2px; }
|
||||
.vv-doc-hint { font-size: 12px; color: #666; margin-top: 8px; }
|
||||
|
||||
/* Media stream sessions */
|
||||
.vv-stream-servers { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
|
||||
.vv-stream-servers { display: flex; justify-content: space-between; align-items: center;
|
||||
flex-wrap: nowrap; gap: 8px; margin-bottom: 10px; }
|
||||
/* Left side: server badges + media type */
|
||||
.vv-stream-left { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
|
||||
/* Right side: device / resolution / codec chip groups */
|
||||
.vv-stream-right { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; flex-shrink: 0; }
|
||||
.vv-server-badge { background: #333; border: 1px solid #555; color: #aaa;
|
||||
font-size: 10px; padding: 1px 7px; border-radius: 10px; }
|
||||
.vv-server-badge-sm { font-size: 9px; padding: 1px 6px; flex-shrink: 0; }
|
||||
|
||||
@@ -1546,7 +1546,7 @@ function vvRenderStreams() {
|
||||
const mtypeSection = mtypeBar ? `<span class="vv-device-sep">·</span>${mtypeBar}` : '';
|
||||
|
||||
if (sessions.length === 0) {
|
||||
el.innerHTML = `<div class="vv-stream-servers">${badges}</div>`
|
||||
el.innerHTML = `<div class="vv-stream-servers"><div class="vv-stream-left">${badges}</div></div>`
|
||||
+ '<p class="vv-stream-empty">Nothing playing</p>';
|
||||
return;
|
||||
}
|
||||
@@ -1604,7 +1604,10 @@ function vvRenderStreams() {
|
||||
? `<div style="font-size:10px;color:#555;margin-top:4px;">+${sessions.length - 12} more not shown</div>`
|
||||
: '';
|
||||
|
||||
el.innerHTML = `<div class="vv-stream-servers">${badges}${mtypeSection}${deviceSection}${resSection}${codecSection}</div>
|
||||
el.innerHTML = `<div class="vv-stream-servers">
|
||||
<div class="vv-stream-left">${badges}${mtypeSection}</div>
|
||||
<div class="vv-stream-right">${deviceSection}${resSection}${codecSection}</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:10px;">${sCols.map(vvStreamCol).join('')}</div>${overflow}`;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user