m/onepager
1
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Impressum als Klick-Overlay statt inline im Footer #4

New Issue
Open
opened 2026-04-25 23:33:10 +00:00 by mAi · 2 comments
mAi commented 2026-04-25 23:33:10 +00:00
Collaborator
Copy Link

Problem

Der aktuelle shared/impressum.js rendert das Impressum direkt in den Footer (oder Body) der Seite — bei data-variant="full" (z.B. ichbinotto.de, lexsiebels.de, mai-otto.de, smartin3.de, martinsiebels.de) bedeutet das: vollständiger § 5 TMG-Block mit Adresse, immer sichtbar. Sieht auf gestalteten Onepagern wie ichbinotto.de unschön aus — bricht den Look, lenkt vom Inhalt ab.

m: "das zentrale Impressum (zB für ichbinotto.de) sieht nicht gut aus - können wir das verbessern? Vielleicht auch nur auf Knopfdruck, nicht direkt anzeigen?"

Lösung

shared/impressum.js so umbauen, dass es immer nur einen kleinen Trigger (Link/Button "Impressum") in den Footer rendert. Klick darauf öffnet ein Overlay/Modal mit dem vollen Inhalt. ESC und Klick-außerhalb schließen es wieder.

Verhalten

  • Trigger: klein, dezent, am Ende der Seite (im footer, alternativ body). Text: "Impressum". Stil erbt Farben vom Container, opacity ~0.6.
  • Overlay:
    • zentriert, semi-transparenter Backdrop
    • schmale Karte mit dem full-Block (oder dem minimal-Einzeiler — dann ist der Klick allerdings overkill, siehe unten)
    • Schließen-Button (×), ESC-Taste, Klick auf Backdrop
    • Fokus-Trap erstmal nicht nötig — Onepager, statisch, kein App-Kontext
    • Animation: kurzes Fade-in, kein Bling

Variant-Logik

  • data-variant="full": Trigger-Link → Overlay mit dem vollen Block. Das ist der Hauptfall.
  • data-variant="minimal": Hier reicht ein Einzeiler ("Ein Projekt von msbls.de"). Optionen:
    • (a) weiterhin inline rendern (alter look) — minimaler Eingriff, einfacher Code.
    • (b) auch hinter Klick verstecken — konsistent, aber unnötig für eine Zeile.
    • Empfehlung: (a) — minimal bleibt inline, full geht ins Overlay. Begründung: minimal stört nicht; full ist das Problem. Kein Bedarf für Konsistenz um ihrer selbst willen.

API / Backward-Compat

  • Keine Änderung am Script-Tag. Alle Sites bleiben: 
    <script src="/shared/impressum.js" data-owner="flexsiebels" data-variant="full"></script>
  • Owners (msbls, flexsiebels, martinsiebels) und Texte unverändert.
  • Render-Ziel-Fallback (#impressum → footer .container → footer → body) für den Trigger weiterhin gültig.

Scope

  1. shared/impressum.js umbauen.
  2. CSS inline im Script (wie bisher) — kein neues Stylesheet, keine externen Abhängigkeiten.
  3. Lokal mit ./build.sh testen, ein Beispiel-Site (ichbinotto.de) im Browser prüfen — Trigger sichtbar, Overlay öffnet, ESC/Klick-außen schließt, mobile/desktop OK.
  4. Smoke-Test: einer mit full (z.B. ichbinotto.de) und einer mit minimal (z.B. heygoldi.de) — beide weiter wie erwartet.
  5. Commit auf eigener Branch, merge nach main, push (Dokploy auto-deploy).

Nicht im Scope

  • Neue Owner / neue Texte.
  • Redesign der Sites selbst.
  • i18n-Anpassung (das Wort "Impressum" bleibt deutsch).

Priorität

p2 — Kosmetik / UX, kein blocker.

Files

  • shared/impressum.js (Hauptarbeit)
  • ggf. einer der Sites zum manuellen QA — keine Änderungen an Sites selbst nötig
## Problem Der aktuelle `shared/impressum.js` rendert das Impressum direkt in den Footer (oder Body) der Seite — bei `data-variant="full"` (z.B. ichbinotto.de, lexsiebels.de, mai-otto.de, smartin3.de, martinsiebels.de) bedeutet das: vollständiger § 5 TMG-Block mit Adresse, immer sichtbar. Sieht auf gestalteten Onepagern wie ichbinotto.de unschön aus — bricht den Look, lenkt vom Inhalt ab. m: "das zentrale Impressum (zB für ichbinotto.de) sieht nicht gut aus - können wir das verbessern? Vielleicht auch nur auf Knopfdruck, nicht direkt anzeigen?" ## Lösung `shared/impressum.js` so umbauen, dass es **immer nur einen kleinen Trigger** (Link/Button "Impressum") in den Footer rendert. Klick darauf öffnet ein **Overlay/Modal** mit dem vollen Inhalt. ESC und Klick-außerhalb schließen es wieder. ### Verhalten - Trigger: klein, dezent, am Ende der Seite (im `footer`, alternativ `body`). Text: "Impressum". Stil erbt Farben vom Container, opacity ~0.6. - Overlay: - zentriert, semi-transparenter Backdrop - schmale Karte mit dem `full`-Block (oder dem `minimal`-Einzeiler — dann ist der Klick allerdings overkill, siehe unten) - Schließen-Button (×), ESC-Taste, Klick auf Backdrop - Fokus-Trap erstmal nicht nötig — Onepager, statisch, kein App-Kontext - Animation: kurzes Fade-in, kein Bling ### Variant-Logik - `data-variant="full"`: Trigger-Link → Overlay mit dem vollen Block. **Das ist der Hauptfall.** - `data-variant="minimal"`: Hier reicht ein Einzeiler ("Ein Projekt von msbls.de"). Optionen: - **(a)** weiterhin inline rendern (alter look) — minimaler Eingriff, einfacher Code. - **(b)** auch hinter Klick verstecken — konsistent, aber unnötig für eine Zeile. - **Empfehlung: (a)** — minimal bleibt inline, full geht ins Overlay. Begründung: minimal stört nicht; full ist das Problem. Kein Bedarf für Konsistenz um ihrer selbst willen. ### API / Backward-Compat - Keine Änderung am Script-Tag. Alle Sites bleiben: ```html <script src="/shared/impressum.js" data-owner="flexsiebels" data-variant="full"></script> ``` - Owners (msbls, flexsiebels, martinsiebels) und Texte unverändert. - Render-Ziel-Fallback (`#impressum` → `footer .container` → `footer` → `body`) für den Trigger weiterhin gültig. ## Scope 1. `shared/impressum.js` umbauen. 2. CSS inline im Script (wie bisher) — kein neues Stylesheet, keine externen Abhängigkeiten. 3. Lokal mit `./build.sh` testen, ein Beispiel-Site (ichbinotto.de) im Browser prüfen — Trigger sichtbar, Overlay öffnet, ESC/Klick-außen schließt, mobile/desktop OK. 4. Smoke-Test: einer mit `full` (z.B. ichbinotto.de) und einer mit `minimal` (z.B. heygoldi.de) — beide weiter wie erwartet. 5. Commit auf eigener Branch, merge nach main, push (Dokploy auto-deploy). ## Nicht im Scope - Neue Owner / neue Texte. - Redesign der Sites selbst. - i18n-Anpassung (das Wort "Impressum" bleibt deutsch). ## Priorität p2 — Kosmetik / UX, kein blocker. ## Files - `shared/impressum.js` (Hauptarbeit) - ggf. einer der Sites zum manuellen QA — keine Änderungen an Sites selbst nötig
mAi self-assigned this 2026-04-25 23:33:10 +00:00
mAi commented 2026-04-25 23:36:52 +00:00
Author
Collaborator
Copy Link

Done — shared/impressum.js umgebaut.

Verhalten:

  • data-variant="full": kleiner "Impressum"-Trigger im Footer (opacity 0.6, erbt Farben), Klick öffnet zentriertes Overlay mit semi-transparentem Backdrop und schmaler Karte. Inhalt: voller § 5 TMG-Block. Schließen via ×-Button, ESC oder Backdrop-Klick. Kurzes Fade-in (transition opacity + transform).
  • data-variant="minimal": unverändert inline (Einzeiler).
  • API unverändert — alle Sites behalten ihren bestehenden Script-Tag.
  • ARIA: role="dialog", aria-modal="true", Fokus springt auf Close-Button beim Öffnen, zurück zum Trigger beim Schließen. Kein Fokus-Trap (wie spezifiziert).
  • Alles inline im Script (kein neues Stylesheet, keine externen Abhängigkeiten).

QA:

  • node -c shared/impressum.js → Syntax OK
  • ./build.sh → 59 sites built, build/shared/impressum.js enthält neuen Code
  • Lokal über python3 -m http.server getestet — ichbinotto.de/index.html und heygoldi.de/index.html werden korrekt ausgeliefert, impressum.js lädt
  • Visueller Browser-Smoke-Test (Trigger sichtbar, Overlay öffnet, ESC/Backdrop schließt, mobile/desktop) → bitte nach Deploy auf den Live-Sites prüfen

Branch: mai/hermes/issue-4-impressum-als — gepusht, wartet auf Merge nach main durch head.

Commit: https://mgit.msbls.de/m/onepager/commit/098a7ad

Sites mit data-variant="full" (greift Overlay-Verhalten):

  • ichbinotto.de
  • lexsiebels.de
  • mai-otto.de
  • smartin3.de
  • martinsiebels.de
Done — `shared/impressum.js` umgebaut. **Verhalten:** - `data-variant="full"`: kleiner "Impressum"-Trigger im Footer (opacity 0.6, erbt Farben), Klick öffnet zentriertes Overlay mit semi-transparentem Backdrop und schmaler Karte. Inhalt: voller § 5 TMG-Block. Schließen via ×-Button, ESC oder Backdrop-Klick. Kurzes Fade-in (transition opacity + transform). - `data-variant="minimal"`: unverändert inline (Einzeiler). - API unverändert — alle Sites behalten ihren bestehenden Script-Tag. - ARIA: `role="dialog"`, `aria-modal="true"`, Fokus springt auf Close-Button beim Öffnen, zurück zum Trigger beim Schließen. Kein Fokus-Trap (wie spezifiziert). - Alles inline im Script (kein neues Stylesheet, keine externen Abhängigkeiten). **QA:** - `node -c shared/impressum.js` → Syntax OK - `./build.sh` → 59 sites built, `build/shared/impressum.js` enthält neuen Code - Lokal über `python3 -m http.server` getestet — `ichbinotto.de/index.html` und `heygoldi.de/index.html` werden korrekt ausgeliefert, `impressum.js` lädt - Visueller Browser-Smoke-Test (Trigger sichtbar, Overlay öffnet, ESC/Backdrop schließt, mobile/desktop) → bitte nach Deploy auf den Live-Sites prüfen **Branch:** `mai/hermes/issue-4-impressum-als` — gepusht, wartet auf Merge nach main durch head. **Commit:** https://mgit.msbls.de/m/onepager/commit/098a7ad Sites mit `data-variant="full"` (greift Overlay-Verhalten): - ichbinotto.de - lexsiebels.de - mai-otto.de - smartin3.de - martinsiebels.de
mAi commented 2026-04-26 08:34:46 +00:00
Author
Collaborator
Copy Link

Update — m's Feedback eingearbeitet:

modal muss theme aware oder neutral sein und darf das display nicht breiter machen / den frame sprengen — ichbinotto.de ist jetzt viel zu breit geworden

Fixes (Commit 59833b5):

  • Trigger ist jetzt ein <a>-Link mit exakt der gleichen CSS-Hülle wie die inline-minimal-Variante (text-align:center; font-size:0.75rem; opacity:0.6; padding:12px 0; line-height:1.7). Kein Footer-Layout-Shift mehr — Höhe/Breite des Footers sind identisch zu vorher (Button-Default-Padding war der Übeltäter).
  • Modal ist theme-aware: nutzt --bg-card, --text, --accent, --border, --radius, --font-primary vom Host (shared/css/variables.css). Sites ohne Variablen bekommen neutrale Dark-Fallbacks. Auf ichbinotto.de & Co. matcht die Karte jetzt das Site-Theme.
  • Frame-safe: max-width: min(420px, calc(100vw - 32px)) + box-sizing:border-box + overflow-wrap:break-word — Karte sprengt nie den Viewport, auch nicht auf 320px-Mobile oder bei langen E-Mail-Adressen.
  • Body-scroll-lock beim Öffnen, mit Restoration des vorherigen overflow-Werts beim Schließen.

Branch mai/hermes/issue-4-impressum-als ist gepusht. Commit: https://mgit.msbls.de/m/onepager/commit/59833b5

Update — m's Feedback eingearbeitet: > modal muss theme aware oder neutral sein und darf das display nicht breiter machen / den frame sprengen — ichbinotto.de ist jetzt viel zu breit geworden **Fixes (Commit 59833b5):** - **Trigger ist jetzt ein `<a>`-Link** mit **exakt der gleichen CSS-Hülle** wie die inline-minimal-Variante (`text-align:center; font-size:0.75rem; opacity:0.6; padding:12px 0; line-height:1.7`). Kein Footer-Layout-Shift mehr — Höhe/Breite des Footers sind identisch zu vorher (Button-Default-Padding war der Übeltäter). - **Modal ist theme-aware**: nutzt `--bg-card`, `--text`, `--accent`, `--border`, `--radius`, `--font-primary` vom Host (`shared/css/variables.css`). Sites ohne Variablen bekommen neutrale Dark-Fallbacks. Auf ichbinotto.de & Co. matcht die Karte jetzt das Site-Theme. - **Frame-safe**: `max-width: min(420px, calc(100vw - 32px))` + `box-sizing:border-box` + `overflow-wrap:break-word` — Karte sprengt nie den Viewport, auch nicht auf 320px-Mobile oder bei langen E-Mail-Adressen. - **Body-scroll-lock** beim Öffnen, mit Restoration des vorherigen `overflow`-Werts beim Schließen. Branch `mai/hermes/issue-4-impressum-als` ist gepusht. Commit: https://mgit.msbls.de/m/onepager/commit/59833b5
mAi added the
done
 label 2026-04-30 14:28:14 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
done
Work completed, waiting for close by m
needs-review
Awaiting review
No Label
done
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
mAi m
No Assignees mAi
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: m/onepager#4
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?