Applying new redesign.
This commit is contained in:
PascalMarchesseault
@@ -1,110 +1,225 @@
|
||||
<template>
|
||||
<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') }">
|
||||
<div class="flex flex-column w-full">
|
||||
|
||||
<!-- Logo & User Info -->
|
||||
<div class="relative z-20">
|
||||
<div class="flex flex-row items-center py-2">
|
||||
<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-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 class="relative w-full shadow-xl rounded-2xl">
|
||||
<div ref="mainContainer" class="rounded-b-2xl shadow-2xl"
|
||||
:style="{ backgroundColor: creator.colors.bannerTop || '#A30E79', boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }">
|
||||
|
||||
<div class="relative">
|
||||
<div class="flex flex-row items-center py-2">
|
||||
<!-- Profile Image -->
|
||||
<div>
|
||||
<img
|
||||
class="shadow-2xl rounded-full border-solid border-2 absolute z-20 max-w-[190px] 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: '190px'}"
|
||||
/>
|
||||
</div>
|
||||
</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') }}
|
||||
|
||||
<!-- Creator Information -->
|
||||
<div class="ml-72 text-white w-25">
|
||||
<p class="capitalize text-2xl">{{ creator.name }}</p>
|
||||
<div class="text-md py-1">
|
||||
{{ creator.about.title }}
|
||||
</div>
|
||||
<div class="text-xs">
|
||||
105 Followers . {{ creator.subscriberCount }} {{ $t('banner.subscription') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex-grow"></div>
|
||||
|
||||
|
||||
<div class="flex flex-col items-center justify-center w-full">
|
||||
<!-- Social Media Icons -->
|
||||
<div class="flex flex-row space-x-6 justify-center">
|
||||
<a
|
||||
v-for="socialNetwork in GetSocialsUrls()"
|
||||
:href="socialNetwork.url"
|
||||
target="_blank"
|
||||
class="text-white text-md transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
|
||||
<v-icon v-if="socialNetwork.icon.includes('mdi')">{{ socialNetwork.icon }}</v-icon>
|
||||
<img v-if="socialNetwork.icon.includes('tiktok')"
|
||||
:src="socialNetwork.icon"
|
||||
class="w-6 h-6 mt-0.5"
|
||||
alt="Tiktok">
|
||||
<img v-if="socialNetwork.icon.includes('websiteIcon')"
|
||||
:src="socialNetwork.icon"
|
||||
class="w-6 h-6 mt-0.5"
|
||||
alt="Website">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Follow and Subscribe Buttons -->
|
||||
<div class="flex flex-row space-x-1 justify-center mt-4">
|
||||
<follow-button
|
||||
:creator="creator"
|
||||
:color-border="creator.colors.menu">
|
||||
</follow-button>
|
||||
<subscribe-button
|
||||
:creator="creator"
|
||||
:color-border="creator.colors.menu">
|
||||
</subscribe-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex-grow w-50">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</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é –>-->
|
||||
|
||||
<!-- </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>
|
||||
|
||||
<div class="rounded-b-2xl min-h-10 px-36 flex flex-col items-center justify-center"
|
||||
:style="{ backgroundColor: creator.colors.bannerBottom, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }">
|
||||
<div class="flex justify-evenly w-full">
|
||||
<v-btn variant="text" class="text-white">Présentation</v-btn>
|
||||
<v-btn variant="text" class="text-white">Actualité</v-btn>
|
||||
<v-btn variant="text" class="text-white">Exclusivité</v-btn>
|
||||
</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 {ref, onMounted, computed} from 'vue';
|
||||
import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
|
||||
import SubscribeButton from "@/views/creators/SubscribeButton.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";
|
||||
import FollowButton from "@/views/creators/FollowButton.vue";
|
||||
|
||||
function GetSocialsUrls() {
|
||||
|
||||
const socials = [];
|
||||
|
||||
if (props.creator.socials.facebookUrl !== null) {
|
||||
socials.push({
|
||||
icon: "mdi-facebook",
|
||||
url: props.creator.socials.facebookUrl
|
||||
})
|
||||
}
|
||||
if (props.creator.socials.instagramUrl !== null) {
|
||||
socials.push({
|
||||
icon: "mdi-instagram",
|
||||
url: props.creator.socials.instagramUrl
|
||||
})
|
||||
}
|
||||
if (props.creator.socials.xUrl !== null) {
|
||||
socials.push({
|
||||
icon: "mdi-twitter",
|
||||
url: props.creator.socials.xUrl
|
||||
})
|
||||
}
|
||||
if (props.creator.socials.linkedInUrl !== null) {
|
||||
socials.push({
|
||||
icon: 'mdi-linkedin',
|
||||
url: props.creator.socials.linkedInUrl
|
||||
})
|
||||
}
|
||||
if (props.creator.socials.tikTokUrl !== null) {
|
||||
socials.push({
|
||||
icon: '/images/socials/tiktok-white.png',
|
||||
url: props.creator.socials.tikTokUrl
|
||||
})
|
||||
}
|
||||
if (props.creator.socials.youtubeUrl !== null) {
|
||||
socials.push({
|
||||
icon: 'mdi-youtube',
|
||||
url: props.creator.socials.youtubeUrl
|
||||
})
|
||||
}
|
||||
if (props.creator.socials.redditUrl !== null) {
|
||||
socials.push({
|
||||
icon: 'mdi-reddit',
|
||||
url: props.creator.socials.redditUrl
|
||||
})
|
||||
}
|
||||
if (props.creator.socials.websiteUrl !== null) {
|
||||
socials.push({
|
||||
icon: 'mdi-web',
|
||||
url: props.creator.socials.websiteUrl
|
||||
})
|
||||
}
|
||||
|
||||
return socials;
|
||||
}
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
creator: { type: Object, required: true }
|
||||
creator: {type: Object, required: true}
|
||||
});
|
||||
|
||||
const subscriptionStore = useSubscriptionStore();
|
||||
|
||||
// Calculer si l'utilisateur est abonné
|
||||
const isSubscribed = computed(() => subscriptionStore.isSubscribeTo(props.creator.id));
|
||||
|
||||
const isSticky = ref(false);
|
||||
const mainContainer = ref(null);
|
||||
|
||||
@@ -113,7 +228,7 @@ onMounted(() => {
|
||||
([entry]) => {
|
||||
isSticky.value = !entry.isIntersecting;
|
||||
},
|
||||
{ threshold: 0 }
|
||||
{threshold: 0}
|
||||
);
|
||||
|
||||
if (mainContainer.value) {
|
||||
|
||||
Reference in New Issue
Block a user