jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Passing the right data to donation-button-banner

Browse Source
This commit is contained in:
Karl Carriere
2024-12-17 09:49:07 -05:00
parent 8875038270
commit ccc0bef233
1 changed files with 108 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
src/views/creators/BannerActions.vue
View File

@@ -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,52 +102,83 @@ 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">
@@ -155,46 +188,49 @@ onBeforeUnmount(() => {
</div>
<!-- Bouton Support -->
<div
class="z-20 shadow-2xl rounded-md text-white flex justify-center items-center z-50"
:class="{
<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>
: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>