181 lines
8.7 KiB
Vue
181 lines
8.7 KiB
Vue
<template>
|
||
<div class="overflow-hidden relative" @wheel="handleScroll">
|
||
<!-- Container that holds all the posts and permet le défilement -->
|
||
<div class="relative h-[1000px] max-h-[1000px] overflow-hidden p-4">
|
||
<div class="transition-transform duration-500" :style="{ transform: `translateY(-${scrollPosition}px)` }">
|
||
<!-- Grille avec colonnes dynamiques basées sur la largeur -->
|
||
<div class="grid gap-3 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 min-w-[250px]">
|
||
<div v-for="(item, index) in contenuexclusif" :key="index"
|
||
class="my-1 text-white rounded-lg w-full border-2 shadow h-[380px] hover-card relative overflow-hidden"
|
||
:style="{
|
||
background: creator.colors.bannerTop,
|
||
borderColor: `rgba(${getRGB(creator.colors.bannerBottom)}, 0.38)`
|
||
}">
|
||
<div class="flex justify-center items-center">
|
||
</div>
|
||
<div>
|
||
<img :src="item.photo" class="w-full h-auto max-h-[170px] object-cover" />
|
||
|
||
<!-- Section du nombre de clics et du bouton d'édition -->
|
||
<div class="flex flex-row justify-between items-center p-2">
|
||
<div class="flex items-center">
|
||
<p class="text-xs">{{ item.date }}</p>
|
||
<p class="text-xs px-2">|</p>
|
||
<p class="text-xs">200 clicks</p>
|
||
</div>
|
||
<!-- Bouton pour éditer le contenu à droite -->
|
||
<v-btn class="" icon variant="plain" @click="editCard(item)">
|
||
<v-icon>mdi-dots-vertical</v-icon>
|
||
</v-btn>
|
||
</div>
|
||
|
||
<p class="text-md p-4">{{ item.title }}</p>
|
||
<!-- Section des étoiles, fixée dans le coin inférieur droit -->
|
||
<div v-if="item.rating" class="stars flex justify-end p-2 absolute bottom-0 right-0">
|
||
<!-- Génération dynamique des étoiles -->
|
||
<span v-for="star in 5" :key="star" class="text-yellow-500">
|
||
<v-icon v-if="star <= item.rating">mdi-star</v-icon>
|
||
<v-icon v-else>mdi-star-outline</v-icon>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
|
||
<script setup>
|
||
import { ref, computed, defineProps } from 'vue';
|
||
|
||
function hexToRgb(hex) {
|
||
let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
|
||
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
|
||
return r + r + g + g + b + b;
|
||
});
|
||
|
||
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||
return result ? {
|
||
r: parseInt(result[1], 16),
|
||
g: parseInt(result[2], 16),
|
||
b: parseInt(result[3], 16)
|
||
} : null;
|
||
}
|
||
|
||
function getRGB(hexColor) {
|
||
const rgb = hexToRgb(hexColor);
|
||
return `${rgb.r}, ${rgb.g}, ${rgb.b}`;
|
||
}
|
||
|
||
const contenuexclusif = ref([
|
||
{ title: 'Créer un site web moderne', description: 'Un guide pour concevoir un site qui attire l\'attention et se démarque.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 2, date: '2024-09-19' },
|
||
{ title: ' Les secrets d’un logo réussiLes secrets d’un logo réussiLes secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
|
||
{ title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
|
||
{ title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
|
||
{ title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
|
||
{ title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
|
||
{ title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
|
||
{ title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
|
||
{ title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
|
||
{ title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
|
||
{ title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
|
||
{ title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
|
||
{ title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
|
||
{ title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
|
||
{ title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
|
||
{ title: 'Les secrets d’un logo réussi', description: 'Découvrez les astuces pour un logo mémorable et distinctif.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', rating: 4, date: '2024-09-19' },
|
||
// autres objets...
|
||
]);
|
||
|
||
const scrollPosition = ref(0);
|
||
const cardHeight = 320;
|
||
|
||
const props = defineProps({
|
||
creator: {
|
||
type: Object,
|
||
required: true,
|
||
},
|
||
});
|
||
|
||
function handleScroll(event) {
|
||
event.preventDefault();
|
||
const scrollSpeed = 100;
|
||
scrollPosition.value += event.deltaY > 0 ? scrollSpeed : -scrollSpeed;
|
||
|
||
const totalRows = Math.ceil(contenuexclusif.value.length / getCurrentCols());
|
||
const visibleRows = 1000 / cardHeight;
|
||
const maxScrollPosition = totalRows * cardHeight - visibleRows * cardHeight + 360;
|
||
|
||
if (scrollPosition.value < 0) {
|
||
scrollPosition.value = 0;
|
||
} else if (scrollPosition.value > maxScrollPosition) {
|
||
scrollPosition.value = maxScrollPosition;
|
||
}
|
||
}
|
||
|
||
const gridColsClass = computed(() => {
|
||
const width = window.innerWidth;
|
||
if (width >= 1200) {
|
||
return 'grid-cols-4';
|
||
} else if (width >= 900) {
|
||
return 'grid-cols-3';
|
||
} else if (width >= 600) {
|
||
return 'grid-cols-2';
|
||
} else {
|
||
return 'grid-cols-1';
|
||
}
|
||
});
|
||
|
||
function getCurrentCols() {
|
||
const width = window.innerWidth;
|
||
if (width >= 1200) {
|
||
return 4;
|
||
} else if (width >= 900) {
|
||
return 3;
|
||
} else if (width >= 600) {
|
||
return 2;
|
||
} else {
|
||
return 1;
|
||
}
|
||
}
|
||
|
||
function editCard(item) {
|
||
console.log(`Editing card: ${item.title}`);
|
||
}
|
||
|
||
window.addEventListener('resize', () => {
|
||
gridColsClass.value = getCurrentCols();
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
.hover-card {
|
||
transition: transform 0.3s ease-in-out;
|
||
}
|
||
|
||
.hover-card:hover {
|
||
transform: scale(1.03); /* Effet de hover restauré */
|
||
}
|
||
|
||
.stars .v-icon {
|
||
font-size: 18px; /* Ajustez la taille des icônes */
|
||
}
|
||
|
||
.limited-text {
|
||
height: 60px; /* Limite la hauteur du texte */
|
||
overflow: hidden; /* Empêche le texte de dépasser */
|
||
text-overflow: ellipsis; /* Ajoute des points de suspension si le texte dépasse */
|
||
white-space: nowrap; /* Le texte reste sur une seule ligne */
|
||
}
|
||
|
||
.stars {
|
||
position: absolute; /* Fixe les étoiles au bas à droite */
|
||
bottom: 10px;
|
||
right: 10px;
|
||
}
|
||
|
||
</style>
|