Fix timeline controls: inline SVG buttons, scroll-to-edge navigation, disabled states

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

assets/css/src/_global.scss

@@ -26,3 +26,10 @@ p {
   font-stretch: var(--font-stretch-expanded);
   font-weight: var(--font-weight-medium);
 }
+
+button {
+  &:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+}

assets/css/src/sections/_timeline.scss

@@ -1,7 +1,14 @@
 section.timeline {
   background: linear-gradient(180deg, #b5ffda 80%, #33ffb0 100%);
-  padding: calc(var(--space-body) * 2) var(--space-body);
-  overflow-x: scroll;
+  padding: calc(var(--space-body) * 2) var(--space-body) 0;
+
+  .scroll-area {
+    overflow-x: scroll;
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
 
   .time {
     display: flex;
@@ -47,11 +54,15 @@ section.timeline {
     display: flex;
     justify-content: space-between;
     gap: 20vw;
-    margin: auto;
-    margin-top: 3rem;
+    margin: 0 auto;
     width: fit-content;
+    position: sticky;
+    bottom: var(--space-body);
+    padding: calc(var(--space-body) * 2) 0;
 
     button {
+      transition: opacity 0.2s;
+
       &:last-child {
         transform: rotate(180deg);
       }

assets/css/style.css

@@ -103,6 +103,11 @@ p {
   font-weight: var(--font-weight-medium);
 }
 
+button:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
 .title-condensed {
   font-size: var(--font-size-display);
   font-stretch: var(--font-stretch-condensed);
@@ -376,8 +381,14 @@ section.video .text-column {
 
 section.timeline {
   background: linear-gradient(180deg, #b5ffda 80%, #33ffb0 100%);
-  padding: calc(var(--space-body) * 2) var(--space-body);
+  padding: calc(var(--space-body) * 2) var(--space-body) 0;
+}
+section.timeline .scroll-area {
   overflow-x: scroll;
+  scrollbar-width: none;
+}
+section.timeline .scroll-area::-webkit-scrollbar {
+  display: none;
 }
 section.timeline .time {
   display: flex;
@@ -417,10 +428,15 @@ section.timeline .controls {
   display: flex;
   justify-content: space-between;
   gap: 20vw;
-  margin: auto;
-  margin-top: 3rem;
+  margin: 0 auto;
   width: -moz-fit-content;
   width: fit-content;
+  position: sticky;
+  bottom: var(--space-body);
+  padding: calc(var(--space-body) * 2) 0;
+}
+section.timeline .controls button {
+  transition: opacity 0.2s;
 }
 section.timeline .controls button:last-child {
   transform: rotate(180deg);

assets/css/style.css.map

@@ -1 +1 @@
-{"version":3,"sources":["src/_fonts.scss","style.css","src/_reset.scss","src/_variables.scss","src/_global.scss","src/_texts.scss","src/_header.scss","src/_footer.scss","src/sections/_hero.scss","src/sections/_featured-text.scss","src/sections/_two-columns.scss","src/sections/_video.scss","src/sections/_timeline.scss","src/sections/_poster-slider.scss"],"names":[],"mappings":"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","file":"style.css"}
+{"version":3,"sources":["src/_fonts.scss","style.css","src/_reset.scss","src/_variables.scss","src/_global.scss","src/_texts.scss","src/_header.scss","src/_footer.scss","src/sections/_hero.scss","src/sections/_featured-text.scss","src/sections/_two-columns.scss","src/sections/_video.scss","src/sections/_timeline.scss","src/sections/_poster-slider.scss"],"names":[],"mappings":"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","file":"style.css"}

assets/js/timeline.js

@@ -3,11 +3,15 @@ const YEAR_GAP_THRESHOLD = 2;
 const REM_PER_EXTRA_YEAR = 9;
 
 document.addEventListener('DOMContentLoaded', () => {
-  const years = document.querySelectorAll('.timeline .year');
+  const section = document.querySelector('.timeline');
+  const scrollArea = section.querySelector('.scroll-area');
+  const prevBtn = section.querySelector('.timeline-prev');
+  const nextBtn = section.querySelector('.timeline-next');
+  const yearEls = Array.from(section.querySelectorAll('.year'));
 
-  years.forEach((yearEl, index) => {
+  yearEls.forEach((yearEl, index) => {
     const year = parseInt(yearEl.querySelector('h4').textContent);
-    const nextYearEl = years[index + 1];
+    const nextYearEl = yearEls[index + 1];
 
     let minWidth = YEAR_MIN_WIDTH_REM;
     if (nextYearEl) {
@@ -21,4 +25,42 @@ document.addEventListener('DOMContentLoaded', () => {
 
     yearEl.style.minWidth = `${minWidth}rem`;
   });
+
+  const SCROLL_MARGIN = 32;
+
+  function updateButtons() {
+    prevBtn.disabled = scrollArea.scrollLeft <= 0;
+    nextBtn.disabled =
+      Math.ceil(scrollArea.scrollLeft) + scrollArea.clientWidth >=
+      scrollArea.scrollWidth;
+  }
+
+  prevBtn.addEventListener('click', () => {
+    const containerRect = scrollArea.getBoundingClientRect();
+    const leftmost = yearEls.find(
+      (y) => y.getBoundingClientRect().right > containerRect.left
+    );
+    if (!leftmost) return;
+    const rect = leftmost.getBoundingClientRect();
+    scrollArea.scrollTo({
+      left: scrollArea.scrollLeft + rect.right - containerRect.right + SCROLL_MARGIN,
+      behavior: 'smooth',
+    });
+  });
+
+  nextBtn.addEventListener('click', () => {
+    const containerRect = scrollArea.getBoundingClientRect();
+    const rightmost = [...yearEls].reverse().find(
+      (y) => y.getBoundingClientRect().left < containerRect.right
+    );
+    if (!rightmost) return;
+    const rect = rightmost.getBoundingClientRect();
+    scrollArea.scrollTo({
+      left: scrollArea.scrollLeft + rect.left - containerRect.left - SCROLL_MARGIN,
+      behavior: 'smooth',
+    });
+  });
+
+  scrollArea.addEventListener('scroll', updateButtons, { passive: true });
+  requestAnimationFrame(updateButtons);
 });

index.html

@@ -195,41 +195,30 @@
       </section>
 
       <section class="timeline">
+        <div class="scroll-area">
         <ul class="time">
           <li class="year">
             <h4 class="title-condensed">1946</h4>
             <ul class="events">
               <li class="event">
-                <h5 class="text-label">Nathist</h5>
-                <p>
-                  International Committee for Museums and Collections of Natural
-                  History
-                </p>
+                <h5 class="text-label">NATHIST</h5>
+                <p>International Committee for Museums and Collections of Natural History</p>
               </li>
               <li class="event">
-                <h5 class="text-label">Icom design</h5>
+                <h5 class="text-label">ICOM DESIGN</h5>
                 <p>International Committee for Decorative Arts and Design</p>
               </li>
               <li class="event">
                 <h5 class="text-label">ICME</h5>
-                <p>
-                  International Committee for Museums and Collections of
-                  Ethnography
-                </p>
+                <p>International Committee for Museums and Collections of Ethnography</p>
               </li>
               <li class="event">
                 <h5 class="text-label">ICMAH</h5>
-                <p>
-                  International Committee for Museums and Collections of
-                  Archaeology and History
-                </p>
+                <p>International Committee for Museums and Collections of Archaeology and History</p>
               </li>
               <li class="event">
-                <h5 class="text-label">cimuset</h5>
-                <p>
-                  International Committee for Museums and Collections of Science
-                  and Technology
-                </p>
+                <h5 class="text-label">CIMUSET</h5>
+                <p>International Committee for Museums and Collections of Science and Technology</p>
               </li>
             </ul>
           </li>
@@ -239,9 +228,7 @@
             <ul class="events">
               <li class="event">
                 <h5 class="text-label">ICOM ARCHI-TECHS</h5>
-                <p>
-                  International Committee for Architecture and Museum Techniques
-                </p>
+                <p>International Committee for Architecture and Museum Techniques</p>
               </li>
             </ul>
           </li>
@@ -249,7 +236,7 @@
           <li class="year">
             <h4 class="title-condensed">1950</h4>
             <ul class="events">
-              <li>
+              <li class="event">
                 <h5 class="text-label">ICOM DOCUMENTATION</h5>
                 <p>International Committee for Documentation</p>
               </li>
@@ -257,13 +244,274 @@
           </li>
 
           <li class="year">
-            <h4 class="title-condensed">1956</h4>
+            <h4 class="title-condensed">1954</h4>
+            <ul class="events">
+              <li class="event">
+                <h5 class="text-label">ICOM ARMS & MILITARY</h5>
+                <p>International Committee for Museums and Collections of Arms and Military History</p>
+              </li>
+            </ul>
+          </li>
+
+          <li class="year">
+            <h4 class="title-condensed">1959</h4>
+            <ul class="events">
+              <li class="event">
+                <h5 class="text-label">GLASS</h5>
+                <p>International Committee for Museums and Collections of Glass</p>
+              </li>
+            </ul>
+          </li>
+
+          <li class="year">
+            <h4 class="title-condensed">1960</h4>
+            <ul class="events">
+              <li class="event">
+                <h5 class="text-label">ICOM MUSIC</h5>
+                <p>International Committee for Museums and Collections of Instruments and Music</p>
+              </li>
+            </ul>
+          </li>
+
+          <li class="year">
+            <h4 class="title-condensed">1962</h4>
+            <ul class="events">
+              <li class="event">
+                <h5 class="text-label">COSTUME</h5>
+                <p>International Committee for Museums and Collections of Costume, Fashion and Textiles</p>
+              </li>
+              <li class="event">
+                <h5 class="text-label">ICR</h5>
+                <p>International Committee for Regional Museums</p>
+              </li>
+              <li class="event">
+                <h5 class="text-label">CIMAM (-2015)</h5>
+                <p>International Committee for Museums of Modern Art</p>
+              </li>
+            </ul>
+          </li>
+
+          <li class="year">
+            <h4 class="title-condensed">1965</h4>
+            <ul class="events">
+              <li class="event">
+                <h5 class="text-label">CECA</h5>
+                <p>International Committee for Education and Cultural Action</p>
+              </li>
+            </ul>
+          </li>
+
+          <li class="year">
+            <h4 class="title-condensed">1967</h4>
+            <ul class="events">
+              <li class="event">
+                <h5 class="text-label">ICOM CC</h5>
+                <p>International Committee for Conservation</p>
+              </li>
+            </ul>
+          </li>
+
+          <li class="year">
+            <h4 class="title-condensed">1968</h4>
+            <ul class="events">
+              <li class="event">
+                <h5 class="text-label">ICTOP</h5>
+                <p>International Committee for the Training of Personnel</p>
+              </li>
+            </ul>
+          </li>
+
+          <li class="year">
+            <h4 class="title-condensed">1974</h4>
+            <ul class="events">
+              <li class="event">
+                <h5 class="text-label">ICOM SECURITY</h5>
+                <p>International Committee for Museum Security</p>
+              </li>
+            </ul>
+          </li>
+
+          <li class="year">
+            <h4 class="title-condensed">1976</h4>
+            <ul class="events">
+              <li class="event">
+                <h5 class="text-label">ICOM COMMS</h5>
+                <p>International Committee for Communications, Marketing, and Audience Engagements</p>
+              </li>
+            </ul>
+          </li>
+
+          <li class="year">
+            <h4 class="title-condensed">1977</h4>
+            <ul class="events">
+              <li class="event">
+                <h5 class="text-label">ICLCM</h5>
+                <p>International Committee for Literary and Composers' Museums</p>
+              </li>
+              <li class="event">
+                <h5 class="text-label">ICOFOM</h5>
+                <p>International Committee for Museology</p>
+              </li>
+              <li class="event">
+                <h5 class="text-label">CIPEG</h5>
+                <p>International Committee for Egyptology</p>
+              </li>
+            </ul>
+          </li>
+
+          <li class="year">
+            <h4 class="title-condensed">1980</h4>
+            <ul class="events">
+              <li class="event">
+                <h5 class="text-label">ICFA</h5>
+                <p>International Committee for Museums and Collections of Fine Arts</p>
+              </li>
+            </ul>
+          </li>
+
+          <li class="year">
+            <h4 class="title-condensed">1982</h4>
+            <ul class="events">
+              <li class="event">
+                <h5 class="text-label">ICOM EXHIBITIONS</h5>
+                <p>International Committee for Exhibition Exchange</p>
+              </li>
+            </ul>
+          </li>
+
+          <li class="year">
+            <h4 class="title-condensed">1989</h4>
+            <ul class="events">
+              <li class="event">
+                <h5 class="text-label">INTERCOM</h5>
+                <p>International Committee for Museum Management</p>
+              </li>
+            </ul>
+          </li>
+
+          <li class="year">
+            <h4 class="title-condensed">1990</h4>
+            <ul class="events">
+              <li class="event">
+                <h5 class="text-label">AVICOM</h5>
+                <p>International Committee for Audiovisual, New Technologies and Social Media</p>
+              </li>
+            </ul>
+          </li>
+
+          <li class="year">
+            <h4 class="title-condensed">1994</h4>
+            <ul class="events">
+              <li class="event">
+                <h5 class="text-label">ICOMON</h5>
+                <p>International Committee for Money and Banking Museums</p>
+              </li>
+            </ul>
+          </li>
+
+          <li class="year">
+            <h4 class="title-condensed">1998</h4>
+            <ul class="events">
+              <li class="event">
+                <h5 class="text-label">DEMHIST</h5>
+                <p>International Committee for Historic House Museums</p>
+              </li>
+            </ul>
+          </li>
+
+          <li class="year">
+            <h4 class="title-condensed">2000</h4>
+            <ul class="events">
+              <li class="event">
+                <h5 class="text-label">UMAC</h5>
+                <p>International Committee for University Museums and Collections</p>
+              </li>
+            </ul>
+          </li>
+
+          <li class="year">
+            <h4 class="title-condensed">2001</h4>
+            <ul class="events">
+              <li class="event">
+                <h5 class="text-label">ICMEMOHRI</h5>
+                <p>International Committee of Memorial and Human Rights Museums</p>
+              </li>
+            </ul>
+          </li>
+
+          <li class="year">
+            <h4 class="title-condensed">2004</h4>
+            <ul class="events">
+              <li class="event">
+                <h5 class="text-label">ICOM CITIES</h5>
+                <p>International Committee for the Collections and Activities of Museums of Cities</p>
+              </li>
+            </ul>
+          </li>
+
+          <li class="year">
+            <h4 class="title-condensed">2010</h4>
+            <ul class="events">
+              <li class="event">
+                <h5 class="text-label">COMCOL</h5>
+                <p>International Committee for Collecting</p>
+              </li>
+            </ul>
+          </li>
+
+          <li class="year">
+            <h4 class="title-condensed">2019</h4>
+            <ul class="events">
+              <li class="event">
+                <h5 class="text-label">DRMC</h5>
+                <p>International Committee on Disaster Resilient Museums</p>
+              </li>
+              <li class="event">
+                <h5 class="text-label">ICEthics</h5>
+                <p>International Committee on Ethical Dilemmas</p>
+              </li>
+            </ul>
+          </li>
+
+          <li class="year">
+            <h4 class="title-condensed">2023</h4>
+            <ul class="events">
+              <li class="event">
+                <h5 class="text-label">ICOM SUSTAIN</h5>
+                <p>International Committee on Museums and Sustainable Development</p>
+              </li>
+              <li class="event">
+                <h5 class="text-label">SOMUS</h5>
+                <p>International Committee for Social Museology</p>
+              </li>
+            </ul>
+          </li>
+
+          <li class="year">
+            <h4 class="title-condensed">2024</h4>
+            <ul class="events">
+              <li class="event">
+                <h5 class="text-label">ICOM STORAGE</h5>
+                <p>International Committee on Collections in Storage</p>
+              </li>
+            </ul>
           </li>
         </ul>
+        </div>
         <div class="controls">
-          <button><img src="assets/images/slider-button.svg" alt="" /></button>
+          <button class="timeline-prev" aria-label="Précédent">
+            <svg aria-hidden="true" width="46" height="43" viewBox="0 0 46 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <rect x="0.5" y="0.5" width="44.5294" height="42" rx="21" stroke="currentColor"/>
+              <path d="M28.0648 10.0752L22.7648 21.5252L28.0648 32.9252H26.4148L16.4648 21.5252L26.4148 10.0752H28.0648Z" fill="currentColor"/>
+            </svg>
+          </button>
           <h3>Timeline</h3>
-          <button><img src="assets/images/slider-button.svg" alt="" /></button>
+          <button class="timeline-next" aria-label="Suivant">
+            <svg aria-hidden="true" width="46" height="43" viewBox="0 0 46 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <rect x="0.5" y="0.5" width="44.5294" height="42" rx="21" stroke="currentColor"/>
+              <path d="M28.0648 10.0752L22.7648 21.5252L28.0648 32.9252H26.4148L16.4648 21.5252L26.4148 10.0752H28.0648Z" fill="currentColor"/>
+            </svg>
+          </button>
         </div>
       </section>