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

Redesign updated - Banner - The header in the app is disabled.

Browse Source
This commit is contained in:
PascalMarchesseault
2024-09-19 00:11:03 -04:00
parent 66dadb3cd2
commit 98033203cd
6 changed files with 90 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<v-app> <v-app>
<div class="m-0 flex flex-column h-screen"> <div class="m-0 flex flex-column h-screen">
<Header class="fixed w-full z-50 top-0 p-2"></Header> <!-- <Header class="fixed w-full z-50 top-0 p-2"></Header>-->
<div class="flex flex-row relative"> <div class="flex flex-row relative">
<div <div
class="fixed h-full w-2 z-20" class="fixed h-full w-2 z-20"
@@ -15,7 +15,7 @@
</div> </div>
</transition> </transition>
<div class="flex flex-col w-full md:ml-1 mt-16" style="background-color: #f4f4f4"> <div class="flex flex-col w-full" style="background-color: #f4f4f4">
<RouterView></RouterView> <RouterView></RouterView>
<Footer></Footer> <Footer></Footer>
</div> </div>

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

@@ -4,7 +4,7 @@
<div class="py-4 min-h-9 md:rounded-t-2xl" <div class="py-4 min-h-9 md:rounded-t-2xl"
:style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }"> :style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }">
</div> </div>
<div class="h-1" :style="{ backgroundColor: creator.colors.accent || '#6B0065' }"> ></div> <div class="h-1" :style="{ backgroundColor: creator.colors.accent || '#6B0065' }"> </div>
<!--Banner--> <!--Banner-->
<div class="relative"> <div class="relative">

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

@@ -1,6 +1,7 @@
<template> <template>
<div v-if="creator && creator.id"> <div :style="{ backgroundColor: '#2D2728' }">
<div class="max-w-[1350px] mx-auto"> <div class="mt-10" v-if="creator && creator.id">
<div class="max-w-[1500px] mx-auto">
<creator-banner :creator="creator" <creator-banner :creator="creator"
@content-posted="contentPosted" @content-posted="contentPosted"
></creator-banner> ></creator-banner>
@@ -27,6 +28,7 @@
</v-card> </v-card>
</div> </div>
</div> </div>
</div>
</template> </template>
<script async setup> <script async setup>

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

@@ -32,7 +32,7 @@ function unsubscribeFromCreator() {
<v-btn <v-btn
:style="{ :style="{
width: '150px', width: '150px',
height: '32px', height: '28px',
backgroundColor: colorBorder, backgroundColor: colorBorder,
color: 'white', color: 'white',
borderRadius: '8px 0 0 8px', borderRadius: '8px 0 0 8px',
@@ -44,7 +44,7 @@ function unsubscribeFromCreator() {
}" }"
@click="subscribeToCreator" @click="subscribeToCreator"
> >
<div class="font-bold">Follow</div> <div>Follow</div>
</v-btn> </v-btn>
</template> </template>
@@ -52,7 +52,7 @@ function unsubscribeFromCreator() {
<v-btn <v-btn
:style="{ :style="{
width: '150px', width: '150px',
height: '32px', height: '28px',
backgroundColor: colorBorder, backgroundColor: colorBorder,
color: 'white', color: 'white',
borderRadius: '8px 0 0 8px', borderRadius: '8px 0 0 8px',
@@ -64,7 +64,7 @@ function unsubscribeFromCreator() {
}" }"
@click="showUnsubscribeModal = true" @click="showUnsubscribeModal = true"
> >
<div class="font-bold">{{ $t('subscribebutton.unsubscribe') }}</div> <div>{{ $t('subscribebutton.unsubscribe') }}</div>
</v-btn> </v-btn>
</template> </template>

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

@@ -32,7 +32,7 @@ function unsubscribeFromCreator() {
<v-btn <v-btn
:style="{ :style="{
width: '150px', width: '150px',
height: '32px', height: '28px',
backgroundColor: colorBorder, backgroundColor: colorBorder,
color: 'white', color: 'white',
borderRadius: '0 8px 8px 0', borderRadius: '0 8px 8px 0',
@@ -44,7 +44,7 @@ function unsubscribeFromCreator() {
}" }"
@click="subscribeToCreator" @click="subscribeToCreator"
> >
<div class="font-bold">{{ $t('subscribebutton.subscribe') }}</div> <div>{{ $t('subscribebutton.subscribe') }}</div>
</v-btn> </v-btn>
</template> </template>
@@ -52,7 +52,7 @@ function unsubscribeFromCreator() {
<v-btn <v-btn
:style="{ :style="{
width: '150px', width: '150px',
height: '32px', height: '28px',
backgroundColor: colorBorder, backgroundColor: colorBorder,
color: 'white', color: 'white',
borderRadius: '0 8px 8px 0', borderRadius: '0 8px 8px 0',
@@ -64,7 +64,7 @@ function unsubscribeFromCreator() {
}" }"
@click="showUnsubscribeModal = true" @click="showUnsubscribeModal = true"
> >
<div class="font-bold">{{ $t('subscribebutton.unsubscribe') }}</div> <div>{{ $t('subscribebutton.unsubscribe') }}</div>
</v-btn> </v-btn>
</template> </template>

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

@@ -5,34 +5,32 @@
<div ref="mainContainer" class="rounded-b-2xl shadow-2xl" <div ref="mainContainer" class="rounded-b-2xl shadow-2xl"
:style="{ backgroundColor: creator.colors.bannerTop || '#A30E79', boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }"> :style="{ backgroundColor: creator.colors.bannerTop || '#A30E79', boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }">
<div class="relative"> <div>
<div class="flex flex-row items-center py-2"> <div>
<!-- Profile Image -->
<!-- Profile and info-->
<div class="absolute">
<div> <div>
<img <img
class="shadow-2xl rounded-full border-solid border-2 absolute z-20 max-w-[190px] ml-15 -mt-20" class="shadow-2xl rounded-full border-solid border-2 absolute z-20 max-w-[190px] ml-10 -mt-10"
:src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'" :src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
alt="Profile Picture" alt="Profile Picture"
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}" :style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"
/> />
</div> </div>
<div class="ml-64 text-white w-25 min-w-60">
<!-- Creator Information --> <p class="capitalize text-2xl mt-1">{{ creator.name }}</p>
<div class="ml-72 text-white w-25">
<p class="capitalize text-2xl">{{ creator.name }}</p>
<div class="text-md py-1"> <div class="text-md py-1">
{{ creator.about.title }} {{ creator.about.title }}
</div> </div>
<div class="text-xs"> <div class="text-xs">
105 Followers . {{ creator.subscriberCount }} {{ $t('banner.subscription') }} 105 Followers - {{ creator.subscriberCount }} {{ $t('banner.subscription') }}
</div>
</div> </div>
</div> </div>
<!-- Actions - follow register-->
<div class="flex-grow"></div> <div class="flex flex-col items-center justify-center w-full min-h-24">
<div class="flex flex-col items-center justify-center w-full">
<!-- Social Media Icons --> <!-- Social Media Icons -->
<div class="flex flex-row space-x-6 justify-center"> <div class="flex flex-row space-x-6 justify-center">
<a <a
@@ -51,9 +49,8 @@
alt="Website"> alt="Website">
</a> </a>
</div> </div>
<!-- Follow and Subscribe Buttons --> <!-- Follow and Subscribe Buttons -->
<div class="flex flex-row space-x-1 justify-center mt-4"> <div class="flex flex-row space-x-1 justify-center mt-3 mb-2">
<follow-button <follow-button
:creator="creator" :creator="creator"
:color-border="creator.colors.menu"> :color-border="creator.colors.menu">
@@ -64,34 +61,65 @@
</subscribe-button> </subscribe-button>
</div> </div>
</div> </div>
<div class="flex-grow w-50">
</div> </div>
<div class="absolute bottom-6 right-24 z-30 shadow-2xl rounded-2xl text-white"
:style="{ backgroundColor: creator.colors.bannerTop}">
<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-xl w-1/2 flex items-center justify-center"
:style="{ backgroundColor: creator.colors.bannerBottom, opacity: 0.20 }">
</div>
<div class="rounded-tr-xl w-1/2 bg-cyan-100 flex items-center justify-center text-xl"
:style="{ backgroundColor: creator.colors.bannerBottom}">
<div class="absolute left-20"> 0 $</div>
<v-btn variant="text"
height="80px"
width="200px"
style="font-size: 18px;">Je supporte
</v-btn>
</div>
</div>
<!-- Section 1 - Prend 1/3 de la hauteur -->
<div class="flex-grow bg-gray-300 flex items-center justify-center rounded-b-2xl"
:style="{ backgroundColor: creator.colors.bannerBottom,opacity: 0.80 }">
<textarea
rows="1"
placeholder="Message facultatif"
class="w-full p-2 border border-gray-300 rounded-b-2xl 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> </div>
<!-- <div class="flex flex-row ml-auto space-x-2.5">--> <!-- <div class="flex flex-row ml-auto space-x-2.5">-->
<!-- <donation-button-banner--> <!-- <donation-button-banner-->
<!-- :color-border="creator.colors.menu"--> <!-- :color-border="creator.colors.menu"-->
<!-- :color-accent="creator.colors.accent"--> <!-- :color-accent="creator.colors.accent"-->
<!-- :creator-id="creator.id"--> <!-- :creator-id="creator.id"-->
<!-- :creator-name="creator.name"--> <!-- :creator-name="creator.name"-->
<!-- :creator-logo="creator.images.logo"--> <!-- :creator-logo="creator.images.logo"-->
<!-- iconColorClass="text-white">--> <!-- iconColorClass="text-white">-->
<!-- </donation-button-banner>--> <!-- </donation-button-banner>-->
<!-- <div class="flex flex-column">--> <!-- <div class="flex flex-column">-->
<!-- &lt;!&ndash; Bouton abonnement affiché seulement si non abonné &ndash;&gt;--> <!-- &lt;!&ndash; Bouton abonnement affiché seulement si non abonné &ndash;&gt;-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- --> <!-- -->
<!-- &lt;!&ndash; Conteneur sticky &ndash;&gt;--> <!-- &lt;!&ndash; Conteneur sticky &ndash;&gt;-->
<!-- <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"-->
@@ -155,6 +183,7 @@ import SubscribeButtonSlim from "@/views/creators/SubscribeButtonSlim.vue";
import DonationButtonBannerSlim from "@/views/creators/DonationButtonBannerSlim.vue"; import DonationButtonBannerSlim from "@/views/creators/DonationButtonBannerSlim.vue";
import FollowButton from "@/views/creators/FollowButton.vue"; import FollowButton from "@/views/creators/FollowButton.vue";
function GetSocialsUrls() { function GetSocialsUrls() {
const socials = []; const socials = [];