Old modification

2024-09-18 13:36:01 -04:00
parent 13049e9d2a
commit 72ee0fed4e
3 changed files with 104 additions and 53 deletions
--- a/src/views/creators/banner/bannerlower/BannerActionsLg.vue
+++ b/src/views/creators/banner/bannerlower/BannerActionsLg.vue
@@ -1,72 +1,124 @@
 <template>
-  <div class="relative w-full mb-5">
-    <div class="rounded-b-2xl"
-         :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79' }">
+  <div class="relative w-full">
+    <div ref="mainContainer" class="rounded-b-2xl pt-2 pb-1"
+         :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79', borderBottom: '5px inset' + (creator.colors.menu || '#000') }">
+
+      <!-- Logo & User Info -->
      <div class="relative z-20">
        <div class="flex flex-row items-center py-2">
-          <!--Logo & User Info-->
          <div>
-            <div>
-              <img
-                  class="rounded-full border-solid border-2 absolute z-20 max-w-[175px] ml-15 -mt-20"
-                  :src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
-                  alt="Profile Picture"
-                  :style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"
-              />
-            </div>
+            <img
+                class="shadow-2xl rounded-full border-solid border-4 absolute z-20 max-w-[190px] ml-15 -mt-32"
+                :src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
+                alt="Profile Picture"
+                :style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"
+            />
          </div>
-
-          <div class="ml-60 text-white mr-10">
-            <div>
-              <p class="capitalize text-3xl font-bold ">{{ creator.name }}</p>
-              <div>{{ creator.subscriberCount }} {{ $t('banner.subscription') }}</div>
-            </div>
-          </div>
-
-          <div class="flex items-center">
-            <subscribe-button :creator="creator"></subscribe-button>
-          </div>
-
-          <div class="flex items-center ml-4">
-            <donation-button :color-border="creator.colors.menu"
-                             :color-accent="creator.colors.accent"
-                             :creator-id="creator.id"
-                             :creator-name="creator.name"
-                             :creator-logo="creator.images.logo"
-                             iconColorClass="text-white"
-            ></donation-button>
-          </div>
-
-          <div class="flex ml-auto space-x-4 items-center">
-            <publish-content-button :creator="creator"
-                                    @content-posted="addContent"
-            ></publish-content-button>
-
-            <div class="text-white">
+          <div class="ml-72 text-white mr-10">
+            <p class="capitalize text-4xl font-bold">{{ creator.name }}</p>
+            <div class="text-2xl text-white flex flex-row align-center">
              {{ creator.about.title }}
+              <creator-about class="px-2" :creator="creator"></creator-about>
            </div>
-
-            <creator-about :creator="creator"></creator-about>
          </div>
+          <div class="flex flex-row ml-auto space-x-2.5">
+            <donation-button-banner
+                :color-border="creator.colors.menu"
+                :color-accent="creator.colors.accent"
+                :creator-id="creator.id"
+                :creator-name="creator.name"
+                :creator-logo="creator.images.logo"
+                iconColorClass="text-white">
+            </donation-button-banner>
+            <div class="flex flex-column">
+              <!-- Bouton abonnement affiché seulement si non abonné -->
+              <subscribe-button
+
+                  :creator="creator"
+                  :color-border="creator.colors.menu">
+              </subscribe-button>
+              <div class="font-bold text-white flex justify-end mr-5 py-1.5">
+                {{ creator.subscriberCount }} {{ $t('banner.subscription') }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Conteneur sticky -->
+    <div v-show="isSticky" class=" sticky-header fixed top-14 left-0 right-0 w-full z-20"
+         :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79', borderBottom: '5px inset' + (creator.colors.menu || '#000') }">
+      <div class="shadow-3xl flex flex-row items-center py-2 px-2">
+        <div>
+          <img
+              class="max-w-[40px] max-h-[40px] ml-5 rounded-full"
+              :src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
+              alt="Profile Picture"
+              :style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"
+          />
+        </div>
+        <div class="ml-5 text-white">
+          <p class="capitalize text-2xl font-bold">{{ creator.name }}</p>
+        </div>
+        <div class="ml-auto flex flex-row space-x-2.5 mr-3 ">
+
+          <donation-button-banner-slim
+              class=""
+              :color-border="creator.colors.menu"
+              :color-accent="creator.colors.accent"
+              :creator-id="creator.id"
+              :creator-name="creator.name"
+              :creator-logo="creator.images.logo"
+          >
+          </donation-button-banner-slim>
+
+          <!-- Afficher le bouton d'abonnement seulement si l'utilisateur n'est pas abonné -->
+          <subscribe-button-slim
+              v-if="!isSubscribed"
+              :creator="creator"
+              :color-border="creator.colors.menu">
+          </subscribe-button-slim>
+
        </div>
      </div>
    </div>
  </div>
 </template>

+
 <script setup>
+import { ref, onMounted, computed } from 'vue';
+import { useSubscriptionStore } from "@/stores/subscriptionStore.js";
 import SubscribeButton from "@/views/creators/SubscribeButton.vue";
-import PublishContentButton from "@/views/contents/PublishContentButton.vue";
-import DonationButton from "@/views/creators/DonationButton.vue";
+import DonationButtonBanner from "@/views/creators/DonationButtonBanner.vue";
 import CreatorAbout from "@/views/creators/CreatorAbout.vue";
+import SubscribeButtonSlim from "@/views/creators/SubscribeButtonSlim.vue";
+import DonationButtonBannerSlim from "@/views/creators/DonationButtonBannerSlim.vue";

 const props = defineProps({
-  creator: {type: Object, required: true}
+  creator: { type: Object, required: true }
 });

-const emits = defineEmits(['content-posted']);
+const subscriptionStore = useSubscriptionStore();

-function addContent(content) {
-  emits('content-posted', content);
-}
+// Calculer si l'utilisateur est abonné
+const isSubscribed = computed(() => subscriptionStore.isSubscribeTo(props.creator.id));
+
+const isSticky = ref(false);
+const mainContainer = ref(null);
+
+onMounted(() => {
+  const observer = new IntersectionObserver(
+      ([entry]) => {
+        isSticky.value = !entry.isIntersecting;
+      },
+      { threshold: 0 }
+  );
+
+  if (mainContainer.value) {
+    observer.observe(mainContainer.value);
+  }
+});
 </script>
+
--- a/src/views/creators/banner/bannerlower/BannerActionsXl.vue
+++ b/src/views/creators/banner/bannerlower/BannerActionsXl.vue
@@ -61,10 +61,10 @@
        <div class="ml-5 text-white">
          <p class="capitalize text-2xl font-bold">{{ creator.name }}</p>
        </div>
-        <div class="ml-auto flex flex-row space-x-2.5 ">
+        <div class="ml-auto flex flex-row space-x-2.5 mr-3 ">
        
          <donation-button-banner-slim 
-             
+             class=""
              :color-border="creator.colors.menu"
              :color-accent="creator.colors.accent"
              :creator-id="creator.id"
--- a/src/views/main/Header.vue
+++ b/src/views/main/Header.vue
@@ -14,8 +14,7 @@
            ref="popupButtonRef"
            alt="Hutopy Logo"
            class="w-10"
-        ></v-img>
-        <div class="text-xs flex justify-center">ALPHA</div>
+        ></v-img>        
      </RouterLink>

      <RouterLink class="d-none d-lg-flex" to="/">