generated from gitea_admin/default
145 lines
3.3 KiB
Vue
145 lines
3.3 KiB
Vue
<!-- app/components/concert/ConcertCardList.vue -->
|
|
<template>
|
|
<div
|
|
class="concert-card-list"
|
|
:class="{
|
|
'concert-card-list--highlight-first': highlightFirst,
|
|
'concert-card-list--limit-cards': limitCardsOnBreakpoint,
|
|
}"
|
|
>
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
highlightFirst: { type: Boolean, default: true },
|
|
limitCardsOnBreakpoint: { type: Boolean, default: true },
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.concert-card-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--gap-cards);
|
|
justify-content: center;
|
|
.concert-card {
|
|
max-width: 452px;
|
|
}
|
|
}
|
|
|
|
// Afficher seulement 1 cards < 600px
|
|
@media (max-width: 599px) {
|
|
.concert-card-list.concert-card-list--limit-cards > .concert-card:nth-child(2) {
|
|
display: none;
|
|
}
|
|
.concert-card-list.concert-card-list--limit-cards > .concert-card:nth-child(3) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Afficher seulement 2 cards < 900px
|
|
@media (max-width: 899px) {
|
|
.concert-card-list.concert-card-list--limit-cards > .concert-card:nth-child(3) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Taille des cards
|
|
@media (max-width: 599px) {
|
|
.concert-card-list > .concert-card {
|
|
flex: 1 1 260px;
|
|
max-width: 90%;
|
|
}
|
|
}
|
|
@media (min-width: 600px) {
|
|
.concert-card-list > .concert-card {
|
|
flex: 1 1 260px;
|
|
}
|
|
.concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
|
|
flex: 2 1 280px;
|
|
}
|
|
}
|
|
@media (min-width: 700px) {
|
|
.concert-card-list > .concert-card {
|
|
flex: 1 1 280px;
|
|
}
|
|
.concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
|
|
flex: 2 1 300px;
|
|
}
|
|
}
|
|
@media (min-width: 800px) {
|
|
.concert-card-list > .concert-card {
|
|
flex: 1 1 280px;
|
|
}
|
|
.concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
|
|
flex: 2 1 300px;
|
|
}
|
|
}
|
|
@media (min-width: 900px) {
|
|
.concert-card-list > .concert-card {
|
|
flex: 1 1 260px;
|
|
}
|
|
|
|
.concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
|
|
flex: 2 1 300px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1000px) {
|
|
.concert-card-list > .concert-card {
|
|
flex: 1 1 280px;
|
|
}
|
|
|
|
.concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
|
|
flex: 2 1 340px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1100px) {
|
|
.concert-card-list > .concert-card {
|
|
flex: 1 1 300px;
|
|
}
|
|
|
|
.concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
|
|
flex: 2 1 380px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.concert-card-list > .concert-card {
|
|
flex: 1 1 320px;
|
|
}
|
|
|
|
.concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
|
|
flex: 2 1 400px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1300px) {
|
|
.concert-card-list > .concert-card {
|
|
flex: 1 1 340px;
|
|
}
|
|
|
|
.concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
|
|
flex: 2 1 440px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1400px) {
|
|
// style appliqué au composant enfant via sa classe
|
|
.concert-card-list > .concert-card {
|
|
flex: 1 1 360px;
|
|
}
|
|
//règle spécifique après la règle générale
|
|
.concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
|
|
flex: 2 1 480px;
|
|
min-width: 500px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
</style>
|