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

Feature: Hintergrundbild Portrait=Panorama (track/300vw) vs Landscape=Vollbild (overlay/100vw) mit Orientation-Listener (SW by-v784)

Browse source
This commit is contained in:
rene 2026-05-08 18:58:31 +02:00
parent 247ded6103
commit 2ff6d4dfe4
5 changed files with 42 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

43
backend/static/js/worlds.js
View file

@ -917,23 +917,51 @@ window.Worlds = (() => {
} catch { return dog.foto_url || null; }
}
let _bgUrl = null; // aktuell gesetztes Hintergrundbild
function _applyBgOrientation() {
const ov = document.getElementById('worlds-overlay');
const track = document.getElementById('worlds-track');
if (!ov || !track || !_bgUrl) return;
const portrait = window.matchMedia('(orientation: portrait)').matches;
if (portrait) {
// Panorama: Bild über alle drei Welten, scrollt mit dem Swipe
ov.style.backgroundImage = '';
track.style.backgroundImage = `url('${_bgUrl}')`;
track.style.backgroundSize = 'cover';
track.style.backgroundPosition = 'center 40%';
track.style.backgroundRepeat = 'no-repeat';
} else {
// Vollbild pro Welt (Landscape / Desktop)
track.style.backgroundImage = '';
ov.style.backgroundImage = `url('${_bgUrl}')`;
ov.style.backgroundSize = 'cover';
ov.style.backgroundPosition = 'center 40%';
ov.style.backgroundRepeat = 'no-repeat';
}
}
// Orientierungswechsel → Bild neu setzen
window.matchMedia('(orientation: portrait)').addEventListener('change', _applyBgOrientation);
function _applyBgImage(url) {
const ov = document.getElementById('worlds-overlay');
if (!ov) return;
const ov = document.getElementById('worlds-overlay');
const track = document.getElementById('worlds-track');
if (!ov || !track) return;
if (url) {
const toLoad = new Image();
toLoad.onload = () => {
_hasBgPhoto = true;
ov.style.backgroundImage = `url('${url}')`;
ov.style.backgroundSize = 'cover';
ov.style.backgroundPosition = 'center 40%';
ov.style.backgroundRepeat = 'no-repeat';
_bgUrl = url;
_applyBgOrientation();
document.getElementById('wh-photo-hint')?.remove();
};
toLoad.onerror = () => _applyBgImage(null);
toLoad.src = url;
} else {
_hasBgPhoto = false;
_bgUrl = null;
track.style.backgroundImage = '';
ov.style.backgroundImage = 'linear-gradient(160deg,#1a1f35 0%,#16213e 33%,#1a2535 67%,#0f1921 100%)';
ov.style.backgroundSize = '100% 100%';
}
@ -979,8 +1007,7 @@ window.Worlds = (() => {
const staleMin = Math.max(weatherObj.ageMin || 0, dogsObj.ageMin || 0);
// Panorama-Bild setzen (nur wenn noch kein Bild vorhanden)
const ov = document.getElementById('worlds-overlay');
if (dog && !ov?.style.backgroundImage?.startsWith('url')) {
if (dog && !_bgUrl) {
_loadDailyImage(dog).then(_applyBgImage);
} else if (!dog) { _applyBgImage(null); }