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 */ /* Containers+VMs: single column when viewport is narrow */
@media (max-width: 900px) { @media (max-width: 900px) {
.vv-df-cols { flex-direction: column; } .vv-df-cols { flex-direction: column; align-items: stretch; }
.vv-df-fname { flex: 0 1 auto; }
} }
/* Phone layout — scheduler row/actions fixes + monitor single-column */ /* Phone layout — scheduler row/actions fixes + monitor single-column */
Plugin/usr/local/emhttp/plugins/varaverk/pages/monitor.php
+7 -4
View File
@@ -325,7 +325,7 @@ function vvRenderMemory(mem) {
<div style="font-size:14px;font-weight:600;color:${totalColor};white-space:nowrap;"> <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> ${vvFmtGib(usedKb)} <span style="font-size:11px;color:#555;font-weight:400;">/ ${vvFmtGib(total)}</span>
</div> </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>`; </div>`;
html += vvMemRow('System', mem.system_kb ?? 0, total, VV_MEM_COLORS.system) html += vvMemRow('System', mem.system_kb ?? 0, total, VV_MEM_COLORS.system)
+ vvMemRow('VM', mem.vm_kb ?? 0, total, VV_MEM_COLORS.vm) + vvMemRow('VM', mem.vm_kb ?? 0, total, VV_MEM_COLORS.vm)
@@ -1143,7 +1143,7 @@ function vvRenderDockerFolders(data) {
const total = f.containers.length; const total = f.containers.length;
const running = f.containers.filter(c => c.running).length; const running = f.containers.filter(c => c.running).length;
const bColor = running === total ? '#4caf50' : running === 0 ? '#555' : '#ff9800'; 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,"\\'"); const sid = f.id.replace(/\\/g,'\\\\').replace(/'/g,"\\'");
let iconHtml = ''; let iconHtml = '';
@@ -1180,15 +1180,18 @@ function vvRenderDockerFolders(data) {
return; return;
} }
// 2-column balanced split // 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 half = Math.ceil(allFolders.length / 2);
const left = allFolders.slice(0, half); const left = allFolders.slice(0, half);
const right = allFolders.slice(half); const right = allFolders.slice(half);
html += `<div class="vv-df-cols"> html += `<div class="vv-df-cols">
<div class="vv-df-col">${left.map(renderFolder).join('')}</div> <div class="vv-df-col">${left.map(renderFolder).join('')}</div>
<div class="vv-df-col">${right.map(renderFolder).join('')}</div> <div class="vv-df-col">${right.map(renderFolder).join('')}</div>
</div>`; </div>`;
}
el.innerHTML = html; el.innerHTML = html;
} }