diff --git a/app/static/v3/v3.css b/app/static/v3/v3.css index f7c0d99..9e720c0 100644 --- a/app/static/v3/v3.css +++ b/app/static/v3/v3.css @@ -7,12 +7,10 @@ * * Konvention: * - Klassen mit Präfix `v3-` sind v3-spezifisch. - * - v2-Klassen werden nur überschrieben, wenn das Citizen-Bedürfnis es - * verlangt (Wort-Etiketten statt Symbol, weniger Tiefe als Default). - * - Inline-Styles in v3-Templates sind verboten (Lint-Hook folgt in #184). + * - Inline-Styles in v3-Templates möglichst vermeiden (Lint-Hook folgt in #184). */ -/* ── v3-Beta-Indikator in der Topbar ────────────────────────────────── */ +/* ── Topbar: Beta-Pill + Modus-Toggle ──────────────────────────────── */ .v3-beta-badge { font-family: var(--font-mono); font-size: 9px; @@ -24,8 +22,6 @@ color: #fff; font-weight: 700; } - -/* ── Modus-Toggle: zwischen Profi (/antrag/...) und Bürgerin (/v3/...) ── */ .v3-modus-toggle { display: inline-flex; align-items: center; @@ -38,9 +34,261 @@ opacity: 0.85; border-bottom: 1px solid rgba(0, 157, 165, 0.35); padding-bottom: 1px; + margin-left: auto; +} +.v3-modus-toggle:hover { opacity: 1; color: var(--ecg-blue); } + +/* ── 1. Drucksache-ID: ruhiger Untertitel ──────────────────────────── */ +.v3-antrag-id { + /* erbt v2-antrag-id; nichts zu ändern auf der Ebene */ } -.v3-modus-toggle:hover { - opacity: 1; +/* ── 2. Score-Hero: Wort-Etikett vor Zahl ──────────────────────────── */ +.v3-score-hero { + background: var(--surface); + border: 1px solid var(--hairline); + border-left: 6px solid var(--ecg-blue); + border-radius: 6px; + padding: 18px 20px; + margin: 8px 0 18px; +} +.v3-score-hero.good { border-left-color: var(--ecg-green); } +.v3-score-hero.mid { border-left-color: var(--ecg-blue); } +.v3-score-hero.low { border-left-color: var(--redline-contra, #cf222e); } + +.v3-score-label { + font-family: var(--font-sans); + font-size: 22px; + font-weight: 900; + line-height: 1.1; + color: var(--ecg-dark); + margin-bottom: 4px; +} +.v3-score-hero.good .v3-score-label { color: #1a7f37; } +.v3-score-hero.low .v3-score-label { color: #a40e26; } + +.v3-score-body { + font-size: 14px; + line-height: 1.5; + color: var(--ecg-dark); + margin: 6px 0 10px; +} +.v3-score-meta { + font-family: var(--font-mono); + font-size: 11px; + color: var(--ecg-dark); + opacity: 0.75; + border-top: 1px dashed var(--hairline); + padding-top: 8px; +} +.v3-score-meta strong { font-weight: 700; } + +/* ── 3. 5-Werte-Bars (Matrix-Vereinfachung) ────────────────────────── */ +.v3-werte-list { + display: flex; + flex-direction: column; + gap: 6px; + margin: 10px 0 16px; +} +.v3-wert-row { + display: grid; + grid-template-columns: minmax(140px, 1fr) 2.5fr auto; + align-items: center; + gap: 10px; + font-size: 13px; +} +.v3-wert-label { + color: var(--ecg-dark); + font-weight: 600; + line-height: 1.3; +} +.v3-wert-bar { + position: relative; + height: 10px; +} +.v3-wert-track { + position: absolute; + inset: 0; + background: var(--surface); + border: 1px solid var(--hairline); + border-radius: 5px; + overflow: hidden; +} +.v3-wert-mid { + position: absolute; + top: 0; + bottom: 0; + left: 50%; + width: 1px; + background: var(--hairline); +} +.v3-wert-fill { + position: absolute; + top: 0; + bottom: 0; + border-radius: 3px; + min-width: 2px; +} +.v3-wert-fill.pos { background: var(--ecg-green); } +.v3-wert-fill.neu { background: var(--ecg-dark); opacity: 0.3; } +.v3-wert-fill.neg { background: var(--redline-contra, #cf222e); } + +.v3-wert-num { + font-family: var(--font-mono); + font-size: 12px; + font-weight: 700; + color: var(--ecg-dark); + min-width: 36px; + text-align: right; +} + +.v3-matrix-details { + margin-top: 10px; + padding: 8px 12px; + background: var(--surface); + border: 1px solid var(--hairline); + border-radius: 5px; +} +.v3-matrix-details > summary { + cursor: pointer; + font-family: var(--font-mono); + font-size: 11px; + letter-spacing: 0.03em; + color: var(--ecg-dark); + user-select: none; + list-style: none; +} +.v3-matrix-details > summary::-webkit-details-marker { display: none; } +.v3-matrix-details > summary::before { + content: "▸ "; + display: inline-block; + margin-right: 4px; + transition: transform 0.15s ease; +} +.v3-matrix-details[open] > summary::before { + transform: rotate(90deg); +} + +/* ── 4. Glossar-Tooltips ───────────────────────────────────────────── */ +.v3-glossar { + display: inline; + border-bottom: 1px dotted var(--ecg-blue); + cursor: help; color: var(--ecg-blue); } +.v3-glossar:hover, +.v3-glossar:focus-visible { + outline: none; + background: rgba(0, 157, 165, 0.12); + border-bottom-style: solid; +} + +.v3-glossar-modal { + display: none; + position: fixed; + inset: 0; + background: rgba(0,0,0,0.45); + z-index: 9100; + align-items: center; + justify-content: center; +} +.v3-glossar-card { + background: var(--ecg-card-bg, #fff); + border: 1px solid var(--ecg-border, #ddd); + border-radius: 8px; + padding: 22px 26px; + min-width: 280px; + max-width: 480px; + font-family: var(--font-sans); + color: var(--ecg-dark); + box-shadow: 0 8px 32px rgba(0,0,0,0.18); +} +.v3-glossar-head { + display: flex; + justify-content: space-between; + align-items: baseline; + margin-bottom: 10px; +} +.v3-glossar-head strong { + font-family: var(--font-display, inherit); + font-size: 16px; + font-weight: 900; + color: var(--ecg-teal, #009da5); + letter-spacing: 0.03em; +} +.v3-glossar-close { + background: none; + border: none; + font-size: 18px; + cursor: pointer; + color: var(--ecg-dark); + opacity: 0.55; + padding: 0; + line-height: 1; +} +.v3-glossar-card p { + margin: 0; + font-size: 14px; + line-height: 1.55; +} + +/* ── 5. Collapsible-Sections (Verbesserungen, Kommentare default zu) ─ */ +.v3-collapsible { + margin-top: 24px; + padding: 8px 0; + border-top: 1px solid var(--hairline); +} +.v3-collapsible > summary { + cursor: pointer; + list-style: none; + user-select: none; + display: flex; + align-items: baseline; + gap: 12px; + padding: 4px 0; +} +.v3-collapsible > summary::-webkit-details-marker { display: none; } +.v3-collapsible > summary > h3 { + margin: 0; + display: inline-flex; + align-items: baseline; + gap: 8px; +} +.v3-collapsible > summary > h3::before { + content: "▸"; + display: inline-block; + font-family: var(--font-mono); + font-size: 12px; + color: var(--ecg-dark); + opacity: 0.55; + transition: transform 0.15s ease; +} +.v3-collapsible[open] > summary > h3::before { + transform: rotate(90deg); +} +.v3-collapsible-hint { + font-family: var(--font-mono); + font-size: 10px; + text-transform: uppercase; + letter-spacing: 0.07em; + color: var(--ecg-dark); + opacity: 0.5; +} +.v3-comments { + margin-top: 40px; + padding-top: 20px; +} + +/* ── 6. Aktions-Links ──────────────────────────────────────────────── */ +.v3-aktions { + margin-top: 24px; + font-family: var(--font-mono); + font-size: 11px; + display: flex; + gap: 16px; + flex-wrap: wrap; +} +.v3-aktions a { + color: var(--ecg-blue); + border-bottom: 1px solid rgba(0, 157, 165, 0.35); +} diff --git a/app/templates/v2/screens/antrag_detail.html b/app/templates/v2/screens/antrag_detail.html index 1387181..5dd3180 100644 --- a/app/templates/v2/screens/antrag_detail.html +++ b/app/templates/v2/screens/antrag_detail.html @@ -126,12 +126,14 @@ {# ── Linke Spalte: Redaktionelle Analyse ── #}
+ {% block antrag_id_section %}
{{ antrag.bundesland | default("") }} {% if antrag.drucksache %} · Drs. {{ antrag.drucksache }}{% endif %} {% if antrag.typ %} · {{ antrag.typ }}{% endif %} {% if antrag.datum %} · eingebracht {{ antrag.datum }}{% endif %}
+ {% endblock %}

{{ antrag.title | default("Antrag") }}

@@ -183,6 +185,7 @@
{% endif %} + {% block verbesserungen_section %} {# Verbesserungsvorschläge: alle verbesserungen rendern wenn vorhanden #} {% if antrag.verbesserungen %}

Verbesserungsvorschläge

@@ -211,6 +214,7 @@ {% from "v2/components/redline.html" import redline %} {{ redline(segments=antrag.redline.segments) }} {% endif %} + {% endblock %} {# .left #} @@ -230,7 +234,9 @@ + {% block score_hero_section %} {{ score_hero(antrag.score | default(0), antrag.verdict_title | default(""), antrag.verdict_body | default("")) }} + {% endblock %} {# ── Namentliche Abstimmung (#106 Phase 1) ── #} {% if antrag.abstimmungsverhalten %} @@ -377,10 +383,12 @@ {% endif %}{# plenum_votes #} + {% block matrix_section %} {% if antrag.matrix %}

Matrix 2.0 · 25 Felder

{{ matrix_mini(antrag.matrix) }} {% endif %} + {% endblock %} {# Programm-Treue im BELEGE-Layout: pro Partei zwei
-Blöcke (Wahlprogramm + Parteiprogramm). Summary zeigt Bewertung, @@ -441,6 +449,7 @@ + {% block aktions_section %} {# Aktions-Links #}
+ {% endblock %} {# ── Voting-Block ─────────────────────────────────────────────── #}
@@ -526,6 +536,7 @@
{# .v2-detail #} +{% block comments_section %} {# ── Kommentare ───────────────────────────────────────────────────────── #}

Kommentare

@@ -562,6 +573,7 @@
+{% endblock %} {# ── Matrix-Feld-Info-Modal ───────────────────────────────────────────── #}
für 5×5 + - verbesserungen_section — default kollabiert + - aktions_section — JSON-Export raus, nur PDF + Permalink + - comments_section — default kollabiert ───────────────────────────────────────────────────────────────────── #} {% extends "v2/screens/antrag_detail.html" %} -{# v3-Indikator + Toggle: erscheint im topbar-Slot, der in v2/base.html - aktuell nicht als Block exponiert ist. Wir nutzen daher head_extra - als Eingangstor und injizieren via JS einen kleinen Topbar-Pill. - Das vermeidet ein Refactor von v2/base.html, der v2 beruehren wuerde. #} {% block head_extra %} {{ super() }} {% endblock %} +{# ─── 1. Drucksache-ID: weniger Behörden-Sprache, Glossar-Hinweise ─── #} +{% block antrag_id_section %} +
+ Antrag im + {% if antrag.bundesland == "BU" %}Bundestag + {% elif antrag.bundesland %}Landtag {{ antrag.bundesland }} + {% else %}Parlament{% endif %} + {% if antrag.drucksache %} + · Drucksache + {{ antrag.drucksache }} + {% endif %} + {% if antrag.datum %} · eingebracht {{ antrag.datum }}{% endif %} +
+{% endblock %} + +{# ─── 2. Score-Hero: Wort-Etikett groß, Zahl klein ──────────────────── #} +{% block score_hero_section %} +{% set s = (antrag.score | default(0)) | float %} +{% if s >= 7 %} + {% set v3_label = antrag.verdict_title or "Stark gemeinwohlfördernd" %} + {% set v3_class = "good" %} +{% elif s >= 4 %} + {% set v3_label = antrag.verdict_title or "Gemischt" %} + {% set v3_class = "mid" %} +{% else %} + {% set v3_label = antrag.verdict_title or "Widerspricht dem Gemeinwohl" %} + {% set v3_class = "low" %} +{% endif %} + +
+
{{ v3_label }}
+ {% if antrag.verdict_body %} +
{{ antrag.verdict_body }}
+ {% endif %} +
+ Gemeinwohl-Score: + {{ "%.1f"|format(s) }} von 10 +
+
+{% endblock %} + +{# ─── 3. Matrix: 5 Werte default, volle 5×5 in
─────────────── #} +{% block matrix_section %} +{% if antrag.matrix %} +

Beitrag zu den 5 Gemeinwohl-Werten

+ +{# Pro Wert (Spalte 1..5) Durchschnitt aus den 5 Berührungsgruppen-Zellen. + Skala bleibt -5..+5 wie in der DB. #} +{% set v3_werte = [ + ("1", "Menschenwürde"), + ("2", "Solidarität"), + ("3", "Ökologische Nachhaltigkeit"), + ("4", "Soziale Gerechtigkeit"), + ("5", "Transparenz & Demokratie"), +] %} +
+ {% for col, label in v3_werte %} + {% set ns = namespace(sum=0, cnt=0) %} + {% for row in ["A","B","C","D","E"] %} + {% set cell = antrag.matrix[row ~ col] | default(none) %} + {% if cell %} + {% set ns.sum = ns.sum + (cell.rating | int) %} + {% set ns.cnt = ns.cnt + 1 %} + {% endif %} + {% endfor %} + {% set avg = (ns.sum / ns.cnt) if ns.cnt else 0 %} + {% set pct = ((avg + 5) / 10 * 100) %} +
+
{{ label }}
+ +
+ {% if avg > 0 %}+{% endif %}{{ "%.1f"|format(avg) }} +
+
+ {% endfor %} +
+ +
+ + Volle GWÖ-Matrix 2.0 + · 25 Felder (5 Werte × 5 Berührungsgruppen) + +
+ {% from "v2/components/matrix_mini.html" import matrix_mini %} + {{ matrix_mini(antrag.matrix) }} +
+
+{% endif %} +{% endblock %} + +{# ─── 4. Verbesserungsvorschläge: default kollabiert ──────────────────── #} +{% block verbesserungen_section %} +{% if antrag.verbesserungen %} +
+ +

Verbesserungsvorschläge

+ {{ antrag.verbesserungen | length }} Vorschlag{{ "" if antrag.verbesserungen | length == 1 else "e" }} · klicken zum Aufklappen +
+
+ {% for v in antrag.verbesserungen %} +
+ {% if antrag.verbesserungen | length > 1 %} +
+ Vorschlag {{ loop.index }} von {{ antrag.verbesserungen | length }} +
+ {% endif %} + {% from "v2/components/redline.html" import redline %} + {% if v.segments %} + {{ redline(original=v.original | default(""), segments=v.segments) }} + {% else %} + {{ redline(original=v.original | default(""), vorschlag=v.vorschlag | default("")) }} + {% endif %} + {% if v.begruendung %} +

+ {{ v.begruendung }} +

+ {% endif %} +
+ {% endfor %} +
+
+{% endif %} +{% endblock %} + +{# ─── 5. Aktions-Links: nur PDF + Permalink ──────────────────────────── #} +{% block aktions_section %} +
+{% endblock %} + +{# ─── 6. Kommentare: default kollabiert ──────────────────────────────── #} +{% block comments_section %} +
+ +

Kommentare

+ klicken zum Aufklappen · Anmeldung erforderlich +
+
+
+ Lade… +
+ + + + +
+
+{% endblock %} + +{# ─── Topbar-Pill + Toggle + Glossar-Tooltips (JS) ───────────────────── #} {% block body_scripts %} {{ super() }} + +{# Glossar-Modal #} + {% endblock %}