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

Fix: Forum-Buttons Icon-only, Layout-Fix (Edit+Delete rechtsbündig)

Browse source 
- Neue .forum-icon-btn CSS-Klasse: 32×32px, transparent, hover-Feedback
- Post-Aktionen: Like links, Melden/Bearbeiten/Löschen rechtsbündig gruppiert
- Thread-Footer: Löschen+Bearbeiten als Icon-Buttons, Schließen/Antworten als Text
- .forum-icon-btn--danger für rote Löschen-Buttons
This commit is contained in:
rene 2026-04-19 10:39:48 +02:00
parent 7a25ccae90
commit 062c0209e6
4 changed files with 35 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3670,6 +3670,28 @@ html.modal-open {
}
.forum-report-btn:hover { opacity: 1; }
/* Icon-only Action-Button (Bearbeiten, Löschen, Melden) */
.forum-icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: none;
border-radius: var(--radius-md);
background: transparent;
color: var(--c-text-muted);
cursor: pointer;
opacity: 0.65;
transition: opacity 0.15s, background 0.15s;
flex-shrink: 0;
}
.forum-icon-btn:hover { opacity: 1; background: var(--c-surface-2); }
.forum-icon-btn:active { background: var(--c-border); }
.forum-icon-btn--danger { color: var(--c-danger); }
.forum-icon-btn--danger:hover { background: rgba(239,68,68,0.08); }
/* Posts section */
.forum-posts-section { display: flex; flex-direction: column; gap: var(--space-1); }
.forum-posts-divider {

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

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

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

@ -386,11 +386,12 @@ window.Page_forum = (() => {
`;
const footer = _appState.user ? `
${(isOwn || isMod) ? `<button type="button" class="btn btn-ghost btn-sm" id="ft-delete-thread" style="color:var(--c-danger)">${UI.icon('trash')} Löschen</button>` : ''}
${isOwn ? `<button type="button" class="btn btn-ghost btn-sm" id="ft-edit-thread">${UI.icon('pencil-simple')} Bearbeiten</button>` : ''}
<button type="button" class="btn btn-secondary" id="ft-close">Schließen</button>
${(!thread.is_locked && _appState.user) ? `<button type="button" class="btn btn-primary" id="ft-reply">Antworten</button>` : ''}
` : `<button type="button" class="btn btn-primary" id="ft-close">Schließen</button>`;
${(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>`;
UI.modal.open({ title: `${UI.icon('chat-circle-dots')} ${_esc(thread.titel)}`, body, footer });
@ -569,9 +570,11 @@ window.Page_forum = (() => {
<button class="${likeClass} forum-post-like" data-post-id="${p.id}">
${UI.icon('heart')} <span class="forum-post-like-count">${p.likes || 0}</span>
</button>
${(!isOwn && uid) ? `<button class="forum-report-btn forum-post-report" data-post-id="${p.id}">${UI.icon('flag')}</button>` : ''}
${isOwn ? `<button class="btn btn-ghost btn-sm forum-post-edit" data-post-id="${p.id}" data-text="${_esc(p.text || '')}" style="margin-left:auto">${UI.icon('pencil-simple')}</button>` : ''}
${canDelete ? `<button class="btn btn-ghost btn-sm forum-post-delete" data-post-id="${p.id}" style="color:var(--c-danger)${isOwn ? '' : ';margin-left:auto'}">${UI.icon('trash')}</button>` : ''}
${(!isOwn && uid) ? `<button class="forum-icon-btn forum-post-report" data-post-id="${p.id}" title="Melden">${UI.icon('flag')}</button>` : ''}
<div style="margin-left:auto;display:flex;gap:4px">
${isOwn ? `<button class="forum-icon-btn forum-post-edit" data-post-id="${p.id}" data-text="${_esc(p.text || '')}" title="Bearbeiten">${UI.icon('pencil-simple')}</button>` : ''}
${canDelete ? `<button class="forum-icon-btn forum-icon-btn--danger forum-post-delete" data-post-id="${p.id}" title="Löschen">${UI.icon('trash')}</button>` : ''}
</div>
</div>
</div>`;
}

2
backend/static/sw.js
View file

@ -3,7 +3,7 @@
Offline-Cache + Push Notifications + Tile-Cache
============================================================ */
const CACHE_VERSION = 'by-v238';
const CACHE_VERSION = 'by-v239';
const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten