fix: Programm-Treue im BELEGE-Layout, default-OPEN statt default-closed
User-Feedback: voriges Layout war "Usability-Alptraum" — alle 8 Blöcke (4 Fraktionen × 2 Programme) waren default-closed, was 8 Klicks pro Antrag bedeutete um Begründungen zu lesen. Fix: <details open> als Default. Inhalt sofort vollständig sichtbar beim Scrollen. Faltmechanismus bleibt für User, die die Liste nur skimmen wollen — Chevron ▾ am Label rotiert beim Falten. Hover-Affordanz über Label-Color-Change zum Brand-Blau (kein extra Caret-Element). Layout-Spec bleibt: pro Partei zwei Treue-Blöcke (Wahlprogramm, Parteiprogramm). Summary = Label + Score-Chip rechts. Body = Einschätzung-Text + Belege via quote_card-Macro. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dotty Dotter
parent
c4750d3274
commit
bd0fe54559
@ -979,25 +979,33 @@ body.v2 ul.v2-manual ul li::before {
|
||||
background: rgba(0, 157, 165, 0.15);
|
||||
}
|
||||
|
||||
/* Aufklappbare Programm-Blöcke (Wahlprogramm/Parteiprogramm) */
|
||||
/* Programm-Block (Wahlprogramm/Parteiprogramm) im BELEGE-Layout.
|
||||
<details open> per Default — alles sichtbar, Faltmechanismus optional.
|
||||
Pro Fraktion zwei Blöcke; der zweite hat eine zarte Trenn-Linie. */
|
||||
.v2-treue-block {
|
||||
border-top: 1px solid var(--hairline);
|
||||
margin: 0;
|
||||
margin: 8px 0 0;
|
||||
padding-top: 8px;
|
||||
}
|
||||
.v2-treue-block:first-of-type {
|
||||
border-top: none;
|
||||
.v2-treue-block + .v2-treue-block {
|
||||
border-top: 1px dashed var(--hairline);
|
||||
}
|
||||
|
||||
/* Summary = klickbare Header-Zeile. list-style:none entfernt das native
|
||||
Marker-Dreieck, wir setzen einen eigenen subtilen Chevron rechts. */
|
||||
.v2-treue-block > summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 0;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.v2-treue-block > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
.v2-treue-block > summary::-webkit-details-marker { display: none; }
|
||||
.v2-treue-block > summary:hover .v2-treue-label { color: var(--ecg-blue); }
|
||||
|
||||
.v2-treue-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.v2-treue-label {
|
||||
font-family: var(--font-mono);
|
||||
@ -1006,40 +1014,27 @@ body.v2 ul.v2-manual ul li::before {
|
||||
letter-spacing: 0.07em;
|
||||
color: #0d6f76;
|
||||
font-weight: 600;
|
||||
transition: color 0.12s ease;
|
||||
}
|
||||
.v2-treue-label::after {
|
||||
content: "▾";
|
||||
margin-left: 6px;
|
||||
font-size: 9px;
|
||||
opacity: 0.5;
|
||||
display: inline-block;
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
.v2-treue-block:not([open]) > summary .v2-treue-label::after {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.v2-treue-spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.v2-treue-caret {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: var(--ecg-dark);
|
||||
opacity: 0.5;
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
.v2-treue-block[open] > summary .v2-treue-caret {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.v2-treue-body {
|
||||
padding: 4px 0 10px;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.v2-einschaetzung {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.v2-einschaetzung-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--ecg-dark);
|
||||
opacity: 0.6;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.v2-einschaetzung-text {
|
||||
color: var(--ecg-dark);
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
color: var(--ecg-dark);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.v2-belege {
|
||||
margin-top: 6px;
|
||||
|
||||
@ -382,15 +382,14 @@
|
||||
{{ matrix_mini(antrag.matrix) }}
|
||||
{% endif %}
|
||||
|
||||
{# Programm-Treue im BELEGE-Layout: pro Partei zwei aufklappbare Blöcke
|
||||
(Wahlprogramm + Parteiprogramm). Summary zeigt Bewertung, expand
|
||||
enthält Einschätzung + Belege. #}
|
||||
{# Programm-Treue im BELEGE-Layout: pro Partei zwei <details>-Blöcke
|
||||
(Wahlprogramm + Parteiprogramm). Summary zeigt Bewertung,
|
||||
expanded zeigt Einschätzung + Belege. Default OPEN — alles sofort
|
||||
lesbar, der Faltmechanismus ist optional zum Skimmen. #}
|
||||
{% if antrag.fraktions_scores %}
|
||||
<h3 class="v2-h3" style="margin-top:24px;">Programm-Treue pro Fraktion</h3>
|
||||
<div class="v2-fraktions-scores">
|
||||
{% for fs in antrag.fraktions_scores %}
|
||||
{% set wp_score = fs.wahlprogramm.score | float %}
|
||||
{% set pp_score = fs.parteiprogramm.score | float %}
|
||||
<div class="v2-fraktion-row">
|
||||
<div class="v2-fraktion-head">
|
||||
<span class="v2-fraktion-label">{{ fs.fraktion }}</span>
|
||||
@ -398,55 +397,27 @@
|
||||
{% if fs.ist_regierung %}<span class="v2-pill v2-pill-reg">Regierungsfraktion</span>{% endif %}
|
||||
</div>
|
||||
|
||||
<details class="v2-treue-block">
|
||||
<summary>
|
||||
<span class="v2-treue-label">Wahlprogramm</span>
|
||||
{% for prog_key, prog_label in [("wahlprogramm","Wahlprogramm"), ("parteiprogramm","Parteiprogramm")] %}
|
||||
{% set prog = fs[prog_key] %}
|
||||
{% set p_score = prog.score | float %}
|
||||
<details class="v2-treue-block" open>
|
||||
<summary class="v2-treue-row">
|
||||
<span class="v2-treue-label">{{ prog_label }}</span>
|
||||
<span class="v2-treue-spacer"></span>
|
||||
<span class="v2-score-chip {% if wp_score >= 7 %}chip-green{% elif wp_score >= 4 %}chip-mid{% else %}chip-red{% endif %}">{{ "%.0f"|format(wp_score) }}/10</span>
|
||||
<span class="v2-treue-caret" aria-hidden="true">▾</span>
|
||||
<span class="v2-score-chip {% if p_score >= 7 %}chip-green{% elif p_score >= 4 %}chip-mid{% else %}chip-red{% endif %}">{{ "%.0f"|format(p_score) }}/10</span>
|
||||
</summary>
|
||||
<div class="v2-treue-body">
|
||||
{% if fs.wahlprogramm.begruendung %}
|
||||
<div class="v2-einschaetzung">
|
||||
<div class="v2-einschaetzung-label">Einschätzung</div>
|
||||
<div class="v2-einschaetzung-text">{{ fs.wahlprogramm.begruendung }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if fs.wahlprogramm.zitate %}
|
||||
<div class="v2-belege">
|
||||
<div class="v2-einschaetzung-label">Belege</div>
|
||||
{% for z in fs.wahlprogramm.zitate %}
|
||||
{{ quote_card(z.text, z.source, True, False, z.pdf_href) }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="v2-treue-block">
|
||||
<summary>
|
||||
<span class="v2-treue-label">Parteiprogramm</span>
|
||||
<span class="v2-treue-spacer"></span>
|
||||
<span class="v2-score-chip {% if pp_score >= 7 %}chip-green{% elif pp_score >= 4 %}chip-mid{% else %}chip-red{% endif %}">{{ "%.0f"|format(pp_score) }}/10</span>
|
||||
<span class="v2-treue-caret" aria-hidden="true">▾</span>
|
||||
</summary>
|
||||
<div class="v2-treue-body">
|
||||
{% if fs.parteiprogramm.begruendung %}
|
||||
<div class="v2-einschaetzung">
|
||||
<div class="v2-einschaetzung-label">Einschätzung</div>
|
||||
<div class="v2-einschaetzung-text">{{ fs.parteiprogramm.begruendung }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if fs.parteiprogramm.zitate %}
|
||||
<div class="v2-belege">
|
||||
<div class="v2-einschaetzung-label">Belege</div>
|
||||
{% for z in fs.parteiprogramm.zitate %}
|
||||
{{ quote_card(z.text, z.source, True, False, z.pdf_href) }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if prog.begruendung %}
|
||||
<div class="v2-einschaetzung-text">{{ prog.begruendung }}</div>
|
||||
{% endif %}
|
||||
{% if prog.zitate %}
|
||||
<div class="v2-belege">
|
||||
{% for z in prog.zitate %}
|
||||
{{ quote_card(z.text, z.source, True, False, z.pdf_href) }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</details>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user