Change Presentation Layout

frontend/src/views/creators/BannerActions.vue

@@ -1,6 +1,6 @@
 <script setup>
-
-import {useBrandingStore} from '@/stores/brandingStore.js';
+import { ref, onMounted, onUnmounted } from 'vue';
+import { useBrandingStore } from '@/stores/brandingStore.js';
 import DonationButtonBanner from '@/views/creators/DonationButtonBanner.vue';
 import CreatorLogo from "@/views/creators/CreatorLogo.vue";
 import NameTitle from "@/views/creators/NameTitle.vue";
@@ -15,21 +15,44 @@ import Web from "@/views/svg/Web.vue";
 
 const brandingStore = useBrandingStore();
 const baseURL = window.location.origin;
+
+
+
+// Gèrer le breakpoint du block information.
+// Définir un point de rupture pour "moyen" (correspondant à md: de Tailwind)
+const mediumBreakpoint = 768;
+// Référence réactive pour indiquer si nous sommes sur un écran moyen ou grand
+const isMediumOrLarger = ref(window.innerWidth >= mediumBreakpoint);
+// Fonction pour mettre à jour isMediumOrLarger en fonction de la largeur de l'écran
+const updateScreenSize = () => {
+  isMediumOrLarger.value = window.innerWidth >= mediumBreakpoint;
+};
+// Ajouter un écouteur d'événements pour redimensionner la fenêtre
+onMounted(() => {
+  window.addEventListener('resize', updateScreenSize);
+  // Appeler updateScreenSize une fois au montage pour initialiser la valeur
+  updateScreenSize();
+});
+// Supprimer l'écouteur d'événements lors du démontage du composant
+onUnmounted(() => {
+  window.removeEventListener('resize', updateScreenSize);
+});
+
 </script>
 
 <template>
-
   <div class="flex flex-column w-full">
     <!-- Container principal avec le profil -->
     <div class="relative w-full shadow-xl">
-      <div class=" shadow-2xl bg-hPrimary text-hOnPrimary"
+      <div class="shadow-2xl bg-hPrimary text-hOnPrimary"
            :style="{
-            boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)',
-            }">
+                    boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)',
+                }">
 
-        <div class="flex flex-row py-4 pr-4 items-center">
-          <creator-logo/>
+        <!-- Desktop version (visible only on écrans moyens et grands) -->
+        <div v-if="isMediumOrLarger" class="flex flex-row py-4 pr-4 items-center social-info">
           <name-title></name-title>
+          <creator-logo />
           <donation-button-banner
               v-if="brandingStore.value?.acceptDonation"
               :creator-id="brandingStore.value?.id"
@@ -37,7 +60,21 @@ const baseURL = window.location.origin;
               :on-cancelled-url="baseURL + '/paymentfailed/' + brandingStore.value?.id"
               :on-success-url="baseURL + '/paymentcompleted/' + brandingStore.value?.id"
           ></donation-button-banner>
+        </div>
 
+        <!-- Mobile version (visible only on les petits écrans) -->
+        <div v-else class="flex flex-row py-4 pr-4 items-center social-info">
+          <div><creator-logo /></div>
+          <div class="name-button">
+            <name-title></name-title>
+            <donation-button-banner
+                v-if="brandingStore.value?.acceptDonation"
+                :creator-id="brandingStore.value?.id"
+                :creator-name="brandingStore.value?.name"
+                :on-cancelled-url="baseURL + '/paymentfailed/' + brandingStore.value?.id"
+                :on-success-url="baseURL + '/paymentcompleted/' + brandingStore.value?.id"
+            ></donation-button-banner>
+          </div>
         </div>
 
       </div>
@@ -111,5 +148,14 @@ const baseURL = window.location.origin;
   @apply hover:scale-125 hover:text-fuchsia-900;
 }
 
+.social-info {
+  @apply flex justify-center items-center w-full;
+  @apply max-h-52;
+@apply px-1;
+  @apply gap-8;
 
+  .name-button {
+    @apply flex flex-col gap-y-4;
+  }
+}
 </style>