Concerts

app/components/concert/ConcertCardList.vue

@@ -1,30 +1,47 @@
+<!-- app/components/concert/ConcertCardList.vue -->
 <template>
-  <div class="concert-card-list">
+  <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:nth-child(2) {
+    .concert-card-list.concert-card-list--limit-cards > .concert-card:nth-child(2) {
       display: none;
     }
-    .concert-card-list > .concert-card:nth-child(3) {
+    .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:nth-child(3) {
+    .concert-card-list.concert-card-list--limit-cards > .concert-card:nth-child(3) {
       display: none;
     }
   }
@@ -40,7 +57,7 @@
     .concert-card-list > .concert-card {
       flex: 1 1 260px;
     }
-    .concert-card-list > .concert-card:first-child {
+    .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
       flex: 2 1 280px;
     }
   }
@@ -48,7 +65,7 @@
     .concert-card-list > .concert-card {
       flex: 1 1 280px;
     }
-    .concert-card-list > .concert-card:first-child {
+    .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
       flex: 2 1 300px;
     }
   }
@@ -56,7 +73,7 @@
     .concert-card-list > .concert-card {
       flex: 1 1 280px;
     }
-    .concert-card-list > .concert-card:first-child {
+    .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
       flex: 2 1 300px;
     }
   }
@@ -65,7 +82,7 @@
       flex: 1 1 260px;
     }
 
-    .concert-card-list > .concert-card:first-child {
+    .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
       flex: 2 1 300px;
     }
   }
@@ -75,7 +92,7 @@
       flex: 1 1 280px;
     }
 
-    .concert-card-list > .concert-card:first-child {
+    .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
       flex: 2 1 340px;
     }
   }
@@ -85,7 +102,7 @@
       flex: 1 1 300px;
     }
 
-    .concert-card-list > .concert-card:first-child {
+    .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
       flex: 2 1 380px;
     }
   }
@@ -95,7 +112,7 @@
       flex: 1 1 320px;
     }
 
-    .concert-card-list > .concert-card:first-child {
+    .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
       flex: 2 1 400px;
     }
   }
@@ -105,7 +122,7 @@
       flex: 1 1 340px;
     }
 
-    .concert-card-list > .concert-card:first-child {
+    .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
       flex: 2 1 440px;
     }
   }
@@ -116,7 +133,7 @@
       flex: 1 1 360px;
     }
     //règle spécifique après la règle générale
-    .concert-card-list > .concert-card:first-child {
+    .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
       flex: 2 1 480px;
     }
   }