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

UX: Sichtbarkeits-Pill im Route-Body anklickbar (grün/blau)

Browse source
This commit is contained in:
rene 2026-04-19 11:23:36 +02:00
parent 6f667b5c61
commit 9a56978f81
3 changed files with 20 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2284,7 +2284,8 @@ html.modal-open {
/* Hundetauglichkeit-Badge */
.rk-badge--dog { background: #fef3c7; color: #92400e; font-size: 1rem; }
.rk-badge--private { background: #f1f5f9; color: #64748b; }
.rk-badge--private { background: #dbeafe; color: #1d4ed8; } /* blau = privat */
.rk-badge--public { background: #dcfce7; color: #15803d; } /* grün = öffentlich */
/* Foto-Galerie in Route-Detail */
.rk-photo-gallery {

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

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '225'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '226'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const App = (() => {

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

@ -726,7 +726,15 @@ window.Page_routes = (() => {
${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.is_public ? `<span class="rk-badge rk-badge--private">${UI.icon('lock')} Privat</span>` : ''}
${isOwn
? `<button type="button" id="rd-vis-pill"
class="rk-badge ${route.is_public ? 'rk-badge--public' : 'rk-badge--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'}
</button>`
: (!route.is_public ? `<span class="rk-badge rk-badge--private">${UI.icon('lock')} Privat</span>` : '')
}
</div>
${route.beschreibung ? `<p style="color:var(--c-text-secondary);margin-bottom:var(--space-3)">${UI.escape(route.beschreibung)}</p>` : ''}
<div id="rk-nearby" class="rk-nearby-section">
@ -754,8 +762,6 @@ window.Page_routes = (() => {
const ownerRow = isOwn ? `
<div style="display:flex;gap:var(--space-2)">
${_actionBtn('rd-send-friend', 'paper-plane-tilt', 'Senden')}
${_actionBtn('rd-vis', route.is_public ? 'lock-open' : 'lock',
route.is_public ? 'Öffentlich' : 'Privat')}
${_actionBtn('rd-del', 'trash', 'Löschen', true)}
</div>` : '';
@ -811,15 +817,17 @@ window.Page_routes = (() => {
// An Freund senden
document.getElementById('rd-send-friend')?.addEventListener('click', () => _openSendToFriendModal(route));
// Sichtbarkeit toggle
document.getElementById('rd-vis')?.addEventListener('click', async () => {
// Sichtbarkeit toggle — Pill im Body
document.getElementById('rd-vis-pill')?.addEventListener('click', async () => {
const pill = document.getElementById('rd-vis-pill');
try {
await API.routes.update(route.id, { is_public: !route.is_public });
route.is_public = !route.is_public;
const btn = document.getElementById('rd-vis');
if (btn) {
btn.innerHTML = `${UI.icon(route.is_public ? 'lock-open' : 'lock')}
<span>${route.is_public ? 'Öffentlich' : 'Privat'}</span>`;
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';
}
const r = _data.find(x => x.id === route.id);
if (r) r.is_public = route.is_public;