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

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>