FailedProxy/Varaverk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: hide device/resolution/codec chip groups at ≤1024px

Browse Source 
Wraps each group (separator + chips) in a display:contents span so it
flows naturally at full width and collapses cleanly at the 1024px breakpoint,
leaving server badges and media type visible at intermediate sizes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Gmer4Lfe
2026-05-31 22:06:21 -04:00
co-authored by Claude Sonnet 4.6
parent 52cc6b4721
commit 279e6be282
2 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Plugin/unraid/css/varaverk.css
+4
View File
@@ -215,6 +215,8 @@
#vv-parity-card { grid-column: auto !important; } #vv-parity-card { grid-column: auto !important; }
#vv-storage-card { grid-column: auto !important; } #vv-storage-card { grid-column: auto !important; }
#vv-array-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; }
} }
/* Containers+VMs: single column when viewport is narrow */ /* Containers+VMs: single column when viewport is narrow */
@@ -769,6 +771,8 @@ mark { background: #5d4037; color: #ffcc80; border-radius: 2px; }
.vv-chip-codec { color: #b38820; background: #201500; border-color: #483300; } .vv-chip-codec { color: #b38820; background: #201500; border-color: #483300; }
/* legacy fallback */ /* legacy fallback */
.vv-device-chip { color: #666; background: #181818; border-color: #252525; } .vv-device-chip { color: #666; background: #181818; border-color: #252525; }
/* chip group wrappers — inline so they flow with the badge row */
.vv-chip-group-device, .vv-chip-group-res, .vv-chip-group-codec { display: contents; }
.vv-stream-empty { color: #555; font-style: italic; font-size: 12px; margin: 4px 0; } .vv-stream-empty { color: #555; font-style: italic; font-size: 12px; margin: 4px 0; }
.vv-stream-empty span { font-size: 11px; color: #444; } .vv-stream-empty span { font-size: 11px; color: #444; }
.vv-stream-row { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #282828; } .vv-stream-row { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #282828; }
Plugin/unraid/pages/monitor.php
+3 -3
View File
@@ -1474,7 +1474,7 @@ function vvRenderStreams() {
.map(([t, n], i) => vvChip('vv-chip-device', `${n} ${t}`, i)) .map(([t, n], i) => vvChip('vv-chip-device', `${n} ${t}`, i))
.join(''); .join('');
const deviceSection = deviceBar const deviceSection = deviceBar
? `<span class="vv-device-sep">·</span>${deviceBar}` ? `<span class="vv-chip-group-device"><span class="vv-device-sep">·</span>${deviceBar}</span>`
: ''; : '';
// Resolution summary — e.g. "2 4K 3 1080p 1 720p" // Resolution summary — e.g. "2 4K 3 1080p 1 720p"
@@ -1494,7 +1494,7 @@ function vvRenderStreams() {
const resBar = resOrder.filter(r => resCounts[r]) const resBar = resOrder.filter(r => resCounts[r])
.map((r, i) => vvChip('vv-chip-res', `${resCounts[r]} ${r}`, i)) .map((r, i) => vvChip('vv-chip-res', `${resCounts[r]} ${r}`, i))
.join(''); .join('');
const resSection = resBar ? `<span class="vv-device-sep">·</span>${resBar}` : ''; const resSection = resBar ? `<span class="vv-chip-group-res"><span class="vv-device-sep">·</span>${resBar}</span>` : '';
// Codec summary — e.g. "4 H.264 2 HEVC" // Codec summary — e.g. "4 H.264 2 HEVC"
function vvCodecLabel(c) { function vvCodecLabel(c) {
@@ -1511,7 +1511,7 @@ function vvRenderStreams() {
.sort((a, b) => b[1] - a[1]) .sort((a, b) => b[1] - a[1])
.map(([c, n], i) => vvChip('vv-chip-codec', `${n} ${c}`, i)) .map(([c, n], i) => vvChip('vv-chip-codec', `${n} ${c}`, i))
.join(''); .join('');
const codecSection = codecBar ? `<span class="vv-device-sep">·</span>${codecBar}` : ''; const codecSection = codecBar ? `<span class="vv-chip-group-codec"><span class="vv-device-sep">·</span>${codecBar}</span>` : '';
// Media type summary — Movies, Shows, Music, Live // Media type summary — Movies, Shows, Music, Live
function vvMediaType(t) { function vvMediaType(t) {