Passing the right data to donation-button-banner
This commit is contained in:
Karl Carriere
@@ -1,13 +1,14 @@
|
||||
<script setup>
|
||||
import {ref, onMounted, onBeforeUnmount} from 'vue';
|
||||
import DonationButtonBanner from "@/views/creators/DonationButtonBanner.vue";
|
||||
import {useBrandingStore} from "@/stores/brandingStore.js";
|
||||
import { useBrandingStore } from '@/stores/brandingStore.js';
|
||||
import { useCreatorProfileStore } from '@/stores/creatorProfileStore';
|
||||
import DonationButtonBanner from '@/views/creators/DonationButtonBanner.vue';
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue';
|
||||
|
||||
const creatorProfileStore = useCreatorProfileStore();
|
||||
|
||||
const brandingStore = useBrandingStore();
|
||||
const isMobile = ref(false);
|
||||
|
||||
|
||||
function updateIsMobile() {
|
||||
isMobile.value = window.innerWidth <= 640;
|
||||
}
|
||||
@@ -19,49 +20,49 @@ function GetSocialsUrls() {
|
||||
|
||||
if (brandingSocials.facebookUrl) {
|
||||
socials.push({
|
||||
icon: "mdi-facebook",
|
||||
icon: 'mdi-facebook',
|
||||
url: brandingSocials.facebookUrl,
|
||||
});
|
||||
}
|
||||
if (brandingSocials.instagramUrl) {
|
||||
socials.push({
|
||||
icon: "mdi-instagram",
|
||||
icon: 'mdi-instagram',
|
||||
url: brandingSocials.instagramUrl,
|
||||
});
|
||||
}
|
||||
if (brandingSocials.xUrl) {
|
||||
socials.push({
|
||||
icon: "mdi-twitter",
|
||||
icon: 'mdi-twitter',
|
||||
url: brandingSocials.xUrl,
|
||||
});
|
||||
}
|
||||
if (brandingSocials.linkedInUrl) {
|
||||
socials.push({
|
||||
icon: "mdi-linkedin",
|
||||
icon: 'mdi-linkedin',
|
||||
url: brandingSocials.linkedInUrl,
|
||||
});
|
||||
}
|
||||
if (brandingSocials.tikTokUrl) {
|
||||
socials.push({
|
||||
icon: "/images/socials/tiktok-white.png",
|
||||
icon: '/images/socials/tiktok-white.png',
|
||||
url: brandingSocials.tikTokUrl,
|
||||
});
|
||||
}
|
||||
if (brandingSocials.youtubeUrl) {
|
||||
socials.push({
|
||||
icon: "mdi-youtube",
|
||||
icon: 'mdi-youtube',
|
||||
url: brandingSocials.youtubeUrl,
|
||||
});
|
||||
}
|
||||
if (brandingSocials.redditUrl) {
|
||||
socials.push({
|
||||
icon: "mdi-reddit",
|
||||
icon: 'mdi-reddit',
|
||||
url: brandingSocials.redditUrl,
|
||||
});
|
||||
}
|
||||
if (brandingSocials.websiteUrl) {
|
||||
socials.push({
|
||||
icon: "mdi-web",
|
||||
icon: 'mdi-web',
|
||||
url: brandingSocials.websiteUrl,
|
||||
});
|
||||
}
|
||||
@@ -69,29 +70,30 @@ function GetSocialsUrls() {
|
||||
return socials;
|
||||
}
|
||||
|
||||
|
||||
const isSticky = ref(false);
|
||||
const mainContainer = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
onMounted(async () => {
|
||||
updateIsMobile();
|
||||
|
||||
window.addEventListener("resize", updateIsMobile);
|
||||
|
||||
window.addEventListener('resize', updateIsMobile);
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
isSticky.value = !entry.isIntersecting;
|
||||
},
|
||||
{threshold: 0}
|
||||
([entry]) => {
|
||||
isSticky.value = !entry.isIntersecting;
|
||||
},
|
||||
{ threshold: 0 }
|
||||
);
|
||||
|
||||
if (mainContainer.value) {
|
||||
observer.observe(mainContainer.value);
|
||||
}
|
||||
|
||||
const creatorName = window.location.pathname.split('/@').pop();
|
||||
await creatorProfileStore.fetchSpecificCreatorProfile(creatorName);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("resize", updateIsMobile);
|
||||
window.removeEventListener('resize', updateIsMobile);
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -100,101 +102,135 @@ onBeforeUnmount(() => {
|
||||
<!-- Container principal avec le profil -->
|
||||
<div class="relative w-full shadow-xl rounded-2xl">
|
||||
<div
|
||||
ref="mainContainer"
|
||||
class="rounded-b-2xl shadow-2xl"
|
||||
:style="{ backgroundColor: brandingStore.colors.primary, boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }"
|
||||
ref="mainContainer"
|
||||
class="rounded-b-2xl shadow-2xl"
|
||||
:style="{
|
||||
backgroundColor: brandingStore.colors.primary,
|
||||
boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)',
|
||||
}"
|
||||
>
|
||||
<div>
|
||||
<!-- Profile et Info -->
|
||||
<div>
|
||||
<!-- Version PC -->
|
||||
<div v-show="!isMobile" class=" items-start">
|
||||
<div v-show="!isMobile" class="items-start">
|
||||
<div>
|
||||
<img
|
||||
class="shadow-2xl rounded-full border-solid border-102 absolute z-20 max-w-[190px] ml-10 -mt-10 "
|
||||
:src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
|
||||
alt="Profile Picture"
|
||||
:style="{ borderColor: brandingStore.colors.secondary, height: '190px' }"
|
||||
class="shadow-2xl rounded-full border-solid border-102 absolute z-20 max-w-[190px] ml-10 -mt-10"
|
||||
:src="
|
||||
brandingStore.value.images.logo
|
||||
? brandingStore.value.images.logo
|
||||
: '/images/placeholders/logo.png'
|
||||
"
|
||||
alt="Profile Picture"
|
||||
:style="{
|
||||
borderColor: brandingStore.colors.secondary,
|
||||
height: '190px',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-64 w-25 min-w-60 flex flex-col" :style="{color: brandingStore.colors.onPrimary}">
|
||||
<p class="capitalize text-3xl mt-4">{{ brandingStore.value.name }}</p>
|
||||
<p class="capitalize text-lg -mb-14">{{ brandingStore.value.title }}</p>
|
||||
<div
|
||||
class="ml-64 w-25 min-w-60 flex flex-col"
|
||||
:style="{ color: brandingStore.colors.onPrimary }"
|
||||
>
|
||||
<p class="capitalize text-3xl mt-4">
|
||||
{{ brandingStore.value.name }}
|
||||
</p>
|
||||
<p class="capitalize text-lg -mb-14">
|
||||
{{ brandingStore.value.title }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Version Mobile -->
|
||||
<div class="relative">
|
||||
<div :style="{ borderColor: brandingStore.colors.secondary, height: '60px' }">
|
||||
<div v-show="isMobile" class="absolute -top-7 left-0 px-3 flex flex-row items-center z-30">
|
||||
<div
|
||||
:style="{
|
||||
borderColor: brandingStore.colors.secondary,
|
||||
height: '60px',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-show="isMobile"
|
||||
class="absolute -top-7 left-0 px-3 flex flex-row items-center z-30"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
class="shadow-2xl rounded-full border-solid z-20 max-w-[150px]"
|
||||
:src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
|
||||
alt="Profile Picture"
|
||||
:style="{height: '135px'}"
|
||||
class="shadow-2xl rounded-full border-solid z-20 max-w-[150px]"
|
||||
:src="
|
||||
brandingStore.value.images.logo
|
||||
? brandingStore.value.images.logo
|
||||
: '/images/placeholders/logo.png'
|
||||
"
|
||||
alt="Profile Picture"
|
||||
:style="{ height: '135px' }"
|
||||
/>
|
||||
</div>
|
||||
<div class=" ml-3 text-white w-full flex flex-col items-start">
|
||||
<p class="capitalize text-2xl">{{ brandingStore.value.name }}</p>
|
||||
<p class="capitalize text-md">{{ brandingStore.value.title }}</p>
|
||||
<div class="ml-3 text-white w-full flex flex-col items-start">
|
||||
<p class="capitalize text-2xl">
|
||||
{{ brandingStore.value.name }}
|
||||
</p>
|
||||
<p class="capitalize text-md">
|
||||
{{ brandingStore.value.title }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</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">
|
||||
<div class="flex flex-row space-x-1 justify-center mt-3 mb-2">
|
||||
<!--<subscribe-button></subscribe-button>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bouton Support -->
|
||||
<div
|
||||
class="z-20 shadow-2xl rounded-md text-white flex justify-center items-center z-50"
|
||||
:class="{
|
||||
<!-- Bouton Support -->
|
||||
<div
|
||||
class="z-20 shadow-2xl rounded-md text-white 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
|
||||
'fixed bottom-0 left-0 right-0 w-full h-16': isMobile,
|
||||
}"
|
||||
:style="{ backgroundColor: brandingStore.colors.secondary }"
|
||||
>
|
||||
<donation-button-banner
|
||||
:creator-id="creatorId"
|
||||
:creator-name="creatorName"
|
||||
:on-success-url="successUrl"
|
||||
:on-cancelled-url="cancelledUrl"
|
||||
></donation-button-banner>
|
||||
</div>
|
||||
</div>
|
||||
:style="{ backgroundColor: brandingStore.colors.secondary }"
|
||||
>
|
||||
<donation-button-banner
|
||||
:creator-id="creatorProfileStore.creator.id"
|
||||
:creator-name="creatorProfileStore.creator.name"
|
||||
:on-success-url="successUrl"
|
||||
:on-cancelled-url="cancelledUrl"
|
||||
></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"
|
||||
:style="{ backgroundColor: brandingStore.colors.secondary, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }"
|
||||
class="rounded-b-2xl -mt-3 h-12 px-36 flex flex-col items-center justify-center"
|
||||
:style="{
|
||||
backgroundColor: brandingStore.colors.secondary,
|
||||
boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)',
|
||||
}"
|
||||
>
|
||||
<div class="flex justify-evenly mt-4 w-full">
|
||||
<div class="flex flex-row space-x-6 justify-center">
|
||||
<a
|
||||
v-for="socialNetwork in GetSocialsUrls()"
|
||||
: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"
|
||||
v-for="socialNetwork in GetSocialsUrls()"
|
||||
: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"
|
||||
>
|
||||
<v-icon v-if="socialNetwork.icon.includes('mdi')">
|
||||
{{ socialNetwork.icon }}
|
||||
</v-icon>
|
||||
<img
|
||||
v-else
|
||||
:src="socialNetwork.icon"
|
||||
class="w-6 h-6 mt-0.5"
|
||||
:alt="socialNetwork.url"
|
||||
v-else
|
||||
:src="socialNetwork.icon"
|
||||
class="w-6 h-6 mt-0.5"
|
||||
:alt="socialNetwork.url"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
@@ -203,10 +239,9 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.nav-button {
|
||||
@apply rounded flex justify-center font-sans py-1 text-white tracking-widest p-4
|
||||
@apply rounded flex justify-center font-sans py-1 text-white tracking-widest p-4;
|
||||
}
|
||||
|
||||
.nav-button:hover {
|
||||
@@ -218,6 +253,3 @@ onBeforeUnmount(() => {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user