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

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>