feat: unify admin photo gallery with drag-and-drop + arrows

- Merge separate 'Hauptfoto' and 'Weitere Fotos' uploads into single upload zone
- Add drag-and-drop support for photo reorder
- Add ← → arrow buttons for photo reorder
- Increase thumbnail size to 200px
- Show Hauptfoto badge, ★ set primary, × delete on each thumbnail
- Auto-promote next photo when primary is deleted
- Keep vehicle.photo_url synced with primary photo
This commit is contained in:
2026-05-31 10:29:07 +02:00
parent 8be7d5aad2
commit 9bc08d994c
3 changed files with 344 additions and 70 deletions
+9 -12
View File
@@ -170,20 +170,17 @@
<form class="admin-form" id="vehicleForm">
<input type="hidden" name="vid" />
<div class="admin-photo-preview" id="photoPreview"></div>
<label>
<span data-i18n="adminPhotoUpload">Hauptfoto hochladen (JPG/PNG/WebP, max 50 MB)</span>
<input type="file" id="photoInput" accept="image/*" />
</label>
<div class="admin-photo-upload-zone" id="photoUploadZone">
<div class="admin-photo-upload-content">
<span class="admin-photo-upload-icon">📷</span>
<span>Fotos hochladen (JPG/PNG/WebP, max 50 MB)</span>
<span class="muted" style="font-size:0.85rem;">Klicken oder Dateien hierher ziehen · Mehrfachauswahl möglich</span>
</div>
<input type="file" id="photoInput" accept="image/*" multiple />
</div>
<input type="hidden" name="photo_url" />
<div style="margin-top:1.2rem;">
<label>
<span>Weitere Fotos hinzufügen</span>
<input type="file" id="extraPhotoInput" accept="image/*" multiple />
</label>
<div id="extraPhotoGallery" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:0.5rem;margin-top:0.5rem;"></div>
</div>
<div class="admin-photo-gallery" id="extraPhotoGallery"></div>
<div class="row2">
<label><span data-i18n="adminBrand">Marke</span><input name="brand" required /></label>