generated from gitea_admin/default
update a lot of change since a while
This commit is contained in:
88
app/components/concert/ConcertCard.vue
Normal file
88
app/components/concert/ConcertCard.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<DsCard class="concert-card">
|
||||
<div class="concert-card__grid">
|
||||
<!-- Image -->
|
||||
<div class="concert-card__media">
|
||||
<DsMedia :src="imageUrl" :alt="imageAlt" ratio="square" />
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="concert-card__content">
|
||||
<DsHeading as="h4" tone="default" class="concert-card__title">
|
||||
{{ title }}
|
||||
</DsHeading>
|
||||
|
||||
<!-- Meta : date + lieu -->
|
||||
<div class="concert-card__meta">
|
||||
<DsHeading as="h5" tone="default">
|
||||
{{ venue }}
|
||||
</DsHeading>
|
||||
<DsHeading as="h6" tone="default">
|
||||
<time :datetime="dateISO">{{ dateLabel }}</time>
|
||||
</DsHeading>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<DsText as="p" tone="default" :clamp="3" class="concert-card__description">
|
||||
{{ description }}
|
||||
</DsText>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="concert-card__actions">
|
||||
<DsButtonArrow :to="`/concerts/${id}`" variant="secondary">
|
||||
Réserver
|
||||
</DsButtonArrow>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DsCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DsCard from '@root/design-system/components/DsCard.vue'
|
||||
import DsMedia from '@root/design-system/primitives/DsMedia.vue'
|
||||
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
|
||||
import DsText from '@root/design-system/primitives/DsText.vue'
|
||||
import DsButtonArrow from '@root/design-system/primitives/DsButtonArrow.vue'
|
||||
|
||||
|
||||
defineProps({
|
||||
id: { type: [String, Number], required: true },
|
||||
title: { type: String, required: true },
|
||||
venue: { type: String, required: true },
|
||||
dateISO: { type: String, required: true }, // ex: "2026-01-15T20:00:00+01:00"
|
||||
dateLabel: { type: String, required: true }, // ex: "Jeu. 15 jan. 2026 — 20h"
|
||||
description: { type: String, default: '' },
|
||||
imageUrl: { type: String, default: '' },
|
||||
imageAlt: { type: String, default: '' },
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.concert-card__grid {
|
||||
display: grid;
|
||||
gap: var(--sp-16);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.concert-card__content {
|
||||
display: grid;
|
||||
gap: var(--sp-6);
|
||||
max-width: 518px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.concert-card__meta {
|
||||
margin-top: calc(var(--sp-4) * -1);
|
||||
}
|
||||
.concert-card__description {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.concert-card__actions {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
126
app/components/concert/ConcertCardList.vue
Normal file
126
app/components/concert/ConcertCardList.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div class="concert-card-list">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.concert-card-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--gap-cards);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// Afficher seulement 1 cards < 600px
|
||||
@media (max-width: 599px) {
|
||||
.concert-card-list > .concert-card:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
.concert-card-list > .concert-card:nth-child(3) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Afficher seulement 2 cards < 900px
|
||||
@media (max-width: 899px) {
|
||||
.concert-card-list > .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:first-child {
|
||||
flex: 2 1 280px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 700px) {
|
||||
.concert-card-list > .concert-card {
|
||||
flex: 1 1 280px;
|
||||
}
|
||||
.concert-card-list > .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:first-child {
|
||||
flex: 2 1 300px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 900px) {
|
||||
.concert-card-list > .concert-card {
|
||||
flex: 1 1 260px;
|
||||
}
|
||||
|
||||
.concert-card-list > .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:first-child {
|
||||
flex: 2 1 340px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1100px) {
|
||||
.concert-card-list > .concert-card {
|
||||
flex: 1 1 300px;
|
||||
}
|
||||
|
||||
.concert-card-list > .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:first-child {
|
||||
flex: 2 1 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1300px) {
|
||||
.concert-card-list > .concert-card {
|
||||
flex: 1 1 340px;
|
||||
}
|
||||
|
||||
.concert-card-list > .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:first-child {
|
||||
flex: 2 1 480px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user