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

UX: Routen-Footer als einheitliches Icon+Label-Raster

Browse source
This commit is contained in:
rene 2026-04-19 11:20:37 +02:00
parent a37b103dfe
commit 6f667b5c61
2 changed files with 29 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -738,23 +738,35 @@ window.Page_routes = (() => {
</p>
`;
const _actionBtn = (id, icon, label, danger = false) =>
`<button type="button" id="${id}"
style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:4px;padding:var(--space-2) var(--space-1);min-height:56px;
border:1px solid var(--c-border);border-radius:var(--radius-md);
background:var(--c-surface);cursor:pointer;
color:${danger ? 'var(--c-danger)' : 'var(--c-text)'};
font-size:var(--text-xs);font-weight:var(--weight-semibold);
transition:background var(--transition-fast)">
${UI.icon(icon)}
<span>${label}</span>
</button>`;
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>` : '';
const footer = `
<div style="display:flex;flex-direction:column;gap:var(--space-2);width:100%">
<div style="display:flex;gap:var(--space-2);align-items:center">
<button type="button" class="btn btn-secondary btn-sm" id="rd-gpx" title="GPX herunterladen">${UI.icon('download-simple')} GPX</button>
<button type="button" class="btn btn-secondary btn-sm" id="rd-share" title="Route teilen">${UI.icon('arrow-square-out')} Teilen</button>
<button type="button" class="btn btn-secondary btn-sm" id="rd-navi" title="Navigation">${UI.icon('map-pin')} Navi</button>
<button type="button" class="forum-icon-btn" id="rd-send-friend" title="An Freund senden">${UI.icon('paper-plane-tilt')}</button>
${isOwn ? `
<div style="margin-left:auto;display:flex;gap:var(--space-1);align-items:center">
<button type="button" class="forum-icon-btn" id="rd-vis"
title="${route.is_public ? 'Auf Privat setzen' : 'Auf Öffentlich setzen'}">
${route.is_public ? UI.icon('lock-open') : UI.icon('lock')}
</button>
<button type="button" class="forum-icon-btn forum-icon-btn--danger" id="rd-del" title="Route löschen">${UI.icon('trash')}</button>
</div>
` : ''}
<div style="display:flex;gap:var(--space-2)">
${_actionBtn('rd-gpx', 'download-simple', 'GPX')}
${_actionBtn('rd-share', 'arrow-square-out', 'Teilen')}
${_actionBtn('rd-navi', 'map-pin', 'Navi')}
</div>
${ownerRow}
<button type="button" class="btn btn-primary w-full" id="rd-close">Schließen</button>
</div>
`;
@ -806,8 +818,8 @@ window.Page_routes = (() => {
route.is_public = !route.is_public;
const btn = document.getElementById('rd-vis');
if (btn) {
btn.innerHTML = route.is_public ? UI.icon('lock-open') : UI.icon('lock');
btn.title = route.is_public ? 'Auf Privat setzen' : 'Auf Öffentlich setzen';
btn.innerHTML = `${UI.icon(route.is_public ? 'lock-open' : 'lock')}
<span>${route.is_public ? 'Öffentlich' : 'Privat'}</span>`;
}
const r = _data.find(x => x.id === route.id);
if (r) r.is_public = route.is_public;