Portfolio: Kacheln einer Reihe sind gleich gross

Die Projekttexte sind unterschiedlich lang, also waren auch die Kacheln
unterschiedlich hoch. Jetzt bekommen alle Kacheln einer Reihe dieselbe
Hoehe, naemlich die der hoechsten.

Dafuer waren drei Dinge noetig, und nur das erste ist offensichtlich:

1. "align-items: start" musste weg. Es liess jede Kachel ihre
   natuerliche Hoehe behalten -- genau das war der Fehler.

2. Der Inhalt muss die zusaetzliche Hoehe auch aufnehmen koennen.
   Ohne Flex-Aufbau in Kachel und Inhalt waere die Kachel zwar hoeher,
   ihr Inhalt bliebe aber oben kleben und darunter entstuende ein
   leeres Feld.

3. Das letzte Element sitzt am unteren Rand.

DER PUNKT, DER FAST DURCHGERUTSCHT WAERE

Gleich hohe Kacheln heissen NICHT automatisch, dass der Inhalt buendig
steht. Nach Schritt 1 und 2 waren die Kacheln exakt gleich hoch -- und
die Knoepfe standen trotzdem auf verschiedener Hoehe.

Grund: Die Abstaende standen als style-Angabe direkt im HTML
(style="margin-top:1rem"). Eine solche Angabe schlaegt jede Regel aus
dem Stilblatt, das "margin-top: auto" lief also ins Leere. Fuenf
Vorkommen entfernt.

Danach blieben 33 gegen 48 Punkte Abstand zum Kachelboden: Ein Absatz
bringt einen eigenen Abstand nach unten mit, eine Knopfreihe nicht.
Auch das ist jetzt vereinheitlicht.

Die Regel greift ueber :last-child statt nur ueber die Knopfreihe --
die Buchhaltungs-Kachel hat naemlich gar keinen Knopf, sondern einen
Hinweistext an dieser Stelle. Der soll genauso unten stehen.

DIE PRUEFUNG MISST BEIDES GETRENNT

Einmal "jede Reihe ist in sich gleich hoch", einmal "die letzten
Elemente stehen auf einer Linie". Ein einzelner Test auf die Hoehe
haette den Knopf-Versatz nie bemerkt -- die Kacheln waren ja bereits
gleich hoch, als die Knoepfe noch verrutscht waren.

Gemessen: 1129/1129, 881/881, 831 -- und ueberall 33 Punkte Abstand zum
Kachelboden.

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

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

pruef-portfolio.mjs

@@ -126,6 +126,52 @@ srv.listen(4403, async () => {
   await seite.setViewportSize({ width: 1440, height: 950 });
   await seite.waitForTimeout(500);
 
+  console.log("\n1c. SIND DIE KACHELN EINER REIHE GLEICH GROSS?");
+  await seite.evaluate(async () => {
+    for (const el of document.querySelectorAll(".pfo-bild")) {
+      el.scrollIntoView();
+      await new Promise((r) => setTimeout(r, 180));
+    }
+    window.scrollTo(0, 0);
+  });
+  await seite.waitForTimeout(800);
+
+  const reihen = await seite.evaluate(() => {
+    const k = [...document.querySelectorAll(".pfo-projekt")];
+    const nach = {};
+    k.forEach((x) => {
+      const r = x.getBoundingClientRect();
+      const oben = Math.round(r.top);
+      const letzte = x.querySelector(".pfo-inhalt > :last-child");
+      (nach[oben] = nach[oben] || []).push({
+        hoehe: Math.round(r.height),
+        /* Abstand vom letzten Element bis zum Kachelboden. */
+        unten: letzte ? Math.round(r.bottom - letzte.getBoundingClientRect().bottom) : -1,
+      });
+    });
+    return Object.values(nach);
+  });
+
+  pruefe("es gibt Reihen mit zwei Kacheln",
+    reihen.some((r) => r.length === 2),
+    reihen.map((r) => r.length).join("+"));
+
+  /* Der eigentliche Punkt: Die Projekttexte sind unterschiedlich lang.
+     Ohne "stretch" behaelt jede Kachel ihre natuerliche Hoehe, und dann
+     stehen zwei sichtbar verschieden hohe Kacheln nebeneinander. */
+  pruefe("jede Reihe ist in sich gleich hoch",
+    reihen.every((r) => new Set(r.map((x) => x.hoehe)).size === 1),
+    reihen.map((r) => r.map((x) => x.hoehe).join("/")).join("  "));
+
+  /* Und die Knoepfe muessen auf einer Linie stehen. Das ist NICHT
+     dasselbe: Die Kacheln koennen gleich hoch sein und der Inhalt
+     trotzdem unterschiedlich weit oben kleben. Genau so war es, weil
+     die Abstaende als style-Angabe im HTML standen -- und eine solche
+     Angabe schlaegt jede Regel aus dem Stilblatt. */
+  pruefe("und die letzten Elemente stehen auf einer Linie",
+    reihen.every((r) => new Set(r.map((x) => x.unten)).size === 1),
+    reihen.map((r) => r.map((x) => x.unten + "px").join("/")).join("  "));
+
   console.log("\n2. UEBERSETZUNGEN — IN ALLEN FUENF SPRACHEN");
   /* Geprueft werden die SEITENEIGENEN Schluessel (pf_, p1_-p5_,
      seiten_titel). Navigations- und Markentexte liegen bewusst nicht

webdesign/portfolio.html

@@ -37,7 +37,45 @@
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: clamp(1.2rem, 2.4vw, 2rem);
-    align-items: start;
+    /* align-items bleibt auf dem Standard "stretch": Alle Kacheln einer
+       Zeile bekommen dieselbe Hoehe, naemlich die der hoechsten.
+
+       Vorher stand hier "start". Dann behaelt jede Kachel ihre
+       natuerliche Hoehe -- und weil die Projekttexte unterschiedlich
+       lang sind, standen zwei Kacheln nebeneinander, die sichtbar
+       verschieden hoch waren. */
+  }
+
+  /* Damit "stretch" wirkt, muss der Inhalt die zusaetzliche Hoehe auch
+     aufnehmen koennen. Ohne diese drei Zeilen waere die Kachel zwar
+     hoeher, ihr Inhalt bliebe aber oben kleben und darunter entstuende
+     ein leeres Feld. */
+  .pfo-raster .pfo-projekt { display: flex; flex-direction: column; }
+  .pfo-raster .pfo-inhalt { flex: 1; display: flex; flex-direction: column; }
+
+  /* Das letzte Element sitzt am unteren Rand, nicht direkt unter dem
+     Text. Dadurch stehen die Knoepfe zweier nebeneinanderliegender
+     Kacheln auf einer Linie, auch wenn die Texte unterschiedlich lang
+     sind -- genau das macht den Unterschied zwischen "gleich hoch" und
+     "sieht aufgeraeumt aus".
+
+     Bewusst :last-child statt einer Regel nur fuer den Knopf: Die
+     Buchhaltungs-Kachel hat gar keinen Knopf, sondern einen
+     Hinweistext an dieser Stelle. Der soll genauso unten stehen.
+
+     Die Abstaende standen vorher als style-Angabe direkt im HTML. Eine
+     solche Angabe schlaegt jede Regel aus dem Stilblatt -- die Knoepfe
+     blieben deshalb an unterschiedlicher Hoehe kleben, obwohl die
+     Kacheln laengst gleich hoch waren. Sie sind jetzt entfernt. */
+  .pfo-raster .pfo-inhalt > :last-child {
+    margin-top: auto;
+    padding-top: 1rem;
+    /* Ohne das haengen die letzten Elemente unterschiedlich hoch ueber
+       dem Kachelboden: Ein Absatz bringt einen eigenen Abstand nach
+       unten mit, eine Knopfreihe nicht. Gemessen waren es 48 gegen 33
+       Punkte -- bei sonst exakt gleich hohen Kacheln faellt genau das
+       auf. */
+    margin-bottom: 0;
   }
   @media (max-width: 760px) {
     /* Darunter waeren zwei Spalten so schmal, dass Ueberschrift und
@@ -165,7 +203,7 @@
             </div>
           </details>
 
-          <div class="wd-btn-reihe" style="margin-top:1rem">
+          <div class="wd-btn-reihe">
             <a class="wd-btn wd-btn--zweit wd-btn--klein" href="https://dogfather-universe.com/" target="_blank" rel="noopener" data-i18n="pf_ansehen">Live ansehen</a>
           </div>
         </div>
@@ -215,7 +253,7 @@
             </div>
           </details>
 
-          <div class="wd-btn-reihe" style="margin-top:1rem">
+          <div class="wd-btn-reihe">
             <a class="wd-btn wd-btn--zweit wd-btn--klein" href="https://vans-diy-bastelbedarf.com/" target="_blank" rel="noopener" data-i18n="pf_ansehen">Live ansehen</a>
           </div>
         </div>
@@ -265,7 +303,7 @@
             </div>
           </details>
 
-          <div class="wd-btn-reihe" style="margin-top:1rem">
+          <div class="wd-btn-reihe">
             <a class="wd-btn wd-btn--zweit wd-btn--klein" href="https://zockeranstalt.dogfather-universe.com/" target="_blank" rel="noopener" data-i18n="pf_ansehen">Live ansehen</a>
           </div>
         </div>
@@ -318,7 +356,7 @@
           <!-- Kein "Live ansehen": Dahinter liegt eine Anmeldung, und was
                dort steht, sind echte Geschäftszahlen. Ein Knopf, der nur
                zu einer Anmeldemaske führt, wäre ein leeres Versprechen. -->
-          <p class="wd-klein wd-leise" style="margin-top:1rem" data-i18n="p4_kein_link">Ohne öffentlichen Zugang: Dahinter liegen echte Geschäftszahlen.</p>
+          <p class="wd-klein wd-leise" data-i18n="p4_kein_link">Ohne öffentlichen Zugang: Dahinter liegen echte Geschäftszahlen.</p>
         </div>
       </article>
 
@@ -370,7 +408,7 @@
             </div>
           </details>
 
-          <div class="wd-btn-reihe" style="margin-top:1rem">
+          <div class="wd-btn-reihe">
             <a class="wd-btn wd-btn--zweit wd-btn--klein" href="https://analyse.dogfather-universe.com/" target="_blank" rel="noopener" data-i18n="pf_ansehen">Live ansehen</a>
           </div>
         </div>

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