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

Tag-Ansicht: laufende Spiele als langsam blinkende Bloecke

Browse Source 
Running-Balken (isLive/running) blinken jetzt sanft (_tagblink 1.8s), damit
laufende Spiele klar von fertigen zu unterscheiden sind. Breite = Spieldauer
(waechst mit der Zeit) war bereits so.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Thomas
2026-08-22 14:47:51 +02:00
parent 540b27a2bd
commit 71226581fa
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App/teacher.html
+5 -2
View File
@@ -44,6 +44,7 @@
70% {box-shadow:0 0 0 7px rgba(90,138,94,0)} 70% {box-shadow:0 0 0 7px rgba(90,138,94,0)}
100% {box-shadow:0 0 0 0 rgba(90,138,94,0)} 100% {box-shadow:0 0 0 0 rgba(90,138,94,0)}
} }
@keyframes _tagblink{ 0%,100%{opacity:1} 50%{opacity:.5} }
/* Run-Detail (Pretty-Print für Lehrer-Drilldown) */ /* Run-Detail (Pretty-Print für Lehrer-Drilldown) */
.run-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.4rem} .run-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.4rem}
@@ -2142,8 +2143,10 @@ async function renderLiveSummary() {
var barH = 18; // EINHEITLICHE Höhe — der Erfolg steckt in der Farbe, nicht in der Höhe var barH = 18; // EINHEITLICHE Höhe — der Erfolg steckt in der Farbe, nicht in der Höhe
// Rahmen kodiert den Zustand: fertig = geschlossen · läuft = rechts gepunktet · Abbruch = gestrichelt // Rahmen kodiert den Zustand: fertig = geschlossen · läuft = rechts gepunktet · Abbruch = gestrichelt
var border = aborted ? 'border:1.5px dashed rgba(255,255,255,.7);' var border = aborted ? 'border:1.5px dashed rgba(255,255,255,.7);'
: inProgress ? 'border:1.5px solid rgba(255,255,255,.55);border-right:2px dotted #fff;' : inProgress ? 'border:1.5px solid rgba(255,255,255,.7);border-right:2px dotted #fff;'
: 'border:1.5px solid rgba(20,20,20,.25);'; : 'border:1.5px solid rgba(20,20,20,.25);';
// Laufende Spiele: langsam blinkender Block (Balken wächst ohnehin mit der Zeit).
var anim = inProgress ? 'animation:_tagblink 1.8s ease-in-out infinite;' : '';
var stateWord = inProgress ? 'läuft noch' : aborted ? 'abgebrochen' : 'fertig'; var stateWord = inProgress ? 'läuft noch' : aborted ? 'abgebrochen' : 'fertig';
var tip = (sess.simTitle||sess.simId) + (sess.lessonLabel?' · '+sess.lessonLabel:'') var tip = (sess.simTitle||sess.simId) + (sess.lessonLabel?' · '+sess.lessonLabel:'')
+ ' · ' + _fmtHM(sess.startMs) + '–' + _fmtHM(endMs) + ' · ' + _fmtHM(sess.startMs) + '–' + _fmtHM(endMs)
@@ -2156,7 +2159,7 @@ async function renderLiveSummary() {
html += '<div onclick="openLiveSessionDetail(\''+sessKey+'\')" ' html += '<div onclick="openLiveSessionDetail(\''+sessKey+'\')" '
+ 'title="'+esc(tip)+'" ' + 'title="'+esc(tip)+'" '
+ 'style="position:absolute;left:'+pctL+'%;width:'+pctW+'%;top:5px;height:'+barH+'px;' + 'style="position:absolute;left:'+pctL+'%;width:'+pctW+'%;top:5px;height:'+barH+'px;'
+ 'background:'+col+';color:#fff;border-radius:4px;'+border + 'background:'+col+';color:#fff;border-radius:4px;'+border+anim
+ 'padding:0 .35rem;font-size:.66rem;line-height:'+barH+'px;' + 'padding:0 .35rem;font-size:.66rem;line-height:'+barH+'px;'
+ 'white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;' + 'white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;'
+ 'text-shadow:0 1px 1px rgba(0,0,0,.3);box-shadow:0 1px 2px rgba(0,0,0,.12)">' + 'text-shadow:0 1px 1px rgba(0,0,0,.3);box-shadow:0 1px 2px rgba(0,0,0,.12)">'