add resources section

assets/css/src/collapsable-section.css

@@ -1,11 +1,24 @@
 .collapsable-sections {
   background-color: var(--color-yellow);
+  --row-padding: var(--padding-vertical) var(--space-m);
+  padding: 0 !important;
+}
+
+.collapsable > * {
+  padding: var(--row-padding);
+  box-sizing: border-box;
+  width: 100%;
+  border-bottom: var(--border);
 }
 
 .collapsable button.toggle {
-  width: 100%;
   display: flex;
   justify-content: space-between;
+  align-items: center;
+}
+
+.collapsable button.toggle.open svg {
+  transform: rotate(180deg);
 }
 
 .collapsable__content {
@@ -17,3 +30,22 @@
   max-height: 100%;
   overflow: hidden;
 }
+
+.collapsable__content {
+  font-size: var(--font-size-s);
+}
+.collapsable__content .production p:not(:last-child) {
+  margin-bottom: 2rem;
+}
+
+.collapsable .resource > * {
+  display: inline-block;
+}
+
+.collapsable .resource > p {
+  margin-right: 2rem;
+}
+
+.collapsable .resource > a {
+  font-weight: bold;
+}

assets/css/src/generic.css

@@ -60,3 +60,35 @@ body.progress * {
 .social-icons a:hover svg {
   transform: scale(1.15);
 }
+
+.close-btn {
+  position: relative;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  justify-self: end;
+}
+
+.close-btn__line,
+.close-btn__line::before {
+  content: "";
+  width: 100%;
+  height: 3px;
+  background-color: #000;
+  position: absolute;
+}
+
+.close-btn__line {
+  transform: rotate(-45deg);
+}
+.close-btn__line::before {
+  transform: rotate(90deg);
+}
+
+.arrow-down {
+  font-size: 2rem;
+  height: 1.5rem;
+  transform: translateY(-0.2rem);
+}

assets/css/src/nav.css

@@ -35,32 +35,6 @@
   row-gap: 6rem;
 }
 
-.expanded-nav .close-btn {
-  position: relative;
-  width: 1.5rem;
-  height: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  justify-self: end;
-}
-
-.expanded-nav .close-btn__line,
-.expanded-nav .close-btn__line::before {
-  content: "";
-  width: 100%;
-  height: 3px;
-  background-color: #000;
-  position: absolute;
-}
-
-.expanded-nav .close-btn__line {
-  transform: rotate(-45deg);
-}
-.expanded-nav .close-btn__line::before {
-  transform: rotate(90deg);
-}
-
 .expanded-nav__category {
   margin-bottom: 1rem;
 }

assets/css/src/vanilla.css

@@ -3,7 +3,7 @@ footer {
   box-sizing: border-box;
   padding: var(--padding-vertical) var(--space-m);
 }
-section:not(:last-child) {
+section:not(:last-child, .collapsable) {
   border-bottom: var(--border);
 }
 

site/blueprints/pages/event.yml

@@ -129,11 +129,11 @@ tabs:
             type: writer
       - width: 1/1
         fields:
-          distributionAndProduction:
+          production:
             label: Distribution et production
             type: layout
             layouts:
-              - "1/4, 1/4, 1/4, 1/4"
+              - "1/3, 1/3, 1/3"
             fieldsets:
               - text
           resources:

site/snippets/collapsable-section.php

@@ -1,11 +1,18 @@
 <section class="collapsable" x-data="{
   open: false
 }">
-  <button class="toggle" @click="open = !open" title="Ouvrir la section">
-    <h4>Prenez vos places !</h4>
-    <?= svg('assets/images/icons/arrow-down.svg') ?>
+  <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>
   </button>
-  <div class="collapsable__content" :class="open ? 'open' : ''">
-    test
+  <div x-show="open" class="collapsable__content" :class="open ? 'open' : ''">
+    <?= $slots->content() ?>
   </div>
 </section>

site/snippets/nav.php

@@ -78,7 +78,6 @@
     </li>
   </ul>
   <button class="close-btn" title="Fermer le menu">
-    <span class="sr-only">Fermer le menu</span>
     <span class="close-btn__line"></span>
   </button>
 </nav>

site/templates/event.php

@@ -19,6 +19,36 @@
 </section>
 
 <section class="collapsable-sections">
-  <?php snippet('collapsable-section') ?>
+  <?php snippet('collapsable-section', ['title' => 'Distribution et production'], slots: true) ?>
+    <?php slot('content') ?>
+      <div class="production">
+        <?php foreach ($page->production()->toLayouts() as $layout): ?>
+        <div class="grid" id="<?= $layout->id() ?>">
+          <?php foreach ($layout->columns() as $column): ?>
+          <div class="grid__item" style="--span:<?= $column->span() ?>">
+            <div class="blocks">
+              <?= $column->blocks() ?>
+            </div>
+          </div>
+          <?php endforeach ?>
+        </div>
+        <?php endforeach ?>
+      </div>
+    <?php endslot() ?>
+  <?php endsnippet() ?>
+
+  <?php if ($page->resources()->isNotEmpty()): ?>  
+  <?php snippet('collapsable-section', ['title' => 'Ressources'], slots: true) ?>
+    <?php slot('content') ?>
+      <div class="resources grid">
+        <?php foreach($page->resources()->toStructure() as $resource): ?>
+            <div class="resource grid__item" style="--span: 4;">
+              <p><?= $resource->name() ?></p><a href="<?= $resource->file()->toFile()->url() ?>" title="Télécharger le fichier" download>télécharger ↓</a>
+            </div>
+        <?php endforeach ?>
+      </div>
+    <?php endslot() ?>
+  <?php endsnippet() ?>
+  <?php endif ?>
 </section>
 <?php snippet('footer') ?>