tobias/gwoe-antragspruefer
1
0
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: Scorecard-Browser-Preview skaliert auf Viewport-Breite

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
Dotty Dotter 2026-05-07 14:05:08 +02:00
parent a5ca3da842
commit d2c9a805b2
1 changed files with 38 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
app/templates/v2/screens/scorecard_portrait.html
View File

@ -29,9 +29,12 @@
} }
*{box-sizing:border-box;margin:0;padding:0} *{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;} 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{ body{
width:{{ width }}px;height:{{ height }}px;overflow:hidden; width:{{ width }}px;height:{{ height }}px;overflow:hidden;
} }
.card-viewport { width: 100%; height: 100%; }
.card{ .card{
width:1080px;height:1350px; width:1080px;height:1350px;
@ -40,6 +43,39 @@
display:grid;grid-template-rows: 88px 1fr 96px; 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 */ /* Kopfleiste */
.head{ .head{
border-bottom:2px solid var(--rule); border-bottom:2px solid var(--rule);
@ -147,6 +183,7 @@
</head> </head>
<body> <body>
<div class="card-viewport">
<div class="card"> <div class="card">
<header class="head"> <header class="head">
@ -225,6 +262,7 @@
<div class="qr" aria-hidden="true"></div> <div class="qr" aria-hidden="true"></div>
</footer> </footer>
</div> </div>
</div>{# .card-viewport #}
</body> </body>
</html> </html>