diff --git a/post7.html b/post7.html index 4a4698d..d27dcbf 100644 --- a/post7.html +++ b/post7.html @@ -1460,9 +1460,29 @@ if (location.search.indexOf("nur=anim") >= 0) { key: "animForm", type: "feature", dauer: 6, eyebrow: "Form Builder", - head: 'Das Formular
baust du selbst.', - body: "Frage hinzufügen, Typ wählen, Optionen eintippen. Mehr braucht es nicht.", - vis: "animForm", visW: 896, visLeft: 92, visBottom: 168, + /* Die Ueberschrift des Bewegtbilds ist die Ueberschrift des Beitrags, + denn es ist das erste Element im Carousel. Sie muss also die ganze + Sache tragen und nicht eine Einzelheit daraus. "Das Formular baust du + selbst" stand hier zuerst und beschrieb die Bedienung -- das sieht man + in der Animation ohnehin, und als Aufmacher sagt es nichts darueber, + wozu das gut ist. + + Anders als bei Post 6 gibt es dafuer keine Vorlage: lib/produkt-daten.ts + der Website kennt sechs Produkte, der Form Builder ist keins davon. + Der Satz ist also geschrieben und nicht zitiert. */ + head: 'Anfragen, bei denen
nichts mehr fehlt.', + /* Kein Fliesstext: die Titelslide traegt nur die Ueberschrift, so wie + Slide 1 in Post 6 und die Titel-Slide in Post 4. Der leere body laesst + contentHtml den Absatz ganz weg -- stuende dort ein leerer Absatz, + schoebe sein Zeilenabstand die Zeichnung nach unten. */ + body: "", + /* Weiter oben als die Slides: ohne Fliesstext sitzt die Ueberschrift + hoeher, und mit visBottom 168 klafften 218 px zwischen ihr und der + Karte. 268 macht daraus 118 -- derselbe Wert wie ueberall sonst. Der + gewonnene Platz steht dafuer unten, was hier verkraftbar ist: die + Karte ist am Anfang ohnehin zur Haelfte leer, weil sie den Raum fuer + die spaeter erscheinenden Optionen schon reserviert. */ + vis: "animForm", visW: 896, visLeft: 92, visBottom: 268, }, ]; @@ -5127,6 +5147,19 @@ if (location.search.indexOf("nur=anim") >= 0) content.innerHTML = contentHtml(a, 0); page.appendChild(content); + /* Die Ueberschrift drei Pixel tiefer, wie auf den Startslides von Post 2 + bis 6. Dort steckt der Wert im Projektstand als headline.dy, gesetzt von + applyEdits -- und da geht das Bewegtbild nicht durch, es baut sein Blatt + selbst. Seit es das erste Element im Carousel ist, faellt der + Unterschied auf: gemessen sassen die anderen bei y 95, dieses bei 92. + + Direkt als transform und nicht ueber --ey: die Regel, die daraus eine + Verschiebung macht, haengt an [data-edit], und das Attribut setzt + tagEditable() -- eine weitere Stelle, die das Bewegtbild nicht + durchlaeuft. Mit --ey allein passierte gar nichts. */ + const kopf = content.querySelector(".headline"); + if (kopf) kopf.style.transform = "translateY(3px)"; + const v = document.createElement("div"); v.className = "vis vis-" + a.vis; v.style.cssText = diff --git a/state/post7.json b/state/post7.json index ee6c34e..abf075b 100644 --- a/state/post7.json +++ b/state/post7.json @@ -35,18 +35,27 @@ "dx": 0, "dy": 0 }, + "headline": { + "dy": 3 + }, "vis": { "dx": 0, "dy": -28 } }, { + "headline": { + "dy": 3 + }, "vis": { "dx": 0, "dy": -126 } }, { + "headline": { + "dy": 3 + }, "vis": { "dx": 0, "dy": -162