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

Creator news summary - presentation design

Browse Source
This commit is contained in:
PascalMarchesseault
2024-09-19 16:22:06 -04:00
parent 8daef55cff
commit c56be8d1a1
4 changed files with 176 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/router/router.js
View File

@@ -21,6 +21,7 @@ import PostContent from "@/views/contents/PostContent.vue";
import Explorer from "@/views/explorer/explorer.vue";
import {useAuthStore} from "@/stores/authStore.js";
import ForYouPage from "@/views/profile/ForYouPage.vue";
import CreatorPresentation from "@/views/creators/CreatorPresentation.vue";
const routes = [
{
@@ -28,6 +29,11 @@ const routes = [
component: Home,
meta: { hideSideBar: true }
},
{
path: '/presentation/@:creator',
component: CreatorPresentation,
},
{
path: '/browse',
component: CreatorList

79
src/views/creators/CreatorPresentation.vue Normal file
View File

@@ -0,0 +1,79 @@
<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>
<!--reator presentation-->
<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">
<div>
<Creatornewssummary :creator="creator"></Creatornewssummary>
</div>
</div>
</div>
<div class="min-w-[875px]"></div>
<div class="bg-fuchsia-800 flex-grow">
</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/banner/Creatornewssummary.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>

85
src/views/creators/banner/Creatornewssummary.vue Normal file
View File

@@ -0,0 +1,85 @@
<template>
<div>
<div class="flex justify-center mb-2">
<v-btn height="42" @click="scrollUp">
<v-icon size="40">mdi-arrow-up-drop-circle-outline</v-icon>
</v-btn>
</div>
<div class="text-center text-white rounded-t-lg text-xl" :style="{ backgroundColor: creator.colors.bannerTop, letterSpacing: '5px' }">Actualité</div>
<div class="flex flex-column">
<div v-for="(item, index) in visibleCards" :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="flex justify-center mt-2">
<v-btn height="42" @click="scrollDown">
<v-icon size="40">mdi-arrow-down-drop-circle-outline</v-icon>
</v-btn>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, defineProps } from 'vue';
// Define props to receive creator
const props = defineProps({
creator: {
type: Object,
required: true,
},
});
// Simulate JSON data (replace with your actual data)
const actualites = ref([
{ type: 'nouvelle', title: 'La visite du studio', description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', video: null, rating: null, date: '2024-09-19' },
{ type: 'contenu', title: 'Éditer comme un pro!', description: 'Ceci est la description du contenu.', photo: null, video: null, rating: 4.5, date: '2024-09-18' },
{ type: 'nouvelle', title: 'Le studio', description: 'Nous sommes dans les derniers préparatifs, mais demain nous allons vous dévoiler la première partie du studio qui est complétée.', photo: null, video: null, rating: null, date: '2024-09-17' },
{ type: 'contenu', title: 'Contenu 2', description: 'Deuxième contenu avec description.', photo: null, video: null, rating: 5.0, date: '2024-09-16' },
]);
// Control card visibility
const startIndex = ref(0);
const cardsPerPage = 3;
const endIndex = computed(() => startIndex.value + cardsPerPage);
const visibleCards = computed(() => actualites.value.slice(startIndex.value, endIndex.value));
function scrollDown() {
if (endIndex.value < actualites.value.length) {
startIndex.value += 2;
}
}
function scrollUp() {
if (startIndex.value > 0) {
startIndex.value -= 2;
}
}
</script>

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

@@ -63,16 +63,16 @@
</div>
</div>
<div class="absolute bottom-6 right-24 z-30 shadow-2xl rounded-2xl text-white"
<div class="absolute bottom-6 right-24 z-30 shadow-2xl rounded-md 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"
<div class="rounded-tl-md 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"
<div class="rounded-tr-md w-1/2 bg-cyan-100 flex items-center justify-center text-xl"
:style="{ backgroundColor: creator.colors.bannerBottom}">
<div class="absolute left-1">
<div class="flex flex-row items-center justify-center space-x-5">
@@ -105,15 +105,15 @@
</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"
<div class="flex-grow bg-gray-300 flex items-center justify-center rounded-b-md"
: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"
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>
@@ -122,61 +122,6 @@
</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>-->
<!-- </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"-->
<!-- :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79', borderBottom: '5px inset' + (creator.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="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"-->
<!-- alt="Profile Picture"-->
<!-- :style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"-->
<!-- />-->
<!-- </div>-->
<!-- <div class="ml-5 text-white">-->
<!-- <p class="capitalize text-2xl font-bold">{{ creator.name }}</p>-->
<!-- </div>-->
<!-- <div class="ml-auto flex flex-row space-x-2.5 mr-3 ">-->
<!-- -->
<!-- <donation-button-banner-slim -->
<!-- class=""-->
<!-- :color-border="creator.colors.menu"-->
<!-- :color-accent="creator.colors.accent"-->
<!-- :creator-id="creator.id"-->
<!-- :creator-name="creator.name"-->
<!-- :creator-logo="creator.images.logo"-->
<!-- >-->
<!-- </donation-button-banner-slim>-->
<!-- &lt;!&ndash; Afficher le bouton d'abonnement seulement si l'utilisateur n'est pas abonné &ndash;&gt;-->
<!-- <subscribe-button-slim-->
<!-- v-if="!isSubscribed"-->
<!-- :creator="creator"-->
<!-- :color-border="creator.colors.menu">-->
<!-- </subscribe-button-slim>-->
<!-- -->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</div>
<div class="rounded-b-2xl min-h-10 px-36 flex flex-col items-center justify-center"