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

Fixed dialog problems

Browse Source
This commit is contained in:
Torsten Schulz
2025-05-02 11:30:31 +02:00
parent aac4812ba8
commit b9ba08f91f
2 changed files with 67 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/common/components/DialogComponent.vue
View File

@@ -6,10 +6,10 @@
<button @click="closeDialog">OK</button> <button @click="closeDialog">OK</button>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'DialogComponent', name: 'DialogComponent',
props: { props: {
title: { title: {
@@ -31,33 +31,32 @@
this.$emit('close'); this.$emit('close');
} }
} }
}; };
</script> </script>
<style scoped> <style scoped>
.dialog-overlay { .dialog-overlay {
position: fixed; top: calc(50% - 25em);
top: 0; left: 5%;
left: 0; width: 90%;
width: 100%; height: 50em;
height: 100%; background: rgba(0, 0, 0, .5);
background: rgba(0, 0, 0, 0.5);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} overflow: auto;
}
.dialog { .dialog {
background: white; background: white;
padding: 20px; padding: 20px;
border-radius: 5px; border-radius: 5px;
max-width: 400px; max-width: 400px;
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
button { button {
margin-top: 20px; margin-top: 20px;
} }
</style> </style>

18
src/components/AddImageDialog.vue
View File

@@ -4,7 +4,8 @@
<div class="dialog-content"> <div class="dialog-content">
<h3>Bild auswählen</h3> <h3>Bild auswählen</h3>
<div class="images-container"> <div class="images-container">
<div v-for="image in images" :key="image.id" class="image-block" @click="selectImage(image)" :class="{ selected: image.id === selectedImage?.id }"> <div v-for="image in images" :key="image.id" class="image-block" @click="selectImage(image)"
:class="{ selected: image.id === selectedImage?.id }">
<img :src="'/images/uploads/' + image.filename" /> <img :src="'/images/uploads/' + image.filename" />
<span v-if="image.description" :title="image.description">{{ image.title }}</span> <span v-if="image.description" :title="image.description">{{ image.title }}</span>
<span v-else>{{ image.title }}</span> <span v-else>{{ image.title }}</span>
@@ -77,21 +78,22 @@ export default {
<style scoped> <style scoped>
.dialog-overlay { .dialog-overlay {
position: fixed; top: calc(50% - 25em);
top: 0; left: 5%;
left: 0; width: 90%;
width: 100%; height: 50em;
height: 100%; background: rgba(0, 0, 0, .5);
background: rgba(0, 0, 0, 0.5);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
overflow: auto;
} }
.dialog-content { .dialog-content {
background: white;
padding: 20px; padding: 20px;
border-radius: 8px; border-radius: 8px;
width: 100%;
height: 100%;
} }
.images-container { .images-container {