Verwaltung: die Effekte liegen jetzt auf den ECHTEN Kacheln

Der Grund, warum von allem bisher nichts zu sehen war.

Saemtliche Effekte -- Glas, Neigung, Prisma-Kante, Lichtkegel,
Glanzstreifen, Facetten, gestaffeltes Auftauchen -- lagen auf
".wd-karte". Diese Klasse kommt im Verwaltungsbereich aber fast nicht
vor. Die Listen bestehen aus ".vw-karte", die Meldungen der Uebersicht
aus ".vw-meld".

Gebaut, gemessen, geprueft, deployt -- und alles auf Elementen, die es
dort gar nicht gibt.

Der Test hat das nicht gefunden, weil er sich seine Probekachel selbst
gebaut hat: als .wd-karte. Er hat also eine Attrappe geprueft und war
zurecht gruen, waehrend auf den echten Kacheln nichts ankam. Ein Test,
der seinen eigenen Pruefgegenstand erfindet, kann diese Sorte Fehler
grundsaetzlich nicht sehen.

WAS JETZT ANDERS IST

Alle Effekte gelten fuer .vw-karte und .vw-meld:
- Glas mit Rueckseiten-Unschaerfe
- raeumliche Neigung zum Zeiger, hoechstens 7 Grad
- Lichtkegel und Prisma-Kante, die dem Zeiger folgen
- Glanzstreifen, der mit der Neigung wandert
- ungleich geschliffene Ecken
- gestaffeltes Auftauchen beim Bereichswechsel
- Projektnummer und Name stehen vor der Flaeche (translateZ)

Dazu setzt der Verwaltungsbereich die Lichtposition jetzt selbst. Der
Verfolger im Grundsystem (wd-core.js) sucht ausdruecklich nur
".wd-karte" -- auf .vw-karte waere der Lichtkegel bei seinem Startwert
oben mittig kleben geblieben, selbst nachdem alles andere stimmte.

DER TEST BAUT JETZT DIE ECHTE STRUKTUR NACH

.vw-karte mit .vw-karte-nr, .vw-karte-mitte und .vw-karte-rechts, genau
wie das Skript sie erzeugt. Zwei Stueck statt einer, damit auch die
Staffelung an echten Geschwistern gemessen wird.

Geprueft: 260 Pruefungen gruen (Verwaltung 62, Portfolio 15, CRYONOVA 53,
Blickfang 13, System 5, Abmelden 16, Abbruch 42, Angebot 54).

Co-Authored-By: Claude Opus 5 <[email protected]>

pruef-verwaltung-schmuck.mjs

@@ -81,11 +81,31 @@ async function bereichAufbauen(seite, bereich) {
     if (!probe) {
       probe = document.createElement("div");
       probe.id = "vw-probe";
+      /* DIE ECHTE KACHELSTRUKTUR der Verwaltung, so wie das Skript sie
+         erzeugt: .vw-karte mit Nummer, Mitte und rechter Spalte.
+
+         Frueher stand hier eine selbst gebaute .wd-karte. Die kommt im
+         Verwaltungsbereich aber fast nicht vor -- der Test hat also
+         eine Attrappe geprueft und war gruen, waehrend auf den echten
+         Kacheln nichts davon ankam. Genau deshalb war der Unterschied
+         nirgends zu sehen. */
       probe.innerHTML =
-        '<div class="wd-karte" style="padding:1.4rem;margin-bottom:1rem">' +
+        '<button class="vw-karte">' +
-        '<h2 style="margin-top:0">Vanessa Geske</h2>' +
+          '<span class="vw-karte-nr">P-2608-0002</span>' +
-        '<p class="wd-klein wd-leise">[email protected]</p>' +
+          '<span class="vw-karte-mitte">' +
-        '<p id="vw-probe-text">Zwei Projekte, eines davon laufend.</p></div>';
+            '<span class="vw-karte-name">Onepager fuer Vanessa</span>' +
+            '<span class="vw-karte-info" id="vw-probe-text">Vanessa Geske</span>' +
+          '</span>' +
+          '<span class="vw-karte-rechts"><span class="vw-mini">Design</span></span>' +
+        '</button>' +
+        '<button class="vw-karte">' +
+          '<span class="vw-karte-nr">P-2608-0004</span>' +
+          '<span class="vw-karte-mitte">' +
+            '<span class="vw-karte-name">Betreuung</span>' +
+            '<span class="vw-karte-info">Marc Weber</span>' +
+          '</span>' +
+          '<span class="vw-karte-rechts"><span class="vw-mini vw-mini--geld">39,00</span></span>' +
+        '</button>';
       bereichEl.appendChild(probe);
     }
   }, bereich);
@@ -187,13 +207,13 @@ srv.listen(4404, async () => {
   for (const bereich of BEREICHE) {
     await bereichAufbauen(seite, bereich);
 
-    const aufGlas = await unruheAn(seite, "#vw-probe .wd-karte");
+    const aufGlas = await unruheAn(seite, "#vw-probe .vw-karte");
     await seite.evaluate(() => {
       document.querySelector(".vw-buehne").style.visibility = "hidden";
     });
     await seite.waitForTimeout(350);
     await bereichAufbauen(seite, bereich);
-    const ohneBuehne = await unruheAn(seite, "#vw-probe .wd-karte");
+    const ohneBuehne = await unruheAn(seite, "#vw-probe .vw-karte");
     await seite.evaluate(() => {
       document.querySelector(".vw-buehne").style.visibility = "";
     });
@@ -211,7 +231,7 @@ srv.listen(4404, async () => {
        dem Stilblatt: Die Kachel ist halbdurchsichtig, ihr rechnerischer
        Wert sagt nichts darueber, was am Ende darunter liegt. */
     const stelle = await seite.evaluate(() => {
-      const k = document.querySelector("#vw-probe .wd-karte");
+      const k = document.querySelector("#vw-probe .vw-karte");
       const r = k.getBoundingClientRect();
       return { x: Math.round(r.x + r.width * 0.72), y: Math.round(r.y + r.height * 0.62) };
     });
@@ -240,7 +260,7 @@ srv.listen(4404, async () => {
 
   console.log("\n===== 3b. FOLGT DAS LICHT DER MAUS? =====");
   await bereichAufbauen(seite, "kunden");
-  const karte = seite.locator("#vw-probe .wd-karte");
+  const karte = seite.locator("#vw-probe .vw-karte").first();
   const kasten = await karte.boundingBox();
 
   /* WICHTIG: mit steps bewegen. Ein Sprung ohne Zwischenschritte
@@ -357,8 +377,8 @@ srv.listen(4404, async () => {
     }
     probe.innerHTML = "";
     for (let i = 0; i < 4; i++) {
-      const k = document.createElement("div");
+      const k = document.createElement("button");
-      k.className = "wd-karte";
+      k.className = "vw-karte";
       k.style.padding = "1rem";
       k.textContent = "Kachel " + (i + 1);
       probe.appendChild(k);
@@ -386,7 +406,7 @@ srv.listen(4404, async () => {
     const raum = document.querySelector(".vw-raum");
     const lampe = document.querySelector(".vw-lampe");
     const flocken = document.querySelector(".vw-flocken");
-    const karte = document.querySelector("#vw-probe .wd-karte");
+    const karte = document.querySelector("#vw-probe .vw-karte");
     const ls = getComputedStyle(lampe);
     return {
       raumIsoliert: getComputedStyle(raum).isolation,
@@ -433,7 +453,7 @@ srv.listen(4404, async () => {
 
   console.log("\n===== 3g. NEIGEN SICH DIE KACHELN? =====");
   await bereichAufbauen(seite, "kunden");
-  const platte = seite.locator("#vw-probe .wd-karte").first();
+  const platte = seite.locator("#vw-probe .vw-karte").first();
   const pk = await platte.boundingBox();
 
   /* Mit steps bewegen, sonst entsteht kein pointermove. */
@@ -493,9 +513,9 @@ srv.listen(4404, async () => {
     zurueck.nx === "0" && zurueck.ny === "0", `${zurueck.nx}/${zurueck.ny}`);
 
   const tiefe = await seite.evaluate(() => {
-    const k = document.querySelector("#vw-probe .wd-karte");
+    const k = document.querySelector("#vw-probe .vw-karte");
-    const h = k.querySelector("h2");
+    const h = k.querySelector(".vw-karte-nr");
-    const p = k.querySelector("p");
+    const p = k.querySelector(".vw-karte-mitte");
     return {
       ueberschrift: getComputedStyle(h).transform,
       absatz: getComputedStyle(p).transform,
@@ -576,8 +596,8 @@ srv.listen(4404, async () => {
     ruhigeLage.translate === "none", ruhigeLage.translate);
   const ruhigExtra = await ruhig.evaluate(() => {
     const be = document.querySelector("#vw-bereich");
-    const k = document.createElement("div");
+    const k = document.createElement("button");
-    k.className = "wd-karte";
+    k.className = "vw-karte";
     be.appendChild(k);
     const l = document.querySelector("#vw-bereich .vw-tabs");
     return {
@@ -587,8 +607,8 @@ srv.listen(4404, async () => {
   });
   const ruhigNeigung = await ruhig.evaluate(() => {
     const be = document.querySelector("#vw-bereich");
-    let k = be.querySelector(".wd-karte");
+    let k = be.querySelector(".vw-karte");
-    if (!k) { k = document.createElement("div"); k.className = "wd-karte"; be.appendChild(k); }
+    if (!k) { k = document.createElement("button"); k.className = "vw-karte"; be.appendChild(k); }
     return getComputedStyle(k).transform;
   });
   pruefe("keine Neigung bei reduzierter Bewegung",

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-v41";
+const CACHE_NAME = "dogfather-webdesign-v42";
 
 /* Bausteine, die die Oberfläche zum Anzeigen braucht. Bewusst KEINE
    HTML-Datei in dieser Liste. */

webdesign/verwaltung.html

@@ -391,9 +391,10 @@
      Deshalb ist der Hintergrund auch ohne Unschaerfe schon dicht genug.
      Das ist kein Schoenheitsfehler, sondern der Rueckfall. */
   #vw-bereich .wd-karte,
-  #vw-bereich .vw-liste,
+  #vw-bereich .vw-karte,
+  #vw-bereich .vw-meld,
+  #vw-bereich .vw-detail-blatt,
   #vw-bereich .wd-notiz,
-  #vw-bereich .vw-kachel,
   #vw-bereich table {
     -webkit-backdrop-filter: blur(22px) saturate(1.15);
     backdrop-filter: blur(22px) saturate(1.15);
@@ -487,17 +488,35 @@
     from { opacity: 0; translate: 0 14px; scale: .985; }
     to   { opacity: 1; translate: none; scale: 1; }
   }
-  #vw-bereich .wd-karte {
+  #vw-bereich .wd-karte,
+  #vw-bereich .vw-karte,
+  #vw-bereich .vw-meld {
     animation: vw-kachel-auf .5s cubic-bezier(.2,.8,.3,1) both;
   }
-  #vw-bereich .wd-karte:nth-child(1) { animation-delay: .02s; }
+  #vw-bereich .wd-karte:nth-child(1),
-  #vw-bereich .wd-karte:nth-child(2) { animation-delay: .07s; }
+  #vw-bereich .vw-karte:nth-child(1),
-  #vw-bereich .wd-karte:nth-child(3) { animation-delay: .12s; }
+  #vw-bereich .vw-meld:nth-child(1) { animation-delay: .02s; }
-  #vw-bereich .wd-karte:nth-child(4) { animation-delay: .17s; }
+  #vw-bereich .wd-karte:nth-child(2),
-  #vw-bereich .wd-karte:nth-child(5) { animation-delay: .22s; }
+  #vw-bereich .vw-karte:nth-child(2),
-  #vw-bereich .wd-karte:nth-child(6) { animation-delay: .27s; }
+  #vw-bereich .vw-meld:nth-child(2) { animation-delay: .07s; }
-  #vw-bereich .wd-karte:nth-child(7) { animation-delay: .32s; }
+  #vw-bereich .wd-karte:nth-child(3),
-  #vw-bereich .wd-karte:nth-child(n+8) { animation-delay: .36s; }
+  #vw-bereich .vw-karte:nth-child(3),
+  #vw-bereich .vw-meld:nth-child(3) { animation-delay: .12s; }
+  #vw-bereich .wd-karte:nth-child(4),
+  #vw-bereich .vw-karte:nth-child(4),
+  #vw-bereich .vw-meld:nth-child(4) { animation-delay: .17s; }
+  #vw-bereich .wd-karte:nth-child(5),
+  #vw-bereich .vw-karte:nth-child(5),
+  #vw-bereich .vw-meld:nth-child(5) { animation-delay: .22s; }
+  #vw-bereich .wd-karte:nth-child(6),
+  #vw-bereich .vw-karte:nth-child(6),
+  #vw-bereich .vw-meld:nth-child(6) { animation-delay: .27s; }
+  #vw-bereich .wd-karte:nth-child(7),
+  #vw-bereich .vw-karte:nth-child(7),
+  #vw-bereich .vw-meld:nth-child(7) { animation-delay: .32s; }
+  #vw-bereich .wd-karte:nth-child(n+8),
+  #vw-bereich .vw-karte:nth-child(n+8),
+  #vw-bereich .vw-meld:nth-child(n+8) { animation-delay: .36s; }
 
   @media (prefers-reduced-motion: reduce) {
     #vw-bereich .wd-karte { animation: none; }
@@ -516,7 +535,9 @@
        2. Die KANTE der Kachel leuchtet dort auf, wo der Zeiger steht.
      Zusammen sieht es aus, als laege eine echte Lichtquelle ueber dem
      Glas -- und nicht, als waere ein Fleck aufgemalt. */
-  #vw-bereich .wd-karte {
+  #vw-bereich .wd-karte,
+  #vw-bereich .vw-karte,
+  #vw-bereich .vw-meld {
     background:
       /* Die Flaeche: dicht genug, dass Text darauf ruhig steht. */
       linear-gradient(180deg,
@@ -554,7 +575,15 @@
 
   /* Der Lichtkegel auf der Flaeche, kraeftiger als im Grundsystem. */
   @media (hover: hover) and (pointer: fine) {
-    #vw-bereich .wd-karte::after {
+    #vw-bereich .wd-karte::after,
+    #vw-bereich .vw-karte::after,
+    #vw-bereich .vw-meld::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      z-index: 0;
+      border-radius: inherit;
+      pointer-events: none;
       background: radial-gradient(300px circle at var(--wd-lichtx) var(--wd-lichty),
         rgb(var(--vw-farbe) / .30) 0%,
         rgb(var(--vw-farbe) / .12) 42%,
@@ -580,7 +609,9 @@
          wie ein platt gedruecktes Parallelogramm. */
       perspective: 1400px;
     }
-    #vw-bereich .wd-karte {
+    #vw-bereich .wd-karte,
+    #vw-bereich .vw-karte,
+    #vw-bereich .vw-meld {
       transform-style: preserve-3d;
       transform:
         rotateX(calc(var(--vw-ny, 0) * -7deg))
@@ -594,7 +625,9 @@
     /* Beim Ueberfahren kommt die Kachel dem Betrachter entgegen und
        wirft einen laengeren Schatten -- das erst macht aus der Neigung
        ein Objekt im Raum statt eines schraegen Bildes. */
-    #vw-bereich .wd-karte:hover {
+    #vw-bereich .wd-karte:hover,
+    #vw-bereich .vw-karte:hover,
+    #vw-bereich .vw-meld:hover {
       transform:
         rotateX(calc(var(--vw-ny, 0) * -7deg))
         rotateY(calc(var(--vw-nx, 0) *  7deg))
@@ -608,16 +641,22 @@
     /* Der Inhalt steht vor der Flaeche. Ueberschriften weiter vorn als
        Fliesstext -- dadurch entsteht beim Neigen echte Staffelung
        statt einer flachen Ebene, die sich mitdreht. */
-    #vw-bereich .wd-karte > * { transform: translateZ(18px); }
+    #vw-bereich .wd-karte > *,
-    #vw-bereich .wd-karte h2,
+    #vw-bereich .vw-karte > *,
-    #vw-bereich .wd-karte h3 { transform: translateZ(34px); }
+    #vw-bereich .vw-meld > * { transform: translateZ(18px); }
+    #vw-bereich .wd-karte h2, #vw-bereich .wd-karte h3,
+    #vw-bereich .vw-karte .vw-karte-name,
+    #vw-bereich .vw-karte .vw-karte-nr,
+    #vw-bereich .vw-meld strong { transform: translateZ(34px); }
 
     /* DER GLANZSTREIFEN.
 
        Ein schmales Licht, das ueber die Platte laeuft und mit der
        Neigung wandert. Es sitzt im ::before, weil ::after schon den
        Lichtkegel traegt. */
-    #vw-bereich .wd-karte::before {
+    #vw-bereich .wd-karte::before,
+    #vw-bereich .vw-karte::before,
+    #vw-bereich .vw-meld::before {
       content: "";
       position: absolute;
       inset: 0;
@@ -634,26 +673,39 @@
       opacity: 0;
       transition: opacity .3s ease;
     }
-    #vw-bereich .wd-karte:hover::before { opacity: 1; }
+    #vw-bereich .wd-karte:hover::before,
+    #vw-bereich .vw-karte:hover::before,
+    #vw-bereich .vw-meld:hover::before { opacity: 1; }
   }
 
   /* Die Ecken sind ungleich gerundet -- diagonal weit, diagonal knapp.
      Eine gleichmaessig gerundete Kachel liest sich als Knopf; die
      ungleiche Rundung nimmt die Facetten der Motive auf. */
-  #vw-bereich .wd-karte {
+  #vw-bereich .wd-karte,
+  #vw-bereich .vw-karte,
+  #vw-bereich .vw-meld {
     border-radius: 36px 6px 36px 6px;
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    #vw-bereich .wd-karte {
+    #vw-bereich .wd-karte,
+    #vw-bereich .vw-karte,
+    #vw-bereich .vw-meld {
       transition: none;
       transform: none;
+      animation: none;
     }
-    #vw-bereich .wd-karte:hover { transform: none; }
+    #vw-bereich .wd-karte:hover,
-    #vw-bereich .wd-karte > *,
+    #vw-bereich .vw-karte:hover,
-    #vw-bereich .wd-karte h2,
+    #vw-bereich .vw-meld:hover { transform: none; }
-    #vw-bereich .wd-karte h3 { transform: none; }
+    #vw-bereich .wd-karte > *, #vw-bereich .vw-karte > *, #vw-bereich .vw-meld > *,
-    #vw-bereich .wd-karte::before { display: none; }
+    #vw-bereich .wd-karte h2, #vw-bereich .wd-karte h3 { transform: none; }
+    #vw-bereich .wd-karte::before,
+    #vw-bereich .vw-karte::before,
+    #vw-bereich .vw-meld::before { display: none; }
   }
 
   /* Der Titel steht als einziges frei auf der Buehne. Damit er das
@@ -737,7 +789,9 @@
   /* Das Licht, das den Kacheln unter dem Mauszeiger folgt, nimmt
      ebenfalls die Leitfarbe an. Dadurch fuehlt sich jeder Bereich
      anders an, ohne dass irgendwo ein zweites Bild noetig waere. */
-  #vw-bereich .wd-karte { --wd-lumen: var(--vw-farbe); }
+  #vw-bereich .wd-karte,
+  #vw-bereich .vw-karte,
+  #vw-bereich .vw-meld { --wd-lumen: var(--vw-farbe); }
 
   /* Die Anmeldekarte bekommt das Wappen. Sie ist halbdurchsichtig,
      das Motiv scheint also durch die Glasflaeche hindurch.
@@ -3859,6 +3913,16 @@
      Beim Verlassen wird auf 0 zurueckgesetzt -- sonst bliebe die
      Kachel schraeg stehen, nachdem der Zeiger laengst weg ist.
      --------------------------------------------------------------------- */
+  /* Die ECHTEN Kachelklassen der Verwaltung.
+
+     Beim ersten Anlauf stand hier nur ".wd-karte" -- die kommt im
+     Verwaltungsbereich aber fast nicht vor. Die Listen bestehen aus
+     .vw-karte, die Meldungen der Uebersicht aus .vw-meld. Saemtliche
+     Effekte lagen dadurch auf Elementen, die es hier gar nicht gibt:
+     Neigung, Glanz und Licht waren gebaut, gemessen -- und trotzdem
+     nirgends zu sehen. */
+  var KACHELN = "#vw-bereich .wd-karte, #vw-bereich .vw-karte, #vw-bereich .vw-meld";
+
   (function kachelnNeigen() {
     try {
       if (!window.matchMedia("(hover: hover) and (pointer: fine)").matches) return;
@@ -3869,7 +3933,7 @@
 
     document.addEventListener("pointermove", function (e) {
       var karte = e.target && e.target.closest
-        ? e.target.closest("#vw-bereich .wd-karte") : null;
+        ? e.target.closest(KACHELN) : null;
       if (!karte) return;
       letzte = karte; zx = e.clientX; zy = e.clientY;
       if (offen) return;
@@ -3884,6 +3948,15 @@
         var ny = ((zy - r.top) / r.height - 0.5) * 2;
         letzte.style.setProperty("--vw-nx", nx.toFixed(3));
         letzte.style.setProperty("--vw-ny", ny.toFixed(3));
+
+        /* Die Lichtposition gleich mitsetzen.
+
+           Der Verfolger im Grundsystem (wd-core.js) sucht ausdruecklich
+           nur ".wd-karte". Fuer .vw-karte und .vw-meld waere das Licht
+           also nie gewandert -- der Lichtkegel haette bei seinem
+           Startwert oben mittig geklebt. */
+        letzte.style.setProperty("--wd-lichtx", (zx - r.left) + "px");
+        letzte.style.setProperty("--wd-lichty", (zy - r.top) + "px");
       });
     }, { passive: true });
 
@@ -3891,7 +3964,7 @@
        wenn der Zeiger die Kachel ueber ein Kindelement verlaesst. */
     document.addEventListener("pointerout", function (e) {
       var karte = e.target && e.target.closest
-        ? e.target.closest("#vw-bereich .wd-karte") : null;
+        ? e.target.closest(KACHELN) : null;
       if (!karte) return;
       /* Nur zuruecksetzen, wenn der Zeiger die Kachel WIRKLICH verlaesst
          und nicht bloss von einem Kind zum naechsten wandert. */