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

Wiki: Hunde-Silhouette als Placeholder für fehlende Rassenfotos (SW by-v362)

Browse source 
- _DOG_SILHOUETTE Phosphor-SVG als Modul-Konstante in wiki.js
- Karten-Fallback zeigt SVG statt UI.icon('dog')
- Detail-Ansicht zeigt 56px SVG + „Kein Foto verfügbar" wenn kein Foto
- CSS: wiki-breed-photo-fallback mit Gradient, neue wiki-detail-photo-placeholder-Klasse
- SW by-v362, APP_VER 347
This commit is contained in:
rene 2026-04-25 09:27:19 +02:00
parent 2fed44fbd4
commit de73c7901e
4 changed files with 39 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4660,15 +4660,35 @@ html.modal-open {
display: block;
}
.wiki-breed-photo-fallback {
font-size: 2.5rem;
line-height: 1;
display: flex;
align-items: center;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: var(--c-bg);
color: var(--c-text-secondary);
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--c-surface-2) 0%, var(--c-bg) 100%);
color: var(--c-text-muted);
font-size: 2.8rem;
line-height: 1;
}
.wiki-detail-photo-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
width: 100%;
height: 220px;
background: linear-gradient(135deg, var(--c-surface-2) 0%, var(--c-bg) 100%);
border-radius: var(--radius-lg);
color: var(--c-text-muted);
font-size: 3.5rem;
}
.wiki-detail-photo-placeholder span {
font-size: var(--text-xs);
color: var(--c-text-muted);
font-weight: var(--weight-medium);
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* Card Body */

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

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

13
backend/static/js/pages/wiki.js
View file

@ -368,11 +368,13 @@ window.Page_wiki = (() => {
}
}
const _DOG_SILHOUETTE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="48" height="48" fill="currentColor" aria-hidden="true"><path d="M200,56H180V48a12,12,0,0,0-24,0v8H132a44,44,0,0,0-43.3,36.3L80,140H60a28,28,0,0,0-28,28v16a12,12,0,0,0,12,12H204a12,12,0,0,0,12-12V100A44.05,44.05,0,0,0,200,56Zm20,128H44V168a4,4,0,0,1,4-4H84.9l4.16-41.57A20,20,0,0,1,108.86,104H156a4,4,0,0,1,0,8H128a4,4,0,0,0,0,8h28a12,12,0,0,0,12-12,11.84,11.84,0,0,0-.1-1.52A20,20,0,0,1,196,124Zm0-60a20,20,0,0,1-7.77,15.82A27.84,27.84,0,0,0,180,132V120a12,12,0,0,1,12-12h16a4,4,0,0,0,4-4V100A20,20,0,0,1,220,124ZM168,48a4,4,0,0,1,8,0V72H168Z"/></svg>`;
function _breedCardHtml(r) {
const photoHtml = r.foto_url
? `<img class="wiki-breed-photo" src="${_esc(r.foto_url)}" loading="lazy" alt="${_esc(r.name)}" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">`
: '';
const fallbackHtml = `<div class="wiki-breed-photo-fallback" style="${r.foto_url ? 'display:none' : ''}">${UI.icon('dog')}</div>`;
const fallbackHtml = `<div class="wiki-breed-photo-fallback" style="${r.foto_url ? 'display:none' : ''}">${_DOG_SILHOUETTE}</div>`;
return `
<div class="wiki-breed-card" data-slug="${_esc(r.slug)}">
@ -714,11 +716,14 @@ window.Page_wiki = (() => {
? rasse.temperament.split(',').map(t => `<span class="wiki-trait-chip">${_esc(t.trim())}</span>`).join('')
: '';
const _dogSvgLg = _DOG_SILHOUETTE.replace('width="48" height="48"', 'width="56" height="56"');
const photoHtml = rasse.foto_url
? `<div class="wiki-detail-hero-photo-wrap">
<img class="wiki-detail-photo" src="${_esc(rasse.foto_url)}" alt="${_esc(rasse.name)}" onerror="this.parentElement.style.display='none'">
</div>`
: '';
<img class="wiki-detail-photo" src="${_esc(rasse.foto_url)}" alt="${_esc(rasse.name)}"
onerror="this.parentElement.style.display='none';this.parentElement.nextElementSibling.style.display='flex'">
</div>
<div class="wiki-detail-photo-placeholder" style="display:none">${_dogSvgLg}<span>Kein Foto verfügbar</span></div>`
: `<div class="wiki-detail-photo-placeholder">${_dogSvgLg}<span>Kein Foto verfügbar</span></div>`;
const berichteHtml = _renderBerichteHtml(rasse.berichte || [], slug);

2
backend/static/sw.js
View file

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