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

Fix the timing/loading issues with branding when navigating the site

Browse Source
This commit is contained in:
Jonathan Bourdon
2024-10-07 18:39:46 -04:00
parent d1762e803c
commit a02695c81a
16 changed files with 114 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/App.vue
View File

@@ -6,8 +6,14 @@
<side-bar></side-bar> <side-bar></side-bar>
</div> </div>
<div class="pl-60 w-full min-h-screen flex justify-center items-center bg-green"> <div class="pl-60 w-full min-h-screen">
<router-view></router-view>
<div v-if="!brandingStore.loading"
class="flex justify-center items-center"
:style="{backgroundColor: brandingStore.colors.background}">
<router-view></router-view>
</div>
</div> </div>
</div> </div>
@@ -20,6 +26,9 @@
<script async setup> <script async setup>
import SideBar from "@/views/main/SideBar.vue"; import SideBar from "@/views/main/SideBar.vue";
import SizeIndicator from "@/views/tools/SizeIndicator.vue"; import SizeIndicator from "@/views/tools/SizeIndicator.vue";
import {useBrandingStore} from "@/stores/brandingStore.js";
const brandingStore = useBrandingStore()
</script> </script>
<style scoped> <style scoped>

48
src/stores/brandingStore.js
View File

@@ -1,53 +1,71 @@
import {defineStore} from 'pinia' import {defineStore} from 'pinia'
import {useClient} from "@/plugins/api.js"; import {useClient} from "@/plugins/api.js";
import {useSessionStorage} from "@vueuse/core"; import {useSessionStorage} from "@vueuse/core";
import {onBeforeMount, ref, watch} from "vue"; import {ref, watch} from "vue";
import {useRoute} from "vue-router"; import {useRoute} from "vue-router";
export const useBrandingStore = defineStore( export const useBrandingStore = defineStore(
'branding', 'branding',
() => { () => {
const currentBrand = ref('') const currentBrand = ref(undefined)
const loading = ref(false)
const value = useSessionStorage( const value = useSessionStorage(
'branding', 'branding',
{}, {},
{writeDefaults: false}) {writeDefaults: false})
const loading = ref(true) const defaultColors = {
"background": "#f4f4f4",
"error": "#f4f4f4",
"primary": "#f4f4f4",
"secondary": "#f4f4f4",
"surface": "#f4f4f4",
"onBackground": "#000",
"onError": "#000",
"onPrimary": "#000",
"onSecondary": "#000",
"onSurface": "#000",
}
const colors = ref(defaultColors)
const route = useRoute() const route = useRoute()
onBeforeMount(async () => await fetchCreatorData(route.params.creator))
watch( watch(
() => route.params.creator, () => route.params.creator,
async () => { async (newCreator, oldCreator) => {
if (route.params.creator !== currentBrand.value) { loading.value = true
if (route.params.creator !== undefined) {
await fetchCreatorData(route.params.creator) if (newCreator !== oldCreator) {
currentBrand.value = route.params.creator if (newCreator !== undefined) {
value.value = await fetchCreatorData(newCreator)
currentBrand.value = newCreator
colors.value = value.value.colors
} else {
value.value = {}
currentBrand.value = undefined
colors.value = defaultColors
} }
} }
loading.value = false
} }
) )
const fetchCreatorData = async (creatorAlias) => { const fetchCreatorData = async (creatorAlias) => {
try { try {
loading.value = true
const client = useClient() const client = useClient()
const response = await client.get(`/api/creators/@${creatorAlias}`) const response = await client.get(`/api/creators/@${creatorAlias}`)
value.value = response.data return response.data
} catch (error) { } catch (error) {
console.error(`Error fetching content: ${error}`) console.error(`Error fetching content: ${error}`)
} finally {
loading.value = false
} }
} }
return { return {
currentBrand,
value, value,
colors,
loading loading
} }
}) })

2
src/views/creators/CreatorBanner.vue
View File

@@ -2,7 +2,7 @@
<div> <div>
<div class="shadow-lg rounded-2xl mt-2 "> <div class="shadow-lg rounded-2xl mt-2 ">
<div class="relative z-20"> <div class="relative z-20">
<div class="min-h-8 rounded-t-2xl shadow-lg" :style="{ backgroundColor: branding.value.colors.primary}"></div> <div class="min-h-8 rounded-t-2xl shadow-lg" :style="{ backgroundColor: branding.colors.primary}"></div>
<!--Banner--> <!--Banner-->
<div class="relative"> <div class="relative">
<div> <div>

2
src/views/creators/CreatorHome.vue
View File

@@ -2,7 +2,7 @@
<div class="flex flex-row"> <div class="flex flex-row">
<div class="px-4" <div class="px-4"
:style="{ backgroundColor: brandingStore.value.colors.primary, color: brandingStore.value.colors.onPrimary}"> :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary}">
<h1>TEST</h1> <h1>TEST</h1>
<p>GET ME AN EDITOR NOW!</p> <p>GET ME AN EDITOR NOW!</p>
</div> </div>

29
src/views/creators/CreatorLayout.vue
View File

@@ -1,27 +1,24 @@
<template> <template>
<div :style="{ backgroundColor: brandingStore.value.colors.background }">
<div class="flex flex-col min-h-screen max-w-[1500px] mx-auto"> <div class="flex flex-col min-h-screen max-w-[1500px] mx-auto">
<div v-if="brandingStore.loading"> <div v-if="brandingStore.loading">
<v-progress-linear indeterminate></v-progress-linear> <v-progress-linear indeterminate></v-progress-linear>
</div> </div>
<div v-else> <div v-else>
<creator-banner></creator-banner> <creator-banner></creator-banner>
</div> </div>
<div class="py-8 flex-grow"> <div class="py-8 flex-grow">
<router-view></router-view> <router-view></router-view>
</div> </div>
<div>
<Footer></Footer>
</div>
<div>
<Footer></Footer>
</div> </div>
</div> </div>
</template> </template>
<script async setup> <script async setup>

6
src/views/creators/DonationButton.vue
View File

@@ -6,7 +6,7 @@
<v-dialog v-model="donationModal" max-width="500"> <v-dialog v-model="donationModal" max-width="500">
<v-form> <v-form>
<v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.value.colors.primary}` }"> <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.colors.primary}` }">
<div class="py-4 text-2xl font-bold border-b mb-2"> <div class="py-4 text-2xl font-bold border-b mb-2">
Je Soutiens! Je Soutiens!
</div> </div>
@@ -18,7 +18,7 @@
class="rounded-full" class="rounded-full"
width="40" width="40"
height="40" height="40"
:style="{ border: `2px solid ${brandingStore.value.colors.secondary}` }"> :style="{ border: `2px solid ${brandingStore.colors.secondary}` }">
<div class="capitalize px-2 text-2xl">{{ brandingStore.value.name }}</div> <div class="capitalize px-2 text-2xl">{{ brandingStore.value.name }}</div>
<v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text"> <v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text">
<v-icon>mdi-close</v-icon> <v-icon>mdi-close</v-icon>
@@ -51,7 +51,7 @@
></v-textarea> ></v-textarea>
<v-btn variant="outlined" <v-btn variant="outlined"
:style="{ borderColor: brandingStore.value.colors.primary, color: brandingStore.value.colors.primary }" :style="{ borderColor: brandingStore.colors.primary, color: brandingStore.colors.primary }"
@click="goPay()" class="w-full mt-5"> @click="goPay()" class="w-full mt-5">
Envoyez Envoyez
</v-btn> </v-btn>

8
src/views/creators/DonationButtonBanner.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<v-btn :style="{ <v-btn :style="{
backgroundColor: brandingStore.value.colors.primary, backgroundColor: brandingStore.colors.primary,
color: 'white', color: 'white',
borderRadius: '8px', borderRadius: '8px',
padding:'20px 24px', padding:'20px 24px',
@@ -13,7 +13,7 @@
<v-dialog v-model="donationModal" max-width="500"> <v-dialog v-model="donationModal" max-width="500">
<v-form> <v-form>
<v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.value.colors.primary}` }"> <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.colors.primary}` }">
<div class="py-4 text-2xl font-bold border-b mb-2"> <div class="py-4 text-2xl font-bold border-b mb-2">
Je Soutiens! Je Soutiens!
</div> </div>
@@ -25,7 +25,7 @@
class="rounded-full" class="rounded-full"
width="40" width="40"
height="40" height="40"
:style="{ border: `2px solid ${brandingStore.value.colors.secondary}` }"> :style="{ border: `2px solid ${brandingStore.colors.secondary}` }">
<div class="capitalize px-2 text-2xl">{{ brandingStore.value.name }}</div> <div class="capitalize px-2 text-2xl">{{ brandingStore.value.name }}</div>
<v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text"> <v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text">
<v-icon>mdi-close</v-icon> <v-icon>mdi-close</v-icon>
@@ -57,7 +57,7 @@
clearable clearable
></v-textarea> ></v-textarea>
<v-btn variant="outlined" :style="{ borderColor: brandingStore.value.colors.primary, color: brandingStore.value.colors.primary }" <v-btn variant="outlined" :style="{ borderColor: brandingStore.colors.primary, color: brandingStore.colors.primary }"
@click="goPay()" class="w-full mt-5"> @click="goPay()" class="w-full mt-5">
Envoyez Envoyez
</v-btn> </v-btn>

8
src/views/creators/DonationButtonBannerSlim.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<v-btn :style="{ <v-btn :style="{
backgroundColor: brandingStore.value.colors.primary, backgroundColor: brandingStore.colors.primary,
color: 'white', color: 'white',
borderRadius: '8px', borderRadius: '8px',
padding:'0px 24px', padding:'0px 24px',
@@ -13,7 +13,7 @@
<v-dialog v-model="donationModal" max-width="500"> <v-dialog v-model="donationModal" max-width="500">
<v-form> <v-form>
<v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.value.colors.primary}` }"> <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.colors.primary}` }">
<div class="py-4 text-2xl font-bold border-b mb-2"> <div class="py-4 text-2xl font-bold border-b mb-2">
Je Soutiens! Je Soutiens!
</div> </div>
@@ -25,7 +25,7 @@
class="rounded-full" class="rounded-full"
width="40" width="40"
height="40" height="40"
:style="{ border: `2px solid ${brandingStore.value.colors.secondary}` }"> :style="{ border: `2px solid ${brandingStore.colors.secondary}` }">
<div class="capitalize px-2 text-2xl">{{ brandingStore.value.name }}</div> <div class="capitalize px-2 text-2xl">{{ brandingStore.value.name }}</div>
<v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text"> <v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text">
<v-icon>mdi-close</v-icon> <v-icon>mdi-close</v-icon>
@@ -58,7 +58,7 @@
></v-textarea> ></v-textarea>
<v-btn variant="outlined" <v-btn variant="outlined"
:style="{ borderColor: brandingStore.value.colors.primary, color: brandingStore.value.colors.primary }" :style="{ borderColor: brandingStore.colors.primary, color: brandingStore.colors.primary }"
@click="goPay()" class="w-full mt-5"> @click="goPay()" class="w-full mt-5">
Envoyez Envoyez
</v-btn> </v-btn>

10
src/views/creators/FollowButton.vue
View File

@@ -28,7 +28,7 @@ function unsubscribeFromCreator() {
:style="{ :style="{
width: '150px', width: '150px',
height: '28px', height: '28px',
backgroundColor: brandingStore.value.colors.secondary, backgroundColor: brandingStore.colors.secondary,
color: 'white', color: 'white',
borderRadius: '8px 0 0 8px', borderRadius: '8px 0 0 8px',
padding: '10px 24px', padding: '10px 24px',
@@ -48,7 +48,7 @@ function unsubscribeFromCreator() {
:style="{ :style="{
width: '150px', width: '150px',
height: '28px', height: '28px',
backgroundColor: brandingStore.value.colors.secondary, backgroundColor: brandingStore.colors.secondary,
color: 'white', color: 'white',
borderRadius: '8px 0 0 8px', borderRadius: '8px 0 0 8px',
padding: '10px 24px', padding: '10px 24px',
@@ -65,7 +65,7 @@ function unsubscribeFromCreator() {
<v-dialog v-model="showUnsubscribeModal" max-width="500"> <v-dialog v-model="showUnsubscribeModal" max-width="500">
<v-card class="text-center rounded-xl" <v-card class="text-center rounded-xl"
:style="{ border: `3px solid ${brandingStore.value.colors.secondary}` }"> :style="{ border: `3px solid ${brandingStore.colors.secondary}` }">
<div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2"> <div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
<div class="flex-1 text-center"> <div class="flex-1 text-center">
@@ -82,10 +82,10 @@ function unsubscribeFromCreator() {
</v-btn> </v-btn>
<v-btn class="flex-grow-1" <v-btn class="flex-grow-1"
:style="{ borderColor: brandingStore.value.colors.secondary, color: brandingStore.value.colors.secondary }" :style="{ borderColor: brandingStore.colors.secondary, color: brandingStore.colors.secondary }"
variant="outlined" variant="outlined"
@click="showUnsubscribeModal = false"> @click="showUnsubscribeModal = false">
<div :style="{ color: brandingStore.value.colors.secondary }">Non</div> <div :style="{ color: brandingStore.colors.secondary }">Non</div>
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>

10
src/views/creators/SubscribeButton.vue
View File

@@ -28,7 +28,7 @@ function unsubscribeFromCreator() {
:style="{ :style="{
width: '150px', width: '150px',
height: '28px', height: '28px',
backgroundColor: brandingStore.value.colors.secondary, backgroundColor: brandingStore.colors.secondary,
color: 'white', color: 'white',
borderRadius: '0 8px 8px 0', borderRadius: '0 8px 8px 0',
padding: '10px 24px', padding: '10px 24px',
@@ -48,7 +48,7 @@ function unsubscribeFromCreator() {
:style="{ :style="{
width: '150px', width: '150px',
height: '28px', height: '28px',
backgroundColor: brandingStore.value.colors.secondary, backgroundColor: brandingStore.colors.secondary,
color: 'white', color: 'white',
borderRadius: '0 8px 8px 0', borderRadius: '0 8px 8px 0',
padding: '10px 24px', padding: '10px 24px',
@@ -65,7 +65,7 @@ function unsubscribeFromCreator() {
<v-dialog v-model="showUnsubscribeModal" max-width="500"> <v-dialog v-model="showUnsubscribeModal" max-width="500">
<v-card class="text-center rounded-xl" <v-card class="text-center rounded-xl"
:style="{ border: `3px solid ${brandingStore.value.colors.secondary}` }"> :style="{ border: `3px solid ${brandingStore.colors.secondary}` }">
<div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2"> <div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
<div class="flex-1 text-center"> <div class="flex-1 text-center">
@@ -82,10 +82,10 @@ function unsubscribeFromCreator() {
</v-btn> </v-btn>
<v-btn class="flex-grow-1" <v-btn class="flex-grow-1"
:style="{ borderColor: brandingStore.value.colors.secondary, color: brandingStore.value.colors.secondary }" :style="{ borderColor: brandingStore.colors.secondary, color: brandingStore.colors.secondary }"
variant="outlined" variant="outlined"
@click="showUnsubscribeModal = false"> @click="showUnsubscribeModal = false">
<div :style="{ color: brandingStore.value.colors.secondary }">Non</div> <div :style="{ color: brandingStore.colors.secondary }">Non</div>
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>

10
src/views/creators/SubscribeButtonSlim.vue
View File

@@ -25,7 +25,7 @@ function unsubscribeFromCreator() {
<v-btn <v-btn
class="mr-4" class="mr-4"
:style="{ :style="{
backgroundColor: brandingStore.value.colors.secondary, backgroundColor: brandingStore.colors.secondary,
color: 'white', color: 'white',
borderRadius: '8px', borderRadius: '8px',
padding: '0px 24px', padding: '0px 24px',
@@ -44,7 +44,7 @@ function unsubscribeFromCreator() {
<v-btn <v-btn
class="mr-4" class="mr-4"
:style="{ :style="{
backgroundColor: brandingStore.value.colors.secondary, backgroundColor: brandingStore.colors.secondary,
color: 'white', color: 'white',
borderRadius: '8px', borderRadius: '8px',
padding: '0px 24px', padding: '0px 24px',
@@ -61,7 +61,7 @@ function unsubscribeFromCreator() {
<v-dialog v-model="showUnsubscribeModal" max-width="500"> <v-dialog v-model="showUnsubscribeModal" max-width="500">
<v-card class="text-center rounded-xl" <v-card class="text-center rounded-xl"
:style="{ border: `3px solid ${brandingStore.value.colors.primary}` }"> :style="{ border: `3px solid ${brandingStore.colors.primary}` }">
<div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2"> <div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
<div class="flex-1 text-center"> <div class="flex-1 text-center">
@@ -78,10 +78,10 @@ function unsubscribeFromCreator() {
</v-btn> </v-btn>
<v-btn class="flex-grow-1" <v-btn class="flex-grow-1"
:style="{ borderColor: brandingStore.value.colors.primary, color: brandingStore.value.colors.primary }" :style="{ borderColor: brandingStore.colors.primary, color: brandingStore.colors.primary }"
variant="outlined" variant="outlined"
@click="showUnsubscribeModal = false"> @click="showUnsubscribeModal = false">
<div :style="{ color: brandingStore.value.colors.primary }">Non</div> <div :style="{ color: brandingStore.colors.primary }">Non</div>
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>

8
src/views/creators/banner/bannerlower/BannerActionsLg.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="relative w-full"> <div class="relative w-full">
<div ref="mainContainer" class="rounded-b-2xl pt-2 pb-1" <div ref="mainContainer" class="rounded-b-2xl pt-2 pb-1"
:style="{ backgroundColor: brandingStore.value.colors.bannerBottom, borderBottom: '5px inset' + (brandingStore.value.colors.menu || '#000') }"> :style="{ backgroundColor: brandingStore.colors.bannerBottom, borderBottom: '5px inset' + (brandingStore.colors.menu || '#000') }">
<!-- Logo & User Info --> <!-- Logo & User Info -->
<div class="relative z-20"> <div class="relative z-20">
@@ -11,7 +11,7 @@
class="shadow-2xl rounded-full border-solid border-4 absolute z-20 max-w-[190px] ml-15 -mt-32" class="shadow-2xl rounded-full border-solid border-4 absolute z-20 max-w-[190px] ml-15 -mt-32"
:src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'" :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
alt="Profile Picture" alt="Profile Picture"
:style="{ borderColor: brandingStore.value.colors.accent, height: '190px'}" :style="{ borderColor: brandingStore.colors.accent, height: '190px'}"
/> />
</div> </div>
@@ -33,14 +33,14 @@
<!-- Conteneur sticky --> <!-- Conteneur sticky -->
<div v-show="isSticky" class=" sticky-header fixed top-14 left-0 right-0 w-full z-20" <div v-show="isSticky" class=" sticky-header fixed top-14 left-0 right-0 w-full z-20"
:style="{ backgroundColor: brandingStore.value.colors.bannerBottom , borderBottom: '5px inset' + (brandingStore.value.colors.menu || '#000') }"> :style="{ backgroundColor: brandingStore.colors.bannerBottom , borderBottom: '5px inset' + (brandingStore.colors.menu || '#000') }">
<div class="shadow-3xl flex flex-row items-center py-2 px-2"> <div class="shadow-3xl flex flex-row items-center py-2 px-2">
<div> <div>
<img <img
class="max-w-[40px] max-h-[40px] ml-5 rounded-full" class="max-w-[40px] max-h-[40px] ml-5 rounded-full"
:src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'" :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
alt="Profile Picture" alt="Profile Picture"
:style="{ borderColor: brandingStore.value.colors.accent, height: '190px'}" :style="{ borderColor: brandingStore.colors.accent, height: '190px'}"
/> />
</div> </div>
<div class="ml-5 text-white"> <div class="ml-5 text-white">

4
src/views/creators/banner/bannerlower/BannerActionsMd.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="w-full"> <div class="w-full">
<div class="rounded-b-2xl" <div class="rounded-b-2xl"
:style="{ backgroundColor: brandingStore.value.colors.bannerBottom }"> :style="{ backgroundColor: brandingStore.colors.bannerBottom }">
<div> <div>
<!-- Logo-Name-Followers --> <!-- Logo-Name-Followers -->
@@ -11,7 +11,7 @@
class="absolute rounded-full border-solid border-2 max-w-[140px] h-auto ml-3 -mt-3" class="absolute rounded-full border-solid border-2 max-w-[140px] h-auto ml-3 -mt-3"
:src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'" :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
alt="Profile Picture" alt="Profile Picture"
:style="{ borderColor: brandingStore.value.colors.accent, height: '150px'}" :style="{ borderColor: brandingStore.colors.accent, height: '150px'}"
/> />
</div> </div>

2
src/views/creators/banner/bannerlower/BannerActionsSm.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="w-full"> <div class="w-full">
<div <div
:style="{backgroundColor: brandingStore.value.colors.bannerBottom, borderBottom: `2px solid ${brandingStore.value.colors.accent}`}"> :style="{backgroundColor: brandingStore.colors.bannerBottom, borderBottom: `2px solid ${brandingStore.colors.accent}`}">
<div> <div>
<!-- Logo-Name-Followers--> <!-- Logo-Name-Followers-->
<div class="flex flex-row relative z-20"> <div class="flex flex-row relative z-20">

18
src/views/creators/banner/bannerlower/BannerActionsXl.vue
View File

@@ -4,7 +4,7 @@
<div class="relative w-full shadow-xl rounded-2xl"> <div class="relative w-full shadow-xl rounded-2xl">
<div ref="mainContainer" class="rounded-b-2xl shadow-2xl" <div ref="mainContainer" class="rounded-b-2xl shadow-2xl"
:style="{ backgroundColor: brandingStore.value.colors.primary, boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }"> :style="{ backgroundColor: brandingStore.colors.primary, boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }">
<div> <div>
<div> <div>
@@ -16,7 +16,7 @@
class="shadow-2xl rounded-full border-solid border-102 absolute z-20 max-w-[190px] ml-10 -mt-10" 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'" :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
alt="Profile Picture" alt="Profile Picture"
:style="{ borderColor: brandingStore.value.colors.secondary, height: '190px'}" :style="{ borderColor: brandingStore.colors.secondary, height: '190px'}"
/> />
</div> </div>
<div class="ml-64 text-white w-25 min-w-60"> <div class="ml-64 text-white w-25 min-w-60">
@@ -57,16 +57,16 @@
</div> </div>
<div class="absolute bottom-6 right-24 z-30 shadow-2xl rounded-md text-white" <div class="absolute bottom-6 right-24 z-30 shadow-2xl rounded-md text-white"
:style="{ backgroundColor: brandingStore.value.colors.secondary}"> :style="{ backgroundColor: brandingStore.colors.secondary}">
<div class="w-96 h-28 flex flex-col"> <div class="w-96 h-28 flex flex-col">
<!-- Section 3 et 4 - Prend 2/3 de la hauteur --> <!-- Section 3 et 4 - Prend 2/3 de la hauteur -->
<div class="flex flex-row flex-grow-[2] min-h-20"> <div class="flex flex-row flex-grow-[2] min-h-20">
<div class="rounded-tl-md w-1/2 flex items-center justify-center" <div class="rounded-tl-md w-1/2 flex items-center justify-center"
:style="{ backgroundColor: brandingStore.value.colors.primary, opacity: 0.20 }"> :style="{ backgroundColor: brandingStore.colors.primary, opacity: 0.20 }">
</div> </div>
<div class="rounded-tr-md w-1/2 bg-cyan-100 flex items-center justify-center text-xl" <div class="rounded-tr-md w-1/2 bg-cyan-100 flex items-center justify-center text-xl"
:style="{ backgroundColor: brandingStore.value.colors.secondary}"> :style="{ backgroundColor: brandingStore.colors.secondary}">
<div class="absolute left-1"> <div class="absolute left-1">
<div class="flex flex-row items-center justify-center space-x-5"> <div class="flex flex-row items-center justify-center space-x-5">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
@@ -81,11 +81,11 @@
<div class="flex flex-col items-center space-y-2"> <div class="flex flex-col items-center space-y-2">
<v-btn <v-btn
:style="{ backgroundColor: brandingStore.value.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }" :style="{ backgroundColor: brandingStore.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
variant="tonal">+ variant="tonal">+
</v-btn> </v-btn>
<v-btn <v-btn
:style="{ backgroundColor: brandingStore.value.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }" :style="{ backgroundColor: brandingStore.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
variant="tonal">- variant="tonal">-
</v-btn> </v-btn>
</div> </div>
@@ -102,7 +102,7 @@
</div> </div>
<div class="flex-grow bg-gray-300 flex items-center justify-center rounded-b-md" <div class="flex-grow bg-gray-300 flex items-center justify-center rounded-b-md"
:style="{ backgroundColor: brandingStore.value.colors.secondary, opacity: 0.80 }"> :style="{ backgroundColor: brandingStore.colors.secondary, opacity: 0.80 }">
<textarea <textarea
rows="1" rows="1"
@@ -120,7 +120,7 @@
</div> </div>
<div class="rounded-b-2xl -mt-3 h-12 px-36 flex flex-col items-center justify-center" <div class="rounded-b-2xl -mt-3 h-12 px-36 flex flex-col items-center justify-center"
:style="{ backgroundColor: brandingStore.value.colors.secondary, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }"> :style="{ backgroundColor: brandingStore.colors.secondary, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }">
<div class="flex justify-evenly mt-3 w-full"> <div class="flex justify-evenly mt-3 w-full">
<RouterLink class="nav-button" <RouterLink class="nav-button"
:to="`/@${brandingStore.value.name}`"> :to="`/@${brandingStore.value.name}`">

26
src/views/main/Footer.vue
View File

@@ -8,50 +8,50 @@ const brandingStore = useBrandingStore()
<template> <template>
<footer class="py-8 flex flex-col gap-8" :style="{color: brandingStore.value.colors.onBackground}"> <footer class="py-8 flex flex-col gap-8" :style="{color: brandingStore.colors.onBackground}">
<div class="centered-text" :style="{color: brandingStore.value.colors.onBackground}" >Hutopy</div> <div class="centered-text" :style="{color: brandingStore.colors.onBackground}" >Hutopy</div>
<div class="flex flex-row justify-center gap-10"> <div class="flex flex-row justify-center gap-10">
<a href="https://www.facebook.com/profile.php?id=61556819217561"> <a href="https://www.facebook.com/profile.php?id=61556819217561">
<facebook-icon class="icon" :style="{ fill: brandingStore.value.colors.onBackground }" ></facebook-icon> <facebook-icon class="icon" :style="{ fill: brandingStore.colors.onBackground }" ></facebook-icon>
</a> </a>
<a href="https://www.instagram.com/hutopy.inc/"> <a href="https://www.instagram.com/hutopy.inc/">
<instagram-icon class="icon" :style="{ fill: brandingStore.value.colors.onBackground }"></instagram-icon> <instagram-icon class="icon" :style="{ fill: brandingStore.colors.onBackground }"></instagram-icon>
</a> </a>
<a href="https://x.com/Hutopyinc/"> <a href="https://x.com/Hutopyinc/">
<x-icon class="icon" :style="{ fill: brandingStore.value.colors.onBackground }"></x-icon> <x-icon class="icon" :style="{ fill: brandingStore.colors.onBackground }"></x-icon>
</a> </a>
</div> </div>
<div class="flex flex-row flex-wrap justify-center gap-4" > <div class="flex flex-row flex-wrap justify-center gap-4" >
<router-link to="/helpandcontact" :style="{color: brandingStore.value.colors.onBackground}"> <router-link to="/helpandcontact" :style="{color: brandingStore.colors.onBackground}">
Aide & Contact Aide & Contact
</router-link> </router-link>
<router-link to="/faq" :style="{color: brandingStore.value.colors.onBackground}"> <router-link to="/faq" :style="{color: brandingStore.colors.onBackground}">
FAQ FAQ
</router-link> </router-link>
<router-link to="/guideforcreators" :style="{color: brandingStore.value.colors.onBackground}"> <router-link to="/guideforcreators" :style="{color: brandingStore.colors.onBackground}">
Guide pour les créateurs Guide pour les créateurs
</router-link> </router-link>
<router-link to="/termsandconditions" :style="{color: brandingStore.value.colors.onBackground}"> <router-link to="/termsandconditions" :style="{color: brandingStore.colors.onBackground}">
Termes et Conditions Termes et Conditions
</router-link> </router-link>
<router-link to="/contentpolicy" :style="{color: brandingStore.value.colors.onBackground}"> <router-link to="/contentpolicy" :style="{color: brandingStore.colors.onBackground}">
Politique de Contenu Politique de Contenu
</router-link> </router-link>
<router-link to="/about" :style="{color: brandingStore.value.colors.onBackground}"> <router-link to="/about" :style="{color: brandingStore.colors.onBackground}">
À Propos À Propos
</router-link> </router-link>
<router-link to="/pricing" :style="{color: brandingStore.value.colors.onBackground}"> <router-link to="/pricing" :style="{color: brandingStore.colors.onBackground}">
Frais Frais
</router-link> </router-link>
</div> </div>
<div class="flex justify-center base-text" :style="{color: brandingStore.value.colors.onBackground}"> <div class="flex justify-center base-text" :style="{color: brandingStore.colors.onBackground}">
Hutopy &copy;{{ new Date().getFullYear() }} - {{ $t('footer.allRightsReserved') }} Hutopy &copy;{{ new Date().getFullYear() }} - {{ $t('footer.allRightsReserved') }}
</div> </div>