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

This commit is contained in:
Jean-Marie Favreau 2024-08-31 10:48:04 +02:00
parent 5a54e34ed6
commit 29e4d74f94
4 changed files with 90 additions and 5 deletions

View File

@ -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();
});
});

View File

@ -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"],

View File

@ -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 %}

View File

@ -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 %}