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

feat(#144): Matrix-Ueberschriften ausschreiben + Hover-Tooltips

Browse Source 
Statt Abkuerzungen (Wuerde, Solid., Liefer., Verwalt., Gesell.) jetzt
voll ausgeschrieben: Menschenwuerde, Solidaritaet, Lieferant:innen,
Verwaltung, Gesellschaft & Natur, etc.

Hover-Tooltip pro Spalte/Zeile mit Erklaerung + Staatsprinzip
(Rechtsstaatsprinzip, Gemeinnutz, Umwelt-Verantwortung, ...).
Matrix-Felder bekommen Tooltip mit Feldname als Vorschau, der
volle Erklaerungstext bleibt im Click-Modal (showField).

Layout: rhdr-Spalte 130/150px, line-height 1.25, min-height 36px,
damit lange Begriffe sauber umbrechen koennen.

Closes #144
This commit is contained in:
Dotty Dotter 2026-04-28 01:53:38 +02:00
parent 0d26cad549
commit d0d941444d
3 changed files with 73 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/static/v2/v2.css
View File

@ -542,7 +542,7 @@ body.v2 strong, body.v2 b {
/* ── Matrix Mini (5×5) ──────────────────────────────────────────── */ /* ── Matrix Mini (5×5) ──────────────────────────────────────────── */
.v2-matrix-mini { .v2-matrix-mini {
display: grid; display: grid;
grid-template-columns: 92px repeat(5, 1fr); grid-template-columns: 130px repeat(5, 1fr);
gap: 0; gap: 0;
border: 1px solid var(--hairline); border: 1px solid var(--hairline);
font-size: 11px; font-size: 11px;
@ -555,7 +555,7 @@ body.v2 strong, body.v2 b {
border-bottom: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
font-family: var(--font-mono); font-family: var(--font-mono);
text-align: center; text-align: center;
min-height: 30px; min-height: 36px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -565,8 +565,8 @@ body.v2 strong, body.v2 b {
.v2-matrix-mini > div:nth-child(6n) { border-right: 0; } .v2-matrix-mini > div:nth-child(6n) { border-right: 0; }
.v2-matrix-mini > div:nth-last-child(-n+6) { border-bottom: 0; } .v2-matrix-mini > div:nth-last-child(-n+6) { border-bottom: 0; }
.v2-matrix-mini .hdr { background: var(--ecg-blue); color: #fff; font-size: 10px; letter-spacing: 0.04em; font-weight: 700; } .v2-matrix-mini .hdr { background: var(--ecg-blue); color: #fff; font-size: 10px; letter-spacing: 0.03em; font-weight: 700; line-height: 1.25; cursor: help; padding: 4px 4px; }
.v2-matrix-mini .rhdr { background: var(--surface); text-align: left; justify-content: flex-start; padding-left: 10px; color: var(--ecg-dark); font-weight: 700; font-family: var(--font-sans); text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; } .v2-matrix-mini .rhdr { background: var(--surface); text-align: left; justify-content: flex-start; padding-left: 10px; color: var(--ecg-dark); font-weight: 700; font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.02em; line-height: 1.25; cursor: help; }
.v2-matrix-mini .m-pp { background: var(--ecg-green); color: #fff; font-weight: 700; } .v2-matrix-mini .m-pp { background: var(--ecg-green); color: #fff; font-weight: 700; }
.v2-matrix-mini .m-p { background: var(--redline-ins-bg); color: var(--ecg-dark); } .v2-matrix-mini .m-p { background: var(--redline-ins-bg); color: var(--ecg-dark); }

34
app/templates/v2/components/matrix_mini.html
View File

@ -21,8 +21,34 @@
{% macro matrix_mini(matrix) %} {% macro matrix_mini(matrix) %}
{% set rows = ["A", "B", "C", "D", "E"] %} {% set rows = ["A", "B", "C", "D", "E"] %}
{% set cols = ["1", "2", "3", "4", "5"] %} {% set cols = ["1", "2", "3", "4", "5"] %}
{% set row_labels = {"A": "A · Liefer.", "B": "B · Finanzen", "C": "C · Verwalt.", "D": "D · Bürger", "E": "E · Gesell."} %} {% set row_labels = {
{% set col_labels = {"1": "Würde", "2": "Solid.", "3": "Ökol.", "4": "Soz.", "5": "Trans."} %} "A": "A · Lieferant:innen",
"B": "B · Finanzen",
"C": "C · Verwaltung",
"D": "D · Bürger:innen",
"E": "E · Gesellschaft & Natur"
} %}
{% set row_titles = {
"A": "Berührungsgruppe A — Lieferant:innen, ausgelagerte Betriebe, Dienstleister:innen. Externe Beschaffung und Lieferketten der Kommune.",
"B": "Berührungsgruppe B — Finanzpartner:innen, Geldgeber:innen, Steuerzahler:innen. Umgang mit öffentlichen Mitteln und Haushalt.",
"C": "Berührungsgruppe C — Politische Führung, Verwaltung, Ehrenamtliche. Mandatsträger:innen und Mitarbeitende der Kommune.",
"D": "Berührungsgruppe D — Bürger:innen und Wirtschaft. Wirkung innerhalb der Gemeindegrenzen, Daseinsvorsorge.",
"E": "Berührungsgruppe E — Staat, Gesellschaft und Natur. Wirkung über die Gemeindegrenzen hinaus, Zukunft."
} %}
{% set col_labels = {
"1": "Menschenwürde",
"2": "Solidarität",
"3": "Ökol. Nachhaltigkeit",
"4": "Soz. Gerechtigkeit",
"5": "Transparenz"
} %}
{% set col_titles = {
"1": "Wert 1 — Menschenwürde (Rechtsstaatsprinzip): Werden Grundrechte geschützt? Rechtliche Gleichstellung, Schutz vor Diskriminierung.",
"2": "Wert 2 — Solidarität (Gemeinnutz): Wird das Gemeinwohl gefördert? Mehrwert für die Gemeinschaft, Kooperation statt Konkurrenz.",
"3": "Wert 3 — Ökologische Nachhaltigkeit (Umwelt-Verantwortung): Klimaschutz, Ressourcenschonung, Biodiversität, Kreislaufwirtschaft.",
"4": "Wert 4 — Soziale Gerechtigkeit (Sozialstaatsprinzip): Gerechte Verteilung, Daseinsvorsorge, soziale Absicherung, Chancengleichheit.",
"5": "Wert 5 — Transparenz & Mitbestimmung (Demokratie): Bürgerbeteiligung, Offenlegung, demokratische Prozesse, Rechenschaftspflicht."
} %}
{% macro rating_class(r) %} {% macro rating_class(r) %}
{% if r == 2 %}m-pp {% if r == 2 %}m-pp
@ -36,12 +62,12 @@
{# Header-Zeile #} {# Header-Zeile #}
<div class="hdr" role="columnheader"></div> <div class="hdr" role="columnheader"></div>
{% for c in cols %} {% for c in cols %}
<div class="hdr" role="columnheader">{{ col_labels[c] }}</div> <div class="hdr" role="columnheader" title="{{ col_titles[c] }}">{{ col_labels[c] }}</div>
{% endfor %} {% endfor %}
{# Daten-Zeilen #} {# Daten-Zeilen #}
{% for r in rows %} {% for r in rows %}
<div class="rhdr" role="rowheader">{{ row_labels[r] }}</div> <div class="rhdr" role="rowheader" title="{{ row_titles[r] }}">{{ row_labels[r] }}</div>
{% for c in cols %} {% for c in cols %}
{% set key = r ~ c %} {% set key = r ~ c %}
{% set cell = matrix[key] if matrix is defined and key in matrix else {} %} {% set cell = matrix[key] if matrix is defined and key in matrix else {} %}

78
app/templates/v2/screens/methodik.html
View File

@ -79,14 +79,14 @@
/* Interactive matrix grid */ /* Interactive matrix grid */
.gwoe-matrix-grid { .gwoe-matrix-grid {
display: grid; display: grid;
grid-template-columns: 110px repeat(5, 1fr); grid-template-columns: 150px repeat(5, 1fr);
gap: 2px; gap: 2px;
font-size: 11px; font-size: 11px;
margin: 1rem 0; margin: 1rem 0;
} }
.gwoe-matrix-grid .gc { padding: 5px 4px; text-align: center; background: var(--ecg-bg-subtle); border: 1px solid var(--ecg-border); } .gwoe-matrix-grid .gc { padding: 5px 4px; text-align: center; background: var(--ecg-bg-subtle); border: 1px solid var(--ecg-border); display: flex; align-items: center; justify-content: center; line-height: 1.25; min-height: 36px; }
.gwoe-matrix-grid .gh { background: var(--ecg-teal); color: #fff; font-weight: 700; } .gwoe-matrix-grid .gh { background: var(--ecg-teal); color: #fff; font-weight: 700; cursor: help; }
.gwoe-matrix-grid .gr { background: var(--ecg-green); color: #fff; font-weight: 700; text-align: left; padding-left: 6px; } .gwoe-matrix-grid .gr { background: var(--ecg-green); color: #fff; font-weight: 700; justify-content: flex-start; padding-left: 6px; text-align: left; cursor: help; }
.gwoe-matrix-grid .gc.clickable { cursor: pointer; transition: background 0.1s; } .gwoe-matrix-grid .gc.clickable { cursor: pointer; transition: background 0.1s; }
.gwoe-matrix-grid .gc.clickable:hover { background: rgba(0,157,165,0.12); } .gwoe-matrix-grid .gc.clickable:hover { background: rgba(0,157,165,0.12); }
#field-explain { #field-explain {
@ -255,46 +255,46 @@
<div class="gwoe-matrix-grid"> <div class="gwoe-matrix-grid">
<div class="gc"></div> <div class="gc"></div>
<div class="gc gh">Menschen&shy;würde</div> <div class="gc gh" title="Wert 1 — Menschenwürde (Rechtsstaatsprinzip): Werden Grundrechte geschützt? Rechtliche Gleichstellung, Schutz vor Diskriminierung.">Menschenwürde</div>
<div class="gc gh">Solidarität</div> <div class="gc gh" title="Wert 2 — Solidarität (Gemeinnutz): Wird das Gemeinwohl gefördert? Mehrwert für die Gemeinschaft, Kooperation statt Konkurrenz.">Solidarität</div>
<div class="gc gh">Ökol. Nachh.</div> <div class="gc gh" title="Wert 3 — Ökologische Nachhaltigkeit (Umwelt-Verantwortung): Klimaschutz, Ressourcenschonung, Biodiversität, Kreislaufwirtschaft.">Ökologische Nachhaltigkeit</div>
<div class="gc gh">Soz. Gerecht.</div> <div class="gc gh" title="Wert 4 — Soziale Gerechtigkeit (Sozialstaatsprinzip): Gerechte Verteilung, Daseinsvorsorge, soziale Absicherung, Chancengleichheit.">Soziale Gerechtigkeit</div>
<div class="gc gh">Transparenz</div> <div class="gc gh" title="Wert 5 — Transparenz & Mitbestimmung (Demokratie): Bürgerbeteiligung, Offenlegung, demokratische Prozesse, Rechenschaftspflicht.">Transparenz & Mitbestimmung</div>
<div class="gc gr">A · Lieferant:innen</div> <div class="gc gr" title="Berührungsgruppe A — Lieferant:innen, ausgelagerte Betriebe, Dienstleister:innen. Externe Beschaffung und Lieferketten der Kommune.">A · Lieferant:innen</div>
<div class="gc clickable" onclick="showField('A1')"><strong>A1</strong><br><small>Grundrechte Lieferkette</small></div> <div class="gc clickable" onclick="showField('A1')" title="A1 — Grundrechtsschutz in der Lieferkette"><strong>A1</strong><br><small>Grundrechte Lieferkette</small></div>
<div class="gc clickable" onclick="showField('A2')"><strong>A2</strong><br><small>Nutzen Gemeinde</small></div> <div class="gc clickable" onclick="showField('A2')" title="A2 — Nutzen für die Gemeinde"><strong>A2</strong><br><small>Nutzen Gemeinde</small></div>
<div class="gc clickable" onclick="showField('A3')"><strong>A3</strong><br><small>Ökol. Verantwortung</small></div> <div class="gc clickable" onclick="showField('A3')" title="A3 — Ökologische Verantwortung in der Lieferkette"><strong>A3</strong><br><small>Ökol. Verantwortung</small></div>
<div class="gc clickable" onclick="showField('A4')"><strong>A4</strong><br><small>Soziale Verantwortung</small></div> <div class="gc clickable" onclick="showField('A4')" title="A4 — Soziale Verantwortung in der Lieferkette"><strong>A4</strong><br><small>Soziale Verantwortung</small></div>
<div class="gc clickable" onclick="showField('A5')"><strong>A5</strong><br><small>Rechenschaft</small></div> <div class="gc clickable" onclick="showField('A5')" title="A5 — Rechenschaft und Mitsprache bei Beschaffung"><strong>A5</strong><br><small>Rechenschaft</small></div>
<div class="gc gr">B · Finanzen</div> <div class="gc gr" title="Berührungsgruppe B — Finanzpartner:innen, Geldgeber:innen, Steuerzahler:innen. Umgang mit öffentlichen Mitteln und Haushalt.">B · Finanzen</div>
<div class="gc clickable" onclick="showField('B1')"><strong>B1</strong><br><small>Eth. Finanzgebaren</small></div> <div class="gc clickable" onclick="showField('B1')" title="B1 — Ethisches Finanzgebaren"><strong>B1</strong><br><small>Eth. Finanzgebaren</small></div>
<div class="gc clickable" onclick="showField('B2')"><strong>B2</strong><br><small>Gemeinnutz</small></div> <div class="gc clickable" onclick="showField('B2')" title="B2 — Gemeinnutz im Finanzgebaren"><strong>B2</strong><br><small>Gemeinnutz</small></div>
<div class="gc clickable" onclick="showField('B3')"><strong>B3</strong><br><small>Ökol. Finanzpolitik</small></div> <div class="gc clickable" onclick="showField('B3')" title="B3 — Ökologische Verantwortung der Finanzpolitik"><strong>B3</strong><br><small>Ökol. Finanzpolitik</small></div>
<div class="gc clickable" onclick="showField('B4')"><strong>B4</strong><br><small>Soz. Finanzpolitik</small></div> <div class="gc clickable" onclick="showField('B4')" title="B4 — Soziale Verantwortung der Finanzpolitik"><strong>B4</strong><br><small>Soz. Finanzpolitik</small></div>
<div class="gc clickable" onclick="showField('B5')"><strong>B5</strong><br><small>Partizipation</small></div> <div class="gc clickable" onclick="showField('B5')" title="B5 — Partizipation in der Finanzpolitik"><strong>B5</strong><br><small>Partizipation</small></div>
<div class="gc gr">C · Verwaltung</div> <div class="gc gr" title="Berührungsgruppe C — Politische Führung, Verwaltung, Ehrenamtliche. Mandatsträger:innen und Mitarbeitende der Kommune.">C · Verwaltung</div>
<div class="gc clickable" onclick="showField('C1')"><strong>C1</strong><br><small>Gleichstellung</small></div> <div class="gc clickable" onclick="showField('C1')" title="C1 — Individuelle Rechts- und Gleichstellung"><strong>C1</strong><br><small>Gleichstellung</small></div>
<div class="gc clickable" onclick="showField('C2')"><strong>C2</strong><br><small>Gemeinsame Ziele</small></div> <div class="gc clickable" onclick="showField('C2')" title="C2 — Gemeinsame Zielvereinbarung für das Gemeinwohl"><strong>C2</strong><br><small>Gemeinsame Ziele</small></div>
<div class="gc clickable" onclick="showField('C3')"><strong>C3</strong><br><small>Ökol. Verhalten</small></div> <div class="gc clickable" onclick="showField('C3')" title="C3 — Förderung ökologischen Verhaltens intern"><strong>C3</strong><br><small>Ökol. Verhalten</small></div>
<div class="gc clickable" onclick="showField('C4')"><strong>C4</strong><br><small>Gerechte Arbeit</small></div> <div class="gc clickable" onclick="showField('C4')" title="C4 — Gerechte Verteilung von Arbeit"><strong>C4</strong><br><small>Gerechte Arbeit</small></div>
<div class="gc clickable" onclick="showField('C5')"><strong>C5</strong><br><small>Transparenz intern</small></div> <div class="gc clickable" onclick="showField('C5')" title="C5 — Transparente Kommunikation intern"><strong>C5</strong><br><small>Transparenz intern</small></div>
<div class="gc gr">D · Bürger:innen</div> <div class="gc gr" title="Berührungsgruppe D — Bürger:innen und Wirtschaft. Wirkung innerhalb der Gemeindegrenzen, Daseinsvorsorge.">D · Bürger:innen</div>
<div class="gc clickable" onclick="showField('D1')"><strong>D1</strong><br><small>Rechtsgleichheit</small></div> <div class="gc clickable" onclick="showField('D1')" title="D1 — Schutz des Individuums, Rechtsgleichheit"><strong>D1</strong><br><small>Rechtsgleichheit</small></div>
<div class="gc clickable" onclick="showField('D2')"><strong>D2</strong><br><small>Gesamtwohl</small></div> <div class="gc clickable" onclick="showField('D2')" title="D2 — Gesamtwohl in der Gemeinde"><strong>D2</strong><br><small>Gesamtwohl</small></div>
<div class="gc clickable" onclick="showField('D3')"><strong>D3</strong><br><small>Ökol. Leistung</small></div> <div class="gc clickable" onclick="showField('D3')" title="D3 — Ökologische Gestaltung der öffentlichen Leistung"><strong>D3</strong><br><small>Ökol. Leistung</small></div>
<div class="gc clickable" onclick="showField('D4')"><strong>D4</strong><br><small>Soz. Leistung</small></div> <div class="gc clickable" onclick="showField('D4')" title="D4 — Soziale Gestaltung der öffentlichen Leistung"><strong>D4</strong><br><small>Soz. Leistung</small></div>
<div class="gc clickable" onclick="showField('D5')"><strong>D5</strong><br><small>Demokratie</small></div> <div class="gc clickable" onclick="showField('D5')" title="D5 — Transparente Kommunikation und demokratische Einbindung"><strong>D5</strong><br><small>Demokratie</small></div>
<div class="gc gr">E · Gesellschaft</div> <div class="gc gr" title="Berührungsgruppe E — Staat, Gesellschaft und Natur. Wirkung über die Gemeindegrenzen hinaus, Zukunft.">E · Gesellschaft & Natur</div>
<div class="gc clickable" onclick="showField('E1')"><strong>E1</strong><br><small>Zukunft</small></div> <div class="gc clickable" onclick="showField('E1')" title="E1 — Menschenwürdiges Leben für zukünftige Generationen"><strong>E1</strong><br><small>Zukunft</small></div>
<div class="gc clickable" onclick="showField('E2')"><strong>E2</strong><br><small>Beitrag Gesamtwohl</small></div> <div class="gc clickable" onclick="showField('E2')" title="E2 — Beitrag zum Gesamtwohl über die Gemeindegrenzen hinaus"><strong>E2</strong><br><small>Beitrag Gesamtwohl</small></div>
<div class="gc clickable" onclick="showField('E3')"><strong>E3</strong><br><small>Ökol. Auswirkungen</small></div> <div class="gc clickable" onclick="showField('E3')" title="E3 — Verantwortung für ökologische Auswirkungen jenseits der Gemeinde"><strong>E3</strong><br><small>Ökol. Auswirkungen</small></div>
<div class="gc clickable" onclick="showField('E4')"><strong>E4</strong><br><small>Sozialer Ausgleich</small></div> <div class="gc clickable" onclick="showField('E4')" title="E4 — Beitrag zum sozialen Ausgleich"><strong>E4</strong><br><small>Sozialer Ausgleich</small></div>
<div class="gc clickable" onclick="showField('E5')"><strong>E5</strong><br><small>Demokratie global</small></div> <div class="gc clickable" onclick="showField('E5')" title="E5 — Transparente und demokratische Mitbestimmung auf übergeordneter Ebene"><strong>E5</strong><br><small>Demokratie global</small></div>
</div> </div>
<details style="font-size:12px;margin-top:8px;"> <details style="font-size:12px;margin-top:8px;">