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

Fix responsive layout for mobile viewports (#6)

Browse Source 
Body becomes a flex column so the header takes its natural height and the
main container fills the rest via flex:1 — replaces the brittle
calc(100vh - 70px) that assumed a 70px header and broke as soon as the
header wrapped on mobile. Adds 100dvh fallback for iOS Safari address
bar quirks.

Mobile breakpoint (≤900px) reworked: list scrolls internally via
list-content max-height:50vh, detail-panel uses overflow:visible so the
whole document scrolls naturally instead of nesting scrollers. Tapping
an item auto-scrolls to the detail panel and a new "← Zur Liste" button
(mobile-only) jumps back. Adds a tighter ≤600px breakpoint that hides
the subtitle, collapses the matrix grid to one column and shrinks the
matrix table for phone screens.

Resolves issue #6.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Dotty Dotter 2026-04-07 13:48:55 +02:00
parent 63de3ca20d
commit bcd532be89
1 changed files with 79 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
app/templates/index.html
View File

@ -20,6 +20,10 @@
color: var(--color-darkgray);
line-height: 1.6;
background: var(--color-bg);
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
}
/* Header */
@ -60,7 +64,8 @@
/* Main Layout */
.main-container {
display: flex;
height: calc(100vh - 70px);
flex: 1;
min-height: 0;
}
/* Left Panel - List */
@ -548,21 +553,85 @@
to { transform: rotate(360deg); }
}
/* Mobile Back-to-List Button (nur Mobile sichtbar) */
.btn-back-mobile {
display: none;
padding: 0.5rem 0.75rem;
background: var(--color-bg);
border: 1px solid var(--color-lightgray);
border-radius: 4px;
cursor: pointer;
margin-bottom: 1rem;
font-size: 0.85rem;
color: var(--color-darkgray);
}
/* Responsive */
@media (max-width: 900px) {
.header {
padding: 0.75rem 1rem;
gap: 0.5rem;
}
.header h1 {
font-size: 1.2rem;
}
.header .subtitle {
font-size: 0.8rem;
flex-basis: 100%;
order: 10;
}
.mode-toggle {
margin-left: auto;
flex-wrap: wrap;
}
.mode-btn {
padding: 0.4rem 0.6rem;
font-size: 0.85rem;
}
.main-container {
flex-direction: column;
height: auto;
flex: 1;
min-height: 0;
}
.list-panel {
width: 100%;
min-width: 0;
border-right: none;
border-bottom: 1px solid var(--color-lightgray);
}
.list-content {
max-height: 50vh;
}
.detail-panel {
padding: 1rem;
overflow: visible;
flex: none;
}
.btn-back-mobile {
display: inline-block;
}
}
@media (max-width: 600px) {
.header h1 { font-size: 1.1rem; }
.header .subtitle { display: none; }
.detail-card { padding: 1rem; }
.matrix-table { font-size: 0.7rem; }
.matrix-table th, .matrix-table td { padding: 0.25rem 0.3rem; }
.matrix-grid { grid-template-columns: 1fr; }
.upload-section { padding: 1rem; }
.file-drop { padding: 1.5rem; }
.score-big { font-size: 2.2rem; }
.detail-header { flex-wrap: wrap; gap: 0.5rem; }
}
/* Stats Bar */
@ -1305,6 +1374,7 @@
document.getElementById('detail-panel').innerHTML = `
<div class="detail-card">
<button class="btn-back-mobile" onclick="document.querySelector('.list-panel').scrollIntoView({behavior:'smooth', block:'start'})">← Zur Liste</button>
<div class="detail-header">
<div>
<div class="detail-title">${item.title || 'Ohne Titel'}</div>
@ -1378,6 +1448,11 @@
<a href="/api/assessment/pdf?drucksache=${encodeURIComponent(item.drucksache)}" class="btn-pdf" style="background: var(--color-green); margin-left: 0.5rem;">📥 GWÖ-Report als PDF</a>
</div>
`;
// Auf Mobile: zum Detail-Panel scrollen, damit der gewählte Antrag sichtbar wird
if (window.matchMedia('(max-width: 900px)').matches) {
document.getElementById('detail-panel').scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
// Mode Toggle