torsten/trainingstagebuch
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor file input sections in ImageViewerDialog and MembersView to enhance user experience. The updates include separate file input options for selecting files and capturing images via the device camera, improving accessibility and usability for image uploads.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2025-11-13 15:55:33 +01:00
parent fff5d404f5
commit 0caa31e3eb
2 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/ImageViewerDialog.vue
View File

@@ -79,10 +79,16 @@
</div>
<div v-if="allowUpload" class="upload-section">
<label class="upload-label">
📤 Bilder hochladen
<input type="file" multiple accept="image/*" @change="handleFileSelect" />
</label>
<div style="display: flex; gap: 10px; align-items: center;">
<input type="file" multiple accept="image/*" @change="handleFileSelect" ref="fileInput" style="display: none;" id="image-upload-file">
<label for="image-upload-file" class="upload-label" style="cursor: pointer; padding: 8px 15px; border: 1px solid #ccc; border-radius: 4px; background: #f5f5f5; display: inline-block;">
📁 Dateien auswählen
</label>
<input type="file" multiple accept="image/*" capture="environment" @change="handleFileSelect" ref="cameraInput" style="display: none;" id="image-upload-camera">
<label for="image-upload-camera" class="upload-label" style="cursor: pointer; padding: 8px 15px; border: 1px solid #ccc; border-radius: 4px; background: #f5f5f5; display: inline-block;">
📷 Kamera
</label>
</div>
</div>
<div v-if="hasImages" class="thumbnail-strip">

9
frontend/src/views/MembersView.vue
View File

@@ -93,7 +93,14 @@
<label class="checkbox-item"><span>Pics in Internet erlaubt:</span> <input type="checkbox" v-model="newPicsInInternetAllowed"></label>
<label class="checkbox-item"><span>Testmitgliedschaft:</span> <input type="checkbox" v-model="testMembership"></label>
<label class="checkbox-item"><span>Mitgliedsformular ausgehändigt:</span> <input type="checkbox" v-model="newMemberFormHandedOver"></label>
<label><span>Bild:</span> <input type="file" accept="image/*" @change="onFileSelected"></label>
<label><span>Bild:</span>
<div style="display: flex; gap: 10px; align-items: center;">
<input type="file" accept="image/*" @change="onFileSelected" ref="fileInput" style="display: none;" id="member-image-file">
<label for="member-image-file" style="cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; border-radius: 4px; background: #f5f5f5;">📁 Datei auswählen</label>
<input type="file" accept="image/*" capture="environment" @change="onFileSelected" ref="cameraInput" style="display: none;" id="member-image-camera">
<label for="member-image-camera" style="cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; border-radius: 4px; background: #f5f5f5;">📷 Kamera</label>
</div>
</label>
<div v-if="memberImagePreview">
<img :src="memberImagePreview" alt="Vorschau des Mitgliedsbildes"
style="max-width: 200px; max-height: 200px;">