From 4dad49678880fa3a0e222358c5bdccc3bd19a8b5 Mon Sep 17 00:00:00 2001
From: Eduard Wisch <data@data-it-solution.de>
Date: Thu, 9 Apr 2026 13:08:38 +0200
Subject: [PATCH] fix: Leerer Bericht-Editor zeigt DIN A4
 Hochformat-Platzhalter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wenn noch keine Seite geladen ist, wirkte der Editor mit dem winzigen
1x1-Canvas sehr abgebastelt. Jetzt zeigt der Canvas-Wrap im leeren
Zustand eine echte A4-Hochformat-Fläche (max 900px, aspect-ratio 1:1.414)
mit Hinweistext 'Seite wählen oder Fotos hinzufügen'.

- .bericht-canvas-wrap.empty setzt aspect-ratio auf A4
- ::after Pseudo-Element als Hinweistext
- init() markiert den Wrap als 'empty'
- loadPage() entfernt die Klasse sobald ein Bild geladen wird
- min-height 400px damit auch ohne Content Platz da ist

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]
---
 css/bericht.css | 34 ++++++++++++++++++++++++++++++++--
 js/editor.js    | 10 +++++++++-
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/css/bericht.css b/css/bericht.css
index 36a3b45..f0662eb 100644
--- a/css/bericht.css
+++ b/css/bericht.css
@@ -172,12 +172,42 @@
 .bericht-canvas-wrap {
     position: relative;
     background: var(--colorbackvmenu1, #444);
-    padding: 10px; border-radius: 4px;
+    padding: 20px; border-radius: 4px;
     display: flex; align-items: flex-start; justify-content: center;
+    min-height: 400px;
+}
+.bericht-canvas-wrap.empty {
+    align-items: center;
+    padding: 40px 20px;
 }
 /* WICHTIG: kein max-width auf #pdf-canvas, sonst weicht display- von buffer-size ab
    und das Fabric-Overlay rutscht weg. Stattdessen rendert JS auf passende Größe. */
-#pdf-canvas { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.4); display: block; }
+#pdf-canvas {
+    background: #fff;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
+    display: block;
+}
+/* Leerer Zustand: A4 Hochformat anzeigen, damit der Canvas nicht winzig wirkt */
+.bericht-canvas-wrap.empty #pdf-canvas {
+    width: 100%;
+    max-width: 900px;
+    aspect-ratio: 1 / 1.414; /* DIN A4 */
+    height: auto;
+}
+.bericht-canvas-wrap.empty::after {
+    content: "Seite wählen oder Fotos hinzufügen";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #aaa;
+    font-size: 16px;
+    pointer-events: none;
+    text-align: center;
+    background: rgba(255,255,255,0.85);
+    padding: 8px 16px;
+    border-radius: 6px;
+}
 #fabric-canvas.fabric-overlay { position: absolute !important; pointer-events: auto; }
 
 .bericht-page-note { margin-top: 8px; }
diff --git a/js/editor.js b/js/editor.js
index 2148117..3c44e25 100644
--- a/js/editor.js
+++ b/js/editor.js
@@ -63,6 +63,10 @@
 
     /* ---------- Init ---------- */
     function init() {
+        // Leer-Zustand: Canvas-Wrap als A4-Hochformat-Platzhalter markieren
+        const wrapEmpty = document.querySelector('.bericht-canvas-wrap');
+        if (wrapEmpty) wrapEmpty.classList.add('empty');
+
         // Gespeicherte Einstellungen anwenden — VOR Fabric-Init
         const s = loadSettings();
         const colorEl = document.getElementById('tool-color');
@@ -145,7 +149,11 @@
 
         currentPageBuffer = buf;
         currentPageMime = ct;
-        currentPageRotation = 0; // wird gleich aus loadPageMeta überschrieben falls gespeichert
+        currentPageRotation = 0;
+
+        // Empty-Status beenden — Canvas bekommt jetzt echten Inhalt
+        const wrapL = document.querySelector('.bericht-canvas-wrap');
+        if (wrapL) wrapL.classList.remove('empty'); // wird gleich aus loadPageMeta überschrieben falls gespeichert
 
         fabricCanvas.clear();
         document.getElementById('page-note').value = '';