collapsable sections - add transition

assets/css/src/collapsable-section.css

@@ -4,7 +4,7 @@
   padding: 0 !important;
 }
 
-.collapsable:not(.sessions) > *,
+.collapsable > *,
 .collapsable.sessions > button,
 .collapsable .session {
   padding: var(--row-padding);
@@ -24,17 +24,21 @@
 }
 
 .collapsable__content {
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.5s ease-in-out;
+  background-color: #fff;
+  font-size: var(--font-size-s);
+  border-bottom: none;
+
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.4s ease-in-out;
 }
-.collapsable__content {
-  max-height: 100%;
+
+.collapsable__content > * {
   overflow: hidden;
 }
 
-.collapsable__content {
-  font-size: var(--font-size-s);
+.collapsable__content.open {
+  grid-template-rows: 1fr;
 }
 
 .collapsable__content .session {

assets/css/src/footer.css

@@ -4,6 +4,7 @@
   display: grid;
   grid-template-columns: 0.5fr 1fr 1fr 1fr;
   column-gap: calc(var(--space-m));
+  border-top: var(--border);
 }
 
 .main-footer p {

assets/css/src/generic.css

@@ -52,7 +52,7 @@
 .logo {
   font-weight: normal;
   font-size: var(--font-size-h2);
-  transition: font-size 0.1s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: font-size 0.1s var(--curve-quick);
   line-height: 1;
 }
 
@@ -62,7 +62,7 @@
 
 .logo > *:not(:first-child) {
   margin-left: 2.27ch;
-  transition: margin 0.1s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: margin 0.1s var(--curve-quick);
 }
 
 .social-icons {
@@ -105,10 +105,14 @@
   transform: rotate(90deg);
 }
 
-.arrow-down {
+.arrow-right {
   font-size: 2rem;
-  height: 1.5rem;
-  transform: translateY(-0.2rem);
+  transform: rotate(0deg);
+  transition: transform 0.3s var(--curve-quick);
+}
+
+.arrow-right.open {
+  transform: rotate(90deg);
 }
 
 .ticket-link {
@@ -153,3 +157,7 @@
 .strong {
   font-weight: bolder;
 }
+
+.no-padding {
+  padding: 0 !important;
+}

assets/css/src/nav.css

@@ -117,7 +117,7 @@
   height: 1.8ch;
   max-width: 10rem;
   overflow: hidden;
-  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.5s var(--curve-quick);
 }
 
 .main-nav--small .logo > *:not(:first-child) {
@@ -133,7 +133,7 @@
 
 /* Logo hover */
 .main-nav .logo {
-  transition: scale 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: scale 0.5s var(--curve-quick);
 }
 .main-nav .logo:hover {
   scale: 1.035;

assets/css/src/variables.css

@@ -11,6 +11,7 @@
   --font-size-h1: 2.8125rem;
 
   --curve-quick-slow: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  --curve-quick: cubic-bezier(0.23, 1, 0.32, 1);
   --padding-vertical: 2rem;
   --space-m: 4vw;
 

site/snippets/collapsable-section.php

@@ -1,18 +1,11 @@
-<section class="collapsable<?php e(isset($sessions), ' sessions') ?>" x-data="{
+<section class="collapsable" x-data="{
   open: false
 }">
   <button class="toggle" :class="open ? 'open' : ''" @click="open = !open" :title="open ? 'Fermer la section': 'Ouvrir la section'" :aria-expanded="open ? true : false">
     <h4><?= $title ?></h4>
-    <template x-if="!open">
-      <button class="arrow-down">↓</button>
-    </template>
-    <template x-if="open">
-      <button class="close-btn" :title="Fermer le menu">
-        <span class="close-btn__line"></span>
-      </button>
-    </template>
+    <span class="arrow-right" :class="open ? 'open' : ''">→</span>
   </button>
-  <div x-show="open" class="collapsable__content" :class="open ? 'open' : ''">
+  <div class="collapsable__content<?php e(isset($padding) && !$padding, ' no-padding') ?>" :class="open ? 'open' : ''">
     <?= $slots->content() ?>
   </div>
 </section>

site/templates/event.php

@@ -30,7 +30,7 @@
 </section>
 
 <section class="collapsable-sections">
-  <?php snippet('collapsable-section', ['title' => 'Prenez vos places !', 'sessions' => true], slots: true) ?>
+  <?php snippet('collapsable-section', ['title' => 'Prenez vos places !', 'padding' => false], slots: true) ?>
     <?php if ($page->isMapadoEvent() != 'true'): ?>  
       
       <?php slot('content') ?>

site/templates/program.php

@@ -93,7 +93,7 @@
         <section class="collapsable-sections">
           <?php foreach($currentSeasonSessions as $month => $sessions): ?>
             <?php if (count($sessions) > 0): ?>
-              <?php snippet('collapsable-section', ['title' => $month, 'sessions' => true], slots: true) ?>
+              <?php snippet('collapsable-section', ['title' => $month, 'padding' => false], slots: true) ?>
                 <?php slot('content') ?>
                 <ul class="sessions sessions--detailed">
                   <?php
@@ -159,7 +159,7 @@
       <div class="program-content__events">
         <section class="collapsable-sections">
           <?php foreach($previousSeasons as $previousSeason): ?>
-            <?php snippet('collapsable-section', ['title' => $previousSeason->title()], slots: true) ?>
+            <?php snippet('collapsable-section', ['title' => $previousSeason->title(), 'padding' => false], slots: true) ?>
               <?php slot('content') ?>
               <div class="program-content__events">
                 <?php snippet('events-grid', ['events' => $previousSeason->children(), 'columns' => 3])  ?>