On ajout des boutons pour faciliter la navigation sur écrans étroits
This commit is contained in:
parent
5a54e34ed6
commit
29e4d74f94
58
src/agenda_culturel/static/js/calendar-buttons.js
Normal file
58
src/agenda_culturel/static/js/calendar-buttons.js
Normal 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();
|
||||
});
|
||||
|
||||
|
||||
});
|
@ -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"],
|
||||
|
@ -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 : {% show_legend filter=filter %}
|
||||
|
@ -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 : {% show_legend filter=filter %}
|
||||
|
Loading…
Reference in New Issue
Block a user