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

UX: Route-Pills kompakter, kürzere Texte, Rahmen sichtbar

Browse source
This commit is contained in:
rene 2026-04-19 11:44:31 +02:00
parent 167c8018bb
commit 54a6615ebb
3 changed files with 18 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2208,16 +2208,18 @@ html.modal-open {
.rk-pill {
display: inline-flex;
align-items: center;
font-size: var(--text-xs);
font-weight: var(--weight-medium);
padding: 3px 10px;
font-size: 10px;
font-weight: var(--weight-semibold);
padding: 2px 8px;
border-radius: var(--radius-full);
white-space: nowrap;
border: 1px solid transparent;
line-height: 1.4;
}
.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-pill--neutral { background: var(--c-surface-2); color: var(--c-text-secondary); border-color: var(--c-border); }
.rk-pill--dog { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.rk-pill--private { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.rk-pill--public { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.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 = '230'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '231'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const App = (() => {

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

@ -30,14 +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 DIFFICULTY_LABEL = { leicht: 'Leicht', mittel: 'Mittel', anspruchsvoll: 'Schwer' };
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' };
const HUNDE_TEXT = { eingeschränkt: 'Mit Leine', gut: 'Hundefrdl.',
sehr_gut: 'Hunde top', premium: 'Hundefrdl.' };
const DIFF_COLOR = { leicht: 'background:#dcfce7;color:#15803d;border-color:#bbf7d0',
mittel: 'background:#fef9c3;color:#92400e;border-color:#fde68a',
anspruchsvoll: 'background:#fee2e2;color:#991b1b;border-color:#fecaca' };
// POI-Typen entlang der Route — nur relevante/interessante Orte
const NEARBY_TYPES = [
@ -722,8 +722,8 @@ window.Page_routes = (() => {
<div id="rk-detail-map" style="height:200px;border-radius:var(--radius-md);
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-pill rk-pill--neutral">${route.distanz_km.toFixed(2)} km</span>` : ''}
<div style="display:flex;flex-wrap:wrap;gap:6px;margin:var(--space-3) 0">
${route.distanz_km ? `<span class="rk-pill rk-pill--neutral">${route.distanz_km.toFixed(1)} 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>` : ''}