From ed1d72e555e4961c174e6500b30120ac19736bb8 Mon Sep 17 00:00:00 2001
From: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Mon, 22 Feb 2021 22:46:48 +0100
Subject: Change programs layout to collapsable rows

---
 programmes.html            | 297 +++++++++++++++------------------------------
 stylesheets/programmes.css |  85 +++----------
 2 files changed, 119 insertions(+), 263 deletions(-)

diff --git a/programmes.html b/programmes.html
index bce6afe..13f8c4d 100644
--- a/programmes.html
+++ b/programmes.html
@@ -1,203 +1,104 @@
 <main>
-  <div id="program-list">
-    <h1>Nos programmes</h1>
-    <div class="programs">
-      <div class="program">
-        <a href="#program-a">
-          <p class="summary">Programme A</p>
-        </a>
-      </div>
-      <div class="program">
-        <a href="#program-b">
-          <p class="summary">Programme B</p>
-        </a>
-      </div>
-      <div class="program">
-        <a href="#program-c">
-          <p class="summary">Programme C</p>
-        </a>
-      </div>
-      <div class="program">
-        <a href="#program-d">
-          <p class="summary">Programme D</p>
-        </a>
-      </div>
-    </div>
-  </div>
+  <details class="program">
+    <summary>Programme A</summary>
+    <p>
+      Un programme qui est sacrément bien nommé, parce que son
+      contenu correspond tout à fait à ce qui vient en tête
+      quand on lit son nom. Composé des œuvres suivantes :
+    </p>
+    <ol>
+      <li>
+        <p>La première
+          <span class="duration">6min 11s 101ms</span></p>
+        <p>Composée par quelqu'un à une époque.</p>
+      </li>
+      <li>
+        <p>La seconde
+          <span class="duration">6min 22s 202ms</span></p>
+        <p>Composée par quelqu'un d'autre à une autre époque.</p>
+      </li>
+      <li>
+        <p>La troisième
+          <span class="duration">6min 33s 303ms</span></p>
+        <p>Composée par quelqu'un d'autre à une autre époque.</p>
+      </li>
+    </ol>
+  </details>
 
-  <div id="program-details">
-    <div class="details" id="program-a">
-      <h1>Programme A</h1>
-      <p>
-        Un programme qui est sacrément bien nommé, parce que son
-        contenu correspond tout à fait à ce qui vient en tête
-        quand on lit son nom. Composé des œuvres suivantes :
-      </p>
-      <ol>
-        <li>
-          <details>
-            <summary>
-              La première
-              <span class="duration">6min 11s 101ms</span>
-            </summary>
-            Composée par quelqu'un à une époque.
-          </details>
-        </li>
-        <li>
-          <details>
-            <summary>
-              La seconde
-              <span class="duration">6min 22s 202ms</span>
-            </summary>
-            Composée par quelqu'un d'autre à une autre époque.
-          </details>
-        </li>
-        <li>
-          <details>
-            <summary>
-              La troisième
-              <span class="duration">6min 33s 303ms</span>
-            </summary>
-            Composée par quelqu'un d'autre à une autre époque.
-          </details>
-        </li>
-      </ol>
-    </div>
-    <div class="details" id="program-b">
-      <h1>Programme B</h1>
-      <p>
-        Un programme qui comme son nom l'indique, rend hommage
-        à ce à quoi il fait référence. Composé des œuvres
-        suivantes :
-      </p>
-      <ol>
-        <li>
-          <details>
-            <summary>
-              La première
-              <span class="duration">7min 11s 101ms</span>
-            </summary>
-            Composée par quelqu'un à une époque.
-          </details>
-        </li>
-        <li>
-          <details>
-            <summary>
-              La seconde
-              <span class="duration">7min 22s 202ms</span>
-            </summary>
-            Composée par quelqu'un d'autre à une autre époque.
-          </details>
-        </li>
-        <li>
-          <details>
-            <summary>
-              La troisième
-              <span class="duration">7min 33s 303ms</span>
-            </summary>
-            Composée par quelqu'un d'autre à une autre époque.
-          </details>
-        </li>
-      </ol>
-    </div>
-    <div class="details" id="program-c">
-      <h1>Programme C</h1>
-      <p>
-        Les morceaux de ce programme font référence à ceux à quoi
-        on peut s'attendre en lisant son nom. En voici la liste :
-      </p>
-      <ol>
-        <li>
-          <details>
-            <summary>
-              Le premier
-              <span class="duration">8min 11s 101ms</span>
-            </summary>
-            Composé par quelqu'un à une époque.
-          </details>
-        </li>
-        <li>
-          <details>
-            <summary>
-              Le second
-              <span class="duration">8min 22s 202ms</span>
-            </summary>
-            Composé par quelqu'un d'autre à une autre époque.
-          </details>
-        </li>
-        <li>
-          <details>
-            <summary>
-              Le troisième
-              <span class="duration">8min 33s 303ms</span>
-            </summary>
-            Composée par quelqu'un d'autre à une autre époque.
-          </details>
-        </li>
-      </ol>
-    </div>
-    <div class="details" id="program-d">
-      <h1>Programme D</h1>
-      <p>
-        Un programme dont les morceaux ont été choisis pour des
-        raisons en lien avec sa dénomination. Composé des œuvres
-        suivantes :
-      </p>
-      <ol>
-        <li>
-          <details>
-            <summary>
-              La première
-              <span class="duration">9min 11s 101ms</span>
-            </summary>
-            Composée par quelqu'un à une époque.
-          </details>
-        </li>
-        <li>
-          <details>
-            <summary>
-              La première
-              <span class="duration">9min 22s 202ms</span>
-            </summary>
-            Composée par quelqu'un d'autre à une autre époque.
-          </details>
-        </li>
-        <li>
-          <details>
-            <summary>
-              La troisième
-              <span class="duration">9min 33s 303ms</span>
-            </summary>
-            Composée par quelqu'un d'autre à une autre époque.
-          </details>
-        </li>
-      </ol>
-    </div>
-  </div>
+  <details class="program">
+    <summary>Programme B</summary>
+    <p>
+      Un programme qui comme son nom l'indique, rend hommage
+      à ce à quoi il fait référence. Composé des œuvres
+      suivantes :
+    </p>
+    <ol>
+      <li>
+        <p>La première
+          <span class="duration">7min 11s 101ms</span></p>
+        <p>Composée par quelqu'un à une époque.</p>
+      </li>
+      <li>
+        <p>La seconde
+          <span class="duration">7min 22s 202ms</span></p>
+        <p>Composée par quelqu'un d'autre à une autre époque.</p>
+      </li>
+      <li>
+        <p>La troisième
+          <span class="duration">7min 33s 303ms</span></p>
+        <p>Composée par quelqu'un d'autre à une autre époque.</p>
+      </li>
+    </ol>
+  </details>
 
-  <script>
-    // When JS is enabled, hide concert details by default, and
-    // allow the user to display concerts selectively.
-    var detailsStyle = document.createElement('style');
-    document.head.appendChild(detailsStyle);
-    detailsStyle.sheet.insertRule('.details:not(.active) {display:none}');
-
-    var anchor = document.location.hash;
-    if (anchor.match(/#program-/))
-        document.querySelector(anchor).classList.add('active');
-
-    document.querySelectorAll('.program a').forEach((link) => {
-        link.addEventListener('click', function(click) {
-            if (click.ctrlKey || click.shiftKey)
-                return;
-
-            var prev = document.querySelector('.details.active');
-            if (prev)
-                prev.classList.remove('active');
-            var id = link.attributes['href'].value;
-            document.querySelector(id).classList.add('active');
-        });
-    });
-  </script>
+  <details class="program">
+    <summary>Programme C</summary>
+    <p>
+      Les morceaux de ce programme font référence à ceux à quoi
+      on peut s'attendre en lisant son nom. En voici la liste :
+    </p>
+    <ol>
+      <li>
+        <p>Le premier
+          <span class="duration">8min 11s 101ms</span></p>
+        <p>Composé par quelqu'un à une époque.</p>
+      </li>
+      <li>
+        <p>Le second
+          <span class="duration">8min 22s 202ms</span></p>
+        <p>Composé par quelqu'un d'autre à une autre époque.</p>
+      </li>
+      <li>
+        <p>Le troisième
+          <span class="duration">8min 33s 303ms</span></p>
+        <p>Composée par quelqu'un d'autre à une autre époque.</p>
+      </li>
+    </ol>
+  </details>
 
+  <details class="program">
+    <summary>Programme D</summary>
+    <p>
+      Un programme dont les morceaux ont été choisis pour des
+      raisons en lien avec sa dénomination. Composé des œuvres
+      suivantes :
+    </p>
+    <ol>
+      <li>
+        <p>La première
+          <span class="duration">9min 11s 101ms</span></p>
+        <p>Composée par quelqu'un à une époque.</p>
+      </li>
+      <li>
+        <p>La première
+          <span class="duration">9min 22s 202ms</span></p>
+        <p>Composée par quelqu'un d'autre à une autre époque.</p>
+      </li>
+      <li>
+        <p>La troisième
+          <span class="duration">9min 33s 303ms</span></p>
+        <p>Composée par quelqu'un d'autre à une autre époque.</p>
+      </li>
+    </ol>
+  </details>
 </main>
diff --git a/stylesheets/programmes.css b/stylesheets/programmes.css
index 88591c6..e4b61f2 100644
--- a/stylesheets/programmes.css
+++ b/stylesheets/programmes.css
@@ -1,78 +1,33 @@
-#program-list {
-    max-height: 60vh;
-    overflow: auto;
-    scrollbar-width: thin;
-    scrollbar-color: darkblue #8ad;
-}
-
-#program-list::-webkit-scrollbar {
-    width: 0.25em;
-    height: 0.25em;
-}
-
-#program-list::-webkit-scrollbar-track {
-    background: #8ad;
-}
-
-#program-list::-webkit-scrollbar-thumb {
-    background: darkblue;
-}
-
-.programs {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 1fr));
-    grid-auto-rows: var(--cell-height);
-    grid-gap: 0.8em;
+@media (min-width: 40em) {
+    main {
+        margin: 4em;
+    }
 }
 
-.program {
-    background-color: #099;
+details.program:first-child {
+    border-top: 1px solid black;
 }
 
-.program a {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+details.program {
+    position: relative;
     width: 100%;
-    height: 100%;
-    color: inherit;
-    text-decoration: none;
+    border-bottom: 1px solid black;
 }
 
-.program .summary {
-    font-weight: bold;
+details.program > summary {
+    list-style: none;
 }
-
-details summary .duration {
-    font-family: monospace;
+details.program > summary::-webkit-details-marker {
+    display: none;
 }
 
-@media (min-width: 40em) {
-    main {
-        display: grid;
-        grid-template-columns: 50% 50%;
-    }
-
-    .programs {
-        --cell-width: 10em;
-        --cell-height: 10em;
-    }
-
-    .program a {
-        transition: color 0.5s;
-    }
-    .program:hover a {
-        color: white;
-    }
-
-    .details.active > *:first-child {
-        margin-top: 0;
-    }
+details.program > summary:after {
+    position: absolute;
+    right: 1em;
+    content: '∨';
 }
 
-@media (max-width: 40em) {
-    .programs {
-        --cell-width: 8em;
-        --cell-height: 4em;
-    }
+details.program[open] > summary:after {
+    content: '∧';
+    bottom: 0;
 }
-- 
cgit v1.2.3