Applu full height on details modal on mobile and add close button

codingstuff91 · Nov 12, 2024 · 9d2ca2e · 9d2ca2e
1 parent da3bdba
commit 9d2ca2e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -82,7 +82,7 @@ p {
 }
 
 .desktop_menu {
-    @apply hidden lg:block lg:flex lg:justify-between;
+    @apply hidden lg:flex lg:justify-between;
     @apply mt-4 pb-4;
     @apply border-b border-gray-700;
 }
@@ -100,8 +100,8 @@ p {
 }
 
 .description-modal {
-    @apply w-full bg-darkness-900 overflow-scroll shadow-xl transform transition-all h-[80%] px-4;
-    @apply lg:mx-auto lg:border-0 lg:max-w-7xl;
+    @apply w-full bg-darkness-900 overflow-scroll shadow-xl transform transition-all h-full px-4;
+    @apply lg:mx-auto  lg:h-[90%] lg:max-w-[80%];
 }
 
 .description-modal h1 {

diff --git a/resources/js/Components/Modals/DetailsModal.vue b/resources/js/Components/Modals/DetailsModal.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {computed, onMounted, onUnmounted, watch} from 'vue';
+import {onMounted, onUnmounted, watch} from 'vue';
 
 import {useModalStore} from "@/Stores/modalStore.js";
 
@@ -50,7 +50,10 @@ onUnmounted(() => {
 <template>
     <Teleport to="body">
         <Transition leave-active-class="duration-200">
-            <div v-show="show" class="fixed inset-0 overflow-y-auto sm:px-0 z-50" scroll-region>
+            <div
+                v-show="show"
+                class="fixed inset-0 overflow-y-auto sm:px-0 z-50"
+            >
                 <Transition
                     enter-active-class="ease-out duration-300"
                     enter-from-class="opacity-0"
@@ -60,7 +63,7 @@ onUnmounted(() => {
                     leave-to-class="opacity-0"
                 >
                     <div v-show="show" class="fixed inset-0 transform transition-all" @click="close">
-                        <div class="absolute inset-0 bg-gray-700 opacity-75"/>
+                        <div class="absolute inset-0 bg-gray-400 opacity-75"/>
                     </div>
                 </Transition>
 
@@ -76,6 +79,13 @@ onUnmounted(() => {
                         v-show="show"
                         class="description-modal"
                     >
+                        <button
+                            class="p-2 bg-blood-500 text-white text-sm rounded-xl absolute top-4 right-4"
+                            @click="close"
+                        >
+                            Fermer
+                        </button>
+
                         <h1>{{ modalStore.details.name }}</h1>
 
                         <p v-html="modalStore.details?.description?.text"></p>