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

Fix: Modal-Footer Layout Routes + Forum

Browse source 
Routen-Footer:
- 2-Zeilen-Layout: Aktions-Buttons oben, Schließen full-width unten
- GPX/Teilen/Navi als Text-Icon, Freund/Sichtbarkeit/Löschen als Icon-only rechts
- Keine Overflow/Clipping mehr

Forum-Footer:
- flex-direction:column Layout mit margin-left:auto für Icon-Buttons links
- Löschen/Bearbeiten (Icon) links, Schließen/Antworten rechts
- flex:1 Spacer-Problem behoben
This commit is contained in:
rene 2026-04-19 10:48:49 +02:00
parent b1053198de
commit e5cbe879ff
4 changed files with 24 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

17
backend/static/js/pages/forum.js
View file

@ -386,12 +386,17 @@ window.Page_forum = (() => {
`;
const footer = _appState.user ? `
${(isOwn || isMod) ? `<button type="button" class="forum-icon-btn forum-icon-btn--danger" id="ft-delete-thread" title="Löschen">${UI.icon('trash')}</button>` : ''}
${isOwn ? `<button type="button" class="forum-icon-btn" id="ft-edit-thread" title="Bearbeiten">${UI.icon('pencil-simple')}</button>` : ''}
<div style="flex:1"></div>
<button type="button" class="btn btn-secondary btn-sm" id="ft-close">Schließen</button>
${(!thread.is_locked && _appState.user) ? `<button type="button" class="btn btn-primary btn-sm" id="ft-reply">Antworten</button>` : ''}
` : `<button type="button" class="btn btn-primary btn-sm" id="ft-close">Schließen</button>`;
<div style="display:flex;flex-direction:column;gap:var(--space-2);width:100%">
<div style="display:flex;gap:var(--space-2);align-items:center">
${(isOwn || isMod) ? `<button type="button" class="forum-icon-btn forum-icon-btn--danger" id="ft-delete-thread" title="Löschen">${UI.icon('trash')}</button>` : ''}
${isOwn ? `<button type="button" class="forum-icon-btn" id="ft-edit-thread" title="Bearbeiten">${UI.icon('pencil-simple')}</button>` : ''}
<div style="margin-left:auto;display:flex;gap:var(--space-2)">
<button type="button" class="btn btn-secondary btn-sm" id="ft-close">Schließen</button>
${(!thread.is_locked && _appState.user) ? `<button type="button" class="btn btn-primary btn-sm" id="ft-reply">Antworten</button>` : ''}
</div>
</div>
</div>
` : `<button type="button" class="btn btn-primary w-full" id="ft-close">Schließen</button>`;
UI.modal.open({ title: `${UI.icon('chat-circle-dots')} ${_esc(thread.titel)}`, body, footer });

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

@ -739,20 +739,22 @@ window.Page_routes = (() => {
`;
const footer = `
<div style="display:flex;gap:var(--space-2);width:100%;flex-wrap:wrap">
<div style="display:flex;gap:var(--space-2);flex:1">
<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="Mit Navi öffnen">${UI.icon('map-pin')} Navi</button>
<button type="button" class="btn btn-secondary btn-sm" id="rd-send-friend" title="An Freund senden">${UI.icon('chat-circle-dots')}</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('chat-circle-dots')}</button>
${isOwn ? `
<button type="button" class="btn btn-secondary btn-sm" id="rd-vis">
${route.is_public ? UI.icon('lock')+' Privat' : UI.icon('globe')+' Öffentlich'}
</button>
<button type="button" class="btn btn-ghost btn-sm" id="rd-del" style="color:var(--c-danger)" title="Route löschen">${UI.icon('trash')} Löschen</button>
<div style="margin-left:auto;display:flex;gap:var(--space-1);align-items:center">
<button type="button" class="btn btn-secondary btn-sm" id="rd-vis" title="${route.is_public ? 'Privat schalten' : 'Öffentlich schalten'}">
${route.is_public ? UI.icon('lock') : UI.icon('globe')}
</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>
<button type="button" class="btn btn-primary btn-sm" id="rd-close">Schließen</button>
<button type="button" class="btn btn-primary w-full" id="rd-close">Schließen</button>
</div>
`;