jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions 1 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

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

@@ -1,7 +1,7 @@
<template>
<div class="relative w-full">
<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 -->
<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"
:src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
alt="Profile Picture"
:style="{ borderColor: brandingStore.value.colors.accent, height: '190px'}"
:style="{ borderColor: brandingStore.colors.accent, height: '190px'}"
/>
</div>
@@ -33,14 +33,14 @@
<!-- Conteneur sticky -->
<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>
<img
class="max-w-[40px] max-h-[40px] ml-5 rounded-full"
:src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
alt="Profile Picture"
:style="{ borderColor: brandingStore.value.colors.accent, height: '190px'}"
:style="{ borderColor: brandingStore.colors.accent, height: '190px'}"
/>
</div>
<div class="ml-5 text-white">

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

@@ -1,7 +1,7 @@
<template>
<div class="w-full">
<div class="rounded-b-2xl"
:style="{ backgroundColor: brandingStore.value.colors.bannerBottom }">
:style="{ backgroundColor: brandingStore.colors.bannerBottom }">
<div>
<!-- Logo-Name-Followers -->
@@ -11,7 +11,7 @@
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'"
alt="Profile Picture"
:style="{ borderColor: brandingStore.value.colors.accent, height: '150px'}"
:style="{ borderColor: brandingStore.colors.accent, height: '150px'}"
/>
</div>

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

@@ -1,7 +1,7 @@
<template>
<div class="w-full">
<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>
<!-- Logo-Name-Followers-->
<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 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>
@@ -16,7 +16,7 @@
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.value.colors.secondary, height: '190px'}"
:style="{ borderColor: brandingStore.colors.secondary, height: '190px'}"
/>
</div>
<div class="ml-64 text-white w-25 min-w-60">
@@ -57,16 +57,16 @@
</div>
<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">
<!-- 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.value.colors.primary, opacity: 0.20 }">
: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.value.colors.secondary}">
: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">
@@ -81,11 +81,11 @@
<div class="flex flex-col items-center space-y-2">
<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">+
</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">-
</v-btn>
</div>
@@ -102,7 +102,7 @@
</div>
<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
rows="1"
@@ -120,7 +120,7 @@
</div>
<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">
<RouterLink class="nav-button"
:to="`/@${brandingStore.value.name}`">