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

UX: Privater-Bereich-Header auf Zuchtkartei, Wurfverwaltung, Läufigkeit (SW by-v909)

Browse source
This commit is contained in:
rene 2026-05-13 19:44:25 +02:00
parent 7fb4177dbd
commit a577e6d8d9
7 changed files with 81 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

23
backend/static/js/pages/laeufi.js
View file

@ -26,9 +26,32 @@ window.Page_laeufi = (() => {
// ----------------------------------------------------------
// Grundstruktur
// ----------------------------------------------------------
function _privateHeader() {
return `
<div 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="font-size:var(--text-xs);color:rgba(196,132,58,.6)">
Nur du siehst das — nicht öffentlich
</div>
</div>`;
}
function _render() {
_container.innerHTML = `
<div style="max-width:860px">
${_privateHeader()}
<div class="by-toolbar" style="margin-bottom:var(--space-4)">
<h2 style="margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold)">
${UI.icon('thermometer')} Läufigkeit & Trächtigkeit

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

@ -90,12 +90,38 @@ window.Page_litters = (() => {
// ----------------------------------------------------------
// Grundstruktur rendern
// ----------------------------------------------------------
function _privateHeader(icon, title) {
const zwinger = _appState?.user?.name || '';
return `
<div 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
</div>
</div>
</div>`;
}
function _render() {
_container.innerHTML = `
<div class="litters-layout">
<div class="by-toolbar">
${_privateHeader()}
<div class="by-toolbar" style="flex-wrap:wrap">
<h2 style="margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold)">
${UI.icon('dog')} Meine Würfe
${UI.icon('certificate')} Meine Würfe
</h2>
<button class="btn btn-primary btn-sm" id="litters-new-btn">
${UI.icon('plus')} Neuer Wurf

23
backend/static/js/pages/zuchthunde.js
View file

@ -98,9 +98,32 @@ window.Page_zuchthunde = (() => {
// ----------------------------------------------------------
// Grundstruktur
// ----------------------------------------------------------
function _privateHeader() {
return `
<div 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="font-size:var(--text-xs);color:rgba(196,132,58,.6)">
Nur du siehst das — nicht öffentlich
</div>
</div>`;
}
function _render() {
_container.innerHTML = `
<div class="zh-layout">
${_privateHeader()}
<div class="by-toolbar" style="flex-wrap:wrap">
<h2 style="margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold);flex-shrink:0;white-space:nowrap">
${UI.icon('dog')} Zuchtkartei