feat: Scorecard Portrait neu komponiert — Score-Hero-Band, sichtbare Neutral-Cells, Title gekuerzt
Visuelle Probleme im vorigen Render: Title dominierte oben (5+ Zeilen, 36pt), Matrix wirkte loechrig (Neutral-Cells #f0f0f0 verschwanden im Karten-Hintergrund), Score-Row war optisch zu zart fuer den Anker. Neue Komposition: - Title kompakt: 26pt, line-height 1.18, line-clamp 3 — beschreibt aber dominiert nicht mehr. - Score-Hero-Block: tonierter Hintergrund passend zur Score-Farbe (gruen/orange/rot) plus dicker Border-left, full-width — wird zum visuellen Anker statt nur zwischen Trennlinien zu sitzen. Score 132pt, Verdict 30pt. - Matrix: 480x480 mit weissem Frame + zarter Border, 6px gap. Neutral- Cells (r-0) jetzt #d8d8d2 statt #f0f0f0 → klar sichtbar im Grid, Loch-Look weg. - Legende: Swatches 22px statt 18px, gleiche Sichtbarkeit wie Cells. - Begruendung: line-clamp 4 (statt 9), eigene 'Begruendung'-Sublabel, obere Trennlinie — bewusst schmal als Ausklang. Hierarchie: Score-Hero ist optisch dominant (Anker), Matrix das datenreiche Zentrum, Title deskriptiv aber zurueckhaltend, Begruendung ergaenzt ohne zu konkurrieren. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dotty Dotter
parent
2f9be62649
commit
c6278d8453
@ -136,7 +136,9 @@
|
||||
}
|
||||
.cell.r-pp { background: #889E33; color: #fff; }
|
||||
.cell.r-p { background: #cddaa1; color: #44570a; }
|
||||
.cell.r-0 { background: #f0f0f0; color: #888; }
|
||||
/* r-0: deutlich sichtbarer Grauton, sonst verschwindet Neutral-Zelle
|
||||
im hellen Karten-Hintergrund und das Grid sieht loechrig aus. */
|
||||
.cell.r-0 { background: #d8d8d2; color: #6a6a64; }
|
||||
.cell.r-n { background: #efc9c3; color: #931515; }
|
||||
.cell.r-nn { background: #9A2A2A; color: #fff; }
|
||||
|
||||
@ -150,103 +152,140 @@
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
/* ── portrait Layout — kompakt, weniger Rand.
|
||||
justify-content: space-between verteilt etwaige Slack-Hoehe
|
||||
gleichmaessig zwischen die Sektionen statt unten zu stapeln. */
|
||||
/* ── portrait Layout — ausbalancierte vertikale Komposition.
|
||||
|
||||
Sektions-Hierarchie (top → bottom):
|
||||
1. Header-Bar (kicker + meta) ~50 px
|
||||
2. Title (kompakt, 3 Zeilen max) ~150 px
|
||||
3. Fraktionen-Pills ~40 px
|
||||
4. Score-Hero (full-width Farbband) ~280 px
|
||||
5. Matrix-Block (Grid + Legende) ~480 px
|
||||
6. Begründung (4 Zeilen) ~140 px
|
||||
7. Footer (absolut, ~50 px vom unteren Rand)
|
||||
Summe ~1190 + Padding 58 + Gaps ~30 = 1280 / 1350 → ~70 px Slack,
|
||||
gleichmaessig per justify-content space-between auf die fuenf
|
||||
inneren Sektionen verteilt.
|
||||
|
||||
Visuelle Hierarchie: Score-Hero ist optisch prominent (groesster
|
||||
Farbblock + groesste Zahl), Matrix als datenreiches Zentrum, Title
|
||||
deskriptiv aber zurueckhaltend, Begruendung als Ausklang. */
|
||||
.portrait-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
margin-top: 14px;
|
||||
padding-bottom: 26px;
|
||||
gap: 18px;
|
||||
margin-top: 18px;
|
||||
padding-bottom: 28px;
|
||||
}
|
||||
|
||||
.portrait-title {
|
||||
font-size: 36pt;
|
||||
line-height: 1.1;
|
||||
font-size: 26pt;
|
||||
line-height: 1.18;
|
||||
color: #1f1f1f;
|
||||
font-weight: 700;
|
||||
/* Begrenze Titel auf 3 Zeilen — sonst dominiert er die Karte. */
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.portrait-fraktionen {
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
font-size: 14pt;
|
||||
font-size: 13pt;
|
||||
color: #555;
|
||||
}
|
||||
.portrait-fraktionen .pill {
|
||||
display: inline-block;
|
||||
padding: 3px 12px;
|
||||
padding: 4px 14px;
|
||||
background: rgba(136, 158, 51, 0.18);
|
||||
color: #44570a;
|
||||
border-radius: 3px;
|
||||
margin-right: 6px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.portrait-score-row {
|
||||
|
||||
/* ── Score-Hero: full-width Farbband, dominanter visueller Anker ── */
|
||||
.portrait-score-hero {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
padding: 12px 0;
|
||||
border-top: 1px solid rgba(0,0,0,0.08);
|
||||
border-bottom: 1px solid rgba(0,0,0,0.08);
|
||||
gap: 32px;
|
||||
padding: 22px 30px;
|
||||
background:
|
||||
{% if score_color == '#1a7f37' %}#e8eed1
|
||||
{% elif score_color == '#bf6c10' %}#f4e6cf
|
||||
{% else %}#f1dcda{% endif %};
|
||||
border-left: 8px solid {{ score_color }};
|
||||
border-radius: 4px;
|
||||
}
|
||||
.portrait-score-num {
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
font-size: 130pt;
|
||||
font-size: 132pt;
|
||||
font-weight: 700;
|
||||
line-height: 0.92;
|
||||
line-height: 0.85;
|
||||
color: {{ score_color }};
|
||||
flex-shrink: 0;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
.portrait-score-num .slash {
|
||||
font-size: 60pt;
|
||||
opacity: 0.5;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.portrait-score-num .slash { font-size: 64pt; opacity: 0.45; }
|
||||
.portrait-score-side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
.portrait-score-label {
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
font-size: 13pt;
|
||||
font-size: 12pt;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
letter-spacing: 0.14em;
|
||||
color: #555;
|
||||
}
|
||||
.portrait-verdict {
|
||||
font-size: 28pt;
|
||||
font-size: 30pt;
|
||||
color: {{ score_color }};
|
||||
font-weight: 700;
|
||||
line-height: 1.12;
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
/* ── Matrix-Block: Grid links, Legende rechts, vertikal zentriert ── */
|
||||
.portrait-matrix-block {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 22px;
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
}
|
||||
.portrait-matrix {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-template-rows: repeat(5, 1fr);
|
||||
gap: 4px;
|
||||
width: 460px;
|
||||
height: 460px;
|
||||
gap: 6px;
|
||||
width: 480px;
|
||||
height: 480px;
|
||||
flex-shrink: 0;
|
||||
padding: 8px;
|
||||
background: #fff;
|
||||
border: 1px solid #e0e0db;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.portrait-matrix-legend {
|
||||
flex: 1;
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
font-size: 12pt;
|
||||
color: #555;
|
||||
line-height: 1.5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: #444;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.portrait-matrix-legend .l-title {
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: #009DA5;
|
||||
margin-bottom: 10px;
|
||||
letter-spacing: 0.06em;
|
||||
font-size: 13pt;
|
||||
margin-bottom: 14px;
|
||||
letter-spacing: 0.08em;
|
||||
font-size: 12pt;
|
||||
}
|
||||
.portrait-matrix-legend ul {
|
||||
list-style: none;
|
||||
@ -256,20 +295,34 @@
|
||||
.portrait-matrix-legend li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 6px;
|
||||
gap: 10px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
.portrait-matrix-legend .swatch {
|
||||
width: 18px; height: 18px; border-radius: 2px; flex-shrink: 0;
|
||||
width: 22px; height: 22px; border-radius: 2px; flex-shrink: 0;
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.portrait-summary {
|
||||
font-size: 15pt;
|
||||
line-height: 1.5;
|
||||
font-size: 13pt;
|
||||
line-height: 1.55;
|
||||
color: #333;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 9;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid rgba(0,0,0,0.08);
|
||||
padding-top: 14px;
|
||||
}
|
||||
.portrait-summary-label {
|
||||
display: block;
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
font-size: 10pt;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: #009DA5;
|
||||
font-weight: 700;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
/* ── Footer ── */
|
||||
@ -299,20 +352,23 @@
|
||||
|
||||
{% if is_portrait %}
|
||||
<div class="portrait-body">
|
||||
<div class="portrait-title">{{ assessment.title|truncate(150, end="…") }}</div>
|
||||
<div class="portrait-title">{{ assessment.title|truncate(160, end="…") }}</div>
|
||||
|
||||
{% if fraktionen %}
|
||||
<div class="portrait-fraktionen">
|
||||
Eingebracht von:
|
||||
Eingebracht von
|
||||
{% for f in fraktionen %}<span class="pill">{{ f }}</span>{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="portrait-score-row">
|
||||
|
||||
<div class="portrait-score-hero">
|
||||
<div class="portrait-score-num">{{ "%.1f"|format(assessment.gwoe_score) }}<span class="slash">/10</span></div>
|
||||
<div class="portrait-score-side">
|
||||
<div class="portrait-score-label">Gemeinwohl-Score</div>
|
||||
<div class="portrait-verdict">{{ assessment.empfehlung.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="portrait-matrix-block">
|
||||
<div class="portrait-matrix matrix">
|
||||
{% for r in ['A','B','C','D','E'] %}
|
||||
@ -324,17 +380,21 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="portrait-matrix-legend">
|
||||
<div class="l-title">Matrix 5×5</div>
|
||||
<div class="l-title">GWÖ-Matrix 5×5</div>
|
||||
<ul>
|
||||
<li><span class="swatch" style="background:#889E33;"></span>++ stark fördernd</li>
|
||||
<li><span class="swatch" style="background:#cddaa1;"></span>+ fördernd</li>
|
||||
<li><span class="swatch" style="background:#f0f0f0;border:1px solid #ccc;"></span>○ neutral</li>
|
||||
<li><span class="swatch" style="background:#d8d8d2;"></span>○ neutral</li>
|
||||
<li><span class="swatch" style="background:#efc9c3;"></span>− widersprechend</li>
|
||||
<li><span class="swatch" style="background:#9A2A2A;"></span>−− stark widersprechend</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="portrait-summary">{{ assessment.gwoe_begruendung|truncate(700, end="…") }}</div>
|
||||
|
||||
<div class="portrait-summary">
|
||||
<span class="portrait-summary-label">Begründung</span>
|
||||
{{ assessment.gwoe_begruendung|truncate(440, end="…") }}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="body-grid">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user