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

Fix: Foto-Editor — Prozent-Offsets (Position-Bug), Long-press, Stift-Icon

Browse source
This commit is contained in:
rene 2026-04-17 23:06:24 +02:00
parent 913cebcba1
commit 4f12c8e6a4
4 changed files with 16 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4616,6 +4616,8 @@ textarea.form-control {
pointer-events: all; pointer-events: all;
user-select: none; user-select: none;
-webkit-user-drag: none; -webkit-user-drag: none;
-webkit-touch-callout: none;
touch-action: none;
} }
.photo-editor-empty { font-size: 5rem; color: var(--c-text-secondary); } .photo-editor-empty { font-size: 5rem; color: var(--c-text-secondary); }
.photo-editor-controls { width: 100%; } .photo-editor-controls { width: 100%; }

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

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

19
backend/static/js/pages/dog-profile.js
View file

@ -81,11 +81,11 @@ window.Page_dog_profile = (() => {
${dog.foto_url ${dog.foto_url
? `<div class="dp-avatar-ring"> ? `<div class="dp-avatar-ring">
<img src="${dog.foto_url}" alt="${_esc(dog.name)}" class="dp-avatar-img" <img src="${dog.foto_url}" alt="${_esc(dog.name)}" class="dp-avatar-img"
style="transform:scale(${dog.foto_zoom||1}) translate(${dog.foto_offset_x||0}px,${dog.foto_offset_y||0}px)"> style="transform:scale(${dog.foto_zoom||1}) translate(${dog.foto_offset_x||0}%,${dog.foto_offset_y||0}%)">
</div>` </div>`
: `<div class="dp-avatar-ring dp-avatar-empty">${UI.icon('dog')}</div>`} : `<div class="dp-avatar-ring dp-avatar-empty">${UI.icon('dog')}</div>`}
<button class="dp-avatar-edit-btn" id="dp-photo-edit-btn" title="Foto bearbeiten"> <button class="dp-avatar-edit-btn" id="dp-photo-edit-btn">
${UI.icon('camera')} ${UI.icon('pencil-simple')}
</button> </button>
</div> </div>
@ -284,7 +284,8 @@ window.Page_dog_profile = (() => {
<div class="photo-editor-preview" id="pe-preview"> <div class="photo-editor-preview" id="pe-preview">
${hasPhoto ${hasPhoto
? `<img src="${UI.escape(dog.foto_url)}" id="pe-img" draggable="false" ? `<img src="${UI.escape(dog.foto_url)}" id="pe-img" draggable="false"
style="transform:scale(${zoom}) translate(${ox}px,${oy}px)">` oncontextmenu="return false"
style="transform:scale(${zoom}) translate(${ox}%,${oy}%)">`
: `<div class="photo-editor-empty">${UI.icon('dog')}</div>`} : `<div class="photo-editor-empty">${UI.icon('dog')}</div>`}
</div> </div>
${hasPhoto ? ` ${hasPhoto ? `
@ -314,8 +315,11 @@ window.Page_dog_profile = (() => {
const img = document.getElementById('pe-img'); const img = document.getElementById('pe-img');
const zoomSlider = document.getElementById('pe-zoom'); const zoomSlider = document.getElementById('pe-zoom');
// Offsets in % des Preview-Containers (200px) — konsistent mit Profil-Anzeige
const PREVIEW_PX = 200;
function _applyTransform() { function _applyTransform() {
if (img) img.style.transform = `scale(${_zoom}) translate(${_ox}px,${_oy}px)`; if (img) img.style.transform = `scale(${_zoom}) translate(${_ox}%,${_oy}%)`;
} }
// Zoom-Slider // Zoom-Slider
@ -336,8 +340,9 @@ window.Page_dog_profile = (() => {
}); });
img.addEventListener('pointermove', e => { img.addEventListener('pointermove', e => {
if (!_dragging) return; if (!_dragging) return;
_ox = _baseX + (e.clientX - _startX) / _zoom; // Pixel-Delta → Prozent des Preview-Containers, korrigiert um Zoom
_oy = _baseY + (e.clientY - _startY) / _zoom; _ox = _baseX + (e.clientX - _startX) / (PREVIEW_PX / 100) / _zoom;
_oy = _baseY + (e.clientY - _startY) / (PREVIEW_PX / 100) / _zoom;
_applyTransform(); _applyTransform();
}); });
img.addEventListener('pointerup', () => { _dragging = false; }); img.addEventListener('pointerup', () => { _dragging = false; });

2
backend/static/sw.js
View file

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