From 16b85a285ab100e6533448a05c6211b231d9e588 Mon Sep 17 00:00:00 2001 From: DeeCee03 Date: Thu, 13 Aug 2026 22:04:38 +0200 Subject: [PATCH] Projektuebersicht: alle Streifen untereinander auf einer Flaeche Neu unter Projekt -> "Alle Projekte im Streifen". uebersicht.html zeigt die Streifen aller drei Projekte gestapelt, ohne Sidebar, auf derselben Art Flaeche wie der Generator: ziehen schiebt, das Rad zoomt, Fit passt ein. Die Seite baut die Slides nicht nach. Jedes Projekt kommt als iframe mit ?nur=streifen; in diesem Modus blendet die Post-Seite ihre Bedienoberflaeche aus und zeigt den Streifen in natuerlicher Groesse, skaliert wird aussen. Ein Nachbau wuerde irgendwann von dem abweichen, was der Generator zeigt, und waere dann schlimmer als keine Uebersicht. Drei Dinge, die dieser Modus regelt: - Es wird nichts gespeichert (stateLocked). Drei Kacheln, die beim Schliessen ihren Stand zurueckschreiben, waeren genau die Falle aus POST-2.md 6. - Die Ansicht steht fest auf "streifen". Post 2 stand im Stand auf "einzeln" und meldete deshalb 1080 px statt der vollen Breite. - Der Auswahlrahmen faellt weg; in der Uebersicht ist keine Slide "die aktuelle". Die Streifenbreite kommt per postMessage von der Post-Seite: die Zahl der Slides ist je Projekt anders und soll nicht zweimal gepflegt werden. Beim Einpassen zaehlen Beschriftung, Abstaende und Polster nicht mit -- die skalieren nicht, weil sie ausserhalb des transformierten iframes stehen. Ohne diese Rechnung lief die letzte Reihe unten hinaus. Co-Authored-By: Claude Opus 5 (1M context) --- README.md | 8 ++ post1.html | 55 +++++++- post2-alt.html | 55 +++++++- post2.html | 55 +++++++- state/post2-alt-merk.json | 158 +++++++++++++++++++++ uebersicht.html | 281 ++++++++++++++++++++++++++++++++++++++ 6 files changed, 603 insertions(+), 9 deletions(-) create mode 100644 state/post2-alt-merk.json create mode 100644 uebersicht.html diff --git a/README.md b/README.md index 432dc28..31c2679 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,14 @@ Downloads landen direkt in `~/Downloads`, ohne Browser-Dialog. | Post 2 · Die Geschichte | `post2.html` | Carousel, 6 Slides, erscheint 12.08. | [`POST-2.md`](./POST-2.md) | | Post 2 · Alternative | `post2-alt.html` | Derselbe Beitrag im Theme `modern` | | +**Alle Streifen nebeneinander** zeigt `uebersicht.html`, erreichbar über +*Projekt → Alle Projekte im Streifen*. Die Seite baut die Slides nicht selbst +nach: jedes Projekt kommt als `iframe` mit `?nur=streifen`, und in diesem Modus +blendet die Post-Seite ihre Bedienoberfläche aus, zeigt den Streifen in +natürlicher Größe und **speichert nichts** — drei Kacheln, die beim Schließen +ihren Stand zurückschreiben, wären genau die Falle aus [`POST-2.md`](./POST-2.md) §6. +Skaliert wird außen; ziehen schiebt, das Rad zoomt, `Fit` passt ein. + **Post 2 gibt es zweimal, in zwei Themes.** Projekt und Theme sind zwei verschiedene Dinge: das Projekt sagt, welcher Beitrag, das Theme, wie er aussieht. `notebook` ist die Zeichenblock-Optik mit Raster und Marker, diff --git a/post1.html b/post1.html index 4f4c0e0..c038b57 100644 --- a/post1.html +++ b/post1.html @@ -1,6 +1,13 @@ + PostGrid Post 1 · Lösung @@ -753,6 +760,26 @@ --guide-axis: rgba(48,49,61,.45); --guide-mid: rgba(200,144,26,.75); } + + /* ─── Uebersichts-Modus ────────────────────────────────────────────────── + Die Seite zeigt dann nur den Streifen, in natuerlicher Groesse und ohne + eigenen Rahmen: die Uebersicht setzt sie als iframe ein und skaliert + selbst. Alles Bedienbare faellt weg, auch die Hilfslinien. */ + html[data-nur="streifen"] { overflow: hidden; } + html[data-nur="streifen"] .menubar, + html[data-nur="streifen"] .panel, + html[data-nur="streifen"] .hud, + html[data-nur="streifen"] .guides { display: none !important; } + /* Der Auswahlrahmen ist eine Bedienhilfe und hat in der Uebersicht nichts + verloren -- dort ist keine Slide "die aktuelle". */ + html[data-nur="streifen"] .holder.sel::after { display: none; } + html[data-nur="streifen"] .stage { background: none; height: auto; } + html[data-nur="streifen"] .scroller { position: static; overflow: visible; } + html[data-nur="streifen"] .canvas { padding: 0; display: block; + width: max-content; min-width: 0; height: max-content; min-height: 0; } + html[data-nur="streifen"] body, html[data-nur="streifen"] .app { + height: auto; min-height: 0; background: none; overflow: visible; + } @@ -767,6 +794,8 @@
+ +
@@ -1296,7 +1325,12 @@ Voreinstellung an und schreibt die beim ersten Klick ueber genau die Datei, die gerade nicht verstanden wurde. Solange die Sperre steht, geht nichts mehr raus, weder in die Datei noch in den localStorage. */ - let stateLocked = false; + /* Im Uebersichts-Modus wird nichts gespeichert: drei Kacheln, die beim + Schliessen ihren Stand zurueckschreiben, waeren genau die Falle aus + POST-2.md 6. Die Konstante steht hier oben, weil stateLocked sie + braucht -- weiter unten waere sie noch nicht initialisiert. */ + const NUR_STREIFEN = document.documentElement.dataset.nur === "streifen"; + let stateLocked = NUR_STREIFEN; function lockState(grund) { stateLocked = true; clearTimeout(pushTimer); pushTimer = null; @@ -1487,7 +1521,10 @@ variant = d.variant || variant; tilt = d.tilt || tilt; superSample = d.superSample || superSample; - view = d.view || view; + /* Der Uebersichts-Modus zeigt immer den Streifen. Steht im Stand + "einzeln", waere sonst nur die zuletzt gewaehlte Slide zu sehen -- + und stripWidth() meldete 1080 statt der vollen Breite. */ + view = NUR_STREIFEN ? "streifen" : (d.view || view); tagOut = d.tagOut || tagOut; frameStyle = d.frameStyle || frameStyle; current = Number.isInteger(d.current) ? Math.min(d.current, SLIDES.length - 1) : 0; @@ -1526,7 +1563,8 @@ springt. */ /* zoom === null bedeutet: automatisch einpassen. Sobald der Nutzer zoomt, hält der Wert, bis er auf "Fit" zurückgeht. */ - let zoom = null; + // Im Uebersichts-Modus steht der Streifen fest auf 100 % -- skaliert wird aussen. + let zoom = NUR_STREIFEN ? 1 : null; function stripWidth() { return view === "streifen" ? 1080 * SLIDES.length : 1080; } @@ -1537,6 +1575,16 @@ return Math.min(availW / stripWidth(), availH / 1350, 0.45); } + /* Die Uebersicht muss wissen, wie breit dieser Streifen ist -- die Zahl + der Slides ist je Projekt anders. Sie kommt per postMessage statt ueber + einen Griff ins iframe-Dokument: so bleibt die Uebersicht von den + Interna der Post-Seite unabhaengig. */ + function groesseMelden() { + if (!NUR_STREIFEN || parent === window) return; + parent.postMessage({ hg: "streifen", w: stripWidth(), h: 1350, + titel: document.title }, "*"); + } + function fitStrip() { const wrap = document.getElementById("strip-wrap"); const k = zoom || autoFit(); @@ -1545,6 +1593,7 @@ wrap.style.height = Math.round(1350 * k) + "px"; const lvl = document.getElementById("zoom-fit"); if (lvl) lvl.textContent = zoom ? Math.round(k * 100) + " %" : "Fit"; + groesseMelden(); } function setZoom(k, anchor) { diff --git a/post2-alt.html b/post2-alt.html index cdfabbf..5769ca2 100644 --- a/post2-alt.html +++ b/post2-alt.html @@ -1,6 +1,13 @@ + PostGrid Post 2 · Alternative @@ -951,6 +958,26 @@ --guide-axis: rgba(48,49,61,.45); --guide-mid: rgba(200,144,26,.75); } + + /* ─── Uebersichts-Modus ────────────────────────────────────────────────── + Die Seite zeigt dann nur den Streifen, in natuerlicher Groesse und ohne + eigenen Rahmen: die Uebersicht setzt sie als iframe ein und skaliert + selbst. Alles Bedienbare faellt weg, auch die Hilfslinien. */ + html[data-nur="streifen"] { overflow: hidden; } + html[data-nur="streifen"] .menubar, + html[data-nur="streifen"] .panel, + html[data-nur="streifen"] .hud, + html[data-nur="streifen"] .guides { display: none !important; } + /* Der Auswahlrahmen ist eine Bedienhilfe und hat in der Uebersicht nichts + verloren -- dort ist keine Slide "die aktuelle". */ + html[data-nur="streifen"] .holder.sel::after { display: none; } + html[data-nur="streifen"] .stage { background: none; height: auto; } + html[data-nur="streifen"] .scroller { position: static; overflow: visible; } + html[data-nur="streifen"] .canvas { padding: 0; display: block; + width: max-content; min-width: 0; height: max-content; min-height: 0; } + html[data-nur="streifen"] body, html[data-nur="streifen"] .app { + height: auto; min-height: 0; background: none; overflow: visible; + } @@ -965,6 +992,8 @@
+ +
@@ -2699,7 +2728,12 @@ Voreinstellung an und schreibt die beim ersten Klick ueber genau die Datei, die gerade nicht verstanden wurde. Solange die Sperre steht, geht nichts mehr raus, weder in die Datei noch in den localStorage. */ - let stateLocked = false; + /* Im Uebersichts-Modus wird nichts gespeichert: drei Kacheln, die beim + Schliessen ihren Stand zurueckschreiben, waeren genau die Falle aus + POST-2.md 6. Die Konstante steht hier oben, weil stateLocked sie + braucht -- weiter unten waere sie noch nicht initialisiert. */ + const NUR_STREIFEN = document.documentElement.dataset.nur === "streifen"; + let stateLocked = NUR_STREIFEN; function lockState(grund) { stateLocked = true; clearTimeout(pushTimer); pushTimer = null; @@ -2893,7 +2927,10 @@ variant = d.variant || variant; tilt = d.tilt || tilt; superSample = d.superSample || superSample; - view = d.view || view; + /* Der Uebersichts-Modus zeigt immer den Streifen. Steht im Stand + "einzeln", waere sonst nur die zuletzt gewaehlte Slide zu sehen -- + und stripWidth() meldete 1080 statt der vollen Breite. */ + view = NUR_STREIFEN ? "streifen" : (d.view || view); tagOut = d.tagOut || tagOut; frameStyle = d.frameStyle || frameStyle; bandTon = d.bandTon || bandTon; @@ -2935,7 +2972,8 @@ springt. */ /* zoom === null bedeutet: automatisch einpassen. Sobald der Nutzer zoomt, hält der Wert, bis er auf "Fit" zurückgeht. */ - let zoom = null; + // Im Uebersichts-Modus steht der Streifen fest auf 100 % -- skaliert wird aussen. + let zoom = NUR_STREIFEN ? 1 : null; function stripWidth() { return view === "streifen" ? 1080 * SLIDES.length : 1080; } @@ -2946,6 +2984,16 @@ return Math.min(availW / stripWidth(), availH / 1350, 0.45); } + /* Die Uebersicht muss wissen, wie breit dieser Streifen ist -- die Zahl + der Slides ist je Projekt anders. Sie kommt per postMessage statt ueber + einen Griff ins iframe-Dokument: so bleibt die Uebersicht von den + Interna der Post-Seite unabhaengig. */ + function groesseMelden() { + if (!NUR_STREIFEN || parent === window) return; + parent.postMessage({ hg: "streifen", w: stripWidth(), h: 1350, + titel: document.title }, "*"); + } + function fitStrip() { const wrap = document.getElementById("strip-wrap"); const k = zoom || autoFit(); @@ -2954,6 +3002,7 @@ wrap.style.height = Math.round(1350 * k) + "px"; const lvl = document.getElementById("zoom-fit"); if (lvl) lvl.textContent = zoom ? Math.round(k * 100) + " %" : "Fit"; + groesseMelden(); } function setZoom(k, anchor) { diff --git a/post2.html b/post2.html index 6b57794..b3fab09 100644 --- a/post2.html +++ b/post2.html @@ -1,6 +1,13 @@ + PostGrid Post 2 @@ -844,6 +851,26 @@ --guide-axis: rgba(48,49,61,.45); --guide-mid: rgba(200,144,26,.75); } + + /* ─── Uebersichts-Modus ────────────────────────────────────────────────── + Die Seite zeigt dann nur den Streifen, in natuerlicher Groesse und ohne + eigenen Rahmen: die Uebersicht setzt sie als iframe ein und skaliert + selbst. Alles Bedienbare faellt weg, auch die Hilfslinien. */ + html[data-nur="streifen"] { overflow: hidden; } + html[data-nur="streifen"] .menubar, + html[data-nur="streifen"] .panel, + html[data-nur="streifen"] .hud, + html[data-nur="streifen"] .guides { display: none !important; } + /* Der Auswahlrahmen ist eine Bedienhilfe und hat in der Uebersicht nichts + verloren -- dort ist keine Slide "die aktuelle". */ + html[data-nur="streifen"] .holder.sel::after { display: none; } + html[data-nur="streifen"] .stage { background: none; height: auto; } + html[data-nur="streifen"] .scroller { position: static; overflow: visible; } + html[data-nur="streifen"] .canvas { padding: 0; display: block; + width: max-content; min-width: 0; height: max-content; min-height: 0; } + html[data-nur="streifen"] body, html[data-nur="streifen"] .app { + height: auto; min-height: 0; background: none; overflow: visible; + } @@ -858,6 +885,8 @@
+ +
@@ -2454,7 +2483,12 @@ Voreinstellung an und schreibt die beim ersten Klick ueber genau die Datei, die gerade nicht verstanden wurde. Solange die Sperre steht, geht nichts mehr raus, weder in die Datei noch in den localStorage. */ - let stateLocked = false; + /* Im Uebersichts-Modus wird nichts gespeichert: drei Kacheln, die beim + Schliessen ihren Stand zurueckschreiben, waeren genau die Falle aus + POST-2.md 6. Die Konstante steht hier oben, weil stateLocked sie + braucht -- weiter unten waere sie noch nicht initialisiert. */ + const NUR_STREIFEN = document.documentElement.dataset.nur === "streifen"; + let stateLocked = NUR_STREIFEN; function lockState(grund) { stateLocked = true; clearTimeout(pushTimer); pushTimer = null; @@ -2645,7 +2679,10 @@ variant = d.variant || variant; tilt = d.tilt || tilt; superSample = d.superSample || superSample; - view = d.view || view; + /* Der Uebersichts-Modus zeigt immer den Streifen. Steht im Stand + "einzeln", waere sonst nur die zuletzt gewaehlte Slide zu sehen -- + und stripWidth() meldete 1080 statt der vollen Breite. */ + view = NUR_STREIFEN ? "streifen" : (d.view || view); tagOut = d.tagOut || tagOut; frameStyle = d.frameStyle || frameStyle; current = Number.isInteger(d.current) ? Math.min(d.current, SLIDES.length - 1) : 0; @@ -2684,7 +2721,8 @@ springt. */ /* zoom === null bedeutet: automatisch einpassen. Sobald der Nutzer zoomt, hält der Wert, bis er auf "Fit" zurückgeht. */ - let zoom = null; + // Im Uebersichts-Modus steht der Streifen fest auf 100 % -- skaliert wird aussen. + let zoom = NUR_STREIFEN ? 1 : null; function stripWidth() { return view === "streifen" ? 1080 * SLIDES.length : 1080; } @@ -2695,6 +2733,16 @@ return Math.min(availW / stripWidth(), availH / 1350, 0.45); } + /* Die Uebersicht muss wissen, wie breit dieser Streifen ist -- die Zahl + der Slides ist je Projekt anders. Sie kommt per postMessage statt ueber + einen Griff ins iframe-Dokument: so bleibt die Uebersicht von den + Interna der Post-Seite unabhaengig. */ + function groesseMelden() { + if (!NUR_STREIFEN || parent === window) return; + parent.postMessage({ hg: "streifen", w: stripWidth(), h: 1350, + titel: document.title }, "*"); + } + function fitStrip() { const wrap = document.getElementById("strip-wrap"); const k = zoom || autoFit(); @@ -2703,6 +2751,7 @@ wrap.style.height = Math.round(1350 * k) + "px"; const lvl = document.getElementById("zoom-fit"); if (lvl) lvl.textContent = zoom ? Math.round(k * 100) + " %" : "Fit"; + groesseMelden(); } function setZoom(k, anchor) { diff --git a/state/post2-alt-merk.json b/state/post2-alt-merk.json new file mode 100644 index 0000000..71da2b7 --- /dev/null +++ b/state/post2-alt-merk.json @@ -0,0 +1,158 @@ +{ + "bandTon": "teal", + "bgState": [ + { + "bg": "raster", + "int": "kraeftig" + }, + { + "bg": "raster", + "int": "dezent" + }, + { + "bg": "raster", + "int": "dezent" + }, + { + "bg": "raster", + "int": "dezent" + }, + { + "bg": "raster", + "int": "dezent" + }, + { + "bg": "raster", + "int": "dezent" + } + ], + "current": 4, + "deck": [ + { + "ref": "titel", + "werte": { + "body": "
" + } + }, + { + "ref": "prozesse", + "werte": {} + }, + { + "ref": "wechseln", + "werte": {} + }, + { + "ref": "mehr", + "werte": {} + }, + { + "ref": "verbinden", + "werte": {} + }, + { + "ref": "warteliste", + "werte": { + "body": "Setz dich auf die Warteliste, dann melden wir uns." + } + } + ], + "edits": [ + { + "body": { + "dx": 102, + "dy": 0 + }, + "headline": { + "dx": 37, + "dy": 3, + "size": 88 + }, + "vis": { + "dx": 3, + "dy": -9 + } + }, + { + "body": { + "dx": 0, + "dy": 20 + }, + "headline": { + "dy": 3 + }, + "vis": { + "dx": 113, + "dy": -59 + } + }, + { + "body": { + "dx": 0, + "dy": 20 + }, + "headline": { + "dy": 3 + }, + "vis": { + "dx": -3, + "dy": -88 + } + }, + { + "body": { + "dx": 0, + "dy": 20 + }, + "headline": { + "dx": 0, + "dy": 3 + }, + "vis": { + "dx": -68, + "dy": -25, + "size": 1028 + } + }, + { + "body": { + "dy": 20 + }, + "headline": { + "dy": 3 + }, + "vis": { + "dx": 33, + "dy": -138 + } + }, + { + "body": { + "dy": 20 + }, + "headline": { + "dy": 3 + }, + "vis": { + "dx": 12, + "dy": 74, + "size": 1184 + } + } + ], + "frameStyle": "aus", + "layoutState": [ + "standard", + "standard", + "standard", + "standard", + "standard", + "standard" + ], + "superSample": 3, + "tagOut": "an", + "tilt": "an", + "v": 7, + "variant": "hell", + "view": "streifen" +} diff --git a/uebersicht.html b/uebersicht.html new file mode 100644 index 0000000..d8065b4 --- /dev/null +++ b/uebersicht.html @@ -0,0 +1,281 @@ + + + + + +PostGrid · Alle Projekte + + + + + +
+ PostGrid +
+ +
+ + + +
+ +
+
+
+ +
+
+
+
+
+

Lade Streifen ...

+
+ + + +
+
+
+ + + +