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

fix: Scorecard-Browser-Skalierung via JS (CSS calc-scale-Unit-Mismatch behoben)

Browse Source 
Mein vorheriger CSS-Versuch transform: scale(calc(min(1080px, 100vw-40px)
/ 1080)) liefert eine px-Ausgabe — scale() braucht aber unitless. Folge:
keine Skalierung, Card wird nur abgeschnitten (auf Phone sah man nur
linkes Ecke).

Fix: JS-basiert. adjustScale() berechnet das Verhaeltnis
window.innerWidth/1080 (max 1.0 bei Desktop), setzt transform: scale()
auf .card und passt die .card-viewport-Dimensionen an. Re-fired bei
window.resize + load.

WeasyPrint fuehrt kein JS aus → PDF unbeeinflusst (Card bleibt 1:1
1080×1350).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dotty Dotter 2026-05-07 14:06:37 +02:00
parent d2c9a805b2
commit 2b5062df08
1 changed files with 35 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,7 +44,10 @@
}
/* Browser-Preview — skaliert die Card auf Viewport-Breite, scrollbar
wenn die Hoehe nicht reicht. WeasyPrint ignoriert @media screen. */
wenn die Hoehe nicht reicht. WeasyPrint ignoriert @media screen.
Die eigentliche Skalierung wird per JS gesetzt (CSS calc/scale
mit Unit-Mismatch geht nicht), CSS-Defaults sorgen nur fuer das
Drumherum. */
@media screen {
html, body {
background: #2a2724 !important;
@ -61,15 +64,14 @@
align-items: flex-start;
}
.card-viewport {
width: min(1080px, calc(100vw - 40px));
aspect-ratio: 1080 / 1350;
width: 1080px;
height: 1350px;
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;
@ -264,5 +266,34 @@
</div>
</div>{# .card-viewport #}
<script>
/* Browser-Preview-Skalierung: passt die 1080×1350-Card proportional auf
den verfuegbaren Viewport an. WeasyPrint fuehrt kein JS aus → PDF
bleibt bei skalierungsfreier Originalgroesse. */
(function () {
function adjustScale() {
var card = document.querySelector('.card');
var viewport = document.querySelector('.card-viewport');
if (!card || !viewport) return;
var pad = 40;
var availW = window.innerWidth - pad;
var availH = window.innerHeight - pad;
var scaleW = availW / 1080;
var scaleH = availH / 1350;
var scale = Math.min(scaleW, 1); // bei Desktop nicht hochskalieren
if (availH < 1350) {
// Wenn die Hoehe nicht reicht: scrollen statt nochmal verkleinern
// (User kann scrollen, lieber lesbar als mini).
}
card.style.transform = 'scale(' + scale + ')';
viewport.style.width = (1080 * scale) + 'px';
viewport.style.height = (1350 * scale) + 'px';
}
adjustScale();
window.addEventListener('resize', adjustScale);
window.addEventListener('load', adjustScale);
})();
</script>
</body>
</html>