From 34c97769a6ff27a40fcc956f73e1640e763636d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Wed, 7 Dec 2022 12:00:14 +0100
Subject: [PATCH] Fixed: Fix modal layout with bootstrap upgrade

---
 .../public/vuejs/_components/Modal.vue        | 39 +++++++++++--------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
index 39815de3e..11bb9db2f 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
@@ -2,25 +2,27 @@
    <transition name="modal">
       <div class="modal-mask">
          <!-- :: styles bootstrap :: -->
-         <div class="modal-dialog" :class="modalDialogClass">
+        <div class="modal fade show" style="display: block" aria-modal="true" role="dialog">
+          <div class="modal-dialog" :class="modalDialogClass">
             <div class="modal-content">
-               <div class="modal-header">
-                  <slot name="header"></slot>
-                  <button class="close btn" @click="$emit('close')">
-                     <i class="fa fa-times" aria-hidden="true"></i></button>
-               </div>
-               <div class="body-head">
+              <div class="modal-header">
+                <slot name="header"></slot>
+                <button class="close btn" @click="$emit('close')">
+                  <i class="fa fa-times" aria-hidden="true"></i></button>
+              </div>
+              <div class="modal-body">
+                <div class="body-head">
                   <slot name="body-head"></slot>
-               </div>
-               <div class="modal-body">
-                  <slot name="body"></slot>
-               </div>
-               <div class="modal-footer" v-if="!hideFooter">
-                  <button class="btn btn-cancel" @click="$emit('close')">{{ $t('action.close') }}</button>
-                  <slot name="footer"></slot>
-               </div>
+                </div>
+                <slot name="body"></slot>
+              </div>
+              <div class="modal-footer" v-if="!hideFooter">
+                <button class="btn btn-cancel" @click="$emit('close')">{{ $t('action.close') }}</button>
+                <slot name="footer"></slot>
+              </div>
             </div>
-         </div>
+          </div>
+        </div>
          <!-- :: end styles bootstrap :: -->
       </div>
    </transition>
@@ -33,7 +35,7 @@ import {defineComponent} from "vue";
  *    [+] with 'v-if:showModal' directive:parameter, html scope is added/removed not just shown/hidden
  *    [+] with slot we can pass content from parent component
  *    [+] some classes are passed from parent component
- *    and Bootstrap 4.6 _modal.scss module
+ *    and Bootstrap 5 _modal.scss module
  *    [+] using bootstrap css classes, the modal have a responsive behaviour,
  *    [+] modal design can be configured using css classes (size, scroll)
  */
@@ -56,6 +58,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+   /**
+    * This is a mask behind the modal.
+    */
    .modal-mask {
       position: fixed;
       z-index: 9998;