ui(antrag-detail): Programm-Treue als 2-Spalten-Grid, Trennlinien raus
User-Feedback: vorherige Pillen-Variante zu schmal/dicht. Stattdessen gewünscht: Layout wie ursprünglich (head + 2 Programm-Reihen), aber mit weniger Whitespace und ohne Trennlinien — und die Partei in eine linke Spalte gezogen, damit head und Programm-Rows nebeneinander sitzen statt stapeln. Layout: ``.v3-fraktion`` als CSS-Grid mit zwei Spalten: - links (140px–25%): Fraktion-Name + Pillen vertikal - rechts (1fr): zwei Programm-Reihen (Wahlprogramm / Parteiprogramm) ohne border-top zwischen den Reihen, padding 3px statt 10/8, font kleiner (11px statt 12px).
This commit is contained in:
Dotty Dotter
parent
2f700adbb8
commit
35fed45339
@ -183,17 +183,25 @@
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
/* Zwei-Spalten-Layout: links Fraktion-Meta (Name + Pillen),
|
||||
rechts beide Programm-Reihen. Spart vertikalen Platz, weil head
|
||||
und Programm-Rows in derselben Höhe nebeneinander sitzen. */
|
||||
.v3-fraktion {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--hairline);
|
||||
border-radius: 4px;
|
||||
padding: 6px 12px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(140px, 0.25fr) 1fr;
|
||||
column-gap: 16px;
|
||||
align-items: start;
|
||||
}
|
||||
.v3-fraktion-row {
|
||||
.v3-fraktion-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
align-items: flex-start;
|
||||
padding-top: 2px;
|
||||
}
|
||||
.v3-fraktion-name {
|
||||
font-family: var(--font-sans);
|
||||
@ -202,7 +210,6 @@
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--ecg-dark);
|
||||
}
|
||||
.v3-fraktion-spacer { flex: 1 1 auto; }
|
||||
.v3-pill {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
@ -214,12 +221,13 @@
|
||||
.v3-pill-antrag { color: #bf6c10; background: rgba(247, 148, 29, 0.15); }
|
||||
.v3-pill-reg { color: #1e6a90; background: rgba(0, 157, 165, 0.15); }
|
||||
|
||||
/* Kompakte Programm-Pillen rechts in der Fraktion-Zeile.
|
||||
Aufklappbar via <details>; aufgeklappt fließt der Body unter
|
||||
die Zeile in voller Breite. */
|
||||
.v3-fraktion-progs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* Keine Trennlinien zwischen WP- und PP-Reihe — nur knapp gestapelt. */
|
||||
}
|
||||
.v3-prog {
|
||||
/* details als grid-item: in der flex-row, body wandert beim Aufklappen
|
||||
dank flex-basis:100% auf eigene Zeile. */
|
||||
/* Keine border zwischen Programm-Reihen — auf User-Wunsch. */
|
||||
}
|
||||
.v3-prog > summary {
|
||||
list-style: none;
|
||||
@ -229,59 +237,47 @@
|
||||
}
|
||||
.v3-prog > summary::-webkit-details-marker { display: none; }
|
||||
|
||||
.v3-prog-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 2px 8px;
|
||||
border: 1px solid var(--hairline);
|
||||
border-radius: 3px;
|
||||
background: rgba(0, 0, 0, 0.015);
|
||||
transition: background 0.12s ease, border-color 0.12s ease;
|
||||
.v3-prog-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
padding: 3px 0; /* von 10/8 auf 3 — minimaler Whitespace */
|
||||
}
|
||||
.v3-prog-pill:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
border-color: var(--ecg-blue);
|
||||
.v3-prog-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--ecg-dark);
|
||||
font-weight: 600;
|
||||
transition: color 0.12s ease;
|
||||
}
|
||||
.v3-prog-pill::before {
|
||||
.v3-prog-label::before {
|
||||
content: "▸";
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
font-size: 9px;
|
||||
opacity: 0.55;
|
||||
transition: transform 0.15s ease;
|
||||
margin-right: 1px;
|
||||
}
|
||||
.v3-prog[open] > .v3-prog-pill::before {
|
||||
.v3-prog[open] > summary .v3-prog-label::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.v3-prog-pill-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--ecg-dark);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.v3-prog > summary:hover .v3-prog-label { color: var(--ecg-blue); }
|
||||
.v3-prog-spacer { flex: 1 1 auto; }
|
||||
.v3-prog-score {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 1px 6px;
|
||||
padding: 1px 7px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.v3-prog-score.good { background: var(--score-chip-green-bg); color: var(--score-chip-green-fg); }
|
||||
.v3-prog-score.mid { background: var(--score-chip-mid-bg); color: var(--score-chip-mid-fg); }
|
||||
.v3-prog-score.low { background: var(--score-chip-red-bg); color: var(--score-chip-red-fg); }
|
||||
|
||||
/* Body bricht aus der flex-row aus und nimmt die volle Breite,
|
||||
sobald details aufgeklappt ist. */
|
||||
.v3-prog-body {
|
||||
flex-basis: 100%;
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
padding: 8px 4px 4px;
|
||||
border-top: 1px dashed var(--hairline);
|
||||
padding: 4px 0 6px 14px;
|
||||
}
|
||||
.v3-prog-text {
|
||||
font-size: 13.5px;
|
||||
|
||||
@ -263,22 +263,24 @@
|
||||
{% for fs in antrag.fraktions_scores %}
|
||||
{% if fs.fraktion | lower not in _missing_set %}
|
||||
<div class="v3-fraktion">
|
||||
<div class="v3-fraktion-row">
|
||||
<div class="v3-fraktion-meta">
|
||||
<span class="v3-fraktion-name">{{ fs.fraktion }}</span>
|
||||
{% if fs.ist_antragsteller %}<span class="v3-pill v3-pill-antrag">Antragsteller:in</span>{% endif %}
|
||||
{% if fs.ist_regierung %}<span class="v3-pill v3-pill-reg">Regierungsfraktion</span>{% endif %}
|
||||
<span class="v3-fraktion-spacer"></span>
|
||||
{% for prog_key, prog_label, prog_short in [("wahlprogramm","Wahlprogramm","WP"),("parteiprogramm","Parteiprogramm","PP")] %}
|
||||
</div>
|
||||
<div class="v3-fraktion-progs">
|
||||
{% for prog_key, prog_label in [("wahlprogramm","Wahlprogramm"),("parteiprogramm","Parteiprogramm")] %}
|
||||
{% set p = fs[prog_key] %}
|
||||
{% set p_score = p.score | float %}
|
||||
<details class="v3-prog">
|
||||
<summary class="v3-prog-pill" title="{{ prog_label }}">
|
||||
<span class="v3-prog-pill-label">{{ prog_short }}</span>
|
||||
<summary class="v3-prog-row">
|
||||
<span class="v3-prog-label">{{ prog_label }}</span>
|
||||
<span class="v3-prog-spacer"></span>
|
||||
<span class="v3-prog-score
|
||||
{% if p_score >= 7 %}good{% elif p_score >= 4 %}mid{% else %}low{% endif %}">{{ "%.0f"|format(p_score) }}/10</span>
|
||||
</summary>
|
||||
<div class="v3-prog-body">
|
||||
{% if p.begruendung %}<p class="v3-prog-text"><strong>{{ prog_label }}:</strong> {{ p.begruendung }}</p>{% endif %}
|
||||
{% if p.begruendung %}<p class="v3-prog-text">{{ p.begruendung }}</p>{% endif %}
|
||||
{% if p.zitate %}
|
||||
<div class="v3-prog-zitate">
|
||||
{% for z in p.zitate %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user