From c26a4ba148267c7e8c0df4f0ceb811c55d0810c1 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sun, 30 Jun 2024 12:39:54 -0400
Subject: [PATCH] I changed the visuals of the documentation files, improved
 the appearance of the post page, modified the header of the profile view, and
 added a Feed view.

---
 src/router/index.js                |  9 +++++-
 src/views/main/Creator.vue         | 45 ++++++++++++++++++------------
 src/views/main/Feed.vue            | 41 +++++++++++++++++++++++++++
 src/views/main/PostCard.vue        | 20 ++++++-------
 src/views/main/PostContentMenu.vue |  7 +----
 src/views/main/Profile.vue         |  2 +-
 src/views/manualusers/ARPS.vue     |  2 +-
 7 files changed, 89 insertions(+), 37 deletions(-)
 create mode 100644 src/views/main/Feed.vue

diff --git a/src/router/index.js b/src/router/index.js
index 6aca19e..6147cb1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -19,7 +19,8 @@ import Profile from '../views/main/Profile.vue'
 import ChloeBeaugrand from '../views/manualusers/ChloeProfile.vue'
 import Leffet from '../views/manualusers/LeffetProfile.vue'
 import MathieuCaron from '../views/manualusers/MathieuCaron.vue'
-import Creator from "@/views/main/Creator.vue";
+import Creator from "@/views/main/Creator.vue"
+import Feed from '../views/main/Feed.vue';
 
 const routes = [
     {
@@ -131,6 +132,12 @@ const routes = [
         name: 'wallet',
         component: Wallet
     },
+    {
+        path: '/feed',
+        name: 'feed',
+        component: Feed
+    },
+
 
 
 ]
diff --git a/src/views/main/Creator.vue b/src/views/main/Creator.vue
index 7984b51..d608ba2 100644
--- a/src/views/main/Creator.vue
+++ b/src/views/main/Creator.vue
@@ -1,28 +1,37 @@
 <template>
   <div>
-
-    <v-img cover
-           max-height="375"
-           :src="imageSrc">
-    </v-img>
-
-    <div class="w-full border-b-2 p-6">
-      <PostMessage content-id="00000001-0000-0000-0000-000000000001"></PostMessage>
-    </div>
     
-    <div class="w-full border-b-2 p-6">
-      <h2 class="font-sans font-semibold">Commentaires</h2>
-      <MessageList content-id="00000001-0000-0000-0000-000000000001"></MessageList>
-    </div>
+  <div class="flex flex-column w-max-[100] ">
+    
+  </div>
+
+
+<!--    <div class="w-full border-b-2 p-6">-->
+<!--      <PostMessage content-id="00000001-0000-0000-0000-000000000001"></PostMessage>-->
+<!--    </div>-->
+<!--    -->
+<!--    <div class="w-full border-b-2 p-6">-->
+<!--      <h2 class="font-sans font-semibold">Commentaires</h2>-->
+<!--      <MessageList content-id="00000001-0000-0000-0000-000000000001"></MessageList>-->
+<!--    </div>-->
 
     <PostContentMenu></PostContentMenu>
 
-    <div class="flex">
-      <PostCard v-for="post in posts"
-                :post="post"
-                class="m-2 bg-red w-full">
-      </PostCard>
+
+    <div class="flex flex-col items-center">
+      <div class="max-w-[800px] border-l-2 border-r-2 border-gray-200 px-4 ">
+        <PostCard v-for="post in posts"
+                  :key="post.id"
+                  :post="post"
+                  class=" bg-white w-full content-center rounded-3xl mt-2">
+        </PostCard>
+      </div>
     </div>
+
+    
+    
+    
+   
   </div>
 </template>
 
diff --git a/src/views/main/Feed.vue b/src/views/main/Feed.vue
new file mode 100644
index 0000000..48ace0e
--- /dev/null
+++ b/src/views/main/Feed.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+
+    <div class="flex flex-column w-max-[100] ">
+
+    </div>
+
+
+
+    <div class="flex flex-col items-center">
+      <div class="max-w-[800px] border-l-2 border-r-2 border-gray-200 px-4 ">
+        <PostCard v-for="post in posts"
+                  :key="post.id"
+                  :post="post"
+                  class=" bg-white w-full content-center rounded-3xl mt-2">
+        </PostCard>
+      </div>
+    </div>
+
+
+
+
+
+  </div>
+</template>
+
+<script setup>
+
+import PostContentMenu from '@/views/main/PostContentMenu.vue'
+import PostCard from "@/views/main/PostCard.vue"
+import posts from "@/views/main/posts.json"
+import PostMessage from "@/views/messages/PostMessage.vue";
+import MessageList from "@/views/messages/MessageList.vue";
+
+let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/main/PostCard.vue b/src/views/main/PostCard.vue
index 7fca6ff..746fdf4 100644
--- a/src/views/main/PostCard.vue
+++ b/src/views/main/PostCard.vue
@@ -1,28 +1,28 @@
 <template>
 
 
-  <div class=" shadow-lg rounded-lg max-w-sm">
+  <div class="border-2 shadow-2xl mb-4 ">
+    <div class="mt-1">
 
-    <div class="h-48 object-cover bg-purple">
-
-      <v-img :src="props.post.banner"
+      <v-img class="mt-1 rounded-t-2xl " :src="props.post.banner"
              v-if="!isHttpUrl">
       </v-img>
 
-      <iframe v-if="isHttpUrl"
+
+      <iframe  style="min-height: 400px" class="w-full rounded-t-2xl"
+           v-if="isHttpUrl"
               :src="props.post.banner"
               title="YouTube video player"
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
               referrerpolicy="strict-origin-when-cross-origin"
               allowfullscreen>
       </iframe>
+  
 
     </div>
-
-    <div class="text-lg font-bold">{{ props.post.title }}</div>
-    <div class="text-sm text-gray-500">{{ props.post.title }}</div>
-    <div class="text-base text-gray-700">{{ props.post.content }}</div>
-
+    <div class="text-lg font-bold m-4">{{ props.post.title }}</div>
+    <div class="text-sm text-gray-500 m-4">{{ props.post.title }}</div>
+    <div class="text-base text-gray-700 m-4 text-justify">{{ props.post.content }}</div>
   </div>
 
 </template>
diff --git a/src/views/main/PostContentMenu.vue b/src/views/main/PostContentMenu.vue
index ed46932..15d2dd4 100644
--- a/src/views/main/PostContentMenu.vue
+++ b/src/views/main/PostContentMenu.vue
@@ -95,6 +95,7 @@
             </v-card>
         </v-container>
     </v-col>
+
 </template>
 
 <script setup>
@@ -112,13 +113,7 @@ const removeContent = (index) => {
     contents.value.splice(index, 1);
 };
 
-const postContent = () => {
-    // Implémenter la logique pour poster le contenu
-};
 
-const previewContent = () => {
-    // Implémenter la logique pour prévisualiser le contenu
-};
 
 const cancelPost = () => {
     if (contents.value.length > 0) {
diff --git a/src/views/main/Profile.vue b/src/views/main/Profile.vue
index d83f283..ee726d4 100644
--- a/src/views/main/Profile.vue
+++ b/src/views/main/Profile.vue
@@ -2,7 +2,7 @@
   <div class="px-2">
     <div class="flex flex-col max-w-2xl mx-auto rounded-3xl shadow-2xl mt-2 mb-16">
 
-      <H1 class="text-center text-4xl bg-fuchsia-900 p-3  rounded-t-3xl border-b-4 border-b-gray-200 font-sans text-white">
+      <H1 class="text-center text-4xl bg-fuchsia-900 p-3 w-full rounded-t-3xl border-b-4 border-b-gray-200 font-sans text-white">
         Personnaliser votre profil
       </H1>
       
diff --git a/src/views/manualusers/ARPS.vue b/src/views/manualusers/ARPS.vue
index a2d0188..474eece 100644
--- a/src/views/manualusers/ARPS.vue
+++ b/src/views/manualusers/ARPS.vue
@@ -88,7 +88,7 @@
     </div>
   </div>
 
-  <CreatorFeed ></CreatorFeed>
+ 
 
   <!--Post-modale-->
   <v-dialog v-model="isDialogActive" max-width="500">