Update rewards and CreatorNewSummary, Now you are able to use the mouse wheel.
This commit is contained in:
PascalMarchesseault
157
src/views/creators/banner/CreatorNewsSummary.vue
Normal file
157
src/views/creators/banner/CreatorNewsSummary.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
</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';
|
||||
|
||||
const props = defineProps({
|
||||
creator: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
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'
|
||||
},
|
||||
{
|
||||
type: 'nouvelle',
|
||||
title: 'La 2e 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'
|
||||
},
|
||||
]);
|
||||
|
||||
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>
|
||||
@@ -1,119 +0,0 @@
|
||||
<template>
|
||||
<div class="overflow-hidden relative">
|
||||
|
||||
<div 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>
|
||||
</div>
|
||||
|
||||
<div class="text-center text-white rounded-t-lg mb-1 py-1" :style="{ backgroundColor: creator.colors.bannerTop, letterSpacing: '5px' }">Actualité</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>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Buttons directly below the content -->
|
||||
<div class="flex justify-center mt-2 space-x-2">
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.card-enter-active, .card-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
.card-enter-from, .card-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
.card-leave-from, .card-enter-to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Ajout de overflow-y pour rendre la publication suivante partiellement visible */
|
||||
.max-h-[1000px] {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, defineProps } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
creator: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
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' },
|
||||
{ type: 'nouvelle', title: 'La 2e 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' },
|
||||
]);
|
||||
|
||||
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
|
||||
|
||||
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 += 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
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,32 +1,23 @@
|
||||
<template>
|
||||
<div class="overflow-hidden relative">
|
||||
|
||||
<div 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>
|
||||
</div>
|
||||
<div class="overflow-hidden relative" @wheel="handleScroll">
|
||||
|
||||
<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" :style="{ backgroundColor: creator.colors.bannerTop }">
|
||||
<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="text-right text-lg text-green-500">
|
||||
{{ item.amount }}$
|
||||
</div>
|
||||
<div v-if="item.quantity" class="text-right text-sm text-gray-400">
|
||||
Quantité: {{ item.quantity }}
|
||||
<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>
|
||||
@@ -34,7 +25,10 @@
|
||||
</div>
|
||||
|
||||
<!-- Navigation Buttons directly below the content -->
|
||||
<div class="flex justify-center mt-2 space-x-2">
|
||||
<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>
|
||||
@@ -53,34 +47,89 @@ const props = defineProps({
|
||||
});
|
||||
|
||||
const actualites = ref([
|
||||
{title: 'Hoodie', description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.', amount: 50, quantity: 5, date: '2024-09-19' },
|
||||
{title: 'Small Talk', description: 'Ceci est la description du contenu.', amount: null, quantity: null, date: '2024-09-18' },
|
||||
{title: 'Les vrais choses', 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.', amount: 100, quantity: 10, date: '2024-09-17' },
|
||||
{title: 'On va changer le monde', description: 'Deuxième contenu avec description.', amount: null, quantity: null, date: '2024-09-16' },
|
||||
{title: 'Séance photo', description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.', amount: 150, quantity: 20, date: '2024-09-19' },
|
||||
{
|
||||
title: 'Hoodie',
|
||||
description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.',
|
||||
amount: 50,
|
||||
quantity: 5,
|
||||
date: '2024-09-19',
|
||||
},
|
||||
{
|
||||
title: 'Small Talk',
|
||||
description: 'Ceci est la description du contenu.',
|
||||
amount: null,
|
||||
quantity: null,
|
||||
date: '2024-09-18',
|
||||
},
|
||||
{
|
||||
title: 'Les vrais choses',
|
||||
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.',
|
||||
amount: 100,
|
||||
quantity: 10,
|
||||
date: '2024-09-17',
|
||||
},
|
||||
{
|
||||
title: 'On va changer le monde',
|
||||
description: 'Deuxième contenu avec description.',
|
||||
amount: 150,
|
||||
quantity: 1,
|
||||
date: '2024-09-16',
|
||||
},
|
||||
{
|
||||
title: 'Séance photo',
|
||||
description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.',
|
||||
amount: 150,
|
||||
quantity: 20,
|
||||
date: '2024-09-19',
|
||||
},
|
||||
{
|
||||
title: 'Séance photo',
|
||||
description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.',
|
||||
amount: 150,
|
||||
quantity: 20,
|
||||
date: '2024-09-19',
|
||||
},
|
||||
]);
|
||||
|
||||
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
|
||||
const cardHeight = 250;
|
||||
|
||||
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 += 1; // Défiler d'une carte à la fois
|
||||
scrollPosition.value += cardHeight; // Augmenter la position de défilement
|
||||
}
|
||||
}
|
||||
// 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; // Défiler d'une carte à la fois
|
||||
scrollPosition.value -= cardHeight; // Diminuer la position de défilement
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user