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

Fix: Welcome-Chip ohne Standort leer, Foto vertikal zentriert (object-fit) — SW by-v477, APP_VER 454

Browse source
This commit is contained in:
rene 2026-04-29 07:38:39 +02:00
parent 4e1e7ca37e
commit b09a569689
3 changed files with 33 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

64
backend/static/js/pages/welcome.js
View file

@ -303,8 +303,8 @@ window.Page_welcome = (() => {
if (photoUrl) {
return `
<div class="wc-hero wc-hero--photo" id="wc-hero-box"
style="background-image:url('${UI.escape(photoUrl)}')">
<div class="wc-hero wc-hero--photo" id="wc-hero-box">
<img src="${UI.escape(photoUrl)}" class="wc-hero-bg-img" alt="">
<div class="wc-hero-overlay"></div>
${avatarUrl ? `<img src="${UI.escape(avatarUrl)}" class="wc-hero-avatar" alt="${dogName}">` : ''}
<div class="wc-hero-center">
@ -329,31 +329,15 @@ window.Page_welcome = (() => {
function _chip2HTML(dashData) {
const appt = dashData?.next_appointment;
if (appt) {
const apptLabel = UI.escape(appt.bezeichnung);
const apptDate = _relDate(appt.naechstes) || appt.naechstes || '—';
const apptIcon = _appointmentIcon(appt.typ);
return `
<div class="wc-chip" id="wc-chip-mid" data-nav="health">
<svg class="ph-icon wc-chip-icon" aria-hidden="true"><use href="/icons/phosphor.svg#${apptIcon}"></use></svg>
<span class="wc-chip-label">Nächster Termin</span>
<span class="wc-chip-val">${apptLabel} · ${apptDate}</span>
</div>`;
}
const ex = dashData?.daily_exercise;
if (ex) {
return `
<div class="wc-chip" id="wc-chip-mid" data-nav="uebungen">
<svg class="ph-icon wc-chip-icon" aria-hidden="true"><use href="/icons/phosphor.svg#target"></use></svg>
<span class="wc-chip-label">Übung des Tages</span>
<span class="wc-chip-val">${UI.escape(ex.name)}</span>
</div>`;
}
if (!appt) return ''; // kein Termin → Chip fehlt; Bank kommt ggf. async
const apptLabel = UI.escape(appt.bezeichnung);
const apptDate = _relDate(appt.naechstes) || appt.naechstes || '—';
const apptIcon = _appointmentIcon(appt.typ);
return `
<div class="wc-chip" id="wc-chip-mid" data-nav="uebungen">
<svg class="ph-icon wc-chip-icon" aria-hidden="true"><use href="/icons/phosphor.svg#target"></use></svg>
<span class="wc-chip-label">Übung des Tages</span>
<span class="wc-chip-val wc-chip-val--empty">—</span>
<div class="wc-chip" id="wc-chip-mid" data-nav="health">
<svg class="ph-icon wc-chip-icon" aria-hidden="true"><use href="/icons/phosphor.svg#${apptIcon}"></use></svg>
<span class="wc-chip-label">Nächster Termin</span>
<span class="wc-chip-val">${apptLabel} · ${apptDate}</span>
</div>`;
}
@ -401,15 +385,24 @@ window.Page_welcome = (() => {
const distTxt = distM < 1000 ? `${distM} m` : `${(distM / 1000).toFixed(1)} km`;
const name = bench.name || 'Bank';
const chip2 = _container.querySelector('#wc-chip-mid');
if (!chip2) return;
chip2.dataset.nav = 'map';
chip2.dataset.bench = JSON.stringify({ lat: bench.lat, lon: bench.lon });
const chipsRow = _container.querySelector('#wc-chips-row');
if (!chipsRow) return;
// Chip ggf. schon da (Termin-Chip) oder neu einfügen (nach Chip 1)
let chip2 = _container.querySelector('#wc-chip-mid');
if (!chip2) {
chip2 = document.createElement('div');
chip2.className = 'wc-chip';
chip2.id = 'wc-chip-mid';
// nach erstem Chip einfügen
const first = chipsRow.querySelector('.wc-chip');
first ? first.after(chip2) : chipsRow.prepend(chip2);
}
chip2.dataset.nav = 'map';
chip2.innerHTML = `
<svg class="ph-icon wc-chip-icon" aria-hidden="true"><use href="/icons/phosphor.svg#path"></use></svg>
<span class="wc-chip-label">Gassirunde</span>
<span class="wc-chip-val">${UI.escape(name)} · ${distTxt}</span>`;
// Event neu binden (ersetzt existierenden)
chip2.addEventListener('click', () => App.navigate('map'));
}
@ -496,8 +489,8 @@ window.Page_welcome = (() => {
if (photoUrl) {
heroBox.className = 'wc-hero wc-hero--photo';
heroBox.style.backgroundImage = `url('${UI.escape(photoUrl)}')`;
heroBox.innerHTML = `
<img src="${UI.escape(photoUrl)}" class="wc-hero-bg-img" alt="">
<div class="wc-hero-overlay"></div>
${avatarUrl ? `<img src="${UI.escape(avatarUrl)}" class="wc-hero-avatar" alt="${dogName}">` : ''}
<div class="wc-hero-center">
@ -731,10 +724,15 @@ window.Page_welcome = (() => {
}
/* Photo variant */
.wc-hero--photo {
background-size: cover; background-position: center;
min-height: 260px;
flex-direction: column; align-items: center; justify-content: flex-end;
}
.wc-hero-bg-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center center;
z-index: 0;
}
.wc-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.55) 100%);