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

Reworking the layouts to allow for the new design

Browse Source
This commit is contained in:
Jonathan Bourdon
2024-09-22 00:51:22 -04:00
parent b3fec80607
commit 3cfb3951e3
51 changed files with 819 additions and 872 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/views/creators/CreatorAbout.vue
View File

@@ -1,65 +0,0 @@
<template>
<div>
<button
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 "
@click="AboutUs = true"
>
<v-icon style="font-size: 30px; height: 30px; width: 55px;">
mdi-information
</v-icon>
</button>
<v-dialog v-model="AboutUs" max-width="500px">
<v-form>
<v-card class="text-center rounded-xl"
:style="{
border: `3px solid ${creator.colors.menu}`
}">
<div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
<div class="flex-1 text-center">
{{ creator.about.title }}
</div>
<v-btn icon @click="AboutUs = false" class="ml-auto mr-2" variant="text">
<v-icon>mdi-close</v-icon>
</v-btn>
</div>
<v-card-text class="scrollable-content">
{{ creator.about.description }}
</v-card-text>
<div class="p-4">
<v-btn variant="outlined" text class=" w-full" @click="AboutUs = false" :style="{ borderColor: creator.colors.menu, color: creator.colors.menu }">Fermer</v-btn>
</div>
</v-card>
</v-form>
</v-dialog>
</div>
</template>
<script setup>
import {ref} from 'vue';
const AboutUs = ref(false);
const props = defineProps({
creator: {type: Object, required: true},
});
</script>
<style scoped>
.scrollable-content {
max-height: 600px;
overflow-y: auto;
}
.scrollable-content::-webkit-scrollbar {
width: 6px;
}
</style>

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

@@ -1,11 +1,8 @@
<template>
<div class="shadow-lg rounded-2xl" :style="{ backgroundColor: creator.colors.bannerBottom}">
<template>
<div class="shadow-lg rounded-2xl"
:style="{ backgroundColor: creator.colors.secondary}">
<div class="relative z-20">
<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>
<!--Banner-->
<div class="relative">
<div>
@@ -19,9 +16,9 @@
</div>
</div>
<div class="h-1" :style="{ backgroundColor: creator.colors.accent || '#6B0065' }"></div>
<!--actions - Lowerpart-->
<banner-actions :creator="creator" @content-posted="addContent"></banner-actions>
</div>
</template>

21
src/views/creators/CreatorCard.vue
View File

@@ -1,21 +0,0 @@
<template>
<v-card class="shadow-lg rounded-lg overflow-hidden max-w-sm">
<v-img :src="creator.imageUrl" class="w-full h-48 object-cover"></v-img>
<v-card-title class="text-lg font-bold">{{ creator.name }}</v-card-title>
<v-card-subtitle class="text-sm text-gray-500">{{ creator.title }}</v-card-subtitle>
<v-card-text class="text-base text-gray-700">{{ creator.description }}</v-card-text>
</v-card>
</template>
<script setup>
defineProps({
creator: {
type: Object,
required: true,
validator: (profile) => {
return 'image' in profile && 'name' in profile && 'title' in profile && 'description' in profile;
}
}
});
</script>

41
src/views/creators/CreatorContent.vue Normal file
View File

@@ -0,0 +1,41 @@
<template>
<h1>Content Browser</h1>
</template>
<script async setup>
import {watch, ref, onBeforeMount} from 'vue';
import {useRoute} from 'vue-router';
import {useClient} from "@/plugins/api.js";
const creator = ref(null)
const loading = ref(true)
const contents = ref([])
const client = useClient()
const route = useRoute()
function contentPosted(content) {
contents.value.unshift(content)
}
onBeforeMount(async () => await fetchCreatorData(route.params.creator))
watch(
() => route.params.creator,
async () => await fetchCreatorData(route.params.creator)
)
const fetchCreatorData = async (creatorAlias) => {
try {
loading.value = true
const response = await client.get(`/api/creators/@${creatorAlias}`)
creator.value = response.data
} catch (error) {
console.error(`Error fetching content: ${error}`)
} finally {
loading.value = false
}
}
</script>

80
src/views/creators/CreatorExclusiveContent.vue
View File

@@ -1,80 +0,0 @@
<template>
<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>
</div>
</div>
<div v-else>
<div v-if="loading">
<v-progress-linear indeterminate></v-progress-linear>
</div>
<div v-else>
<v-card>
<v-card-text style="text-align: center;">
Aucun créateur au nom de {{ route.params.creator }}
</v-card-text>
</v-card>
</div>
</div>
<div class="flex flex-row max-w-[1500px] mx-auto justify-center mt-8">
<div>
<div class="flex flex-column px-2 max-w-[1200px]">
<exclusive-content-container :creator="creator"></exclusive-content-container>
</div>
</div>
<div class="max-w-80 hidden xl:block">
<!-- Rewards component will be visible only on xl screens -->
<rewards :creator="creator"></rewards>
</div>
</div>
</div>
</template>
<script async setup>
import {watch, ref, onBeforeMount} from 'vue';
import {useRoute} from 'vue-router';
import {useClient} from "@/plugins/api.js";
import CreatorBanner from "@/views/creators/CreatorBanner.vue";
import Creatornewssummary from "@/views/creators/CreatorNewsSummary.vue";
import Rewards from "@/views/creators/Rewards.vue";
import ExclusiveContentContainer from "@/views/creators/ExclusiveContentContainer.vue";
const creator = ref(null)
const loading = ref(true)
const contents = ref([])
const client = useClient()
const route = useRoute()
function contentPosted(content) {
contents.value.unshift(content)
}
onBeforeMount(async () => await fetchCreatorData(route.params.creator))
watch(
() => route.params.creator,
async () => await fetchCreatorData(route.params.creator)
)
const fetchCreatorData = async (creatorAlias) => {
try {
loading.value = true
const response = await client.get(`/api/creators/@${creatorAlias}`)
creator.value = response.data
} catch (error) {
console.error(`Error fetching content: ${error}`)
} finally {
loading.value = false
}
}
</script>

27
src/views/creators/CreatorHome.vue Normal file
View File

@@ -0,0 +1,27 @@
<template>
<div class="flex flex-row">
<div class="max-w-80">
<creator-news-summary></creator-news-summary>
</div>
<div class="px-4" :style="{ color: userStore.creator.colors.onBackground}">
<h1>{{ userStore.creator.about.title }}</h1>
<p>
{{ userStore.creator.about.description }}
</p>
</div>
</div>
</template>
<script setup>
import CreatorNewsSummary from "@/views/creators/CreatorNewsSummary.vue"
import {useUserStore} from "@/stores/userStore.js";
const userStore = useUserStore()
</script>
<style scoped>
</style>

56
src/views/creators/CreatorPresentation.vue → src/views/creators/CreatorLayout.vue
View File

@@ -1,39 +1,40 @@
<template>
<div :style="{ backgroundColor: '#2D2728' }">
<div class="mt-10" v-if="creator && creator.id">
<div class="max-w-[1500px] mx-auto">
<div :style="{ backgroundColor: creator.colors.background }">
<div class="max-w-[1500px] mx-auto">
<div v-if="creator && creator.id">
<creator-banner :creator="creator"
@content-posted="contentPosted"
></creator-banner>
</div>
</div>
<div v-else>
<div v-if="loading">
<v-progress-linear indeterminate></v-progress-linear>
</div>
<div v-else>
<v-card>
<v-card-text style="text-align: center;">
Aucun créateur au nom de {{ route.params.creator }}
</v-card-text>
</v-card>
</div>
</div>
<div class="flex flex-row max-w-[1500px] mx-auto justify-center mt-8">
<div>
<!-- Actualité feed-->
<div class="flex flex-column px-2 max-w-80">
<Creatornewssummary :creator="creator"></Creatornewssummary>
<div v-if="loading">
<v-progress-linear indeterminate></v-progress-linear>
</div>
<div v-else>
<v-card>
<v-card-text style="text-align: center;">
Aucun créateur au nom de {{ route.params.creator }}
</v-card-text>
</v-card>
</div>
</div>
<div class="min-w-[875px]"></div>
<div class="max-w-80">
<rewards :creator="creator"></rewards>
<div class="flex flex-row justify-center py-10">
<div class="w-full">
<router-view></router-view>
</div>
<div class="max-w-80">
<rewards :creator="creator"></rewards>
</div>
</div>
</div>
<Footer></Footer>
</div>
</template>
@@ -42,9 +43,8 @@ import {watch, ref, onBeforeMount} from 'vue';
import {useRoute} from 'vue-router';
import {useClient} from "@/plugins/api.js";
import CreatorBanner from "@/views/creators/CreatorBanner.vue";
import Creatornewssummary from "@/views/creators/CreatorNewsSummary.vue";
import Rewards from "@/views/creators/Rewards.vue";
import Footer from "@/views/main/Footer.vue";
const creator = ref(null)
const loading = ref(true)

32
src/views/creators/CreatorList.vue
View File

@@ -1,32 +0,0 @@
<template>
<div>
<v-img max-height="375"
src="images/usersmedia/HutopyProfile/banners/banner01.png"
cover>
</v-img>
<div class="text-5xl font-semibold text-center py-10">
CRÉATEURS
</div>
<div class="grid grid-cols-2">
<RouterLink v-for="(creator, index) in creators"
:key="index"
:to="creator.routerLink">
<CreatorCard :creator="creator"
class="m-2">
</CreatorCard>
</RouterLink>
</div>
</div>
</template>
<script setup>
import CreatorCard from "@/views/creators/CreatorCard.vue";
</script>

16
src/views/creators/CreatorPage.vue → src/views/creators/CreatorNews.vue
View File

@@ -1,18 +1,10 @@
<template>
<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>
</div>
<div class="max-w-[800px] mx-auto">
<div class="w-full h-full ">
<div v-if="creator && creator.id">
<div class="w-full h-full pr-4">
<content-list :creator-id="creator.id"
:contents="contents"
></content-list>
</div>
</div>
</div>
@@ -28,7 +20,7 @@
</v-card>
</div>
</div>
</div>
</template>
<script async setup>

156
src/views/creators/CreatorNewsSummary.vue
View File

@@ -1,71 +1,74 @@
<template>
<div class="overflow-hidden relative" @wheel="handleScroll">
<div class="text-center text-white rounded-t-lg mb-1 py-1"
:style="{ backgroundColor: creator.colors.bannerTop, letterSpacing: '5px' }">
Actualité
<div class="text-center rounded-t-lg p-4 tracking-widest uppercase"
:style="{ color: userStore.creator.colors.onPrimary, backgroundColor: userStore.creator.colors.primary}">
Actualité
</div>
<div v-for="(item, index) in articles"
class="my-1 text-white"
:key="index"
:style="{ backgroundColor: userStore.creator.colors.primary }">
<div class="flex justify-between items-center border-b-2 border-white p-2 mx-2">
<p class="text-xl tracking-[8px]">
<span v-if="item.type === 'nouvelle'">
Nouvelle
</span>
<span v-if="item.type === 'contenu'">
Contenu
</span>
</p>
<p class="text-xs">{{ item.date }}</p>
</div>
<!-- Container that holds all the posts and allows dynamic scrolling -->
<div class="relative max-h-[1000px] overflow-hidden">
<div class="transition-transform duration-500" :style="{ transform: `translateY(-${scrollPosition}px)` }">
<div v-for="(item, index) in actualites" :key="index" class="my-1 text-white"
:style="{ backgroundColor: creator.colors.bannerTop }">
<div class="flex justify-between items-center border-b-2 border-white p-3 mx-2">
<p v-if="item.type === 'nouvelle'" class="text-xl" :style="{ letterSpacing: '8px' }">Nouvelle</p>
<p v-if="item.type === 'contenu'" class="text-xl" :style="{ letterSpacing: '8px' }">Contenu</p>
<p class="text-xs">{{ item.date }}</p>
</div>
<div class="p-3">
<div class="text-lg" style="letter-spacing: 2px">{{ item.title }}</div>
<p v-if="item.description" class="text-gray-300 text-sm text-justify mt-1 py-1">{{ item.description }}</p>
<div v-if="item.rating" class="stars flex justify-end">
{{ item.rating }} ★
</div>
<img v-if="item.photo" :src="item.photo" class="w-full h-auto my-2"/>
<div class="flex justify-evenly">
<v-btn icon variant="plain">
<v-icon>mdi-thumb-up</v-icon>
</v-btn>
<v-btn icon variant="plain">
<v-icon>mdi-comment-outline</v-icon>
</v-btn>
<v-btn icon variant="plain">
<v-icon>mdi-gift-outline</v-icon>
</v-btn>
</div>
<video v-if="item.video" controls :src="item.video" class="w-full h-auto my-2"></video>
</div>
</div>
<div class="p-4">
<div class="text-lg tracking-[2px]">
{{ item.title }}
</div>
<p v-if="item.description"
class="text-gray-300 text-sm text-justify mt-1 py-1">
{{ item.description }}
</p>
<div v-if="item.rating" class="stars flex justify-end">
{{ item.rating }} ★
</div>
<img v-if="item.photo"
:src="item.photo"
class="w-full h-auto my-2"/>
<video v-if="item.video"
controls
:src="item.video"
class="w-full h-auto my-2">
</video>
<div class="flex justify-evenly">
<v-btn icon variant="plain">
<v-icon>mdi-thumb-up</v-icon>
</v-btn>
<v-btn icon variant="plain">
<v-icon>mdi-comment-outline</v-icon>
</v-btn>
<v-btn icon variant="plain">
<v-icon>mdi-gift-outline</v-icon>
</v-btn>
</div>
</div>
<!-- Navigation Buttons directly below the content -->
<div class="flex justify-center mt-2 space-x-2" v-if="showNavigationButtons">
<v-btn variant="text" class="text-white" height="42" @click="scrollUp">
<v-icon size="40">mdi-arrow-up-drop-circle-outline</v-icon>
</v-btn>
<v-btn variant="text" class="text-white" height="42" @click="scrollDown">
<v-icon size="40">mdi-arrow-down-drop-circle-outline</v-icon>
</v-btn>
</div>
</div>
</template>
<script setup>
import { ref, computed, defineProps } from 'vue';
import {ref} from 'vue';
import {useUserStore} from "@/stores/userStore.js";
const props = defineProps({
creator: {
type: Object,
required: true,
},
});
const userStore = useUserStore()
const actualites = ref([
const articles = ref([
{
type: 'nouvelle',
title: 'La visite du studio',
@@ -113,45 +116,4 @@ const actualites = ref([
},
]);
const startIndex = ref(0);
const cardsPerPage = 3;
// Gestion de la position du scroll
const scrollPosition = ref(0);
const cardHeight = 250; // Hauteur approximative d'une carte en pixels
// Calculer l'index final
const endIndex = computed(() => startIndex.value + cardsPerPage);
const visibleCards = computed(() => actualites.value.slice(startIndex.value, endIndex.value));
// Calculer si les boutons doivent être affichés
const showNavigationButtons = computed(() => {
const totalHeight = actualites.value.length * cardHeight;
const containerHeight = cardsPerPage * cardHeight;
return totalHeight > containerHeight; // Afficher les boutons seulement si le contenu dépasse la hauteur du conteneur
});
function scrollDown() {
if (endIndex.value < actualites.value.length) {
startIndex.value += 1; // Défiler d'une carte à la fois
scrollPosition.value += cardHeight; // Augmenter la position de défilement
}
}
function scrollUp() {
if (startIndex.value > 0) {
startIndex.value -= 1; // Défiler d'une carte à la fois
scrollPosition.value -= cardHeight; // Diminuer la position de défilement
}
}
// Handle scroll wheel event to scroll up or down
function handleScroll(event) {
event.preventDefault(); // Empêche le défilement de la page
if (event.deltaY < 0) {
scrollUp(); // Défilement vers le haut
} else if (event.deltaY > 0) {
scrollDown(); // Défilement vers le bas
}
}
</script>

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

@@ -7,11 +7,6 @@
<div class="font-bold"> Je soutiens </div>
</v-btn>
<v-dialog v-model="donationModal" max-width="500">
<v-form>
<v-card class="text-center rounded-xl" :style="{ border: `3px solid ${colorBorder}` }">

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

@@ -7,11 +7,6 @@
<div class="font-bold"> Je soutiens </div>
</v-btn>
<v-dialog v-model="donationModal" max-width="500">
<v-form>
<v-card class="text-center rounded-xl" :style="{ border: `3px solid ${colorBorder}` }">

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

@@ -4,7 +4,7 @@ import {computed, ref} from "vue";
const props = defineProps({
creator: {type: Object, required: true},
colorBorder: {required: true},
backgroundColor: {required: true},
});
const colorBorder = computed(() => props.colorBorder);
@@ -33,7 +33,7 @@ function unsubscribeFromCreator() {
:style="{
width: '150px',
height: '28px',
backgroundColor: colorBorder,
backgroundColor: backgroundColor,
color: 'white',
borderRadius: '8px 0 0 8px',
padding: '10px 24px',
@@ -53,7 +53,7 @@ function unsubscribeFromCreator() {
:style="{
width: '150px',
height: '28px',
backgroundColor: colorBorder,
backgroundColor: backgroundColor,
color: 'white',
borderRadius: '8px 0 0 8px',
padding: '10px 24px',

107
src/views/creators/Rewards.vue
View File

@@ -1,52 +1,41 @@
<template>
<div class="overflow-hidden relative" @wheel="handleScroll">
<div class="text-center rounded-t-lg p-4 tracking-widest uppercase"
:style="{ color: userStore.creator.colors.onPrimary, backgroundColor: userStore.creator.colors.primary}">
Récompenses
</div>
<div class="text-center text-white rounded-t-lg py-1 mb-1" :style="{ backgroundColor: creator.colors.bannerTop, letterSpacing: '5px' }">Récompenses</div>
<!-- Container that holds all the posts and allows dynamic scrolling -->
<div class="relative h-[1000px] max-h-[1000px] overflow-hidden">
<div class="transition-transform duration-500" :style="{ transform: `translateY(-${scrollPosition}px)` }">
<div v-for="(item, index) in actualites" :key="index" class="my-1 text-white p-4" :style="{ backgroundColor: creator.colors.bannerTop }">
<div class="flex justify-center items-center border-b-2 border-white p-3 mx-2">
<div class="text-xl align-center" style="letter-spacing: 4px">{{ item.title }}</div>
</div>
<div class="p-3">
<p v-if="item.description" class="text-gray-300 text-sm text-justify mt-1 py-1">{{ item.description }}</p>
<div v-if="item.amount" class="flex flex-row justify-end space-x-2">
<div class="text-right text-white">{{ item.amount }}$</div>
<div>|</div>
<div v-if="item.quantity"> Quantité: {{ item.quantity }}</div>
</div>
</div>
</div>
</div>
<div v-for="(item, index) in rewards"
class="my-1 text-white"
:key="index"
:style="{ backgroundColor: userStore.creator.colors.primary }">
<div class="flex justify-center border-b-2 border-white p-3 mx-2 text-xl tracking-[4px]">
{{ item.title }}
</div>
<div class="p-3">
<p v-if="item.description" class="text-gray-300 text-sm text-justify mt-1 py-1">
{{ item.description }}
</p>
<!-- Navigation Buttons directly below the content -->
<div v-if="showNavigationButtons" class="flex justify-center mt-2 py-2">
<v-btn variant="text" class="text-white" height="42" @click="scrollUp">
<v-icon size="40">mdi-arrow-up-drop-circle-outline</v-icon>
</v-btn>
<v-btn variant="text" class="text-white" height="42" @click="scrollDown">
<v-icon size="40">mdi-arrow-down-drop-circle-outline</v-icon>
</v-btn>
<div v-if="item.amount" class="flex flex-row justify-end space-x-2">
<div class="text-right text-white">{{ item.amount }}$</div>
<div>|</div>
<div v-if="item.quantity"> Quantité: {{ item.quantity }}</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, defineProps } from 'vue';
import {ref, computed} from 'vue';
import {useUserStore} from "@/stores/userStore.js";
const props = defineProps({
creator: {
type: Object,
required: true,
},
});
const userStore = useUserStore()
const actualites = ref([
const rewards = ref([
{
title: 'Hoodie',
description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.',
@@ -91,45 +80,5 @@ const actualites = ref([
},
]);
const startIndex = ref(0);
const cardsPerPage = 3;
const scrollPosition = ref(0);
const cardHeight = 250;
const endIndex = computed(() => startIndex.value + cardsPerPage);
const visibleCards = computed(() => actualites.value.slice(startIndex.value, endIndex.value));
// Calculate whether navigation buttons should be shown
const showNavigationButtons = computed(() => {
const totalHeight = actualites.value.length * cardHeight;
const containerHeight = cardsPerPage * cardHeight;
return totalHeight > containerHeight; // Only show buttons if content exceeds the container
});
function scrollUp() {
if (startIndex.value > 0) {
startIndex.value -= 1;
scrollPosition.value -= cardHeight;
}
}
function scrollDown() {
const totalHeight = actualites.value.length * cardHeight;
const containerHeight = cardsPerPage * cardHeight;
if (scrollPosition.value + containerHeight < totalHeight) {
startIndex.value += 1;
scrollPosition.value += cardHeight;
}
}
// Handle scroll wheel event to scroll up or down
function handleScroll(event) {
event.preventDefault(); // Empêche le défilement de la page
if (event.deltaY < 0) {
scrollUp(); // Défilement vers le haut
} else if (event.deltaY > 0) {
scrollDown(); // Défilement vers le bas
}
}
</script>

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

@@ -4,11 +4,9 @@ import {computed, ref} from "vue";
const props = defineProps({
creator: {type: Object, required: true},
colorBorder: {required: true},
backgroundColor: {required: true},
});
const colorBorder = computed(() => props.colorBorder);
const subscriptionStore = useSubscriptionStore();
const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(props.creator.id));
@@ -31,29 +29,29 @@ function unsubscribeFromCreator() {
<template v-if="isSubscribe">
<v-btn
:style="{
width: '150px',
height: '28px',
backgroundColor: colorBorder,
color: 'white',
borderRadius: '0 8px 8px 0',
padding: '10px 24px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: 'background-color 0.3s ease'
}"
width: '150px',
height: '28px',
backgroundColor: backgroundColor,
color: 'white',
borderRadius: '0 8px 8px 0',
padding: '10px 24px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: 'background-color 0.3s ease'
}"
@click="subscribeToCreator"
>
<div>{{ $t('subscribebutton.subscribe') }}</div>
{{ $t('subscribebutton.subscribe') }}
</v-btn>
</template>
</template>
<template v-else>
<v-btn
<v-btn
:style="{
width: '150px',
height: '28px',
backgroundColor: colorBorder,
backgroundColor: backgroundColor,
color: 'white',
borderRadius: '0 8px 8px 0',
padding: '10px 24px',
@@ -85,7 +83,7 @@ function unsubscribeFromCreator() {
:style="{ backgroundColor: 'rgba(255, 255, 255, 0.1)', color: 'rgba(0, 0, 0, 0.4)' }"
@click="unsubscribeFromCreator">Oui
</v-btn>
<v-btn class="flex-grow-1"
:style="{ borderColor: creator.colors.menu, color: creator.colors.menu }" variant="outlined"
@click="showUnsubscribeModal = false">

19
src/views/creators/banner/bannerlower/BannerActions.vue
View File

@@ -5,7 +5,7 @@ import BannerActionsLg from "@/views/creators/banner/bannerlower/BannerActionsLg
import BannerActionsXl from "@/views/creators/banner/bannerlower/BannerActionsXl.vue";
const props = defineProps({
creator: { type: Object, required: true }
creator: {type: Object, required: true}
});
const emits = defineEmits(['content-posted']);
@@ -17,18 +17,27 @@ function addContent(content) {
<template>
<div>
<banner-actions-sm class="d-sm-none" :creator="creator" @content-posted="addContent"></banner-actions-sm>
<banner-actions-sm class="d-sm-none"
:creator="creator"
@content-posted="addContent"
></banner-actions-sm>
<div class="d-none d-sm-flex d-md-none">
<banner-actions-md :creator="creator" @content-posted="addContent"></banner-actions-md>
<banner-actions-md :creator="creator"
@content-posted="addContent"
></banner-actions-md>
</div>
<div class="d-none d-md-flex d-lg-none">
<banner-actions-lg :creator="creator" @content-posted="addContent"></banner-actions-lg>
<banner-actions-lg :creator="creator"
@content-posted="addContent"
></banner-actions-lg>
</div>
<div class="d-none d-lg-flex">
<banner-actions-xl :creator="creator" @content-posted="addContent"></banner-actions-xl>
<banner-actions-xl :creator="creator"
@content-posted="addContent"
></banner-actions-xl>
</div>
</div>
</template>

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

@@ -14,13 +14,7 @@
:style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"
/>
</div>
<div class="ml-72 text-white mr-10">
<p class="capitalize text-4xl font-bold">{{ creator.name }}</p>
<div class="text-2xl text-white flex flex-row align-center">
{{ creator.about.title }}
<creator-about class="px-2" :creator="creator"></creator-about>
</div>
</div>
<div class="flex flex-row ml-auto space-x-2.5">
<donation-button-banner
:color-border="creator.colors.menu"
@@ -92,7 +86,6 @@ import { ref, onMounted, computed } from 'vue';
import { useSubscriptionStore } from "@/stores/subscriptionStore.js";
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import DonationButtonBanner from "@/views/creators/DonationButtonBanner.vue";
import CreatorAbout from "@/views/creators/CreatorAbout.vue";
import SubscribeButtonSlim from "@/views/creators/SubscribeButtonSlim.vue";
import DonationButtonBannerSlim from "@/views/creators/DonationButtonBannerSlim.vue";

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

@@ -22,18 +22,13 @@
<div>{{ creator.subscriberCount }} {{ $t('banner.subscription') }}</div>
</div>
<div class="flex items-center">
<div class="mt-1">{{ creator.about.title }}</div>
<creator-about :creator="creator"></creator-about>
</div>
</div>
<div class="flex justify-between mt-2">
<subscribe-button :creator="creator"></subscribe-button>
<div class="flex space-x-2">
<publish-content-button :creator="creator"
@content-posted="addContent"
></publish-content-button>
<donation-button :color-border="creator.colors.menu"
:color-accent="creator.colors.accent"
:creator-id="creator.id"
@@ -54,17 +49,10 @@
<script setup>
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import PublishContentButton from "@/views/contents/PublishContentButton.vue";
import DonationButton from "@/views/creators/DonationButton.vue";
import CreatorAbout from "@/views/creators/CreatorAbout.vue";
const props = defineProps({
creator: {type: Object, required: true}
});
const emits = defineEmits(['content-posted']);
function addContent(content) {
emits('content-posted', content);
}
</script>

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

@@ -24,18 +24,14 @@
<div>{{ creator.subscriberCount }} {{ $t('banner.subscription')}}</div>
</div>
<div class="flex ml-auto text-right text-white text-lg px-3 mt-2">
<div class="mt-1">{{ creator.about.title }}</div>
<creator-about :creator="creator"></creator-about>
</div>
</div>
<!-- Title-info-donation-->
<div class="flex flex-row items-center justify-between w-full px-4">
<div>
<subscribe-button :creator="creator"></subscribe-button>
<subscribe-button :creator="creator"
></subscribe-button>
</div>
<div class="flex ml-auto space-x-4">
@@ -64,7 +60,6 @@
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import PublishContentButton from "@/views/contents/PublishContentButton.vue";
import DonationButton from "@/views/creators/DonationButton.vue";
import CreatorAbout from "@/views/creators/CreatorAbout.vue";
const props = defineProps({
creator: {type: Object, required: true}

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

@@ -2,27 +2,26 @@
<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: creator.colors.bannerTop || '#A30E79', boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }">
:style="{ backgroundColor: creator.colors.primary, boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }">
<div>
<div>
<!-- Profile and info-->
<!--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"
class="shadow-2xl rounded-full border-solid border-102 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'}"
:style="{ borderColor: creator.colors.secondary, height: '190px'}"
/>
</div>
<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>
@@ -53,44 +52,46 @@
<div class="flex flex-row space-x-1 justify-center mt-3 mb-2">
<follow-button
:creator="creator"
:color-border="creator.colors.menu">
:background-color="creator.colors.secondary">
</follow-button>
<subscribe-button
:creator="creator"
:color-border="creator.colors.menu">
:background-color="creator.colors.secondary">
</subscribe-button>
</div>
</div>
</div>
<div class="absolute bottom-6 right-24 z-30 shadow-2xl rounded-md text-white"
:style="{ backgroundColor: creator.colors.bannerTop}">
:style="{ backgroundColor: creator.colors.background}">
<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: creator.colors.bannerBottom, opacity: 0.20 }">
:style="{ backgroundColor: creator.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: creator.colors.bannerBottom}">
:style="{ backgroundColor: creator.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>
<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: creator.colors.bannerBottom, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
:style="{ backgroundColor: creator.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
variant="tonal">+
</v-btn>
<v-btn
:style="{ backgroundColor: creator.colors.bannerBottom, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
:style="{ backgroundColor: creator.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
variant="tonal">-
</v-btn>
</div>
@@ -105,17 +106,17 @@
</v-btn>
</div>
</div>
<div class="flex-grow bg-gray-300 flex items-center justify-center rounded-b-md"
:style="{ backgroundColor: creator.colors.bannerBottom,opacity: 0.80 }">
:style="{ backgroundColor: creator.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>
<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>
@@ -124,12 +125,21 @@
</div>
</div>
<div class="rounded-b-2xl min-h-10 px-36 flex flex-col items-center justify-center"
:style="{ backgroundColor: creator.colors.bannerBottom, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }">
<div class="rounded-b-2xl h-12 px-36 flex flex-col items-center justify-center"
:style="{ backgroundColor: creator.colors.secondary, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }">
<div class="flex justify-evenly w-full">
<v-btn variant="text" class="text-white">Présentation</v-btn>
<v-btn variant="text" class="text-white">Actualité</v-btn>
<v-btn variant="text" class="text-white">Exclusivité</v-btn>
<RouterLink class="nav-button"
:to="`/@${creator.name}`">
Présentation
</RouterLink>
<RouterLink class="nav-button text-white hover:bg-gray-700"
:to="`/@${creator.name}/news`">
Actualité
</RouterLink>
<RouterLink class="nav-button text-white hover:bg-gray-700"
:to="`/@${creator.name}/content`">
Exclusivité
</RouterLink>
</div>
</div>
@@ -137,14 +147,19 @@
</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, computed} from 'vue';
import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
import {ref, onMounted} from 'vue';
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import DonationButtonBanner from "@/views/creators/DonationButtonBanner.vue";
import CreatorAbout from "@/views/creators/CreatorAbout.vue";
import SubscribeButtonSlim from "@/views/creators/SubscribeButtonSlim.vue";
import DonationButtonBannerSlim from "@/views/creators/DonationButtonBannerSlim.vue";
import FollowButton from "@/views/creators/FollowButton.vue";
@@ -209,10 +224,7 @@ const props = defineProps({
creator: {type: Object, required: true}
});
const subscriptionStore = useSubscriptionStore();
// Calculer si l'utilisateur est abonné
const isSubscribed = computed(() => subscriptionStore.isSubscribeTo(props.creator.id));
const isSticky = ref(false);
const mainContainer = ref(null);