hotel-manage-stack/plant
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Trim flow chevrons to fit one row, add water-passing indicator

Browse source 
Regen flow indicators now show 2 chevrons instead of 3 so the diagram row
fits without wrapping on narrow cards. Added a pulsing vertical chevron
stack under each tank's % reading, shown when that tank is actually
in-service and passing water (not regenerating).
This commit is contained in:
jtricerolph 2026-07-30 09:46:13 +00:00
parent 0ab98d3a3c
commit ff145957fc
2 changed files with 30 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/index.css
View file

@ -249,7 +249,6 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
.softener-flow-left svg { margin-right: -6px; }
.softener-flow-active svg { color: var(--app-primary); animation: softener-flow-pulse 1.1s ease-in-out infinite; }
.softener-flow-active svg:nth-child(2) { animation-delay: .15s; }
.softener-flow-active svg:nth-child(3) { animation-delay: .3s; }
@keyframes softener-flow-pulse {
0%, 100% { opacity: .25; }
50% { opacity: 1; }
@ -304,14 +303,29 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
.softener-fill-warning { background: var(--sev-warning); }
.softener-fill-critical { background: var(--sev-critical); }
.softener-fill-unknown { background: var(--card-border); height: 0 !important; }
.softener-tank-pct {
.softener-tank-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.softener-tank-pct {
font-size: 12px;
font-weight: 700;
color: var(--text-dark);
text-shadow: 0 1px 2px rgba(255,255,255,.6);
}
.softener-tank-water {
display: flex;
flex-direction: column;
align-items: center;
color: var(--app-primary);
filter: drop-shadow(0 1px 1px rgba(255,255,255,.6));
}
.softener-tank-water svg { margin-top: -4px; animation: softener-flow-pulse 1.1s ease-in-out infinite; }
.softener-tank-water svg:nth-child(2) { animation-delay: .2s; }
.softener-tank-label { font-size: 11px; font-weight: 600; color: var(--text-dark); margin-top: 6px; }
.softener-tank-value { font-size: 10px; color: var(--text-mid); }