Monitor: cap the System card's Varaverk block so the host figures set the card's height, not the sum of both
This commit is contained in:
@@ -235,6 +235,29 @@ body.vv-fullscreen #displaybox { padding-left: 1rem !important; padding-top: .5r
|
|||||||
/* Hide scrollbars on any nested scrollable div inside monitor cards */
|
/* Hide scrollbars on any nested scrollable div inside monitor cards */
|
||||||
#vv-monitor .vv-card div::-webkit-scrollbar { display: none; }
|
#vv-monitor .vv-card div::-webkit-scrollbar { display: none; }
|
||||||
|
|
||||||
|
/* System card: the Varaverk half is bounded, the host half is not.
|
||||||
|
This card is the one with no <h3>, so the header/body split that gives every other card a
|
||||||
|
fixed part and a scrolling part had to be made inside its body. The cut is after Version:
|
||||||
|
hostname, clock, model, array state, uptime, load and version are what the card is for and
|
||||||
|
are left to size themselves, and only the block below them is capped.
|
||||||
|
|
||||||
|
A plain max-height, not flex:1 on the capped half. Under flex the strip is sized by what the
|
||||||
|
block above leaves over, and on a 1080p row (177px against a ~190px host half) that remainder
|
||||||
|
is negative: the strip collapses to nothing and the Varaverk figures vanish with no scrollbar
|
||||||
|
to say so. A fixed cap cannot do that — the block is 64px wherever it lands, and where the card
|
||||||
|
is shorter than the two halves together the body's own scroll (inherited above) reaches the rest.
|
||||||
|
|
||||||
|
64px is the label and about three rows of the Varaverk grid, so Cache, Data and Jobs read
|
||||||
|
without scrolling. It also holds the card to ~254px, which is what stops it dragging its row
|
||||||
|
down below eight columns, where rows are sized to content (see vv_mon_rung_overflows). */
|
||||||
|
#vv-system-body .vv-sys-scroll {
|
||||||
|
max-height: 64px;
|
||||||
|
overflow-y: auto;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
#vv-system-body .vv-sys-scroll::-webkit-scrollbar { display: none; }
|
||||||
|
|
||||||
/* Dynamic row heights capped per screen tier — rows size to content, never exceed the cap.
|
/* Dynamic row heights capped per screen tier — rows size to content, never exceed the cap.
|
||||||
minmax(0, Xpx): track is content-driven but capped; align-items:stretch makes all cards
|
minmax(0, Xpx): track is content-driven but capped; align-items:stretch makes all cards
|
||||||
in a row fill the track, so short cards (Pools, Watchdog) match tall ones (Array).
|
in a row fill the track, so short cards (Pools, Watchdog) match tall ones (Array).
|
||||||
|
|||||||
@@ -1079,9 +1079,10 @@ function vvPollMonitor(live) {
|
|||||||
<span style="color:#444;">Running</span> <span style="color:#888;">${_runningCtrs} ctr${_runningCtrs !== 1 ? 's' : ''}${_runningVMs > 0 ? ` · ${_runningVMs} VM` : ''}</span>
|
<span style="color:#444;">Running</span> <span style="color:#888;">${_runningCtrs} ctr${_runningCtrs !== 1 ? 's' : ''}${_runningVMs > 0 ? ` · ${_runningVMs} VM` : ''}</span>
|
||||||
<span style="color:#444;">Version</span> <span style="color:#3a3a3a;">${ver}</span>
|
<span style="color:#444;">Version</span> <span style="color:#3a3a3a;">${ver}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Varaverk's own figures, ruled off from the host's. Same grid so the labels line up,
|
<!-- Varaverk's own figures, ruled off from the host's. Same grid so the labels line up,
|
||||||
separate block so it reads as a different subject rather than more of the same. -->
|
separate block so it reads as a different subject rather than more of the same. -->
|
||||||
<div style="border-top:1px solid #1e1e1e;margin-top:8px;padding-top:7px;">
|
<div class="vv-sys-scroll" style="border-top:1px solid #1e1e1e;margin-top:8px;padding-top:7px;">
|
||||||
<div style="font-size:9px;color:#333;text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px;">Varaverk</div>
|
<div style="font-size:9px;color:#333;text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px;">Varaverk</div>
|
||||||
<div style="display:grid;grid-template-columns:auto 1fr;gap:3px 8px;font-size:11px;">
|
<div style="display:grid;grid-template-columns:auto 1fr;gap:3px 8px;font-size:11px;">
|
||||||
<span style="color:#444;">Cache</span> <span style="color:${_cacheColor};">${_cacheStr}</span>
|
<span style="color:#444;">Cache</span> <span style="color:${_cacheColor};">${_cacheStr}</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user