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

Feature: Foto-Editor im Hundeprofil — Zoom, Drag-to-pan, Löschen

Browse source
This commit is contained in:
rene 2026-04-17 23:00:21 +02:00
parent cb8ac8cffd
commit 913cebcba1
6 changed files with 234 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4567,3 +4567,55 @@ textarea.form-control {
right: 1px;
border: 2px solid var(--c-surface);
}
/* --- Hundeprofil Avatar --- */
.dp-avatar-ring {
width: 120px; height: 120px;
border-radius: 50%;
border: 3px solid var(--c-primary);
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.dp-avatar-img {
width: 100%; height: 100%;
object-fit: cover;
transform-origin: center;
pointer-events: none;
user-select: none;
}
.dp-avatar-empty {
background: var(--c-surface-2);
border-color: var(--c-border);
font-size: 3.5rem;
}
.dp-avatar-edit-btn {
position: absolute; bottom: 4px; right: 4px;
background: var(--c-primary); color: #fff;
border: none; border-radius: 50%;
width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
}
/* --- Foto-Editor Modal --- */
.photo-editor { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }
.photo-editor-preview {
width: 200px; height: 200px;
border-radius: 50%;
border: 3px solid var(--c-primary);
overflow: hidden;
cursor: grab;
display: flex; align-items: center; justify-content: center;
background: var(--c-surface-2);
}
.photo-editor-preview:active { cursor: grabbing; }
.photo-editor-preview img {
width: 100%; height: 100%;
object-fit: cover;
transform-origin: center;
pointer-events: all;
user-select: none;
-webkit-user-drag: none;
}
.photo-editor-empty { font-size: 5rem; color: var(--c-text-secondary); }
.photo-editor-controls { width: 100%; }