diff --git a/backend/static/css/components.css b/backend/static/css/components.css index 9b23c1a..4bd5839 100644 --- a/backend/static/css/components.css +++ b/backend/static/css/components.css @@ -2203,6 +2203,21 @@ html.modal-open { background: var(--c-surface-2); color: var(--c-text-secondary); } + +/* Text-only Pills für Route-Detail */ +.rk-pill { + display: inline-flex; + align-items: center; + font-size: var(--text-xs); + font-weight: var(--weight-medium); + padding: 3px 10px; + border-radius: var(--radius-full); + white-space: nowrap; +} +.rk-pill--neutral { background: var(--c-surface-2); color: var(--c-text-secondary); } +.rk-pill--dog { background: #fef3c7; color: #92400e; } +.rk-pill--private { background: #dbeafe; color: #1d4ed8; } +.rk-pill--public { background: #dcfce7; color: #15803d; } .rk-badge--leicht { background: #dcfce7; color: #15803d; } .rk-badge--mittel { background: #fef9c3; color: #a16207; } .rk-badge--anspruchsvoll{ background: #fee2e2; color: #b91c1c; } diff --git a/backend/static/js/app.js b/backend/static/js/app.js index d237d48..21b43eb 100644 --- a/backend/static/js/app.js +++ b/backend/static/js/app.js @@ -3,7 +3,7 @@ Router, State-Management, Navigation, Initialisierung. ============================================================ */ -const APP_VER = '229'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen +const APP_VER = '230'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const App = (() => { diff --git a/backend/static/js/pages/routes.js b/backend/static/js/pages/routes.js index 09943b3..85624e0 100644 --- a/backend/static/js/pages/routes.js +++ b/backend/static/js/pages/routes.js @@ -30,9 +30,14 @@ window.Page_routes = (() => { // Mini-Karten auf den Route-Cards let _miniMaps = new Map(); // routeId → L.map - const DIFFICULTY_LABEL = { leicht: '🟢 Leicht', mittel: '🟡 Mittel', anspruchsvoll: '🔴 Anspruchsvoll' }; - const TERRAIN_LABEL = { wald: '🌲 Wald', asphalt: '🛣️ Asphalt', wiese: '🌿 Wiese', mix: '🔀 Mix' }; + const DIFFICULTY_LABEL = { leicht: 'Leicht', mittel: 'Mittel', anspruchsvoll: 'Anspruchsvoll' }; + const TERRAIN_LABEL = { wald: 'Wald', asphalt: 'Asphalt', wiese: 'Wiese', mix: 'Mix' }; const HUNDE_LABEL = { eingeschränkt: '🐾', gut: '🐾🐾', sehr_gut: '🐾🐾🐾', premium: '🐾🐾🐾🐾' }; + const HUNDE_TEXT = { eingeschränkt: 'Eingeschränkt', gut: 'Hundefreundlich', + sehr_gut: 'Sehr hundefreundlich', premium: 'Hundefreundlich' }; + const DIFF_COLOR = { leicht: 'background:#dcfce7;color:#15803d', + mittel: 'background:#fef9c3;color:#92400e', + anspruchsvoll: 'background:#fee2e2;color:#991b1b' }; // POI-Typen entlang der Route — nur relevante/interessante Orte const NEARBY_TYPES = [ @@ -718,21 +723,18 @@ window.Page_routes = (() => { margin-bottom:var(--space-3);background:var(--c-surface-2)"> ${photoGallery}
- ${route.distanz_km ? `${UI.icon('map-trifold')} ${route.distanz_km.toFixed(2)} km` : ''} - ${route.dauer_min ? `${UI.icon('timer')} ${_fmtDur(route.dauer_min)}` : ''} - ${route.schwierigkeit ? `${DIFFICULTY_LABEL[route.schwierigkeit]||route.schwierigkeit}` : ''} - ${route.untergrund ? `${TERRAIN_LABEL[route.untergrund]||route.untergrund}` : ''} - ${paws ? `${paws}` : ''} - ${route.schatten ? `${UI.icon('tree')} Schatten` : ''} - ${route.leine_empfohlen ? `${UI.icon('link')} Leine empfohlen` : ''} + ${route.distanz_km ? `${route.distanz_km.toFixed(2)} km` : ''} + ${route.dauer_min ? `${_fmtDur(route.dauer_min)}` : ''} + ${route.schwierigkeit ? `${DIFFICULTY_LABEL[route.schwierigkeit]||route.schwierigkeit}` : ''} + ${route.hunde_tauglichkeit ? `${HUNDE_TEXT[route.hunde_tauglichkeit]||route.hunde_tauglichkeit}` : ''} ${isOwn ? `` - : (!route.is_public ? `${UI.icon('lock')} Privat` : '') + : (!route.is_public ? `Privat` : `Öffentlich`) }
${route.beschreibung ? `

${UI.escape(route.beschreibung)}

` : ''} @@ -823,10 +825,9 @@ window.Page_routes = (() => { await API.routes.update(route.id, { is_public: !route.is_public }); route.is_public = !route.is_public; if (pill) { - pill.className = `rk-badge ${route.is_public ? 'rk-badge--public' : 'rk-badge--private'}`; - pill.style.cssText = 'border:none;cursor:pointer;font:inherit'; - pill.innerHTML = route.is_public ? UI.icon('lock-open')+' Öffentlich' : UI.icon('lock')+' Privat'; - pill.title = route.is_public ? 'Auf Privat setzen' : 'Auf Öffentlich setzen'; + pill.className = `rk-pill ${route.is_public ? 'rk-pill--public' : 'rk-pill--private'}`; + pill.innerHTML = route.is_public ? 'Öffentlich' : 'Privat'; + pill.title = route.is_public ? 'Auf Privat setzen' : 'Auf Öffentlich setzen'; } const r = _data.find(x => x.id === route.id); if (r) r.is_public = route.is_public;