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

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);