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

Varaverk: grid layout tweaks + mobile folder fix

Browse Source 
- Move Parity to row 4 (cols 1-2), Scripts to row 2
- GPU card: span 2
- Memory card: proc strip clips with ellipsis instead of overflowing
- Containers & VMs: use JS window.innerWidth check (<=640) for single-column
  folder layout instead of CSS media query — fixes badge alignment on mobile
  where Unraid's viewport doesn't trigger CSS breakpoints reliably
This commit is contained in:
Gmer4Lfe
2026-05-26 19:19:22 -04:00
parent 072c8b720d
commit 446794e41d
2 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Plugin/usr/local/emhttp/plugins/varaverk/css/varaverk.css
+1 -2
View File
@@ -130,8 +130,7 @@
/* Containers+VMs: single column when viewport is narrow */
@media (max-width: 900px) {
.vv-df-cols { flex-direction: column; }
.vv-df-fname { flex: 0 1 auto; }
.vv-df-cols { flex-direction: column; align-items: stretch; }
}
/* Phone layout — scheduler row/actions fixes + monitor single-column */
Plugin/usr/local/emhttp/plugins/varaverk/pages/monitor.php
+14 -11
View File
@@ -325,7 +325,7 @@ function vvRenderMemory(mem) {
<div style="font-size:14px;font-weight:600;color:${totalColor};white-space:nowrap;">
${vvFmtGib(usedKb)} <span style="font-size:11px;color:#555;font-weight:400;">/ ${vvFmtGib(total)}</span>
</div>
<div style="font-size:10px;color:#666;text-align:right;margin-left:10px;">${procStrip}</div>
<div style="font-size:10px;color:#666;text-align:right;margin-left:10px;overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis;">${procStrip}</div>
</div>`;
html += vvMemRow('System', mem.system_kb ?? 0, total, VV_MEM_COLORS.system)
+ vvMemRow('VM', mem.vm_kb ?? 0, total, VV_MEM_COLORS.vm)
@@ -1143,7 +1143,7 @@ function vvRenderDockerFolders(data) {
const total = f.containers.length;
const running = f.containers.filter(c => c.running).length;
const bColor = running === total ? '#4caf50' : running === 0 ? '#555' : '#ff9800';
const badge = `<span style="font-size:10px;color:${bColor};flex-shrink:0;">${running}/${total}</span>`;
const badge = `<span style="font-size:10px;color:${bColor};flex-shrink:0;margin-left:auto;">${running}/${total}</span>`;
const sid = f.id.replace(/\\/g,'\\\\').replace(/'/g,"\\'");
let iconHtml = '';
@@ -1180,15 +1180,18 @@ function vvRenderDockerFolders(data) {
return;
}
// 2-column balanced split
const half = Math.ceil(allFolders.length / 2);
const left = allFolders.slice(0, half);
const right = allFolders.slice(half);
html += `<div class="vv-df-cols">
<div class="vv-df-col">${left.map(renderFolder).join('')}</div>
<div class="vv-df-col">${right.map(renderFolder).join('')}</div>
</div>`;
// 2-column balanced split — single column on narrow screens
if (window.innerWidth <= 640) {
html += `<div class="vv-df-col" style="min-width:0;">${allFolders.map(renderFolder).join('')}</div>`;
} else {
const half = Math.ceil(allFolders.length / 2);
const left = allFolders.slice(0, half);
const right = allFolders.slice(half);
html += `<div class="vv-df-cols">
<div class="vv-df-col">${left.map(renderFolder).join('')}</div>
<div class="vv-df-col">${right.map(renderFolder).join('')}</div>
</div>`;
}
el.innerHTML = html;
}