Big cleanup for styling

2025-02-12 16:41:22 -05:00
parent 574c0e1dc6
commit a1c8d34332
6 changed files with 58 additions and 127 deletions
--- a/frontend/src/views/creators/BannerActions.vue
+++ b/frontend/src/views/creators/BannerActions.vue
@@ -114,57 +114,42 @@ onBeforeUnmount(() => {
 </script>

 <template>
+
  <div class="flex flex-column w-full">
    <!-- Container principal avec le profil -->
    <div class="relative w-full shadow-xl rounded-2xl">
-      <div class="rounded-b-2xl shadow-2xl bg-hPrimary"
+      <div class="rounded-b-2xl shadow-2xl bg-hPrimary text-hOnPrimary"
           :style="{
            boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)',
            }">

-        <div class="flex flex-row p-2">
+        <div class="flex flex-row py-4 pr-4 items-center">
          <!-- Profile et Info -->

-          <div>
+          <div class="absolute -mt-4">
            <creator-logo/>
          </div>

-          <div class="flex items-center">
+          <div class="flex items-center ml-52 grow">
            <name-title></name-title>
          </div>

-
-          <!-- Actions - Follow et Register -->
-          <!--          <div class="flex flex-col items-center justify-center w-full">-->
-          <!--            <div class="flex flex-row space-x-1 justify-center mt-3 mb-2">-->
-          <!--              &lt;!&ndash;<subscribe-button></subscribe-button>&ndash;&gt;-->
-          <!--            </div>-->
-          <!--          </div>-->
-        </div>
-
-        <!-- Bouton Support -->
-        <div
-            v-show="brandingStore.value.acceptDonation"
-            class="z-20 shadow-2xl rounded-md bg-hSecondary text-hOnSecondary flex justify-center items-center z-50"
-            :class="{
-            'absolute bottom-6 right-8 w-64 h-28 ': !isMobile,
-            'fixed bottom-0 left-0 right-0 w-full h-16': isMobile,
-          }"
-        >
          <donation-button-banner
-              v-if="creator"
+              v-if="brandingStore.value.acceptDonation && creator"
              :creator-id="creator.id"
              :creator-name="creator.name"
-              :on-success-url="baseURL + '/paymentcompleted/' + creator.id"
              :on-cancelled-url="baseURL + '/paymentfailed/' + creator.id"
+              :on-success-url="baseURL + '/paymentcompleted/' + creator.id"
          ></donation-button-banner>
+
        </div>
+
      </div>
    </div>

    <!-- Section pour les icônes de réseaux sociaux -->
    <div
-        class="rounded-b-2xl -mt-3 h-12 px-36 flex flex-col items-center justify-center bg-hSecondary"
+        class="rounded-b-2xl -mt-3 h-12 px-36 flex flex-col items-center justify-center bg-hSecondary text-hOnSecondary"
        :style="{
        boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)',
      }"
@@ -176,7 +161,7 @@ onBeforeUnmount(() => {
              :key="socialNetwork.url"
              :href="socialNetwork.url"
              target="_blank"
-              class="text-white text-md transform transition-transform duration-200 hover:scale-125 hover:text-blue-500"
+              class="text-md transform transition-transform duration-200 hover:scale-125 hover:text-fuchsia-900"
          >
            <v-icon v-if="socialNetwork.icon.includes('mdi')">
              {{ socialNetwork.icon }}
--- a/frontend/src/views/creators/CreatorHome.vue
+++ b/frontend/src/views/creators/CreatorHome.vue
@@ -28,10 +28,10 @@

    <div>
      <!-- Main image  Bloc D'information-->
-      <div class="py-4" >
+      <div class="py-4">

        <div v-if="!isEditMode">
-          <p  class="py-4 text-justify" v-if="mainImageText ">
+          <p v-if="mainImageText ">
            {{ mainImageText }}
          </p>
        </div>
@@ -45,11 +45,10 @@
                v-if="mainImageUrl"
                :src="mainImageUrl"
                alt="Image principale"
-                class="max-w-full h-auto cursor-pointer"
-                @click="openFullscreen(mainImageUrl)" />
+                class="max-w-full h-auto cursor-pointer"/>
          </div>
          <div v-if="isEditMode" class="relative flex justify-center">
-            <label  >
+            <label>
              <input type="file" @change="updateImage('mainImageUrl', $event)" class="hidden"/>
              <img :src="mainImageUrl || fallbackImage"
                   alt="Image principale"
@@ -68,7 +67,7 @@
            </h2>

            <div v-if="!isEditMode">
-              <p v-if="mainVideoText" class="text-lg  text-justify mt-5 mb-4">
+              <p v-if="mainVideoText">
                {{ mainVideoText }}
              </p>
            </div>
@@ -85,7 +84,7 @@
          </div>
        </div>

-        <div >
+        <div>
          <div v-if="!isEditMode" class="py-5 text-lg font-bold">
            {{ videoSubtitle }}
          </div>
@@ -98,10 +97,15 @@
            ></v-text-field>
          </div>

-          <v-textarea v-if="isEditMode" rows="10" variant="outlined" v-model="editableImagesText" class="w-full p-2 border rounded-md"></v-textarea>
+          <v-textarea v-if="isEditMode"
+                      v-model="editableImagesText"
+                      class="w-full p-2 border rounded-md"
+                      rows="10"
+                      variant="outlined">
+          </v-textarea>

          <div v-if="!isEditMode">
-            <p v-if="imagesText " class="text-lg text-justify">
+            <p v-if="imagesText ">
              {{ imagesText }}
            </p>
          </div>
@@ -135,7 +139,7 @@
      <!-- Images  -->

      <div v-if="!isEditMode">
-        <div v-if="imagesSubtitle || image1Url || image2Url || image3Url || image4Url || imagesText " >
+        <div v-if="imagesSubtitle || image1Url || image2Url || image3Url || image4Url || imagesText ">
          <!--        images-->
          <div class="py-2">
            <FullscreenImage ref="fullscreenImage" :image-url="currentImage"/>
@@ -143,27 +147,31 @@
              <!-- Affichage des images -->
              <div class="flex  gap-2">
                <!-- Première image -->
-                <div class="relative w-full sm:flex-1 " v-if="image1Url"
-                     @click="openFullscreen(image1Url)">
-                  <img :src="image1Url" alt="Image 1" class="rounded-md max-w-full h-auto cursor-pointer"/>
+                <div v-if="image1Url" class="relative w-full sm:flex-1 ">
+                  <img :src="image1Url"
+                       alt="Image 1"
+                       class="rounded-md max-w-full h-auto cursor-pointer"/>
                </div>

                <!-- Deuxième image -->
-                <div class="relative w-full sm:flex-1 " v-if="image2Url"
-                     @click="openFullscreen(image2Url)">
-                  <img :src="image2Url" alt="Image 2" class="rounded-md max-w-full h-auto cursor-pointer"/>
+                <div v-if="image2Url" class="relative w-full sm:flex-1 ">
+                  <img :src="image2Url"
+                       alt="Image 2"
+                       class="rounded-md max-w-full h-auto cursor-pointer"/>
                </div>

                <!-- Troisième image -->
-                <div class="relative w-full sm:flex-1 " v-if="image3Url"
-                     @click="openFullscreen(image3Url)">
-                  <img :src="image3Url" alt="Image 3" class="rounded-md max-w-full h-auto cursor-pointer"/>
+                <div v-if="image3Url" class="relative w-full sm:flex-1 ">
+                  <img :src="image3Url"
+                       alt="Image 3"
+                       class="rounded-md max-w-full h-auto cursor-pointer"/>
                </div>

                <!-- Quatrième image -->
-                <div class="relative w-full sm:flex-1 " v-if="image4Url"
-                     @click="openFullscreen(image4Url)">
-                  <img :src="image4Url" alt="Image 4" class="rounded-md max-w-full h-auto cursor-pointer"/>
+                <div v-if="image4Url" class="relative w-full sm:flex-1 ">
+                  <img :src="image4Url"
+                       alt="Image 4"
+                       class="rounded-md max-w-full h-auto cursor-pointer"/>
                </div>
              </div>
            </div>
@@ -255,7 +263,7 @@

      <!-- Contact Info-->
      <div v-if="!isEditMode">
-        <div v-if="phoneNumber || email" class="mb-6" >
+        <div v-if="phoneNumber || email" class="mb-6">
          <!--      mobile-->
          <div v-if="smAndDown">
            <div class="flex flex-col space-y-10 mt-12 justify-center items-center">
@@ -302,12 +310,11 @@
 </template>

 <script setup>
-import {onMounted, ref, watch} from "vue";
+import {onMounted, ref} from "vue";
 import {useClient} from "@/plugins/api.js";
 import {useBrandingStore} from "@/stores/brandingStore.js";
 import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
 import {useDisplay} from "vuetify";
-import FullscreenImage from "@/views/creators/FullscreenImage.vue";

 const {smAndDown} = useDisplay();

@@ -353,13 +360,6 @@ const editableEmail = ref("");

 const editableImages = ref([null, null, null, null]);

-function openFullscreen(imageUrl) {
-  currentImage.value = imageUrl;
-  fullscreenImage.value.open();
-}
-
-watch(smAndDown, () => {});
-
 // Activer/désactiver le mode édition
 function toggleEditMode() {
  isEditMode.value = !isEditMode.value;
--- a/frontend/src/views/creators/CreatorLogo.vue
+++ b/frontend/src/views/creators/CreatorLogo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-full relative bg-red"
+  <div class="rounded-full relative"
       @mouseenter="showTint = isCurrentCreator"
       @mouseleave="showTint = false"
       @click="isCurrentCreator && openBannerEditor()"
--- a/frontend/src/views/creators/DonationButtonBanner.vue
+++ b/frontend/src/views/creators/DonationButtonBanner.vue
@@ -1,12 +1,10 @@
 <template>
-  <v-btn
-    variant="text"
-    style="font-size: x-large; height: 100%"
-    block
+  <button
+      class="secondary"
    @click="openDonationDialog()"
  >
    {{ $t('isupportbtn.isupport') }}
-  </v-btn>
+  </button>

  <v-dialog v-model="donationModal" max-width="500">
    <v-form>
@@ -98,10 +96,10 @@
 </template>

 <script setup>
-import { useClient } from '@/plugins/api.js';
-import { useBrandingStore } from '@/stores/brandingStore.js';
-import { loadStripe } from '@stripe/stripe-js';
-import { onMounted, ref } from 'vue';
+import {useClient} from '@/plugins/api.js';
+import {useBrandingStore} from '@/stores/brandingStore.js';
+import {loadStripe} from '@stripe/stripe-js';
+import {onMounted, ref} from 'vue';

 const brandingStore = useBrandingStore();

--- a/frontend/src/views/creators/FullscreenImage.vue
+++ b/frontend/src/views/creators/FullscreenImage.vue
@@ -1,56 +0,0 @@
-<template>
-  <v-dialog v-model="isVisible" fullscreen hide-overlay transition="fade-transition">
-    <v-card class="pa-0 bg-hBackground text-hOnBackground">
-      <v-btn
-          class="close-button bg-hSecondary text-hOnSecondary"
-          @click="close"
-      >
-        <v-icon>mdi-close</v-icon>
-      </v-btn>
-      <v-img :src="imageUrl" class="fullscreen-image"></v-img>
-    </v-card>
-  </v-dialog>
-</template>
-
-<script setup>
-import {ref} from "vue";
-import {useBrandingStore} from "@/stores/brandingStore.js";
-
-const brandingStore = useBrandingStore();
-
-const props = defineProps({
-  imageUrl: {
-    type: String,
-    required: true,
-  },
-});
-
-const isVisible = ref(false);
-
-function open() {
-  isVisible.value = true;
-}
-
-function close() {
-  isVisible.value = false;
-}
-
-defineExpose({
-  open,
-});
-</script>
-
-<style scoped>
-.fullscreen-image {
-  height: 100vh;
-  width: 100%;
-  object-fit: contain;
-}
-
-.close-button {
-  position: absolute;
-  top: 50px;
-  right: 50px;
-  z-index: 10;
-}
-</style>