Transit
This commit is contained in:
@@ -1,9 +1,10 @@
|
||||
<script setup>
|
||||
import { useClient } from '@/plugins/api.js';
|
||||
import { useBrandingStore } from '@/stores/brandingStore.js';
|
||||
import {useClient} from '@/plugins/api.js';
|
||||
import {useBrandingStore} from '@/stores/brandingStore.js';
|
||||
import DonationButtonBanner from '@/views/creators/DonationButtonBanner.vue';
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue';
|
||||
import IconAccountVerified from "@/components/icons/IconAccountVerified.vue";
|
||||
import {onBeforeUnmount, onMounted, ref} from 'vue';
|
||||
import CreatorLogo from "@/views/creators/CreatorLogo.vue";
|
||||
import NameTitle from "@/views/creators/NameTitle.vue";
|
||||
|
||||
const brandingStore = useBrandingStore();
|
||||
const isMobile = ref(false);
|
||||
@@ -80,10 +81,10 @@ onMounted(async () => {
|
||||
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) {
|
||||
@@ -109,117 +110,48 @@ onBeforeUnmount(() => {
|
||||
<div class="flex flex-column w-full">
|
||||
<!-- 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)',
|
||||
}"
|
||||
>
|
||||
<div>
|
||||
<div class="rounded-b-2xl shadow-2xl"
|
||||
:style="{
|
||||
backgroundColor: brandingStore.colors.primary,
|
||||
boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)',
|
||||
}">
|
||||
|
||||
<div class="flex flex-row p-2">
|
||||
<!-- Profile et Info -->
|
||||
|
||||
<div>
|
||||
<!-- Version PC -->
|
||||
<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-5"
|
||||
: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-row"
|
||||
:style="{ color: brandingStore.colors.onPrimary }"
|
||||
>
|
||||
<div v-show="brandingStore.value.verified" class="text-blue m-4 align-content-center verifiedhook">
|
||||
<icon-account-verified></icon-account-verified>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<span class="capitalize text-3xl titlepos">
|
||||
{{ brandingStore.value.name }}
|
||||
</span>
|
||||
<span class="capitalize text-lg titlepos">
|
||||
{{ brandingStore.value.title }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Version Mobile -->
|
||||
<div class="relative">
|
||||
<div
|
||||
:style="{
|
||||
borderColor: brandingStore.colors.secondary,
|
||||
height: '80px',
|
||||
}"
|
||||
>
|
||||
<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' }"
|
||||
/>
|
||||
</div>
|
||||
<div v-show="brandingStore.value.verified" class="text-blue m-4 align-content-center">
|
||||
<icon-account-verified></icon-account-verified>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<creator-logo/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<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">-->
|
||||
<!-- <!–<subscribe-button></subscribe-button>–>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <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">-->
|
||||
<!-- <!–<subscribe-button></subscribe-button>–>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
|
||||
<!-- Bouton Support -->
|
||||
<div
|
||||
v-show="brandingStore.value.acceptDonation"
|
||||
class="z-20 shadow-2xl rounded-md text-white flex justify-center items-center z-50"
|
||||
:class="{
|
||||
v-show="brandingStore.value.acceptDonation"
|
||||
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,
|
||||
}"
|
||||
:style="{ backgroundColor: brandingStore.colors.secondary }"
|
||||
:style="{ backgroundColor: brandingStore.colors.secondary }"
|
||||
>
|
||||
<donation-button-banner
|
||||
v-if="creator"
|
||||
:creator-id="creator.id"
|
||||
:creator-name="creator.name"
|
||||
:on-success-url="baseURL + '/paymentcompleted/' + creator.id"
|
||||
:on-cancelled-url="baseURL + '/paymentfailed/' + creator.id"
|
||||
v-if="creator"
|
||||
:creator-id="creator.id"
|
||||
:creator-name="creator.name"
|
||||
:on-success-url="baseURL + '/paymentcompleted/' + creator.id"
|
||||
:on-cancelled-url="baseURL + '/paymentfailed/' + creator.id"
|
||||
></donation-button-banner>
|
||||
</div>
|
||||
</div>
|
||||
@@ -227,8 +159,8 @@ onBeforeUnmount(() => {
|
||||
|
||||
<!-- 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="{
|
||||
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)',
|
||||
}"
|
||||
@@ -236,20 +168,20 @@ onBeforeUnmount(() => {
|
||||
<div class="flex justify-evenly mt-3 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>
|
||||
@@ -258,28 +190,3 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.nav-button {
|
||||
@apply rounded flex justify-center font-sans py-1 text-white tracking-widest p-4;
|
||||
}
|
||||
|
||||
.nav-button:hover {
|
||||
@apply bg-purple-800;
|
||||
}
|
||||
|
||||
/* Transition CSS */
|
||||
.transition-all {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
.titlepos {
|
||||
position: relative;
|
||||
top: 30px;
|
||||
}
|
||||
.verifiedhook{
|
||||
position: relative;
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user