From 27e2505fecf9dbac9afe44b2f0758665d6ebdfe6 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Mon, 19 Aug 2024 16:16:44 -0400
Subject: [PATCH 1/8] Fixes folders banneraction

---
 src/views/creators/CreatorBanner.vue              | 15 ++++++---------
 .../banner/{ => bannerlower}/BannerActions.vue    |  8 ++++----
 .../banner/{ => bannerlower}/BannerActionsLg.vue  |  0
 .../banner/{ => bannerlower}/BannerActionsMd.vue  |  0
 .../banner/{ => bannerlower}/BannerActionsSm.vue  |  3 +--
 .../banner/{ => bannerlower}/BannerActionsXl.vue  |  0
 6 files changed, 11 insertions(+), 15 deletions(-)
 rename src/views/creators/banner/{ => bannerlower}/BannerActions.vue (70%)
 rename src/views/creators/banner/{ => bannerlower}/BannerActionsLg.vue (100%)
 rename src/views/creators/banner/{ => bannerlower}/BannerActionsMd.vue (100%)
 rename src/views/creators/banner/{ => bannerlower}/BannerActionsSm.vue (97%)
 rename src/views/creators/banner/{ => bannerlower}/BannerActionsXl.vue (100%)

diff --git a/src/views/creators/CreatorBanner.vue b/src/views/creators/CreatorBanner.vue
index 46d59f3..c3b0d81 100644
--- a/src/views/creators/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -3,11 +3,11 @@
   <div>    
       <div class="relative z-20">
         <div>
-          <!-- Social Network-->
+          <!-- Social Network UpperPart-->
           <div class="py-4 px-4 min-h-14 md:rounded-t-none lg:rounded-t-2xl"
                :style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }">
 
-            <div class="w-full flex justify-between lg:justify-end gap-14 mt-2">
+            <div class="w-full flex justify-end gap-14 mt-2">
               <a
                   v-for="socialNetwork in GetSocialsUrls()"
                   :href="socialNetwork.url"
@@ -23,7 +23,7 @@
           </div>
         </div>
 
-        <!--Banner & user info-->
+        <!--Banner -->
         <div class="relative">
           <!--Banner-->
           <div>
@@ -32,8 +32,9 @@
                  alt="Profile Banner" style="max-height: 425px">
           </div>
         </div>
-      </div>    
+      </div>
 
+    <!--actions - Lowerpart-->
     <banner-actions :creator="creator" @content-posted="addContent"></banner-actions>
     
     
@@ -43,11 +44,7 @@
 </template>
 
 <script setup>
-import CreatorAbout from "@/views/creators/CreatorAbout.vue";
-import SubscribeButton from "@/views/creators/SubscribeButton.vue";
-import PublishContentButton from "@/views/contents/PublishContentButton.vue";
-import DonationButton from "@/views/creators/DonationButton.vue";
-import BannerActions from "@/views/creators/banner/BannerActions.vue";
+import BannerActions from "@/views/creators/banner/bannerlower/BannerActions.vue";
 
 const props = defineProps({
   creator: {type: Object, required: true},
diff --git a/src/views/creators/banner/BannerActions.vue b/src/views/creators/banner/bannerlower/BannerActions.vue
similarity index 70%
rename from src/views/creators/banner/BannerActions.vue
rename to src/views/creators/banner/bannerlower/BannerActions.vue
index df88173..040f4f4 100644
--- a/src/views/creators/banner/BannerActions.vue
+++ b/src/views/creators/banner/bannerlower/BannerActions.vue
@@ -1,8 +1,8 @@
 <script setup>
-import BannerActionsSm from "@/views/creators/banner/BannerActionsSm.vue";
-import BannerActionsMd from "@/views/creators/banner/BannerActionsMd.vue";
-import BannerActionsLg from "@/views/creators/banner/BannerActionsLg.vue";
-import BannerActionsXl from "@/views/creators/banner/BannerActionsXl.vue";
+import BannerActionsMd from "@/views/creators/banner/bannerlower/BannerActionsMd.vue";
+import BannerActionsSm from "@/views/creators/banner/bannerlower/BannerActionsSm.vue";
+import BannerActionsLg from "@/views/creators/banner/bannerlower/BannerActionsLg.vue";
+import BannerActionsXl from "@/views/creators/banner/bannerlower/BannerActionsXl.vue";
 
 const props = defineProps({
   creator: { type: Object, required: true }
diff --git a/src/views/creators/banner/BannerActionsLg.vue b/src/views/creators/banner/bannerlower/BannerActionsLg.vue
similarity index 100%
rename from src/views/creators/banner/BannerActionsLg.vue
rename to src/views/creators/banner/bannerlower/BannerActionsLg.vue
diff --git a/src/views/creators/banner/BannerActionsMd.vue b/src/views/creators/banner/bannerlower/BannerActionsMd.vue
similarity index 100%
rename from src/views/creators/banner/BannerActionsMd.vue
rename to src/views/creators/banner/bannerlower/BannerActionsMd.vue
diff --git a/src/views/creators/banner/BannerActionsSm.vue b/src/views/creators/banner/bannerlower/BannerActionsSm.vue
similarity index 97%
rename from src/views/creators/banner/BannerActionsSm.vue
rename to src/views/creators/banner/bannerlower/BannerActionsSm.vue
index 616fcd1..497d680 100644
--- a/src/views/creators/banner/BannerActionsSm.vue
+++ b/src/views/creators/banner/bannerlower/BannerActionsSm.vue
@@ -6,7 +6,6 @@
     borderBottom: `2px solid ${creator.colors.accent || '#000000'}` 
   }">
       <div>
-
         <!--        Logo-Name-Followers-->
         <div class="flex flex-row relative z-20">
           <div>
@@ -18,7 +17,7 @@
             />
           </div>
 
-          <div class="flex flex-column text-white cap px-2 mt-1">
+          <div class="flex flex-column text-white capitalize px-2 mt-1">
             <p class="capitalize text-2xl font-bold">{{ creator.name }}</p>
             <div>{{ creator.subscriberCount }} Abonnés</div>
           </div>
diff --git a/src/views/creators/banner/BannerActionsXl.vue b/src/views/creators/banner/bannerlower/BannerActionsXl.vue
similarity index 100%
rename from src/views/creators/banner/BannerActionsXl.vue
rename to src/views/creators/banner/bannerlower/BannerActionsXl.vue

From acda3e6b2a11e514d87e30bf3ee48179bedd53a7 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Mon, 19 Aug 2024 16:28:20 -0400
Subject: [PATCH 2/8] Fixe UpperBanner

---
 src/views/creators/CreatorBanner.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/creators/CreatorBanner.vue b/src/views/creators/CreatorBanner.vue
index c3b0d81..683e24c 100644
--- a/src/views/creators/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -1,13 +1,13 @@
 <template>
   <!--  Bannière-->
   <div>    
-      <div class="relative z-20">
+      <div class="relative z-20 -mt-2 md:mt-2">
         <div>
           <!-- Social Network UpperPart-->
-          <div class="py-4 px-4 min-h-14 md:rounded-t-none lg:rounded-t-2xl"
+          <div class="py-4 px-4 min-h-14 md:rounded-t-none md:rounded-t-2xl"
                :style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }">
 
-            <div class="w-full flex justify-end gap-14 mt-2">
+            <div class="w-full flex justify-end gap-14 ">
               <a
                   v-for="socialNetwork in GetSocialsUrls()"
                   :href="socialNetwork.url"

From f9e814d9895bf2b2ff1d0950dbcc1acdbd4d30ac Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Mon, 19 Aug 2024 16:34:15 -0400
Subject: [PATCH 3/8] clean file

---
 src/views/creators/CreatorBanner.vue | 65 +++++++++++++---------------
 1 file changed, 31 insertions(+), 34 deletions(-)

diff --git a/src/views/creators/CreatorBanner.vue b/src/views/creators/CreatorBanner.vue
index 683e24c..2cc68f2 100644
--- a/src/views/creators/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -1,46 +1,43 @@
 <template>
   <!--  Bannière-->
-  <div>    
-      <div class="relative z-20 -mt-2 md:mt-2">
-        <div>
-          <!-- Social Network UpperPart-->
-          <div class="py-4 px-4 min-h-14 md:rounded-t-none md:rounded-t-2xl"
-               :style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }">
+  <div>
+    <div class="relative z-20 -mt-2 md:mt-2">
+      <div>
+        <!-- Social Network UpperPart-->
+        <div class="py-4 px-4 min-h-14 md:rounded-t-2xl"
+             :style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }">
 
-            <div class="w-full flex justify-end gap-14 ">
-              <a
-                  v-for="socialNetwork in GetSocialsUrls()"
-                  :href="socialNetwork.url"
-                  target="_blank"
-                  class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
-                <v-icon v-if="socialNetwork.icon.includes('mdi')">{{ socialNetwork.icon }}</v-icon>
-                <img v-if="socialNetwork.icon.includes('tiktok')" :src="socialNetwork.icon" class="w-9 h-9"
-                     alt="Tiktok">
-                <img v-if="socialNetwork.icon.includes('websiteIcon')" :src="socialNetwork.icon" class="w-9 h-9"
-                     alt="Website">
-              </a>
-            </div>
-          </div>
-        </div>
-
-        <!--Banner -->
-        <div class="relative">
-          <!--Banner-->
-          <div>
-            <img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.35)]"
-                 :src="creator.images.banner"
-                 alt="Profile Banner" style="max-height: 425px">
+          <div class="w-full flex justify-end gap-14 ">
+            <a
+                v-for="socialNetwork in GetSocialsUrls()"
+                :href="socialNetwork.url"
+                target="_blank"
+                class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
+              <v-icon v-if="socialNetwork.icon.includes('mdi')">{{ socialNetwork.icon }}</v-icon>
+              <img v-if="socialNetwork.icon.includes('tiktok')" :src="socialNetwork.icon" class="w-9 h-9"
+                   alt="Tiktok">
+              <img v-if="socialNetwork.icon.includes('websiteIcon')" :src="socialNetwork.icon" class="w-9 h-9"
+                   alt="Website">
+            </a>
           </div>
         </div>
       </div>
 
+      <!--Banner -->
+      <div class="relative">
+        <!--Banner-->
+        <div>
+          <img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.35)]"
+               :src="creator.images.banner"
+               alt="Profile Banner" style="max-height: 425px">
+        </div>
+      </div>
+    </div>
+
     <!--actions - Lowerpart-->
     <banner-actions :creator="creator" @content-posted="addContent"></banner-actions>
-    
-    
-    
-    </div>
-  
+  </div>
+
 </template>
 
 <script setup>

From d03a9d24e178606178566c95abbf922003afb931 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Mon, 19 Aug 2024 18:48:54 -0400
Subject: [PATCH 4/8] Update Cards UI

---
 src/views/contents/ContentList.vue            |  27 +-
 .../contents/contentcards/NContentCard.vue    | 257 +++++++++++++++++
 .../contents/contentcards/SmContentCard.vue   | 265 ++++++++++++++++++
 src/views/creators/CreatorBanner.vue          |   2 +-
 src/views/creators/CreatorPage.vue            |   2 +-
 .../banner/bannerlower/BannerActionsLg.vue    |   2 +-
 .../banner/bannerlower/BannerActionsXl.vue    |   2 +-
 7 files changed, 542 insertions(+), 15 deletions(-)
 create mode 100644 src/views/contents/contentcards/NContentCard.vue
 create mode 100644 src/views/contents/contentcards/SmContentCard.vue

diff --git a/src/views/contents/ContentList.vue b/src/views/contents/ContentList.vue
index 9058ce2..fc63d23 100644
--- a/src/views/contents/ContentList.vue
+++ b/src/views/contents/ContentList.vue
@@ -2,12 +2,18 @@
 
   <v-infinite-scroll :items="contents"
                      :onLoad="fetchContents"
-                     class="gap-2">
+                     class="md:gap-2">
 
-    <template v-for="content in contents" :key="content">
-      <content-card :content="content"               
-                    @content-deleted="onContentDeleted"
-      ></content-card>
+    <template v-for="content in contents" :key="content.id">
+
+      <div class="d-sm-none mb-1">
+        <content-card-sm :content="content" @content-deleted="onContentDeleted"></content-card-sm>
+      </div>
+
+     
+      <div class="d-none d-sm-flex">
+        <content-card-normal :content="content" @content-deleted="onContentDeleted"></content-card-normal>
+      </div>
     </template>
 
     <template v-slot:empty>
@@ -22,11 +28,12 @@
 
 </template>
 
-<script setup>
 
+<script setup>
 import {useClient} from '@/plugins/api.js';
 import {ref, watch} from 'vue';
-import ContentCard from "./ContentCard.vue";
+import ContentCardNormal from "@/views/contents/contentcards/NContentCard.vue";
+import ContentCardSm from "@/views/contents/contentcards/SmContentCard.vue";
 
 const props = defineProps({
   creatorId: {
@@ -52,10 +59,8 @@ const creatorIdWatcher = watch(
     () => props.creatorId,
     (newCreatorId) => {
       if (newCreatorId) {
-        // Reset contents and last_id when the creatorId changes
         contents.value = []
         last_id = null
-        // Fetch contents for the new creator
         fetchContents({
           done: () => {
           }
@@ -65,7 +70,7 @@ const creatorIdWatcher = watch(
 
 async function fetchContents({done, page_size = 10}) {
   if (props.creatorId == null) return
-  
+
   try {
     let uri = `/api/contents/creator/${props.creatorId}?page_size=${page_size}`
     if (last_id !== null) uri = uri + `&last_id=${last_id}`
@@ -94,4 +99,4 @@ async function fetchContents({done, page_size = 10}) {
   }
 }
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/contents/contentcards/NContentCard.vue b/src/views/contents/contentcards/NContentCard.vue
new file mode 100644
index 0000000..914ca10
--- /dev/null
+++ b/src/views/contents/contentcards/NContentCard.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="shadow-md rounded-2xl bg-gray-50 border custom-border w-full mb-2 ">
+    <div>
+      <v-card-title>
+        <div class="flex flex-row justify-between items-center">
+          <div class="flex items-center">
+            <img
+                :src="props.content.createdByPortraitUrl"
+                alt="Profile Image"
+                class="rounded-full"
+                width="32px"
+                height="32px">
+            <div class="capitalize px-2">
+              {{ props.content.createdByName }}
+            </div>
+            <span class="text-subtitle-2 mt-1">
+              {{ time_ago(props.content.createdAt) }}
+            </span>
+          </div>
+
+          <v-menu>
+            <template v-slot:activator="{ props }">
+              <v-btn variant="plain" v-bind="props">
+                <v-icon>mdi-dots-vertical</v-icon>
+              </v-btn>
+            </template>
+            <v-list>
+              <v-list-item v-if="creatorIsCurrentUser" @click="editContent">
+                <v-list-item-title>Modifier le contenu</v-list-item-title>
+              </v-list-item>
+              <v-list-item v-if="creatorIsCurrentUser" @click="openDeleteConfirmationDialog">
+                <v-list-item-title>Effacer le contenu</v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="reportContent">
+                <v-list-item-title>Reporter le contenu</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </div>
+        <div class="uppercase">
+          {{ props.content.title }}
+        </div>
+        <div>
+          {{ props.content.description }}
+        </div>
+      </v-card-title>
+
+      <v-carousel
+          hide-delimiters
+          v-if="hasUrls"
+          :show-arrows="props.content.urls.length > 1"
+          :show-indicators="props.content.urls.length > 1"
+      >
+        <v-carousel-item
+            v-for="url in props.content.urls"
+            :key="url"
+            class="image-container"
+            @click="redirectToContent"
+        >
+          <component :is="getComponent(url)" :src="url"></component>
+        </v-carousel-item>
+      </v-carousel>
+    </div>
+
+    <div class="px-4">
+      <div class="flex justify-around py-2">
+        <v-btn variant="plain" icon @click="likeContent">
+          <v-icon>mdi-thumb-up-outline</v-icon>
+        </v-btn>
+        <v-btn variant="plain" icon @click="dislikeContent">
+          <v-icon>mdi-thumb-down-outline</v-icon>
+        </v-btn>
+        <v-btn
+            :class="{'comment-active': hasMessages}"
+            variant="plain"
+            icon
+            @click="toggleComments">
+          <v-icon>mdi-comment-outline</v-icon>
+        </v-btn>
+
+        <donation-button :color-border="colorMenu"
+                         :color-accent="colorAccent"
+                         :creator-id="creatorId"
+                         :creator-name="creatorName"
+                         :creator-logo="creatorLogo"
+                         iconColorClass="text-black"
+        ></donation-button>
+
+      </div>
+
+      <div :class="{'hidden': !messagesVisible}">
+        <h2 class="font-sans font-semibold mt-2">Commentaires</h2>
+        <message-list
+            :subject-id="props.content.id"
+            :messages="messages"
+        ></message-list>
+
+      </div>
+
+      <div class="py-2">
+        <post-message :subject-id="props.content.id"
+                      @message-posted="addMessage"
+        ></post-message>
+      </div>
+    </div>
+  </div>
+
+
+  <v-dialog v-model="openDeleteConfirmationModal" max-width="500">
+    <v-form>
+      <v-card class="text-center rounded-xl"
+              :style="{ 
+                border: `2px solid  ` 
+              }">
+        <div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
+          <div class="flex-1 text-center">
+            Supprimer ce contenu ?
+          </div>
+
+          <v-btn icon @click="openDeleteConfirmationModal = false" class="ml-auto mr-2" variant="text">
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+
+        </div>
+
+        <div class=" mr-2">
+          Êtes-vous sûr de vouloir supprimer le contenu ?
+        </div>
+
+        <div class="py-2 space-x-3">
+          <v-btn variant="flat"
+                 @click="deleteContent()" class=" mt-5">
+            Oui
+          </v-btn>
+          <v-btn variant="outlined"
+                 @click="openDeleteConfirmationModal = false" class=" mt-5">
+            Non
+          </v-btn>
+        </div>
+      </v-card>
+    </v-form>
+  </v-dialog>
+</template>
+
+<script setup>
+import {computed, ref} from 'vue';
+import {time_ago} from "@/internal_time_ago.js";
+import MessageList from "@/views/messages/MessageList.vue";
+import PostMessage from "@/views/messages/PostMessage.vue";
+import DonationButton from "@/views/creators/DonationButton.vue";
+import YoutubePlayer from '../YoutubePlayer.vue';
+import ImageViewer from '../ImageViewer.vue';
+import {useClient} from "@/plugins/api.js";
+import {useAuthStore} from "@/stores/authStore.js";
+
+const props = defineProps({
+  content: {
+    type: Object,
+    required: true,
+  }
+});
+
+const openDeleteConfirmationModal = ref(false);
+const emits = defineEmits(['content-deleted'])
+
+const contentId = computed(() => props.content.id)
+const creatorId = computed(() => props.content.createdBy)
+const creatorName = computed(() => props.content.createdByName)
+const creatorLogo = computed(() => props.content.createdByPortraitUrl)
+const colorMenu = computed(() => props.content.colorMenu)
+const colorAccent = computed(() => props.content.colorAccent)
+
+const authStore = useAuthStore()
+const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId === creatorId.value)
+
+const hasUrls = computed(() => !!props.content.urls && props.content.urls.length > 0);
+const messagesVisible = ref(false);
+const messages = ref([]);
+const hasMessages = computed(() => messages.value.length > 0)
+
+function openDeleteConfirmationDialog() {
+  openDeleteConfirmationModal.value = true;
+}
+
+function addMessage(newMessage) {
+  messages.value.unshift(newMessage);
+  messagesVisible.value = true;
+}
+
+function toggleComments() {
+  messagesVisible.value = !messagesVisible.value;
+}
+
+function likeContent() {
+  console.log('Content liked');
+}
+
+function dislikeContent() {
+  console.log('Content disliked');
+}
+
+function getComponent(url) {
+  if (url.includes('youtube.com') || url.includes('youtu.be')) {
+    return YoutubePlayer;
+  } else if (url.match(/\.(jpeg|jpg|gif|png)$/)) {
+    return ImageViewer;
+  }
+}
+
+function editContent() {
+  console.log('Modifier le contenu');
+}
+
+async function deleteContent() {
+  const client = useClient()
+  const response = await client.delete(`/api/contents/${contentId.value}`)
+  if (response.status >= 200 && response.status < 300) {
+    emits('content-deleted', contentId.value)
+  }
+}
+
+function reportContent() {
+  console.log('Reporter le contenu');
+}
+
+function redirectToContent() {
+  window.location.href = `/content/${props.content.id}`;
+}
+</script>
+
+<style>
+.image-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.image-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.custom-border {
+  border-color: #EAEBEC;
+}
+
+.hidden {
+  display: none;
+}
+
+.comment-active .v-icon {
+  color: #D63DAB;
+}
+</style>
diff --git a/src/views/contents/contentcards/SmContentCard.vue b/src/views/contents/contentcards/SmContentCard.vue
new file mode 100644
index 0000000..e869264
--- /dev/null
+++ b/src/views/contents/contentcards/SmContentCard.vue
@@ -0,0 +1,265 @@
+<template>
+  <div class="shadow-md bg-gray-50">
+    <div>
+      <v-card-title>
+        <div class="flex flex-row justify-between items-center">
+          <div class="flex items-center">
+            <img
+                :src="props.content.createdByPortraitUrl"
+                alt="Profile Image"
+                class="rounded-full"
+                width="32px"
+                height="32px">
+            <div class="capitalize px-2">
+              {{ props.content.createdByName }}
+            </div>
+            <span class="text-subtitle-2">
+              {{ time_ago(props.content.createdAt) }}
+            </span>
+          </div>
+
+          <v-menu>
+            <template v-slot:activator="{ props }">
+              <v-btn variant="plain" v-bind="props">
+                <v-icon>mdi-dots-vertical</v-icon>
+              </v-btn>
+            </template>
+            <v-list>
+              <v-list-item v-if="creatorIsCurrentUser" @click="editContent">
+                <v-list-item-title>Modifier le contenu</v-list-item-title>
+              </v-list-item>
+              <v-list-item v-if="creatorIsCurrentUser" @click="openDeleteConfirmationDialog">
+                <v-list-item-title>Effacer le contenu</v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="reportContent">
+                <v-list-item-title>Reporter le contenu</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </div>
+        <div class="uppercase">
+          {{ props.content.title }}
+        </div>
+        <div>
+          {{ props.content.description }}
+        </div>
+      </v-card-title>
+
+      <v-carousel
+          hide-delimiters
+          v-if="hasUrls"
+          :show-arrows="props.content.urls.length > 1"
+          :show-indicators="props.content.urls.length > 1"
+      >
+        <v-carousel-item
+            v-for="url in props.content.urls"
+            :key="url"
+            class="image-container"
+            @click="redirectToContent"
+        >
+          <component :is="getComponent(url)" :src="url"></component>
+        </v-carousel-item>
+      </v-carousel>
+    </div>
+
+    <div class="px-1">
+      <div class="flex justify-around ">
+        <v-btn variant="plain" icon @click="likeContent">
+          <v-icon>mdi-thumb-up-outline</v-icon>
+        </v-btn>
+        <v-btn variant="plain" icon @click="dislikeContent">
+          <v-icon>mdi-thumb-down-outline</v-icon>
+        </v-btn>
+        <v-btn
+            :class="{'comment-active': hasMessages}"
+            variant="plain"
+            icon
+            @click="toggleComments">
+          <v-icon>mdi-comment-outline</v-icon>
+        </v-btn>
+
+        <donation-button :color-border="colorMenu"
+                         :color-accent="colorAccent"
+                         :creator-id="creatorId"
+                         :creator-name="creatorName"
+                         :creator-logo="creatorLogo"
+                         iconColorClass="text-black"
+        ></donation-button>
+
+      </div>
+
+      <div :class="{'hidden': !messagesVisible}">
+        <h2 class="font-sans font-semibold ">Commentaires</h2>
+        <message-list
+            :subject-id="props.content.id"
+            :messages="messages"
+        ></message-list>
+
+      </div>
+
+      <div class="py-1">
+        <post-message :subject-id="props.content.id"
+                      @message-posted="addMessage"
+        ></post-message>
+      </div>
+    </div>
+  </div>
+
+
+  <v-dialog v-model="openDeleteConfirmationModal" max-width="500">
+    <v-form>
+      <v-card class="text-center rounded-xl"
+              :style="{ 
+                border: `2px solid  ` 
+              }">
+        <div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
+          <div class="flex-1 text-center">
+            Supprimer ce contenu ?
+          </div>
+
+          <v-btn icon @click="openDeleteConfirmationModal = false" class="ml-auto mr-2" variant="text">
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+
+        </div>
+
+        <div class=" mr-2">
+          Êtes-vous sûr de vouloir supprimer le contenu ?
+        </div>
+
+        <div class="py-2 space-x-3">
+          <v-btn variant="flat"
+                 @click="deleteContent()" class=" mt-5">
+            Oui
+          </v-btn>
+          <v-btn variant="outlined"
+                 @click="openDeleteConfirmationModal = false" class=" mt-5">
+            Non
+          </v-btn>
+        </div>
+      </v-card>
+    </v-form>
+  </v-dialog>
+</template>
+
+<script setup>
+import {computed, ref} from 'vue';
+import {time_ago} from "@/internal_time_ago.js";
+import MessageList from "@/views/messages/MessageList.vue";
+import PostMessage from "@/views/messages/PostMessage.vue";
+import DonationButton from "@/views/creators/DonationButton.vue";
+import YoutubePlayer from '../YoutubePlayer.vue';
+import ImageViewer from '../ImageViewer.vue';
+import {useClient} from "@/plugins/api.js";
+import {useAuthStore} from "@/stores/authStore.js";
+
+const props = defineProps({
+  content: {
+    type: Object,
+    required: true,
+  }
+});
+
+const openDeleteConfirmationModal = ref(false);
+const emits = defineEmits(['content-deleted'])
+
+const contentId = computed(() => props.content.id)
+const creatorId = computed(() => props.content.createdBy)
+const creatorName = computed(() => props.content.createdByName)
+const creatorLogo = computed(() => props.content.createdByPortraitUrl)
+const colorMenu = computed(() => props.content.colorMenu)
+const colorAccent = computed(() => props.content.colorAccent)
+
+const authStore = useAuthStore()
+const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId === creatorId.value)
+
+const hasUrls = computed(() => !!props.content.urls && props.content.urls.length > 0);
+const messagesVisible = ref(false);
+const messages = ref([]);
+const hasMessages = computed(() => messages.value.length > 0)
+
+function openDeleteConfirmationDialog() {
+  openDeleteConfirmationModal.value = true;
+}
+
+function addMessage(newMessage) {
+  messages.value.unshift(newMessage);
+  messagesVisible.value = true;
+}
+
+function toggleComments() {
+  messagesVisible.value = !messagesVisible.value;
+}
+
+function likeContent() {
+  console.log('Content liked');
+}
+
+function dislikeContent() {
+  console.log('Content disliked');
+}
+
+function getComponent(url) {
+  if (url.includes('youtube.com') || url.includes('youtu.be')) {
+    return YoutubePlayer;
+  } else if (url.match(/\.(jpeg|jpg|gif|png)$/)) {
+    return ImageViewer;
+  }
+}
+
+function editContent() {
+  console.log('Modifier le contenu');
+}
+
+async function deleteContent() {
+  const client = useClient()
+  const response = await client.delete(`/api/contents/${contentId.value}`)
+  if (response.status >= 200 && response.status < 300) {
+    emits('content-deleted', contentId.value)
+  }
+}
+
+function reportContent() {
+  console.log('Reporter le contenu');
+}
+
+function redirectToContent() {
+  window.location.href = `/content/${props.content.id}`;
+}
+</script>
+
+<style>
+.image-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  cursor: pointer;
+  
+}
+
+.image-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.custom-border {
+  border-color: #EAEBEC;
+}
+
+.hidden {
+  display: none;
+}
+
+.v-carousel-item {
+  padding: 0; /* Supprime tout padding interne */
+  margin: 0; /* Supprime toute marge interne */
+  width: 100vw; /* Assure que chaque item occupe toute la largeur de l'écran */
+}
+
+
+.comment-active .v-icon {
+  color: #D63DAB;
+}
+</style>
diff --git a/src/views/creators/CreatorBanner.vue b/src/views/creators/CreatorBanner.vue
index 2cc68f2..9a14f08 100644
--- a/src/views/creators/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -7,7 +7,7 @@
         <div class="py-4 px-4 min-h-14 md:rounded-t-2xl"
              :style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }">
 
-          <div class="w-full flex justify-end gap-14 ">
+          <div class="w-full flex justify-end gap-6 ">
             <a
                 v-for="socialNetwork in GetSocialsUrls()"
                 :href="socialNetwork.url"
diff --git a/src/views/creators/CreatorPage.vue b/src/views/creators/CreatorPage.vue
index e70ecc4..f3d448e 100644
--- a/src/views/creators/CreatorPage.vue
+++ b/src/views/creators/CreatorPage.vue
@@ -16,7 +16,7 @@
     </div>
   </div>
 
-  <!-- Fallback when user try to access a non-existing creator -->
+
   <div v-else>
     <div v-if="loading">
       <v-progress-linear indeterminate></v-progress-linear>
diff --git a/src/views/creators/banner/bannerlower/BannerActionsLg.vue b/src/views/creators/banner/bannerlower/BannerActionsLg.vue
index 0f32ff6..930e68f 100644
--- a/src/views/creators/banner/bannerlower/BannerActionsLg.vue
+++ b/src/views/creators/banner/bannerlower/BannerActionsLg.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative w-full">
+  <div class="relative w-full mb-5">
     <div class="rounded-b-2xl"
          :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79' }">
       <div class="relative z-20">
diff --git a/src/views/creators/banner/bannerlower/BannerActionsXl.vue b/src/views/creators/banner/bannerlower/BannerActionsXl.vue
index 0f32ff6..930e68f 100644
--- a/src/views/creators/banner/bannerlower/BannerActionsXl.vue
+++ b/src/views/creators/banner/bannerlower/BannerActionsXl.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative w-full">
+  <div class="relative w-full mb-5">
     <div class="rounded-b-2xl"
          :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79' }">
       <div class="relative z-20">

From 7ccb40bfbacb62f6e3da8251ceb358745b2fff22 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Mon, 19 Aug 2024 19:00:02 -0400
Subject: [PATCH 5/8] Fixe image display

---
 src/views/contents/contentcards/NContentCard.vue | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/src/views/contents/contentcards/NContentCard.vue b/src/views/contents/contentcards/NContentCard.vue
index 914ca10..50a8acf 100644
--- a/src/views/contents/contentcards/NContentCard.vue
+++ b/src/views/contents/contentcards/NContentCard.vue
@@ -54,7 +54,7 @@
         <v-carousel-item
             v-for="url in props.content.urls"
             :key="url"
-            class="image-container"
+            class="max-w-[800px]"
             @click="redirectToContent"
         >
           <component :is="getComponent(url)" :src="url"></component>
@@ -229,19 +229,7 @@ function redirectToContent() {
 </script>
 
 <style>
-.image-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  cursor: pointer;
-}
 
-.image-container img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
 
 .custom-border {
   border-color: #EAEBEC;

From 9fc92ec60b42e9eaa91a1a096bd7ed1f6c625c86 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Mon, 19 Aug 2024 19:23:31 -0400
Subject: [PATCH 6/8] Update content page fullscreen

---
 src/views/contents/ContentPage.vue            | 171 +----------------
 .../contentfullscreen/FullScreenContentMd.vue | 170 +++++++++++++++++
 .../contentfullscreen/FullScreenContentSm.vue | 174 ++++++++++++++++++
 3 files changed, 351 insertions(+), 164 deletions(-)
 create mode 100644 src/views/contents/contentfullscreen/FullScreenContentMd.vue
 create mode 100644 src/views/contents/contentfullscreen/FullScreenContentSm.vue

diff --git a/src/views/contents/ContentPage.vue b/src/views/contents/ContentPage.vue
index 86233f3..6c74128 100644
--- a/src/views/contents/ContentPage.vue
+++ b/src/views/contents/ContentPage.vue
@@ -1,170 +1,13 @@
 <template>
-  <div class="flex h-[calc(100vh-118px)] -mt-2">
-    <!-- Homemade carousel -->
-    <div class="flex-1 flex items-center justify-center bg-neutral-500 max-h-screen relative">
-
-      <!-- Blur image BG (désactivation des interactions) -->
-      <div class="absolute inset-0 z-0 bg-cover bg-center blur-lg pointer-events-none"
-           :style="{ backgroundImage: `url(${currentImage})` }"></div>
-
-      <!-- back Btn -->
-      <div class="absolute top-8 left-4 z-20">
-        <v-btn @click="goBack" variant="plain"
-               class="rounded-full text-white w-12 h-12 flex items-center justify-center">
-          <v-icon class="text-black bg-white rounded-full" size="36">mdi-close</v-icon>
-        </v-btn>
-      </div>
-
-      <!-- Left arrow collée à gauche -->
-      <div v-if="multipleImages" class="absolute left-0 top-1/2 transform -translate-y-1/2 z-20">
-        <v-btn @click="previousImage" variant="plain" class="rounded-full bg-gray-800 text-white w-12 h-12">
-          <v-icon size="36">mdi-chevron-left</v-icon>
-        </v-btn>
-      </div>
-
-      <div class="flex items-center justify-center w-full h-full z-10">
-        <img :src="currentImage" alt="Image" class="max-w-full max-h-full object-contain" />
-      </div>
-
-      <!-- right arrow -->
-      <div v-if="multipleImages" class="absolute right-4 top-1/2 transform -translate-y-1/2 z-10">
-        <v-btn @click="nextImage" variant="plain" class="rounded-full bg-gray-800 text-white w-12 h-12">
-          <v-icon size="36">mdi-chevron-right</v-icon>
-        </v-btn>
-      </div>
-    </div>
-
-    <!-- Info -->
-    <div class="fixed-width border-l-2 p-6 bg-white overflow-y-auto max-h-screen">
-
-      <div class="border-b-2 p-6 font-sans space-y-2">
-        <div v-if="data && data.createdByName">
-          Créé par: {{ data.createdByName }}
-        </div>
-        <div v-if="data && data.title" class="font-semibold">
-          Titre: {{ data.title }}
-        </div>
-        <div v-if="data && data.description">
-          Description: {{ data.description }}
-        </div>
-
-        <div class="flex justify-around py-2">
-          <v-btn variant="plain" icon @click="likeContent">
-            <v-icon :color="'#313131'">mdi-thumb-up-outline</v-icon>
-          </v-btn>
-          <v-btn variant="plain" icon @click="dislikeContent">
-            <v-icon :color="'#000000'">mdi-thumb-down-outline</v-icon>
-          </v-btn>
-
-          <donation-button v-if="data"
-                           :color-border="data.colorMenu"
-                           :color-accent="data.colorAccent"
-                           :creator-id="data.createdBy"
-                           :creator-name="data.createdByName"
-                           :creator-logo="data.createdByPortraitUrl"
-                           iconColorClass="text-black"
-          ></donation-button>
-
-        </div>
-      </div>
-
-      <div class="border-b-2 p-6">
-        <h2 class="font-sans font-semibold">Commentaires</h2>
-        <message-list :subject-id="contentId"
-        ></message-list>
-      </div>
-
-      <div class="border-b-2 p-6">
-        <post-message :subject-id="contentId"
-        ></post-message>
-      </div>
-    </div>
+  <div class="d-sm-block d-md-block d-lg-none mb-1">
+  <full-screen-content-sm></full-screen-content-sm>
   </div>
+  <div class="d-none d-lg-flex">
+  <full-screen-content-md></full-screen-content-md>
+  </div> 
 </template>
 
 <script setup>
-import {ref, computed, onMounted, watch} from 'vue';
-import PostMessage from "@/views/messages/PostMessage.vue";
-import MessageList from "@/views/messages/MessageList.vue";
-import DonationButton from "@/views/creators/DonationButton.vue";
-import {useClient} from "@/plugins/api.js";
-import {useRoute} from 'vue-router';
-
-const data = ref(null);
-const currentImageIndex = ref(0);
-
-const route = useRoute();
-const client = useClient();
-
-const contentId = computed(() => {
-  return route.params.contentId;
-});
-
-const currentImage = computed(() => {
-  if (data.value && data.value.urls) {
-    return data.value.urls[currentImageIndex.value] || '';
-  }
-  return '';
-});
-
-// Calculer si on a plus d'une image
-const multipleImages = computed(() => {
-  if (data.value && data.value.urls) {
-    return data.value.urls.length > 1;
-  }
-  return 0;
-});
-
-const fetchContentData = async (contentId) => {
-  try {
-    const response = await client.get(`/api/contents/${contentId}`);
-    data.value = response.data;
-    console.table(data.value)
-  } catch (error) {
-    console.error(`Error fetching content: ${error}`);
-  }
-};
-
-function goBack() {
-  window.history.go(-1);
-}
-
-function nextImage() {
-  if (data.value?.urls.length > 0) {
-    currentImageIndex.value = (currentImageIndex.value + 1) % data.value.urls.length;
-  }
-}
-
-function previousImage() {
-  if (data.value?.urls.length > 0) {
-    currentImageIndex.value = (currentImageIndex.value - 1 + data.value.urls.length) % data.value.urls.length;
-  }
-}
-
-onMounted(() => {
-  fetchContentData(contentId.value);
-});
-
-watch(contentId, (newContentId) => {
-  fetchContentData(newContentId);
-});
-
+import FullScreenContentSm from "@/views/contents/contentfullscreen/FullScreenContentSm.vue";
+import FullScreenContentMd from "@/views/contents/contentfullscreen/FullScreenContentMd.vue";
 </script>
-
-<style scoped>
-.fixed-width {
-  width: 400px;
-}
-
-.v-btn {
-  transition: background-color 0.2s ease;
-}
-
-.v-btn:hover {
-  background-color: #555;
-}
-
-.v-btn .v-icon {
-  color: white;
-}
-</style>
diff --git a/src/views/contents/contentfullscreen/FullScreenContentMd.vue b/src/views/contents/contentfullscreen/FullScreenContentMd.vue
new file mode 100644
index 0000000..86233f3
--- /dev/null
+++ b/src/views/contents/contentfullscreen/FullScreenContentMd.vue
@@ -0,0 +1,170 @@
+<template>
+  <div class="flex h-[calc(100vh-118px)] -mt-2">
+    <!-- Homemade carousel -->
+    <div class="flex-1 flex items-center justify-center bg-neutral-500 max-h-screen relative">
+
+      <!-- Blur image BG (désactivation des interactions) -->
+      <div class="absolute inset-0 z-0 bg-cover bg-center blur-lg pointer-events-none"
+           :style="{ backgroundImage: `url(${currentImage})` }"></div>
+
+      <!-- back Btn -->
+      <div class="absolute top-8 left-4 z-20">
+        <v-btn @click="goBack" variant="plain"
+               class="rounded-full text-white w-12 h-12 flex items-center justify-center">
+          <v-icon class="text-black bg-white rounded-full" size="36">mdi-close</v-icon>
+        </v-btn>
+      </div>
+
+      <!-- Left arrow collée à gauche -->
+      <div v-if="multipleImages" class="absolute left-0 top-1/2 transform -translate-y-1/2 z-20">
+        <v-btn @click="previousImage" variant="plain" class="rounded-full bg-gray-800 text-white w-12 h-12">
+          <v-icon size="36">mdi-chevron-left</v-icon>
+        </v-btn>
+      </div>
+
+      <div class="flex items-center justify-center w-full h-full z-10">
+        <img :src="currentImage" alt="Image" class="max-w-full max-h-full object-contain" />
+      </div>
+
+      <!-- right arrow -->
+      <div v-if="multipleImages" class="absolute right-4 top-1/2 transform -translate-y-1/2 z-10">
+        <v-btn @click="nextImage" variant="plain" class="rounded-full bg-gray-800 text-white w-12 h-12">
+          <v-icon size="36">mdi-chevron-right</v-icon>
+        </v-btn>
+      </div>
+    </div>
+
+    <!-- Info -->
+    <div class="fixed-width border-l-2 p-6 bg-white overflow-y-auto max-h-screen">
+
+      <div class="border-b-2 p-6 font-sans space-y-2">
+        <div v-if="data && data.createdByName">
+          Créé par: {{ data.createdByName }}
+        </div>
+        <div v-if="data && data.title" class="font-semibold">
+          Titre: {{ data.title }}
+        </div>
+        <div v-if="data && data.description">
+          Description: {{ data.description }}
+        </div>
+
+        <div class="flex justify-around py-2">
+          <v-btn variant="plain" icon @click="likeContent">
+            <v-icon :color="'#313131'">mdi-thumb-up-outline</v-icon>
+          </v-btn>
+          <v-btn variant="plain" icon @click="dislikeContent">
+            <v-icon :color="'#000000'">mdi-thumb-down-outline</v-icon>
+          </v-btn>
+
+          <donation-button v-if="data"
+                           :color-border="data.colorMenu"
+                           :color-accent="data.colorAccent"
+                           :creator-id="data.createdBy"
+                           :creator-name="data.createdByName"
+                           :creator-logo="data.createdByPortraitUrl"
+                           iconColorClass="text-black"
+          ></donation-button>
+
+        </div>
+      </div>
+
+      <div class="border-b-2 p-6">
+        <h2 class="font-sans font-semibold">Commentaires</h2>
+        <message-list :subject-id="contentId"
+        ></message-list>
+      </div>
+
+      <div class="border-b-2 p-6">
+        <post-message :subject-id="contentId"
+        ></post-message>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref, computed, onMounted, watch} from 'vue';
+import PostMessage from "@/views/messages/PostMessage.vue";
+import MessageList from "@/views/messages/MessageList.vue";
+import DonationButton from "@/views/creators/DonationButton.vue";
+import {useClient} from "@/plugins/api.js";
+import {useRoute} from 'vue-router';
+
+const data = ref(null);
+const currentImageIndex = ref(0);
+
+const route = useRoute();
+const client = useClient();
+
+const contentId = computed(() => {
+  return route.params.contentId;
+});
+
+const currentImage = computed(() => {
+  if (data.value && data.value.urls) {
+    return data.value.urls[currentImageIndex.value] || '';
+  }
+  return '';
+});
+
+// Calculer si on a plus d'une image
+const multipleImages = computed(() => {
+  if (data.value && data.value.urls) {
+    return data.value.urls.length > 1;
+  }
+  return 0;
+});
+
+const fetchContentData = async (contentId) => {
+  try {
+    const response = await client.get(`/api/contents/${contentId}`);
+    data.value = response.data;
+    console.table(data.value)
+  } catch (error) {
+    console.error(`Error fetching content: ${error}`);
+  }
+};
+
+function goBack() {
+  window.history.go(-1);
+}
+
+function nextImage() {
+  if (data.value?.urls.length > 0) {
+    currentImageIndex.value = (currentImageIndex.value + 1) % data.value.urls.length;
+  }
+}
+
+function previousImage() {
+  if (data.value?.urls.length > 0) {
+    currentImageIndex.value = (currentImageIndex.value - 1 + data.value.urls.length) % data.value.urls.length;
+  }
+}
+
+onMounted(() => {
+  fetchContentData(contentId.value);
+});
+
+watch(contentId, (newContentId) => {
+  fetchContentData(newContentId);
+});
+
+</script>
+
+<style scoped>
+.fixed-width {
+  width: 400px;
+}
+
+.v-btn {
+  transition: background-color 0.2s ease;
+}
+
+.v-btn:hover {
+  background-color: #555;
+}
+
+.v-btn .v-icon {
+  color: white;
+}
+</style>
diff --git a/src/views/contents/contentfullscreen/FullScreenContentSm.vue b/src/views/contents/contentfullscreen/FullScreenContentSm.vue
new file mode 100644
index 0000000..4b1efc7
--- /dev/null
+++ b/src/views/contents/contentfullscreen/FullScreenContentSm.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="flex flex-col -mt-2">
+    <!-- Titre en haut de l'image -->
+    <div class="bg-white py-4 text-center font-semibold text-lg">
+      <div v-if="data && data.title">
+        {{ data.title }}
+      </div>
+    </div>
+
+    <!-- Homemade carousel -->
+    <div class="flex-1 flex items-center justify-center bg-neutral-500 max-h-screen relative">
+
+      <!-- Blur image BG (désactivation des interactions) -->
+      <div class="absolute inset-0 z-0 bg-cover bg-center blur-lg pointer-events-none"
+           :style="{ backgroundImage: `url(${currentImage})` }"></div>
+
+      <!-- back Btn -->
+      <div class="absolute top-8 left-4 z-20">
+        <v-btn @click="goBack" variant="plain"
+               class="rounded-full text-white w-12 h-12 flex items-center justify-center">
+          <v-icon class="text-black bg-white rounded-full" size="36">mdi-close</v-icon>
+        </v-btn>
+      </div>
+
+      <!-- Left arrow collée à gauche -->
+      <div v-if="multipleImages" class="absolute left-0 top-1/2 transform -translate-y-1/2 z-20">
+        <v-btn @click="previousImage" variant="plain" class="rounded-full bg-gray-800 text-white w-12 h-12">
+          <v-icon size="36">mdi-chevron-left</v-icon>
+        </v-btn>
+      </div>
+
+      <div class="flex items-center justify-center w-full h-full z-10">
+        <img :src="currentImage" alt="Image" class="max-w-full max-h-full object-contain" />
+      </div>
+
+      <!-- right arrow -->
+      <div v-if="multipleImages" class="absolute right-4 top-1/2 transform -translate-y-1/2 z-10">
+        <v-btn @click="nextImage" variant="plain" class="rounded-full bg-gray-800 text-white w-12 h-12">
+          <v-icon size="36">mdi-chevron-right</v-icon>
+        </v-btn>
+      </div>
+    </div>
+
+    <!-- Info -->
+    <div class="flex flex-col p-6 bg-white overflow-y-auto max-h-screen">
+
+      <div class="border-b-2 p-6 font-sans space-y-2">
+        <div v-if="data && data.createdByName">
+          Créé par: {{ data.createdByName }}
+        </div>
+        <div v-if="data && data.description">
+          Description: {{ data.description }}
+        </div>
+
+        <div class="flex justify-around py-2">
+          <v-btn variant="plain" icon @click="likeContent">
+            <v-icon :color="'#313131'">mdi-thumb-up-outline</v-icon>
+          </v-btn>
+          <v-btn variant="plain" icon @click="dislikeContent">
+            <v-icon :color="'#000000'">mdi-thumb-down-outline</v-icon>
+          </v-btn>
+
+          <donation-button v-if="data"
+                           :color-border="data.colorMenu"
+                           :color-accent="data.colorAccent"
+                           :creator-id="data.createdBy"
+                           :creator-name="data.createdByName"
+                           :creator-logo="data.createdByPortraitUrl"
+                           iconColorClass="text-black"
+          ></donation-button>
+
+        </div>
+      </div>
+
+      <div class="border-b-2 p-6">
+        <h2 class="font-sans font-semibold">Commentaires</h2>
+        <message-list :subject-id="contentId"
+        ></message-list>
+      </div>
+
+      <div class="border-b-2 p-6">
+        <post-message :subject-id="contentId"
+        ></post-message>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref, computed, onMounted, watch} from 'vue';
+import PostMessage from "@/views/messages/PostMessage.vue";
+import MessageList from "@/views/messages/MessageList.vue";
+import DonationButton from "@/views/creators/DonationButton.vue";
+import {useClient} from "@/plugins/api.js";
+import {useRoute} from 'vue-router';
+
+const data = ref(null);
+const currentImageIndex = ref(0);
+
+const route = useRoute();
+const client = useClient();
+
+const contentId = computed(() => {
+  return route.params.contentId;
+});
+
+const currentImage = computed(() => {
+  if (data.value && data.value.urls) {
+    return data.value.urls[currentImageIndex.value] || '';
+  }
+  return '';
+});
+
+// Calculer si on a plus d'une image
+const multipleImages = computed(() => {
+  if (data.value && data.value.urls) {
+    return data.value.urls.length > 1;
+  }
+  return 0;
+});
+
+const fetchContentData = async (contentId) => {
+  try {
+    const response = await client.get(`/api/contents/${contentId}`);
+    data.value = response.data;
+    console.table(data.value)
+  } catch (error) {
+    console.error(`Error fetching content: ${error}`);
+  }
+};
+
+function goBack() {
+  window.history.go(-1);
+}
+
+function nextImage() {
+  if (data.value?.urls.length > 0) {
+    currentImageIndex.value = (currentImageIndex.value + 1) % data.value.urls.length;
+  }
+}
+
+function previousImage() {
+  if (data.value?.urls.length > 0) {
+    currentImageIndex.value = (currentImageIndex.value - 1 + data.value.urls.length) % data.value.urls.length;
+  }
+}
+
+onMounted(() => {
+  fetchContentData(contentId.value);
+});
+
+watch(contentId, (newContentId) => {
+  fetchContentData(newContentId);
+});
+
+</script>
+
+<style scoped>
+.fixed-width {
+  width: 100%;
+}
+
+.v-btn {
+  transition: background-color 0.2s ease;
+}
+
+.v-btn:hover {
+  background-color: #555;
+}
+
+.v-btn .v-icon {
+  color: white;
+}
+</style>

From 5171ca4748bdb4c450b7c9fab40c6f1b6c9fb346 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Mon, 19 Aug 2024 19:26:09 -0400
Subject: [PATCH 7/8] Update Ui Banner fixe upper

---
 src/views/creators/CreatorBanner.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/creators/CreatorBanner.vue b/src/views/creators/CreatorBanner.vue
index 9a14f08..7754c24 100644
--- a/src/views/creators/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -7,7 +7,7 @@
         <div class="py-4 px-4 min-h-14 md:rounded-t-2xl"
              :style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }">
 
-          <div class="w-full flex justify-end gap-6 ">
+          <div class="w-full flex justify-end gap-6 max-h-8">
             <a
                 v-for="socialNetwork in GetSocialsUrls()"
                 :href="socialNetwork.url"

From a35cdf7eb378b3414a1a1d164c42f28889998c7c Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Mon, 19 Aug 2024 22:36:12 -0400
Subject: [PATCH 8/8] test

---
 src/views/creators/CreatorBanner.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/creators/CreatorBanner.vue b/src/views/creators/CreatorBanner.vue
index 7754c24..7ea1ad0 100644
--- a/src/views/creators/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -23,7 +23,7 @@
         </div>
       </div>
 
-      <!--Banner -->
+      <!--Banner-->
       <div class="relative">
         <!--Banner-->
         <div>