On ajout des boutons pour faciliter la navigation sur écrans étroits

src/agenda_culturel/static/js/calendar-buttons.js

@@ -0,0 +1,58 @@
+
+
+
+function displayButtons() {
+    agenda = document.getElementById("calendar");
+    grid   = agenda.querySelector(".grid");
+    buttonLeft = agenda.querySelector(".slider-button.button-left");
+    buttonRight = agenda.querySelector(".slider-button.button-right");
+
+    if (agenda.offsetWidth < grid.offsetWidth) {
+        if (agenda.scrollLeft == 0) 
+            buttonLeft.classList.add("hidden");
+        else
+            buttonLeft.classList.remove("hidden");
+        if (agenda.scrollLeft + agenda.offsetWidth - grid.offsetWidth == 0) 
+            buttonRight.classList.add("hidden");
+        else
+            buttonRight.classList.remove("hidden");
+            
+        
+    }
+    else {
+        buttonLeft.classList.add("hidden");
+        buttonRight.classList.add("hidden");
+    }
+}
+
+
+addEventListener("resize", (event) => { displayButtons();});
+
+
+document.addEventListener("DOMContentLoaded", function(e) {
+    // setup button visibility
+    displayButtons();
+
+    // clic on the left button will move the grid one step to the left
+    document.querySelector('.slider-button.button-left').addEventListener('click', function (event) {
+        agenda = document.getElementById("calendar");
+        grid   = agenda.querySelector(".grid");
+        agenda.scrollLeft -= grid.offsetWidth / 7;
+    }, false);
+    
+    
+    // clic on the right button will move the grid one step to the right
+    document.querySelector('.slider-button.button-right').addEventListener('click', function (event) {
+        agenda = document.getElementById("calendar");
+        grid   = agenda.querySelector(".grid");
+        agenda.scrollLeft += grid.offsetWidth / 7;
+    }, false);
+
+    // when the scroll stops, we adjust button visibility
+    agenda = document.getElementById("calendar");
+    agenda.addEventListener('scrollend', () => {
+        displayButtons();
+    });
+      
+    
+});

src/agenda_culturel/static/style.scss

@@ -10,7 +10,6 @@ $primary-600: #008080;
 $primary-700: #006c6c;
 $enable-responsive-typography: true;
 
-
 // Import Pico
 @import "./pico/pico";
   
@@ -205,6 +204,9 @@ footer [data-tooltip] {
     width: 100%;
     overflow: auto;
     scroll-snap-type: both mandatory;
+    scroll-behavior: smooth;
+    transition-duration: 200ms;
+
 
     .grid {
         grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
@@ -228,6 +230,29 @@ footer [data-tooltip] {
             margin: 0;
         }
     }
+    .slider-button {
+        @extend [role="button"], .secondary;
+        height: 2em;
+        width: 2em;
+        padding: 0;
+        font-size: 150%;
+        border-radius: 1em;
+        line-height: 2em;
+        text-align: center;
+        position: absolute;
+        top: 75vh;
+        z-index: 10;
+        opacity: 0.9;
+    }
+    .slider-button.hidden {
+        display: none;
+    }
+    .slider-button.button-left {
+        left: 1em;
+    }
+    .slider-button.button-right {
+        right: 1em;
+    }
 }
 
 @media only screen and (min-width: 992px) {
@@ -318,10 +343,6 @@ header .title {
     opacity: 0.2;
 }
 
-.day.past:hover,
-.day.other_month:hover {
-    opacity: 1;
-}
 
 @media only screen and (prefers-color-scheme: light) {
     [data-theme="light"],

src/agenda_culturel/templates/agenda_culturel/page-month.html

@@ -14,6 +14,7 @@
     {% css_categories %}
     <script src="{% static 'js/modal.js' %}"></script>
     <script src="{% static 'js/filters.js' %}"></script>
+    <script src="{% static 'js/calendar-buttons.js' %}"></script>
 {% endblock %}
 
 {% block title %}{% block og_title %}
@@ -44,6 +45,7 @@
         </div>
     </header>
     <div id="calendar">
+        <div class="slider-button button-left hidden">{% picto_from_name "arrow-left" %}</div>
         <div class="grid week-in-month">
         {% for d in calendar.calendar_days_list %}
         {% if forloop.counter0|divisibleby:7 %}
@@ -53,6 +55,7 @@
         {% include "agenda_culturel/day-inc.html" with day=d resume=1 fixed_style=calendar.all_in_past filter=filter headers="h3" %}
         {% endfor %}
         </div>
+        <div class="slider-button button-right hidden">{% picto_from_name "arrow-right" %}</div>
     </div>
     <div>
         Légende&nbsp;: {% show_legend filter=filter %}

src/agenda_culturel/templates/agenda_culturel/page-week.html

@@ -13,6 +13,7 @@
     {% css_categories %}
     <script src="{% static 'js/modal.js' %}"></script>
     <script src="{% static 'js/filters.js' %}"></script>
+    <script src="{% static 'js/calendar-buttons.js' %}"></script>
 {% endblock %}
 
 {% block title %}{% block og_title %}Semaine du {{ calendar.calendar_days_list.0.date|date|frdate  }}{% endblock %}{% endblock %}
@@ -40,11 +41,13 @@
         </div>
     </header>
     <div id="calendar">
+        <div class="slider-button button-left hidden">{% picto_from_name "arrow-left" %}</div>
         <div class="grid">
         {% for d in calendar.calendar_days_list %}
         {% include "agenda_culturel/day-inc.html" with day=d fixed_style=calendar.all_in_past filter=filter %}
         {% endfor %}
         </div>
+        <div class="slider-button button-right hidden">{% picto_from_name "arrow-right" %}</div>
     </div>
     <div>
         Légende&nbsp;: {% show_legend filter=filter %}