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

UX: Privater-Header mit Zwingername + Logo auf allen Züchter-Seiten (SW by-v910)

Browse source
This commit is contained in:
rene 2026-05-13 19:48:58 +02:00
parent a577e6d8d9
commit ccf5a8b7ba
8 changed files with 117 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

58
backend/static/js/pages/litters.js
View file

@ -5,11 +5,12 @@
window.Page_litters = (() => {
let _container = null;
let _appState = null;
let _litters = []; // geladene Würfe
let _openId = null; // aufgeklappter Wurf
let _filterStatus = null; // aktiver Status-Filter
let _container = null;
let _appState = null;
let _litters = [];
let _openId = null;
let _filterStatus = null;
let _breederInfo = null; // { zwingername, logo_url }
// ----------------------------------------------------------
// Hilfsfunktionen
@ -76,6 +77,12 @@ window.Page_litters = (() => {
}
_render();
API.breeder.status().then(s => {
_breederInfo = s?.profile ? { zwingername: s.profile.zwingername, logo_url: s.profile.logo_url } : null;
// Header nach Laden der Info neu rendern
const headerEl = _container.querySelector('#breeder-private-header');
if (headerEl) headerEl.outerHTML = _privateHeader();
}).catch(() => {});
await _loadLitters();
}
@ -90,26 +97,35 @@ window.Page_litters = (() => {
// ----------------------------------------------------------
// Grundstruktur rendern
// ----------------------------------------------------------
function _privateHeader(icon, title) {
const zwinger = _appState?.user?.name || '';
function _privateHeader() {
const zwinger = _breederInfo?.zwingername || '';
const logoUrl = _breederInfo?.logo_url || null;
const logoHtml = logoUrl
? `<img src="${_esc(logoUrl)}" alt="Logo"
style="width:40px;height:40px;border-radius:50%;object-fit:cover;
border:2px solid rgba(196,132,58,.5);flex-shrink:0"
onerror="this.style.display='none'">`
: `<div style="width:40px;height:40px;border-radius:50%;background:rgba(196,132,58,.15);
border:2px solid rgba(196,132,58,.3);display:flex;align-items:center;
justify-content:center;flex-shrink:0">
<svg style="width:20px;height:20px;color:var(--c-primary)" viewBox="0 0 256 256">
<use href="/icons/phosphor.svg#paw-print"></use>
</svg>
</div>`;
return `
<div style="background:linear-gradient(135deg,#1a1208,#2d1f0e);
<div id="breeder-private-header" style="background:linear-gradient(135deg,#1a1208,#2d1f0e);
border-bottom:1px solid rgba(196,132,58,.25);
padding:var(--space-3) var(--space-4);
display:flex;align-items:center;gap:var(--space-3)">
<div style="background:rgba(196,132,58,.15);border:1px solid rgba(196,132,58,.3);
border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);
display:flex;align-items:center;gap:var(--space-2);flex-shrink:0">
<svg style="width:14px;height:14px;color:var(--c-primary)" viewBox="0 0 256 256">
<use href="/icons/phosphor.svg#lock-key"></use>
</svg>
<span style="font-size:var(--text-xs);font-weight:700;color:var(--c-primary);white-space:nowrap">
Privater Bereich
</span>
</div>
<div style="min-width:0">
<div style="font-size:var(--text-xs);color:rgba(196,132,58,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
Nur du siehst das — nicht öffentlich
${logoHtml}
<div style="flex:1;min-width:0">
${zwinger ? `<div style="font-size:var(--text-sm);font-weight:700;color:rgba(255,255,255,.9);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${_esc(zwinger)}</div>` : ''}
<div style="display:flex;align-items:center;gap:var(--space-2);margin-top:1px">
<svg style="width:11px;height:11px;color:var(--c-primary);flex-shrink:0" viewBox="0 0 256 256">
<use href="/icons/phosphor.svg#lock-key"></use>
</svg>
<span style="font-size:var(--text-xs);color:rgba(196,132,58,.7)">Privater Bereich · Nur du siehst das</span>
</div>
</div>
</div>`;