From eb0039179b4c5a50a4137dc4cd93d7fa87d9f97a Mon Sep 17 00:00:00 2001 From: grabowski Date: Wed, 14 Oct 2026 10:14:31 +0700 Subject: [PATCH] Steam and cooling: visible heat-recovery loop, tables inside their cards - The feedwater loop between HP-1 and T-1 was drawn with class "hr", which had no stroke rule, so it was invisible. It now has its amber stroke, flow arrows both ways and a "feed loop" label. - Number cells were white-space:nowrap, so the operating-case table ran up to 33 px past its card, the design basis table up to 312 px, and a phone page was 842 px wide. Numbers may wrap now (only the coverage percentages stay on one line), the side column and grid tracks may shrink, and units moved into the case table's row labels. Only the diagram scrolls sideways on a phone. Checked headless (scripts/pw_sc_check.py, now also HTML card/table overflow, document width and unstyled pipes): before, 'p hr' unstyled and card overflow at 1600, 1258 and 390 px in every case; after, no unstyled pipes, no card or table overflow and document width equal to the viewport at all three sizes and four cases, no SVG overlap or overflow, 32 boxes open their detail, no errors. --- docs/steam-cooling.html | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/docs/steam-cooling.html b/docs/steam-cooling.html index a918ec7..ff93324 100644 --- a/docs/steam-cooling.html +++ b/docs/steam-cooling.html @@ -32,20 +32,23 @@ main{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:12px;padding:12p .card p,.card li{font-size:13px}.card ul{padding-left:18px} .wrap{overflow-x:auto} svg{display:block;width:100%;min-width:1100px;height:auto} -.side{display:flex;flex-direction:column;gap:12px} +.side{display:flex;flex-direction:column;gap:12px;min-width:0} table{border-collapse:collapse;width:100%;font-size:12.5px} td,th{border-bottom:1px solid var(--stroke);padding:3px 6px;text-align:left;vertical-align:top} th{color:var(--mute);font-weight:600} -td.n{font-family:var(--mono);white-space:nowrap} +td.n{font-family:var(--mono)} +td.pc{white-space:nowrap} +.card td,.card p,.card li{overflow-wrap:break-word} +#caseCard table{font-size:12px} td.low{color:var(--warn);font-weight:600} -.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:12px;padding:0 16px 16px} +.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:12px;padding:0 16px 16px} .b{display:inline-block;font-size:10px;border-radius:3px;padding:0 4px;margin-left:4px;border:1px solid var(--stroke);color:var(--mute)} .b.v{border-color:var(--ok);color:var(--ok)}.b.e{border-color:var(--warn);color:var(--warn)} .legend{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;font-size:12.5px} .legend i{display:inline-block;width:26px;border-top:3px solid;margin-right:6px;vertical-align:middle} .legend i.d{border-top-style:dashed} .note{color:var(--mute);font-size:12px;margin-top:6px} -@media (max-width:1100px){main{grid-template-columns:1fr}.grid{grid-template-columns:1fr}} +@media (max-width:1100px){main{grid-template-columns:minmax(0,1fr)}.grid{grid-template-columns:minmax(0,1fr)}} /* diagram */ .bx{fill:var(--box);stroke:var(--stroke);stroke-width:1} .hd{fill:var(--head)} @@ -60,8 +63,8 @@ td.low{color:var(--warn);font-weight:600} .p{fill:none;stroke-width:2.2;stroke-linejoin:round} .p.st{stroke:var(--st);stroke-width:3}.p.cd{stroke:var(--cd);stroke-dasharray:7 4}.p.fw{stroke:var(--fw)}.p.rw{stroke:var(--rw)} .p.cws{stroke:var(--cws);stroke-width:2.6}.p.cwr{stroke:var(--cwr);stroke-dasharray:7 4}.p.pri{stroke:var(--pri)}.p.prw{stroke:var(--prw);stroke-dasharray:7 4} -.p.bd{stroke:var(--bd);stroke-dasharray:3 3}.p.opt{stroke-dasharray:3 5;opacity:.8} -.ar{stroke:none}.ar.st{fill:var(--st)}.ar.cd{fill:var(--cd)}.ar.cws{fill:var(--cws)}.ar.cwr{fill:var(--cwr)}.ar.pri{fill:var(--pri)}.ar.prw{fill:var(--prw)} +.p.hr{stroke:var(--hr);stroke-width:2.6}.p.bd{stroke:var(--bd);stroke-dasharray:3 3}.p.opt{stroke-dasharray:3 5;opacity:.8} +.ar{stroke:none}.ar.st{fill:var(--st)}.ar.cd{fill:var(--cd)}.ar.cws{fill:var(--cws)}.ar.cwr{fill:var(--cwr)}.ar.pri{fill:var(--pri)}.ar.prw{fill:var(--prw)}.ar.hr{fill:var(--hr)} .vv{fill:var(--card);stroke:var(--fg);stroke-width:1.2} .trap{fill:var(--card);stroke:var(--cd);stroke-width:1.4} .tt{fill:var(--fg);font:bold 7px var(--mono);text-anchor:middle} @@ -223,7 +226,7 @@ pipe('M740,112 H760 M760,82 V156 M760,82 H780 M760,156 H780','fw');pipe('M760,15 pipe('M970,82 H1000 V156 M970,156 H1000 M1000,152 H1030','st');pipe('M970,230 H1000 V156','st opt'); pipe('M970,104 H985 M970,178 H985 M985,104 V250 H1030','bd');pipe('M1200,262 H1240','bd');lbl(1246,266,'to drain, cooled'); pipe('M1325,104 V152','st opt'); -pipe('M450,150 V196 M520,196 V150','hr'); +pipe('M450,150 V196 M520,196 V150','hr');arrow(450,176,'s','hr');arrow(520,170,'n','hr');lbl(458,177,'feed loop'); pipe('M1200,152 H1740 V350 H620','st');arrow(1500,152,'e','st');arrow(1740,250,'s','st');arrow(1150,350,'w','st'); lbl(1430,172,'steam main 10 bar · insulated · falls with the flow'); @@ -316,8 +319,8 @@ function setCase(k){const c=CASES[k]; const stLo=bc${c.t}

${c.s}.

- - + +
DemandInstalledCovers
Steam${f0(st[0])} to ${f0(st[1])} kg/h${f0(bc)} kg/h${pc(bc,st[1])} to ${pc(bc,st[0])} %
Cooling, peak${f0(cool)} kW${f0(cc)} kW${pc(cc,cool)} %
Steam, kg/h${f0(st[0])} to ${f0(st[1])}${f0(bc)}${pc(bc,st[1])} to ${pc(bc,st[0])} %
Cooling peak, kW${f0(cool)}${f0(cc)}${pc(cc,cool)} %
Circulating water${f0(fl[0])} to ${f0(fl[1])} l/min
Chiller input at peak~${f0(cool*0.32)} to ${f0(cool*0.5)} kW electrical
Electric boilers instead~${f0(st[0]*0.68/0.98)} to ${f0(st[1]*0.68/0.98)} kW electrical