Adminator/geograsim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Drilldown: volle Modalbreite + durchgaengige Ampelfarben (gruen->rot)

Browse Source 
- Modal max-width 640->1120px, Kachel-Grid dichter -> Kennzahlen einzeilig
- Werte UND Balken ampelgefaerbt (pct/pctInv/ratio), Sterne mit Ampelbalken
  je n/5 -> Vergleich auf einen Blick

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Thomas
2026-07-20 15:51:33 +02:00
parent c83da66325
commit 5bf8f0fe03
2 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App/assets/js/sim-metrics.js
+11 -5
View File
@@ -118,14 +118,20 @@
}
function num(v, u){ return '<span class="ivm-v">'+(typeof v==='number'?v.toLocaleString('de-AT'):esc(v))+(u?' <span class="ivm-u">'+u+'</span>':'')+'</span>'; }
function starsBlock(n, small){
n = Math.max(0, Math.min(5, Math.round(n)));
var c = ampPct(n/5*100);
var cls = 'ivm-stars'+(small?' sm':'')+' '+c;
return '<span class="'+cls+'">'+'★'.repeat(n)+'<span class="ivm-star-off">'+'★'.repeat(5-n)+'</span></span>'+bar(n/5*100, c);
}
function renderVal(f, v, src){
switch (f.type) {
case 'stars': return stars(v);
case 'starsSmall': return '<span class="ivm-stars sm">'+'★'.repeat(Math.max(0,Math.min(5,Math.round(v))))+'<span class="ivm-star-off">'+'★'.repeat(5-Math.max(0,Math.min(5,Math.round(v))))+'</span></span>';
case 'pct': return '<span class="ivm-v">'+Math.round(v)+'<span class="ivm-u">%</span></span>'+bar(v, ampPct(v));
case 'pctInv': return '<span class="ivm-v">'+Math.round(v)+'<span class="ivm-u">%</span></span>'+bar(v, ampPct(100-v));
case 'stars': return starsBlock(v, false);
case 'starsSmall': return starsBlock(v, true);
case 'pct': return '<span class="ivm-v '+ampPct(v)+'">'+Math.round(v)+'<span class="ivm-u">%</span></span>'+bar(v, ampPct(v));
case 'pctInv': return '<span class="ivm-v '+ampPct(100-v)+'">'+Math.round(v)+'<span class="ivm-u">%</span></span>'+bar(v, ampPct(100-v));
case 'ratio': { var tot=src[f.t]; if(tot==null) return num(v); var pct=tot>0?(v/tot*100):0;
return '<span class="ivm-v">'+v+'<span class="ivm-u">/ '+tot+'</span></span>'+bar(pct, ampPct(pct)); }
return '<span class="ivm-v '+ampPct(pct)+'">'+v+'<span class="ivm-u">/ '+tot+'</span></span>'+bar(pct, ampPct(pct)); }
case 'money': return money(v);
case 'temp': { var t=Math.round(v*10)/10, c=t<=2?'ivm-g':t<=3?'ivm-y':'ivm-r';
return '<span class="ivm-v '+c+'">'+t.toLocaleString('de-AT')+' °C</span>'; }
App/teacher.html
+3 -3
View File
@@ -2131,14 +2131,14 @@ var IV_CSS = ''
+ '.iv-lgrow{display:flex;align-items:center;gap:8px;margin-top:5px}'
+ '.iv-lgbar{width:56px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--ivr),var(--ivy),var(--ivg))}'
+ '.iv-lgv{display:inline-flex;align-items:flex-end;gap:2px;height:14px}.iv-lgv i{width:4px;border-radius:1px}'
+ '.iv-ov{position:fixed;inset:0;background:rgba(20,26,23,.5);display:flex;align-items:flex-start;justify-content:center;padding:5vh 16px;z-index:9999;overflow:auto}'
+ '.iv-modal{background:#fff;border-radius:14px;max-width:640px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3);padding:18px 20px 20px}'
+ '.iv-ov{position:fixed;inset:0;background:rgba(20,26,23,.5);display:flex;align-items:flex-start;justify-content:center;padding:4vh 20px;z-index:9999;overflow:auto}'
+ '.iv-modal{background:#fff;border-radius:14px;max-width:1120px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3);padding:18px 24px 22px}'
+ '.iv-mh{display:flex;align-items:center;gap:10px;margin-bottom:12px}.iv-mh .em{font-size:1.6rem}.iv-mh h3{margin:0;font-size:1.1rem;font-weight:750;flex:1}.iv-mh .x{cursor:pointer;border:0;background:none;font-size:1.5rem;color:#8a8a8a;line-height:1}'
+ '.iv-sum{display:flex;gap:20px;flex-wrap:wrap;background:var(--ivsoft);border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:.8rem}.iv-sum b{font-size:1.05rem;margin-left:4px}'
+ '.iv-live{background:color-mix(in srgb,var(--ivg) 12%,transparent);border:1px solid color-mix(in srgb,var(--ivg) 30%,var(--ivline));border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:.82rem}'
+ '.iv-run{border:1px solid var(--ivline);border-radius:10px;padding:9px 12px;margin-bottom:8px}'
+ '.iv-run .rh{display:flex;align-items:center;gap:8px;font-size:.84rem;font-weight:700;margin-bottom:6px}.iv-run .rh .sc{font-weight:800}.iv-run .rh .d{margin-left:auto;font-size:.68rem;color:var(--ivmut);font-weight:400}'
+ '.ivm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:7px}'
+ '.ivm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:7px}'
+ '.ivm{background:var(--ivsoft);border-radius:8px;padding:6px 9px;min-width:0}'
+ '.ivm-l{display:block;font-size:.58rem;color:var(--ivmut);text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}'
+ '.ivm-v{font-size:.92rem;font-weight:750}.ivm-u{font-size:.66rem;font-weight:600;color:var(--ivmut)}.ivm-txt{font-size:.8rem;font-weight:700}'