Reworking the layouts to allow for the new design

2024-09-22 00:51:22 -04:00
parent b3fec80607
commit 3cfb3951e3
51 changed files with 819 additions and 872 deletions
--- a/src/views/profile/creators/CreatorPage.vue
+++ b/src/views/profile/creators/CreatorPage.vue
@@ -1,4 +1,5 @@
 <script setup>
+import XIcon from '@/assets/icons/x.svg'
 import {computed, ref} from 'vue'
 import {useUserStore} from "@/stores/userStore.js"
 import Socials from './Socials.vue'
@@ -84,19 +85,19 @@ const closeDialog = () => {
  <div class="flex flex-col items-center w-full">
    <h1 class="uppercase pb-5 text-2xl">
      <v-icon class="mr-2">mdi-file-edit-outline</v-icon>
-      {{$t('creatorinfopage.pageinformation')}}
+      {{ $t('creatorinfopage.pageinformation') }}
    </h1>

    <div v-if="userStore.hasCreator" class="w-full max-w-[800px]">

      <div class="my-10 border rounded-2xl">

-        <div class="py-5 uppercase ml-4">{{$t('creatorinfopage.informations')}}</div>
+        <div class="py-5 uppercase ml-4">{{ $t('creatorinfopage.informations') }}</div>
        <div class="flex flex-col w-full">
          <button

              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
-            <span class="flex-none pa-2 min-w-32 text-left">{{$t('creatorinfopage.name')}}</span>
+            <span class="flex-none pa-2 min-w-32 text-left">{{ $t('creatorinfopage.name') }}</span>
            <span class="flex-auto text-left pr-6 capitalize">{{ userStore.creator.name }}</span>
            <span class="flex-none">  
            <v-icon>mdi-chevron-right</v-icon>
@@ -106,7 +107,7 @@ const closeDialog = () => {
          <button
              @click="openDialog('About')"
              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
-            <span class="flex-none pa-2 min-w-32 text-left">{{$t('creatorinfopage.title')}}</span>
+            <span class="flex-none pa-2 min-w-32 text-left">{{ $t('creatorinfopage.title') }}</span>
            <span class="flex-auto text-left pr-6">{{ userStore.creator.about.title }}</span>
            <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
@@ -116,7 +117,7 @@ const closeDialog = () => {
          <button
              @click="openDialog('About')"
              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl  ">
-            <span class="pa-2 min-w-32 text-left">{{$t('creatorinfopage.description')}}</span>
+            <span class="pa-2 min-w-32 text-left">{{ $t('creatorinfopage.description') }}</span>
            <span class="flex-auto text-left pr-6">{{ userStore.creator.about.description }}</span>
            <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
@@ -126,7 +127,7 @@ const closeDialog = () => {
      </div>

      <div class="border rounded-2xl">
-        <div class="py-5 uppercase ml-4">{{$t('creatorinfopage.banner&profile')}}</div>
+        <div class="py-5 uppercase ml-4">{{ $t('creatorinfopage.banner&profile') }}</div>
        <div class="flex flex-col w-full">

          <button
@@ -168,7 +169,7 @@ const closeDialog = () => {
              @click="openDialog('ColorsPicker', 'accent')"
              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
            <span class="pa-2 min-w-32 text-left"><v-icon>mdi-circle-outline</v-icon></span>
-            <span class="flex-auto text-left pr-6">{{$t('creatorinfopage.borderpicturecolor')}}</span>
+            <span class="flex-auto text-left pr-6">{{ $t('creatorinfopage.borderpicturecolor') }}</span>
            <span class="flex-none">
        <v-icon>mdi-eyedropper-variant</v-icon>
          </span>
@@ -178,7 +179,7 @@ const closeDialog = () => {
              @click="openDialog('ColorsPicker', 'menu')"
              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl">
            <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-menu</v-icon></span>
-            <span class="flex-auto text-left pr-6">{{$t('creatorinfopage.menucolor')}}</span>
+            <span class="flex-auto text-left pr-6">{{ $t('creatorinfopage.menucolor') }}</span>
            <span class="flex-none">
           <v-icon>mdi-eyedropper-variant</v-icon>
          </span>
@@ -188,7 +189,7 @@ const closeDialog = () => {

      <div class="mt-10 border rounded-2xl">

-        <div class="py-5 uppercase ml-4">{{$t('creatorinfopage.socialnetwork')}}</div>
+        <div class="py-5 uppercase ml-4">{{ $t('creatorinfopage.socialnetwork') }}</div>

        <div class="flex flex-col w-full">
          <button
@@ -214,8 +215,9 @@ const closeDialog = () => {
          <button
              @click="openDialog('Socials')"
              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
-          <span class="flex-none pa-2 min-w-32 text-left">    <img src="/images/hutopymedia/icons/x.svg" width="23px"
-                                                                   height="23px"></span>
+          <span class="flex-none pa-2 w-6 h-6 text-left">    
+            <XIcon></XIcon>
+          </span>
            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.xUrl }}</span>
            <span class="flex-none">          
                        <v-icon>mdi-chevron-right</v-icon>
@@ -236,7 +238,7 @@ const closeDialog = () => {
              @click="openDialog('Socials')"
              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
          <span class="flex-none pa-2 min-w-32 text-left"> 
-            <img src="/images/hutopymedia/icons/tiktok.svg" class="w-5 h-5">
+            <XIcon class="w-5 h-5"></XIcon>
          </span>
            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.tikTokUrl }}</span>
            <span class="flex-none">
--- a/src/views/profile/creators/Socials.vue
+++ b/src/views/profile/creators/Socials.vue
@@ -1,4 +1,5 @@
 <script setup>
+import XIcon from '@/assets/icons/x.svg'
 import {ref} from 'vue'
 import {useClient} from "@/plugins/api.js";

@@ -56,6 +57,14 @@ const cancel = () => {

 </script>

+<style scoped>
+.icon {
+  width: 40px;
+  height: 40px;
+  fill: #1976d2;
+}
+</style>
+
 <template>
  <div class="pb-5 text-2xl">Reseaux Sociaux</div>
  <div class="flex flex-row align-center">
@@ -87,56 +96,62 @@ const cancel = () => {
        label="Lien LinkedIn"
        outlined
    ></v-text-field>
-</div>
+  </div>

  <div class="flex flex-row align-center">
    <v-icon class="mb-5 mr-2">mdi-reddit</v-icon>
-  <v-text-field
-      variant="outlined"
-      v-model="redditUrl"
-      label="Lien Reddit"
-      outlined
-  ></v-text-field>
-</div>
-  
+    <v-text-field
+        variant="outlined"
+        v-model="redditUrl"
+        label="Lien Reddit"
+        outlined
+    ></v-text-field>
+  </div>
+
  <div class="flex flex-row align-center">
-    <img src="/images/hutopymedia/icons/tiktok.svg" width="23px" height="23px" class="mb-5 mr-2">      
-  <v-text-field
-      variant="outlined"
-      v-model="tikTokUrl"
-      label="Lien TikTok"
-      outlined
-  ></v-text-field>
+    <div class="w-6 h-6 mb-5 mr-2">
+      <XIcon></XIcon>
+    </div>
+    <v-text-field
+        variant="outlined"
+        v-model="tikTokUrl"
+        label="Lien TikTok"
+        outlined
+    ></v-text-field>
  </div>

  <div class="flex flex-row align-center">
    <v-icon class="mb-5 mr-2">mdi-web</v-icon>
-  <v-text-field
-      variant="outlined"
-      v-model="websiteUrl"
-      label="Lien site web"
-      outlined
-  ></v-text-field>
-  </div>
-
-  <div class="flex flex-row align-center">
-    <img src="/images/hutopymedia/icons/x.svg" width="23px" height="23px" class="mb-5 mr-2">
    <v-text-field
-      variant="outlined"
-      v-model="xUrl"
-      label="Lien X"
-      outlined
-  ></v-text-field>
+        variant="outlined"
+        v-model="websiteUrl"
+        label="Lien site web"
+        outlined
+    ></v-text-field>
+  </div>
+  <div class="flex flex-row align-center">
+
+    <div class="w-6 h-6 mb-5 mr-2">
+      
+      <XIcon class="icon"></XIcon>
+    </div>
+    
+    <v-text-field
+        variant="outlined"
+        v-model="xUrl"
+        label="Lien X"
+        outlined
+    ></v-text-field>
  </div>

  <div class="flex flex-row align-center">
    <v-icon class="mb-5 mr-2">mdi-youtube</v-icon>
-  <v-text-field      
-      variant="outlined"
-      v-model="youtubeUrl"
-      label="Lien Youtube"
-      outlined
-  ></v-text-field>
+    <v-text-field
+        variant="outlined"
+        v-model="youtubeUrl"
+        label="Lien Youtube"
+        outlined
+    ></v-text-field>
  </div>

  <div class="flex justify-end space-x-4">