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

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);