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

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

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

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

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

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

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

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

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

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

@@ -5,34 +5,32 @@
<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)' }">
<div class="relative">
<div class="flex flex-row items-center py-2">
<!-- Profile Image -->
<div>
<img
class="shadow-2xl rounded-full border-solid border-2 absolute z-20 max-w-[190px] ml-15 -mt-20"
:src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
alt="Profile Picture"
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"
/>
</div>
<div>
<div>
<!-- Creator Information -->
<div class="ml-72 text-white w-25">
<p class="capitalize text-2xl">{{ creator.name }}</p>
<div class="text-md py-1">
{{ creator.about.title }}
<!-- Profile and info-->
<div class="absolute">
<div>
<img
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'"
alt="Profile Picture"
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"
/>
</div>
<div class="text-xs">
105 Followers . {{ creator.subscriberCount }} {{ $t('banner.subscription') }}
<div class="ml-64 text-white w-25 min-w-60">
<p class="capitalize text-2xl mt-1">{{ creator.name }}</p>
<div class="text-md py-1">
{{ creator.about.title }}
</div>
<div class="text-xs">
105 Followers - {{ creator.subscriberCount }} {{ $t('banner.subscription') }}
</div>
</div>
</div>
<div class="flex-grow"></div>
<div class="flex flex-col items-center justify-center w-full">
<!-- 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
@@ -51,9 +49,8 @@
alt="Website">
</a>
</div>
<!-- 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
:creator="creator"
:color-border="creator.colors.menu">
@@ -64,34 +61,65 @@
</subscribe-button>
</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 class="flex flex-row ml-auto space-x-2.5">-->
<!-- <donation-button-banner-->
<!-- :color-border="creator.colors.menu"-->
<!-- :color-accent="creator.colors.accent"-->
<!-- :creator-id="creator.id"-->
<!-- :creator-name="creator.name"-->
<!-- :creator-logo="creator.images.logo"-->
<!-- iconColorClass="text-white">-->
<!-- </donation-button-banner>-->
<!-- <div class="flex flex-column">-->
<!-- &lt;!&ndash; Bouton abonnement affiché seulement si non abonné &ndash;&gt;-->
<!-- <div class="flex flex-row ml-auto space-x-2.5">-->
<!-- <donation-button-banner-->
<!-- :color-border="creator.colors.menu"-->
<!-- :color-accent="creator.colors.accent"-->
<!-- :creator-id="creator.id"-->
<!-- :creator-name="creator.name"-->
<!-- :creator-logo="creator.images.logo"-->
<!-- iconColorClass="text-white">-->
<!-- </donation-button-banner>-->
<!-- <div class="flex flex-column">-->
<!-- &lt;!&ndash; Bouton abonnement affiché seulement si non abonné &ndash;&gt;-->
<!-- </div>-->
<!-- </div>-->
<!-- -->
<!-- </div>-->
<!-- </div>-->
<!-- -->
<!-- &lt;!&ndash; Conteneur sticky &ndash;&gt;-->
<!-- <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 FollowButton from "@/views/creators/FollowButton.vue";
function GetSocialsUrls() {
const socials = [];