rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UX: Route-Detail Pills text-only, keine Icons, Farben nach Bedeutung

Browse source
This commit is contained in:
rene 2026-04-19 11:38:52 +02:00
parent f00084deb8
commit 167c8018bb
3 changed files with 33 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

15
backend/static/css/components.css
View file

@ -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; }

2
backend/static/js/app.js
View file

@ -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 = (() => {

33
backend/static/js/pages/routes.js
View file

@ -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)"></div>
${photoGallery}
<div style="display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-3) 0">
${route.distanz_km ? `<span class="rk-badge rk-badge--info">${UI.icon('map-trifold')} ${route.distanz_km.toFixed(2)} km</span>` : ''}
${route.dauer_min ? `<span class="rk-badge rk-badge--info">${UI.icon('timer')} ${_fmtDur(route.dauer_min)}</span>` : ''}
${route.schwierigkeit ? `<span class="rk-badge rk-badge--${route.schwierigkeit}">${DIFFICULTY_LABEL[route.schwierigkeit]||route.schwierigkeit}</span>` : ''}
${route.untergrund ? `<span class="rk-badge">${TERRAIN_LABEL[route.untergrund]||route.untergrund}</span>` : ''}
${paws ? `<span class="rk-badge rk-badge--dog" title="Hundetauglichkeit">${paws}</span>` : ''}
${route.schatten ? `<span class="rk-badge">${UI.icon('tree')} Schatten</span>` : ''}
${route.leine_empfohlen ? `<span class="rk-badge">${UI.icon('link')} Leine empfohlen</span>` : ''}
${route.distanz_km ? `<span class="rk-pill rk-pill--neutral">${route.distanz_km.toFixed(2)} km</span>` : ''}
${route.dauer_min ? `<span class="rk-pill rk-pill--neutral">${_fmtDur(route.dauer_min)}</span>` : ''}
${route.schwierigkeit ? `<span class="rk-pill" style="${DIFF_COLOR[route.schwierigkeit]||''}">${DIFFICULTY_LABEL[route.schwierigkeit]||route.schwierigkeit}</span>` : ''}
${route.hunde_tauglichkeit ? `<span class="rk-pill rk-pill--dog">${HUNDE_TEXT[route.hunde_tauglichkeit]||route.hunde_tauglichkeit}</span>` : ''}
${isOwn
? `<button type="button" id="rd-vis-pill"
class="rk-badge ${route.is_public ? 'rk-badge--public' : 'rk-badge--private'}"
class="rk-pill ${route.is_public ? 'rk-pill--public' : 'rk-pill--private'}"
style="border:none;cursor:pointer;font:inherit"
title="${route.is_public ? 'Auf Privat setzen' : 'Auf Öffentlich setzen'}">
${route.is_public ? UI.icon('lock-open')+' Öffentlich' : UI.icon('lock')+' Privat'}
${route.is_public ? 'Öffentlich' : 'Privat'}
</button>`
: (!route.is_public ? `<span class="rk-badge rk-badge--private">${UI.icon('lock')} Privat</span>` : '')
: (!route.is_public ? `<span class="rk-pill rk-pill--private">Privat</span>` : `<span class="rk-pill rk-pill--public">Öffentlich</span>`)
}
</div>
${route.beschreibung ? `<p style="color:var(--c-text-secondary);margin-bottom:var(--space-3)">${UI.escape(route.beschreibung)}</p>` : ''}
@ -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;