diff --git a/assets/css/webdesign.css b/assets/css/webdesign.css index cc004fd9..244d73c1 100644 --- a/assets/css/webdesign.css +++ b/assets/css/webdesign.css @@ -578,7 +578,15 @@ a.wd-karte:hover, .wd-karte--klickbar:hover { angemerkt: „Dieses Paket anfragen“, „Live ansehen“ und „Was genau enthalten ist“ waren durchgehend 4px zu flach. 44px ist die Untergrenze, ab der ein Ziel mit dem Daumen zuverlässig getroffen wird. */ -.wd-btn--klein { min-height: 44px; padding: .6rem 1.05rem; font-size: .9rem; } +/* 44.5 statt 44 (26.08.2026). Der Handy-Test misst die TATSAECHLICHE + Hoehe und vergleicht mit "< 44" -- ein Knopf, der mit Rahmen und + Zeilenhoehe auf 43,6 Punkte kommt, faellt durch, wird aber als "44" + ausgegeben, weil die Anzeige rundet. Man sucht dann einen Fehler in + einer Zahl, die richtig aussieht. + + Der halbe Punkt kostet optisch nichts und nimmt den Rundungsfall aus + dem Spiel. */ +.wd-btn--klein { min-height: 44.5px; padding: .6rem 1.05rem; font-size: .9rem; } .wd-btn-reihe { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; } diff --git a/assets/js/wd-core.js b/assets/js/wd-core.js index 8338d20b..a8f602f8 100644 --- a/assets/js/wd-core.js +++ b/assets/js/wd-core.js @@ -863,7 +863,7 @@ Stand haben. Die Nummer wird zusammen mit CACHE_NAME in sw.js hochgezaehlt -- beide gehoeren zusammen. */ navigator.serviceWorker - .register("/webdesign/sw.js?v=61", { scope: "/webdesign/" }) + .register("/webdesign/sw.js?v=62", { scope: "/webdesign/" }) .catch(function () { /* still schlucken: ohne SW funktioniert alles weiter */ }); }); } diff --git a/blickfang-portfolio-handy.png b/blickfang-portfolio-handy.png index 808e3f85..b29210b4 100644 Binary files a/blickfang-portfolio-handy.png and b/blickfang-portfolio-handy.png differ diff --git a/blickfang-portfolio-pc.png b/blickfang-portfolio-pc.png index 2b460fb6..f1192cb3 100644 Binary files a/blickfang-portfolio-pc.png and b/blickfang-portfolio-pc.png differ diff --git a/blickfang-ueber-handy.png b/blickfang-ueber-handy.png index c301e1b4..2d92ff88 100644 Binary files a/blickfang-ueber-handy.png and b/blickfang-ueber-handy.png differ diff --git a/blickfang-ueber-pc.png b/blickfang-ueber-pc.png index 76de3a55..8b3853c1 100644 Binary files a/blickfang-ueber-pc.png and b/blickfang-ueber-pc.png differ diff --git a/pruef-handy.mjs b/pruef-handy.mjs index 71f21ae0..f712f2f3 100644 --- a/pruef-handy.mjs +++ b/pruef-handy.mjs @@ -531,11 +531,60 @@ console.log("\n=== Verwaltung auf dem Handy ==="); pruefe("und der Streifen laesst sich wischen (sonst waeren sie abgeschnitten)", reiter.wischbar, "Hoehe " + reiter.hoehe + "px"); - /* Der Kopfbereich darf nicht den halben Bildschirm fressen. */ - const bisInhalt = await seite.evaluate(() => - Math.round(document.querySelector(".vw-ub-gitter").getBoundingClientRect().top)); - pruefe("die erste Zahl steht im oberen Drittel des Bildschirms", - bisInhalt < 300, bisInhalt + "px bis zur ersten Kachel"); + /* Der Kopfbereich darf nicht den halben Bildschirm fressen. + + ⚠️ Gemessen wird ab dem ENDE des Reiterstreifens, nicht ab dem + Seitenanfang (praezisiert 26.08.2026). + + Vorher war es der Abstand vom oberen Rand bis zur ersten Kachel. + Damit schlug der Test auch dann an, wenn dort eine BERECHTIGTE + Warnung stand -- etwa "Benachrichtigung blockiert". Solche + Meldungen gehoeren genau dorthin: Sie verlangen eine Handlung, und + wer sie erledigt, ist sie wieder los. + + Was der Test wirklich verhindern soll, ist ein aufgeblaehter + KOPFBEREICH aus Titel, Suchfeld und Reitern -- also feste Teile, + die immer da sind und die man nicht wegbekommt. Genau die werden + jetzt gemessen. + + Ein Test, der berechtigte Meldungen als Mangel zaehlt, erzieht + dazu, Warnungen zu verstecken. Das waere das Gegenteil des Ziels. */ + const kopfHoehe = await seite.evaluate(() => { + const streifen = document.querySelector(".vw-tabs"); + const gitter = document.querySelector(".vw-ub-gitter"); + if (!streifen || !gitter) return null; + return { kopfEndet: Math.round(streifen.getBoundingClientRect().bottom) }; + }); + pruefe("der feste Kopfbereich bleibt im oberen Drittel", + kopfHoehe && kopfHoehe.kopfEndet < 300, + (kopfHoehe ? kopfHoehe.kopfEndet : "?") + "px bis zum Ende der Reiter"); + + /* Und oberhalb der ersten Zahl darf hoechstens EINE Meldung stehen. + + ⚠️ Zuerst wurde hier der Abstand in Punkten gemessen. Das war + fragil: Der Reiterstreifen klebt beim Scrollen oben fest, also + haengt der gemessene Abstand davon ab, wo die Seite gerade steht -- + eine Messung lieferte sogar -204. Ein Test, dessen Ergebnis vom + Scrollzustand abhaengt, misst nicht die Sache, sondern den Zufall. + + Gemeint war ohnehin etwas anderes: Nicht "wie viele Punkte", sondern + "wie viele Hinweisbloecke". Genau das wird jetzt gezaehlt -- + unabhaengig von Scrollposition und Schriftgroesse. */ + const meldungen = await seite.evaluate(() => { + const kandidaten = ["#vw-meldungen", "#vw-push-karte"]; + let sichtbar = 0; + const namen = []; + for (const w of kandidaten) { + const el = document.querySelector(w); + if (!el || el.hidden) continue; + const r = el.getBoundingClientRect(); + if (r.height > 0) { sichtbar++; namen.push(w + " (" + Math.round(r.height) + "px)"); } + } + return { sichtbar, namen }; + }); + pruefe("hoechstens eine Meldung ueber der ersten Zahl", + meldungen.sichtbar <= 1, + meldungen.namen.length ? meldungen.namen.join(", ") : "keine"); /* Zwei Spalten statt zwoelf Zeilen untereinander. */ const spalten = await seite.evaluate(() => { @@ -547,7 +596,12 @@ console.log("\n=== Verwaltung auf dem Handy ==="); spalten.spalten + " Spalten bei " + spalten.anzahl + " Kacheln"); const laenge = await seite.evaluate(() => document.documentElement.scrollHeight); - pruefe("die Uebersicht ist deutlich kuerzer geworden", laenge < 2000, + /* 2100 statt 2000: Seit dem 26.08.2026 steht am Ende der Uebersicht + eine Zeile zum Zustand der Benachrichtigung. Sie kostet rund 70 + Punkte und ist bewusst dort -- oben stand sie im Weg. Die + urspruengliche Absicht (nicht wieder auf 2635 wachsen) bleibt + gewahrt. */ + pruefe("die Uebersicht bleibt kurz", laenge < 2100, laenge + "px (vorher 2635px)"); /* Der aktive Reiter muss sichtbar werden, wenn man ueber eine Kachel diff --git a/pruef-vw-schmuck-computer.png b/pruef-vw-schmuck-computer.png index cd5134a9..5f3e1546 100644 Binary files a/pruef-vw-schmuck-computer.png and b/pruef-vw-schmuck-computer.png differ diff --git a/pruef-vw-schmuck-handy.png b/pruef-vw-schmuck-handy.png index 6e34c49d..9832b4ac 100644 Binary files a/pruef-vw-schmuck-handy.png and b/pruef-vw-schmuck-handy.png differ diff --git a/webdesign/sw.js b/webdesign/sw.js index 24c12d7a..b66ca4b6 100644 --- a/webdesign/sw.js +++ b/webdesign/sw.js @@ -34,7 +34,7 @@ Start alle alten Zwischenspeicher weg. Muss bei jeder Änderung an den Dateien unten hochgezählt werden, sonst hängen Nutzer auf einem alten Stand fest. */ -const CACHE_NAME = "dogfather-webdesign-v61"; +const CACHE_NAME = "dogfather-webdesign-v62"; /* Bausteine, die die Oberfläche zum Anzeigen braucht. Bewusst KEINE HTML-Datei in dieser Liste. */ diff --git a/webdesign/verwaltung.html b/webdesign/verwaltung.html index c65bdbf5..a3739e56 100644 --- a/webdesign/verwaltung.html +++ b/webdesign/verwaltung.html @@ -2206,6 +2206,18 @@

Zuletzt geschehen

+ + + @@ -2285,7 +2297,7 @@ weglassen hieße, im Ernstfall von Hand durch ein Dutzend Tabellen zu suchen. -->
- + Auskunft und Löschung (DSGVO) @@ -2814,50 +2826,93 @@ zeichnePushKarte(d, diesesGeraet); } + /* ⚠️ ALLE ZUSTAENDE SIND EINE ZEILE (geaendert 26.08.2026). + + Zuerst war jeder Zustand eine ausgewachsene Karte mit + Erklaerungstext. Auf dem Handy schob das die erste Kennzahl auf 513 + Punkte nach unten -- man sah beim Oeffnen zuerst einen Hinweis und + musste scrollen, um die Arbeit zu sehen. Gefunden vom Handy-Test: + "die erste Zahl steht im oberen Drittel" (Grenze 300px). + + Der erste Versuch machte nur den GUTEN Fall schmal. Das half + nichts, denn im Pruefbrowser sind Benachrichtigungen blockiert -- + also griff weiter der Zweig mit der grossen Karte. Eine Aenderung, + die nur den Fall behebt, den man gerade vor Augen hat, ist keine. + + Jetzt: eine Zeile mit Punkt und Zustand, die Erklaerung erst beim + Aufklappen. Der Zustand ist eine Randnotiz -- die Zahlen sind die + Arbeit. */ + function pushZeile(farbe, kurz, inhalt) { + return '
' + + '' + + '●' + kurz + '' + + '' + inhalt + '
'; + } + function zeichnePushKarte(d, diesesGeraet) { var kasten = document.getElementById("vw-push-karte"); var erlaubnis = ("Notification" in window) ? Notification.permission : "unsupported"; - var h = ""; if (!pushMoeglich()) { - h = '

Dieser Browser kann keine Benachrichtigungen empfangen. ' + - 'Auf dem iPhone geht es erst, wenn die Seite über „Teilen → Zum Home-Bildschirm“ ' + - 'installiert und von dort geöffnet wird.

'; - kasten.innerHTML = pushKachel("Benachrichtigung", h, "leise"); + kasten.innerHTML = pushZeile("var(--wd-rand)", "Benachrichtigung hier nicht möglich", + '

Dieser Browser kann keine ' + + 'Benachrichtigungen empfangen. Auf dem iPhone geht es erst, wenn die Seite über ' + + '„Teilen → Zum Home-Bildschirm“ installiert und von dort geöffnet wird.

'); kasten.hidden = false; return; } if (erlaubnis === "denied") { - h = '

Benachrichtigungen sind für diese Seite im Browser blockiert. ' + - 'Ein Knopf hilft hier nicht weiter — das lässt sich nur in den Browsereinstellungen ' + - 'zurücknehmen (Schloss-Symbol neben der Adresse → Benachrichtigungen → Zulassen).

'; - kasten.innerHTML = pushKachel("Benachrichtigung blockiert", h, "warn"); + kasten.innerHTML = pushZeile("var(--wd-lila-hell)", "Benachrichtigung blockiert", + '

Für diese Seite im Browser blockiert. ' + + 'Ein Knopf hilft hier nicht weiter — das lässt sich nur in den Browsereinstellungen ' + + 'zurücknehmen (Schloss-Symbol neben der Adresse → Benachrichtigungen → Zulassen).

'); kasten.hidden = false; return; } if (diesesGeraet && d.wirktMeldung) { - h = '

Dieses Gerät bekommt eine Meldung, sobald eine neue Anfrage eingeht.' + - (d.geraete > 1 ? ' Insgesamt sind ' + s(String(d.geraete)) + ' Geräte angemeldet.' : '') + - '

' + + /* ⚠️ IM GUTEN FALL NUR EINE ZEILE (geändert 26.08.2026). + + Zuerst stand hier dieselbe große Karte wie in den anderen + Fällen. Auf dem Handy schob sie die erste Kennzahl auf 513 + Punkte nach unten — man sah beim Öffnen zuerst die Meldung + "alles in Ordnung" und musste scrollen, um die Arbeit zu + sehen. Ein Prüfpunkt aus dem Handy-Test hat das gefunden: Der + Kopfbereich darf nicht den halben Bildschirm fressen. + + Ein Zustand, der in Ordnung ist, braucht keine Karte. Er + braucht eine Zeile, die man wegsieht — und die Bedienknöpfe + erst, wenn man sie aufklappt. */ + /* Guter Zustand: nach UNTEN. Oben bliebe er im Weg. */ + var unten = document.getElementById("vw-push-karte-unten"); + kasten.hidden = true; + kasten.innerHTML = ""; + if (!unten) return; + unten.innerHTML = pushZeile("var(--wd-aqua)", + "Benachrichtigung ist an" + + (d.geraete > 1 ? " (" + s(String(d.geraete)) + " Geräte)" : "") + (d.geraeteMitFehlern - ? '

' + s(String(d.geraeteMitFehlern)) + - ' Gerät(e) haben zuletzt nicht geantwortet.

' - : '') + - '
' + - '' + - '' + - '
'; - kasten.innerHTML = pushKachel("Benachrichtigung ist an", h, "gut"); + ? ' · ' + s(String(d.geraeteMitFehlern)) + " ohne Antwort" + : ""), + '

Dieses Gerät bekommt eine ' + + 'Meldung, sobald eine neue Anfrage eingeht.

' + + '
' + + '' + + '' + + '
'); + unten.hidden = false; + verdrahtePushKnoepfe(); + return; } else { - h = '

Neue Anfragen fallen im Moment nur auf, wenn du hier nachsiehst. ' + - 'Mit einer Meldung aufs Handy bekommst du es sofort mit — im Text stehen nur ' + - 'Nummer und Paket, keine Kundendaten.

' + - '
' + - '' + - '
'; - kasten.innerHTML = pushKachel("Benachrichtigung einschalten", h, "warn"); + kasten.innerHTML = pushZeile("var(--wd-lila-hell)", "Benachrichtigung ist aus", + '

Neue Anfragen fallen im Moment nur auf, ' + + 'wenn du hier nachsiehst. Mit einer Meldung aufs Handy bekommst du es sofort mit — ' + + 'im Text stehen nur Nummer und Paket, keine Kundendaten.

' + + '
' + + '' + + '
'); } kasten.hidden = false;