diff --git a/src/components/BaseComponents/ConfirmationModal.vue b/src/components/BaseComponents/ConfirmationModal.vue new file mode 100644 index 0000000000000000000000000000000000000000..438ff362e01d693aa2d6663c2176e167c5281de1 --- /dev/null +++ b/src/components/BaseComponents/ConfirmationModal.vue @@ -0,0 +1,38 @@ +<!-- ConfirmationModal.vue --> +<template> + <div class="modal" :id="modalId" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true" + data-bs-backdrop="static" data-bs-keyboard="false"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="modalLabel">{{ title }}</h5> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> + </div> + <div class="modal-body"> + {{ message }} + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ cancelButtonText }}</button> + <button type="button" class="btn btn-primary" @click="confirmAction">{{ confirmButtonText }}</button> + </div> + </div> + </div> + </div> + </template> + + <script setup> + import { ref } from 'vue'; + + const modalId = ref(null); + + const title = 'Confirm Action'; + const message = 'Are you sure you want to proceed?'; + const confirmButtonText = 'Confirm'; + const cancelButtonText = 'Cancel'; + + // Methods + function confirmAction() { + emit('confirm'); + } + </script> + \ No newline at end of file diff --git a/src/components/Settings/SettingsProfile.vue b/src/components/Settings/SettingsProfile.vue index a604f052d283afe7c3e548bef920379652c6ebc6..eaa7ac4b964a90292e027ea12653790897e55be0 100644 --- a/src/components/Settings/SettingsProfile.vue +++ b/src/components/Settings/SettingsProfile.vue @@ -167,7 +167,7 @@ onMounted(() => { <hr> <div> <h6>Banners</h6> - <div v-if="hasBanners" class="scrolling-wrapper-badges row flex-row flex-nowrap mt-2 pb-2 pt-2"> + <div v-if="hasBanners" class="scrolling-wrapper-badges row flex-row flex-wrap mt-2 pb-2 pt-2"> <div v-for="banner in banners" :key="banner.id" class="card text-center banner justify-content-center d-flex align-items-center" @click="selectItem(banner.id)" :class="{ 'selected-banner': banner.id === selectedBannerId }" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="custom-tooltip" :data-bs-title="banner.criteria">