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

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

@@ -1,63 +1,62 @@
<template> <template>
<div v-if="modelValue" class="dialog-overlay"> <div v-if="modelValue" class="dialog-overlay">
<div class="dialog"> <div class="dialog">
<h2>{{ title }}</h2> <h2>{{ title }}</h2>
<p>{{ message }}</p> <p>{{ message }}</p>
<button @click="closeDialog">OK</button> <button @click="closeDialog">OK</button>
</div>
</div> </div>
</template> </div>
</template>
<script> <script>
export default { export default {
name: 'DialogComponent', name: 'DialogComponent',
props: { props: {
title: { title: {
type: String, type: String,
required: true required: true
},
message: {
type: String,
required: true
},
modelValue: {
type: Boolean,
default: false
}
}, },
methods: { message: {
closeDialog() { type: String,
this.$emit('update:modelValue', false); required: true
this.$emit('close'); },
} modelValue: {
type: Boolean,
default: false
}
},
methods: {
closeDialog() {
this.$emit('update:modelValue', false);
this.$emit('close');
} }
};
</script>
<style scoped>
.dialog-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
} }
};
</script>
.dialog { <style scoped>
background: white; .dialog-overlay {
padding: 20px; top: calc(50% - 25em);
border-radius: 5px; left: 5%;
max-width: 400px; width: 90%;
width: 100%; height: 50em;
text-align: center; background: rgba(0, 0, 0, .5);
} display: flex;
justify-content: center;
align-items: center;
overflow: auto;
}
button { .dialog {
margin-top: 20px; background: white;
} padding: 20px;
</style> border-radius: 5px;
max-width: 400px;
width: 100%;
text-align: center;
}
button {
margin-top: 20px;
}
</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 {