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

UX: Nearby-POIs einklappbar + klickbar + nur relevante Typen

Browse source 
- NEARBY_TYPES: Bänke/Wasserstellen entfernt → nur Restaurant, Tierarzt, Zoobedarf
- Gruppen einklappbar (Chevron dreht sich)
- POI-Namen anklickbar → öffnet Apple Maps/Google Maps am POI-Standort
- CSS: Card-Stil für Gruppen, gute Touch-Targets
This commit is contained in:
rene 2026-04-19 11:29:46 +02:00
parent 9a56978f81
commit 3144e100f3
3 changed files with 95 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2339,24 +2339,50 @@ html.modal-open {
}
.rk-nearby-group {
margin-bottom: var(--space-3);
border: 1px solid var(--c-border-light);
border-radius: var(--radius-md);
overflow: hidden;
}
.rk-nearby-group-label {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--c-text-secondary);
margin-bottom: var(--space-1);
.rk-nearby-group-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--space-2) var(--space-3);
background: var(--c-surface-2);
border: none;
cursor: pointer;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--c-text);
text-align: left;
-webkit-tap-highlight-color: transparent;
}
.rk-nearby-group-header:hover { background: var(--c-border-light); }
.rk-nearby-items { padding: var(--space-1) 0; }
.rk-nearby-item {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
align-items: baseline;
padding: var(--space-1) 0;
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--c-border-light);
width: 100%;
background: none;
border-left: none;
border-right: none;
border-top: none;
text-align: left;
font: inherit;
}
.rk-nearby-item:last-child { border-bottom: none; }
.rk-nearby-name { font-size: var(--text-sm); color: var(--c-text); }
.rk-nearby-detail { font-size: var(--text-xs); color: var(--c-text-muted); }
.rk-nearby-item--link {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.rk-nearby-item--link:hover { background: var(--c-surface-2); }
.rk-nearby-name { font-size: var(--text-sm); color: var(--c-text); display: block; }
.rk-nearby-detail { font-size: var(--text-xs); color: var(--c-text-muted); display: block; margin-top: 1px; }
.rk-nearby-phone { color: var(--c-primary); text-decoration: none; }
/* Hundetauglichkeit-Auswahl im Formular */