diff --git a/backend/static/css/components.css b/backend/static/css/components.css index 958a606..6f71a25 100644 --- a/backend/static/css/components.css +++ b/backend/static/css/components.css @@ -210,6 +210,7 @@ } .by-tabs::-webkit-scrollbar { display: none; } + .by-tab { flex-shrink: 0; padding: var(--space-2) var(--space-3); diff --git a/backend/static/css/layout.css b/backend/static/css/layout.css index 2ba5c74..761cb2f 100644 --- a/backend/static/css/layout.css +++ b/backend/static/css/layout.css @@ -567,6 +567,89 @@ .grid-3 { grid-template-columns: 1fr 1fr; } } +/* ============================================================ + Desktop Multi-Column Layouts (min-width: 1024px) + ============================================================ */ +@media (min-width: 1024px) { + + /* Etwas breiterer Standard-Container auf großen Screens */ + .page-container { max-width: 860px; } + + /* ---------------------------------------------------------- + WELCOME: 2-spaltige Feature-Sections, zentrierter Hero + ---------------------------------------------------------- */ + .welcome-layout { max-width: 920px; } + + .welcome-sections { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-4); + align-items: start; + } + + .welcome-sections .card { margin-bottom: 0; } + + /* ---------------------------------------------------------- + WALKS: Liste (links) + Karte (rechts) nebeneinander + ---------------------------------------------------------- */ + #page-walks .page-container { max-width: none; } + + .walks-layout { + flex-direction: row; + align-items: stretch; + } + + /* View-Toggle auf Desktop nicht nötig */ + .walks-view-toggle { display: none; } + + /* Beide Panels immer sichtbar */ + #walks-list-view, + #walks-map-view { + display: flex !important; + flex-direction: column; + } + + #walks-list-view { + width: 340px; + flex-shrink: 0; + border-right: 1px solid var(--c-border-light); + } + + #walks-map-view { flex: 1; } + + /* Toolbar-Zeile kompakter da Toggle wegfällt */ + #page-walks .by-toolbar { padding: var(--space-2) var(--space-4); } + + /* ---------------------------------------------------------- + FORUM: Rubriken über volle Breite, Threads darunter + ---------------------------------------------------------- */ + #page-forum .page-container { max-width: 1100px; } + + /* Rubriken auf genau 2 Zeilen verteilen, zentriert + — #page-forum nötig für Spezifität > .by-tabs (components.css lädt später) */ + #page-forum .forum-category-tabs { + display: grid; + grid-template-columns: repeat(var(--forum-tab-cols, 7), minmax(0, 1fr)); + overflow: visible; + gap: var(--space-1); + padding-bottom: var(--space-2); + } + + #page-forum .forum-category-tabs .by-tab { + justify-content: center; + text-align: center; + white-space: nowrap; + } + + /* Suche + Threads volle Breite */ + .forum-main-col { + display: flex; + flex-direction: column; + gap: var(--space-3); + } + +} + /* ============================================================ Phosphor Icons — SVG Sprite ============================================================ */ diff --git a/backend/static/index.html b/backend/static/index.html index 0fad607..c567bfb 100644 --- a/backend/static/index.html +++ b/backend/static/index.html @@ -169,23 +169,18 @@ - -
-
- Wiki -
-
- Knigge -
-
- Filme -
-
- Erste Hilfe -
+ Wissen +
+ Wiki +
+
+ Knigge +
+
+ Filme +
+
+ Erste Hilfe
- -
- -
+ +
+ +
+ +
+ + +
+

Lädt…

+
- -
-

Lädt…

`; + // Desktop: Tabs gleichmäßig auf 2 Zeilen verteilen + const _tabsEl = document.getElementById('forum-tabs'); + const _tabCount = _tabsEl.querySelectorAll('.by-tab').length; + _tabsEl.style.setProperty('--forum-tab-cols', Math.ceil(_tabCount / 2)); + // Tab-Klicks - document.getElementById('forum-tabs').addEventListener('click', e => { + _tabsEl.addEventListener('click', e => { const btn = e.target.closest('[data-kat], [data-section]'); if (!btn) return; diff --git a/backend/static/js/pages/uebungen.js b/backend/static/js/pages/uebungen.js index 30b1ff9..0450d1f 100644 --- a/backend/static/js/pages/uebungen.js +++ b/backend/static/js/pages/uebungen.js @@ -632,7 +632,7 @@ window.Page_uebungen = (() => {
${_esc(r.exercise_name)}
${_esc(r.reason)}
-
+
${r.suggested_reps}× empfohlen ${trend} @@ -640,7 +640,7 @@ window.Page_uebungen = (() => {
@@ -656,7 +656,7 @@ window.Page_uebungen = (() => { Dein Plan für heute
-
+
${cards.join('')}
`; diff --git a/backend/static/js/pages/walks.js b/backend/static/js/pages/walks.js index f20e43e..34155a5 100644 --- a/backend/static/js/pages/walks.js +++ b/backend/static/js/pages/walks.js @@ -111,6 +111,10 @@ window.Page_walks = (() => { _view = view; document.querySelectorAll('.walks-view-btn').forEach(b => b.classList.toggle('active', b.dataset.view === view)); + + // Desktop: beide Panels bleiben via CSS sichtbar + if (window.innerWidth >= 1024) return; + document.getElementById('walks-list-view').style.display = view === 'liste' ? '' : 'none'; document.getElementById('walks-map-view').style.display = view === 'karte' ? '' : 'none'; @@ -134,6 +138,14 @@ window.Page_walks = (() => { ); _renderList(); _renderMarkers(); + // Desktop: Karte direkt initialisieren (beide Panels sichtbar) + if (window.innerWidth >= 1024) { + UI.loadLeaflet().then(() => { + _initMap(); + setTimeout(() => _map?.invalidateSize(), 150); + setTimeout(() => _map?.invalidateSize(), 400); + }); + } } catch (err) { UI.toast.error(err.message || 'Fehler beim Laden.'); } diff --git a/backend/static/js/pages/welcome.js b/backend/static/js/pages/welcome.js index 36360f9..68f28b7 100644 --- a/backend/static/js/pages/welcome.js +++ b/backend/static/js/pages/welcome.js @@ -28,7 +28,7 @@ window.Page_welcome = (() => { || window.navigator.standalone === true; _container.innerHTML = ` -
+
@@ -68,7 +68,9 @@ window.Page_welcome = (() => {
- + +
+ ${_featureCard('Mein Hund', [ ['book-open', 'Tagebuch', 'Momente, Fotos und Meilensteine festhalten', 'diary'], ['first-aid', 'Gesundheit', 'Impfungen, Tierarztbesuche & Medikamente', 'health'], @@ -76,21 +78,18 @@ window.Page_welcome = (() => { ['clipboard-text', 'Trainingspläne', 'Strukturierte Pläne für jedes Lernziel', 'trainingsplaene'], ])} - ${_featureCard('Entdecken', [ ['map-trifold', 'Karte', 'Orte, Routen und Meldungen in der Nähe', 'map'], ['path', 'Routen', 'GPS-Routen aufzeichnen und bewerten', 'routes'], ['calendar-dots', 'Events', 'Turniere und Veranstaltungen', 'events'], ])} - ${_featureCard('Soziales', [ ['users', 'Freunde', 'Verbinde dich mit anderen Hundebesitzern', 'friends'], ['chat-circle-dots', 'Nachrichten', 'Private Chats mit deinen Freunden', 'chat'], ['bell', 'Aktuelles', 'Benachrichtigungen und Neuigkeiten', 'notifications'], ])} - ${_featureCard('Community', [ ['warning-octagon', 'Giftköder-Alarm', 'Warnungen sofort melden und empfangen', 'poison'], ['paw-print', 'Gassi-Treffen', 'Hunde-Dates mit anderen Besitzern', 'walks'], @@ -99,7 +98,6 @@ window.Page_welcome = (() => { ['magnifying-glass', 'Verlorene Hunde', 'Hilf vermisste Hunde zu finden', 'lost'], ])} - ${_featureCard('Wissen', [ ['books', 'Wiki', 'Rassendatenbank, Gesundheits-Wiki, Quiz', 'wiki'], ['handshake', 'Knigge', 'Regeln, Begegnungen, Leinenpflicht', 'knigge'], @@ -107,6 +105,8 @@ window.Page_welcome = (() => { ['first-aid', 'Erste Hilfe','Notfallratgeber für häufige Situationen', 'erste-hilfe'], ])} +
+