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] 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>