- Removes BannerActions
- Fix router for Documentations - Clean login
This commit is contained in:
229
src/views/creators/BannerActions.vue
Normal file
229
src/views/creators/BannerActions.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<div class="flex flex-column w-full">
|
||||
|
||||
<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>
|
||||
|
||||
<!--Profile and info-->
|
||||
<div class="absolute">
|
||||
<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'}"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-64 text-white w-25 min-w-60">
|
||||
<p class="capitalize text-2xl mt-1">{{ brandingStore.value.name }}</p>
|
||||
<p class="capitalize text-xl mt-1">{{ brandingStore.value.title }}</p>
|
||||
<div class="text-xs">
|
||||
105 Followers - {{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions - follow register-->
|
||||
<div class="flex flex-col items-center justify-center w-full min-h-24">
|
||||
<!-- 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-3 mb-2">
|
||||
<subscribe-button></subscribe-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-6 right-24 z-30 shadow-2xl rounded-md text-white"
|
||||
:style="{ backgroundColor: brandingStore.colors.secondary}">
|
||||
|
||||
<div class="w-96 h-28 flex flex-col">
|
||||
<!-- Section 3 et 4 - Prend 2/3 de la hauteur -->
|
||||
<div class="flex flex-row flex-grow-[2] min-h-20">
|
||||
<div class="rounded-tl-md w-1/2 flex items-center justify-center"
|
||||
:style="{ backgroundColor: brandingStore.colors.primary, opacity: 0.20 }">
|
||||
</div>
|
||||
<div class="rounded-tr-md w-1/2 bg-cyan-100 flex items-center justify-center text-xl"
|
||||
:style="{ backgroundColor: brandingStore.colors.secondary}">
|
||||
<div class="absolute left-1">
|
||||
<div class="flex flex-row items-center justify-center space-x-5">
|
||||
<div class="flex flex-row items-center">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<textarea class="text-3xl" rows="1" cols="6"
|
||||
style="border: none; resize: none; text-align: right; outline: none;"
|
||||
placeholder="0"></textarea>
|
||||
<div class="px-1">$</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center space-y-2">
|
||||
<v-btn
|
||||
:style="{ backgroundColor: brandingStore.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
|
||||
variant="tonal">+
|
||||
</v-btn>
|
||||
<v-btn
|
||||
:style="{ backgroundColor: brandingStore.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
|
||||
variant="tonal">-
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<v-btn variant="text"
|
||||
height="80px"
|
||||
width="200px"
|
||||
style="font-size: 18px;">Je supporte
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow bg-gray-300 flex items-center justify-center rounded-b-md"
|
||||
:style="{ backgroundColor: brandingStore.colors.secondary, opacity: 0.80 }">
|
||||
|
||||
<textarea
|
||||
rows="1"
|
||||
placeholder="Message facultatif"
|
||||
class="w-full p-2 border border-gray-300 rounded-b-md resize-none"
|
||||
style="max-height: 300px; overflow-y: hidden; outline: none;"
|
||||
oninput="this.style.height = ''; this.style.height = Math.min(this.scrollHeight, 300) + 'px'"
|
||||
></textarea>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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)' }">
|
||||
<div class="flex justify-evenly mt-3 w-full">
|
||||
<RouterLink class="nav-button"
|
||||
:to="`/@${brandingStore.value.name}`">
|
||||
Présentation
|
||||
</RouterLink>
|
||||
<RouterLink class="nav-button text-white hover:bg-gray-700"
|
||||
:to="`/@${brandingStore.value.name}/content`">
|
||||
Exclusivité
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</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;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script setup>
|
||||
import {ref, onMounted} from 'vue';
|
||||
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
|
||||
import {useBrandingStore} from "@/stores/brandingStore.js";
|
||||
|
||||
const brandingStore = useBrandingStore()
|
||||
|
||||
function GetSocialsUrls() {
|
||||
|
||||
const socials = [];
|
||||
|
||||
if (brandingStore.value.socials.facebookUrl !== null) {
|
||||
socials.push({
|
||||
icon: "mdi-facebook",
|
||||
url: brandingStore.value.socials.facebookUrl
|
||||
})
|
||||
}
|
||||
if (brandingStore.value.socials.instagramUrl !== null) {
|
||||
socials.push({
|
||||
icon: "mdi-instagram",
|
||||
url: brandingStore.value.socials.instagramUrl
|
||||
})
|
||||
}
|
||||
if (brandingStore.value.socials.xUrl !== null) {
|
||||
socials.push({
|
||||
icon: "mdi-twitter",
|
||||
url: brandingStore.value.socials.xUrl
|
||||
})
|
||||
}
|
||||
if (brandingStore.value.socials.linkedInUrl !== null) {
|
||||
socials.push({
|
||||
icon: 'mdi-linkedin',
|
||||
url: brandingStore.value.socials.linkedInUrl
|
||||
})
|
||||
}
|
||||
if (brandingStore.value.socials.tikTokUrl !== null) {
|
||||
socials.push({
|
||||
icon: '/images/socials/tiktok-white.png',
|
||||
url: brandingStore.value.socials.tikTokUrl
|
||||
})
|
||||
}
|
||||
if (brandingStore.value.socials.youtubeUrl !== null) {
|
||||
socials.push({
|
||||
icon: 'mdi-youtube',
|
||||
url: brandingStore.value.socials.youtubeUrl
|
||||
})
|
||||
}
|
||||
if (brandingStore.value.socials.redditUrl !== null) {
|
||||
socials.push({
|
||||
icon: 'mdi-reddit',
|
||||
url: brandingStore.value.socials.redditUrl
|
||||
})
|
||||
}
|
||||
if (brandingStore.value.socials.websiteUrl !== null) {
|
||||
socials.push({
|
||||
icon: 'mdi-web',
|
||||
url: brandingStore.value.socials.websiteUrl
|
||||
})
|
||||
}
|
||||
|
||||
return socials;
|
||||
}
|
||||
|
||||
// Calculer si l'utilisateur est abonné
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user