ux(#171): Mobile-Polish fuer Tab-Bars + Drilldown-Modal
- 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:
parent
7a1c37afe4
commit
1a94b27a22
@ -100,6 +100,10 @@
|
|||||||
border-bottom: 1px dotted var(--ecg-border);
|
border-bottom: 1px dotted var(--ecg-border);
|
||||||
}
|
}
|
||||||
.at-match:last-child { border-bottom: none; }
|
.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 {
|
.at-score-pill {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 1px 7px;
|
padding: 1px 7px;
|
||||||
@ -183,7 +187,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Tabs -->
|
<!-- 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 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="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>
|
<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>
|
||||||
|
|||||||
@ -13,6 +13,15 @@
|
|||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
border-bottom: 2px solid var(--ecg-border);
|
border-bottom: 2px solid var(--ecg-border);
|
||||||
padding-bottom: 0;
|
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 {
|
.auswert-tab {
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
@ -971,9 +980,9 @@ async function openHeucheleiDrilldown(partei, bl) {
|
|||||||
if (!modal) {
|
if (!modal) {
|
||||||
modal = document.createElement('div');
|
modal = document.createElement('div');
|
||||||
modal.id = 'sv-heuchelei-modal';
|
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 = `
|
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;">
|
<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>
|
<h3 id="sv-heuchelei-modal-title" style="margin:0;font-family:var(--font-display);">…</h3>
|
||||||
<button onclick="closeHeucheleiDrilldown()"
|
<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;">
|
<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` : ''}.
|
${data.count} Treffer${data.items.length < data.count ? ` — Top ${data.items.length} angezeigt` : ''}.
|
||||||
</p>
|
</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);">
|
<thead style="background:var(--ecg-card-bg);">
|
||||||
<tr>
|
<tr>
|
||||||
<th style="padding:6px 10px;text-align:left;border-bottom:1px solid var(--ecg-border);">Drucksache</th>
|
<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>
|
</tr>
|
||||||
`).join('')}
|
`).join('')}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>`;
|
</table>
|
||||||
|
</div>`;
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
document.getElementById('sv-heuchelei-modal-body').textContent = 'Fehler: ' + e;
|
document.getElementById('sv-heuchelei-modal-body').textContent = 'Fehler: ' + e;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user