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

ux(#171): Mobile-Polish fuer Tab-Bars + Drilldown-Modal

Browse Source 
- auswertungen.html: .auswert-tabs scrollt jetzt horizontal (overflow-x:auto)
  + nowrap-Buttons + kleinere Padding/Font auf <600px.
- aktuelle-themen.html: .at-tab Buttons whitespace:nowrap, Tab-Container
  ebenfalls scrollbar.
- Drilldown-Modal: 8px statt 20px Padding aussen, Tabelle in
  overflow-x-Wrapper, max-height 90vh statt 80vh.

Visueller Test auf 375px steht aus (kein Browser im Build-Setup),
diese Aenderungen folgen aus statischer CSS-Audit.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dotty Dotter 2026-05-06 15:57:40 +02:00
parent 7a1c37afe4
commit 1a94b27a22
2 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/templates/v2/screens/aktuelle-themen.html
View File

@ -100,6 +100,10 @@
border-bottom: 1px dotted var(--ecg-border);
}
.at-match:last-child { border-bottom: none; }
.at-tab { white-space: nowrap; }
@media (max-width: 600px) {
.at-tab { padding: 6px 10px !important; font-size: 10px !important; }
}
.at-score-pill {
display: inline-block;
padding: 1px 7px;
@ -183,7 +187,7 @@
</div>
<!-- Tabs -->
<div class="auswert-tabs" role="tablist" style="display:flex;gap:4px;margin:1.5rem 0 1rem;border-bottom:2px solid var(--ecg-border);padding-bottom:0;">
<div class="auswert-tabs" role="tablist" style="display:flex;gap:4px;margin:1.5rem 0 1rem;border-bottom:2px solid var(--ecg-border);padding-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch;">
<button class="at-tab active" role="tab" data-tab="news" onclick="switchAtTab('news', this)" style="font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.06em;padding:6px 14px;border:none;background:none;cursor:pointer;color:var(--ecg-teal);opacity:1;border-bottom:2px solid var(--ecg-teal);margin-bottom:-2px;">News × Anträge</button>
<button class="at-tab" role="tab" data-tab="cluster" onclick="switchAtTab('cluster', this)" style="font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.06em;padding:6px 14px;border:none;background:none;cursor:pointer;color:var(--ecg-dark);opacity:0.55;border-bottom:2px solid transparent;margin-bottom:-2px;">Themen-Cluster</button>
<button class="at-tab" role="tab" data-tab="antraege" onclick="switchAtTab('antraege', this)" style="font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.06em;padding:6px 14px;border:none;background:none;cursor:pointer;color:var(--ecg-dark);opacity:0.55;border-bottom:2px solid transparent;margin-bottom:-2px;">GWÖ-Top-Anträge</button>

19
app/templates/v2/screens/auswertungen.html
View File

@ -13,6 +13,15 @@
margin-bottom: 1rem;
border-bottom: 2px solid var(--ecg-border);
padding-bottom: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.auswert-tab {
white-space: nowrap;
}
@media (max-width: 600px) {
.auswert-tabs { gap: 0; }
.auswert-tab { padding: 6px 10px; font-size: 10px; }
}
.auswert-tab {
font-family: var(--font-mono);
@ -971,9 +980,9 @@ async function openHeucheleiDrilldown(partei, bl) {
if (!modal) {
modal = document.createElement('div');
modal.id = 'sv-heuchelei-modal';
modal.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;';
modal.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:9999;display:flex;align-items:center;justify-content:center;padding:8px;';
modal.innerHTML = `
<div style="background:var(--paper);max-width:760px;width:100%;max-height:80vh;overflow:auto;border-radius:8px;padding:24px;">
<div style="background:var(--paper);max-width:760px;width:100%;max-height:90vh;overflow:auto;border-radius:8px;padding:16px;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
<h3 id="sv-heuchelei-modal-title" style="margin:0;font-family:var(--font-display);">…</h3>
<button onclick="closeHeucheleiDrilldown()"
@ -1005,7 +1014,8 @@ async function openHeucheleiDrilldown(partei, bl) {
<p style="font-size:11px;font-family:var(--font-mono);opacity:0.6;margin-bottom:8px;">
${data.count} Treffer${data.items.length < data.count ? ` — Top ${data.items.length} angezeigt` : ''}.
</p>
<table style="width:100%;border-collapse:collapse;font-size:12px;">
<div style="overflow-x:auto;">
<table style="width:100%;border-collapse:collapse;font-size:12px;min-width:520px;">
<thead style="background:var(--ecg-card-bg);">
<tr>
<th style="padding:6px 10px;text-align:left;border-bottom:1px solid var(--ecg-border);">Drucksache</th>
@ -1031,7 +1041,8 @@ async function openHeucheleiDrilldown(partei, bl) {
</tr>
`).join('')}
</tbody>
</table>`;
</table>
</div>`;
} catch (e) {
document.getElementById('sv-heuchelei-modal-body').textContent = 'Fehler: ' + e;
}