From d2c9a805b2826d0940adbfcc901b0f138e768c4a Mon Sep 17 00:00:00 2001 From: Dotty Dotter Date: Thu, 7 May 2026 14:05:08 +0200 Subject: [PATCH] feat: Scorecard-Browser-Preview skaliert auf Viewport-Breite MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit User: 'Kannst du den Viewport so veraendern, dass ich da scrollen kann? Oder im Idealfall, dass sie ihn klein angezeigt wird.' Bisher hatte die Scorecard-Page body { width:1080px; height:1350px; overflow:hidden } — fest fuer den PDF-Render. Im Browser wurde die Card deshalb nicht skaliert oder scrollbar gemacht; auf kleinerem Viewport einfach abgeschnitten. Loesung: @media screen-Block, den nur Browser sehen (WeasyPrint rendert mit media=print, ignoriert ihn). Wrapper-Div .card-viewport bekommt aspect-ratio 1080/1350 und max-width 1080px (oder viewport-40px). Die Card wird per CSS-transform scale() proportional zur Viewport-Breite verkleinert. Auf einem normalen Desktop (1920x1080) erscheint die Card jetzt in Originalgroesse zentriert mit dunklem Rahmen drumherum, auf Mobile skaliert sie sich passend auf die Bildschirmbreite. PDF-Generierung unbeeinflusst: WeasyPrint sieht nur die Default-CSS (body 1080x1350, card 1080x1350, kein transform). Co-Authored-By: Claude Opus 4.7 (1M context) --- .../v2/screens/scorecard_portrait.html | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/app/templates/v2/screens/scorecard_portrait.html b/app/templates/v2/screens/scorecard_portrait.html index f3bfc56..93e5b67 100644 --- a/app/templates/v2/screens/scorecard_portrait.html +++ b/app/templates/v2/screens/scorecard_portrait.html @@ -29,9 +29,12 @@ } *{box-sizing:border-box;margin:0;padding:0} html,body{background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;} + /* Print/PDF-Defaults — WeasyPrint nutzt media=print und sieht NUR + diese Werte. Body == Card-Groesse, ohne Wrapper. */ body{ width:{{ width }}px;height:{{ height }}px;overflow:hidden; } + .card-viewport { width: 100%; height: 100%; } .card{ width:1080px;height:1350px; @@ -40,6 +43,39 @@ display:grid;grid-template-rows: 88px 1fr 96px; } + /* Browser-Preview — skaliert die Card auf Viewport-Breite, scrollbar + wenn die Hoehe nicht reicht. WeasyPrint ignoriert @media screen. */ + @media screen { + html, body { + background: #2a2724 !important; + width: auto !important; + height: auto !important; + min-height: 100vh; + overflow: auto !important; + margin: 0; + padding: 20px; + } + body { + display: flex; + justify-content: center; + align-items: flex-start; + } + .card-viewport { + width: min(1080px, calc(100vw - 40px)); + aspect-ratio: 1080 / 1350; + overflow: hidden; + position: relative; + box-shadow: 0 30px 80px rgba(0,0,0,0.5); + background: var(--paper); + } + .card { + transform: scale(calc(min(1080px, 100vw - 40px) / 1080)); + transform-origin: top left; + position: absolute; + top: 0; left: 0; + } + } + /* Kopfleiste */ .head{ border-bottom:2px solid var(--rule); @@ -147,6 +183,7 @@ +
@@ -225,6 +262,7 @@
+
{# .card-viewport #}