Révision de la navigation

This commit is contained in:
Jean-Marie Favreau 2025-03-09 20:11:17 +01:00
parent 39d2beaf3c
commit 3d4ff55fa7
7 changed files with 232 additions and 265 deletions

View File

@ -4,28 +4,23 @@
function displayButtons() { function displayButtons() {
delta = 60 delta = 60
agenda = document.getElementById("calendar"); agenda = document.getElementById("calendar");
navigation = document.getElementById("navigation");
grid = agenda.querySelector(".grid"); grid = agenda.querySelector(".grid");
buttonLeft = agenda.querySelector(".slider-button.slider-button-inside.button-left"); buttonLeft = navigation.querySelector(".slider-button-inside.button-left");
buttonRight = agenda.querySelector(".slider-button.slider-button-inside.button-right"); buttonRight = navigation.querySelector(".slider-button-inside.button-right");
buttonLeftPage = agenda.querySelector(".slider-button.slider-button-page.button-left");
buttonRightPage = agenda.querySelector(".slider-button.slider-button-page.button-right");
if (agenda.offsetWidth < grid.offsetWidth) { if (agenda.offsetWidth < grid.offsetWidth) {
if (agenda.scrollLeft < delta) { if (agenda.scrollLeft < delta) {
buttonLeft.classList.add("hidden"); buttonLeft.classList.add("hidden");
buttonLeftPage.classList.remove("hidden");
} }
else { else {
buttonLeft.classList.remove("hidden"); buttonLeft.classList.remove("hidden");
buttonLeftPage.classList.add("hidden");
} }
if (agenda.scrollLeft + agenda.offsetWidth - grid.offsetWidth >= -2) { if (agenda.scrollLeft + agenda.offsetWidth - grid.offsetWidth >= -2) {
buttonRight.classList.add("hidden"); buttonRight.classList.add("hidden");
buttonRightPage.classList.remove("hidden");
} }
else { else {
buttonRight.classList.remove("hidden"); buttonRight.classList.remove("hidden");
buttonRightPage.classList.add("hidden");
} }
@ -33,8 +28,6 @@ function displayButtons() {
else { else {
buttonLeft.classList.add("hidden"); buttonLeft.classList.add("hidden");
buttonRight.classList.add("hidden"); buttonRight.classList.add("hidden");
buttonLeftPage.classList.add("hidden");
buttonRightPage.classList.add("hidden");
} }
} }
@ -47,7 +40,7 @@ document.addEventListener("DOMContentLoaded", function(e) {
displayButtons(); displayButtons();
// clic on the left button will move the grid one step to the left // clic on the left button will move the grid one step to the left
document.querySelector('.slider-button.button-left').addEventListener('click', function (event) { document.querySelector('.slider-button-inside.button-left').addEventListener('click', function (event) {
agenda = document.getElementById("calendar"); agenda = document.getElementById("calendar");
grid = agenda.querySelector(".grid"); grid = agenda.querySelector(".grid");
agenda.scrollLeft -= grid.offsetWidth / 7; agenda.scrollLeft -= grid.offsetWidth / 7;
@ -55,7 +48,7 @@ document.addEventListener("DOMContentLoaded", function(e) {
// clic on the right button will move the grid one step to the right // clic on the right button will move the grid one step to the right
document.querySelector('.slider-button.button-right').addEventListener('click', function (event) { document.querySelector('.slider-button-inside.button-right').addEventListener('click', function (event) {
agenda = document.getElementById("calendar"); agenda = document.getElementById("calendar");
grid = agenda.querySelector(".grid"); grid = agenda.querySelector(".grid");
agenda.scrollLeft += grid.offsetWidth / 7; agenda.scrollLeft += grid.offsetWidth / 7;

View File

@ -371,32 +371,6 @@ footer [data-tooltip] {
margin: 0; margin: 0;
} }
} }
.slider-button {
@extend [role="button"], .secondary;
height: 1.8em;
width: 1.8em;
padding: 0;
font-size: 150%;
border-radius: .9em;
line-height: 1.8em;
text-align: center;
position: fixed;
top: 65vh;
z-index: 10;
opacity: 0.9;
a {
color: var(--primary-inverse);
}
}
.slider-button.hidden {
display: none;
}
.slider-button.button-left {
left: .4em;
}
.slider-button.button-right {
right: .4em;
}
} }
@media only screen and (min-width: 600px) { @media only screen and (min-width: 600px) {
@ -482,31 +456,74 @@ header .title {
font-size: 150%; font-size: 150%;
} }
.navigation { #navigation {
margin: 1em 0; z-index: 10;
height: 2.5em; position: sticky;
@media only screen and (min-width: 992px) { top: 0;
margin: -3.4em 0 3.4em 0; display: grid;
height: fit-content;
}
padding: 0; grid-template-columns: fit-content(6em) 3fr fit-content(6em);
div {
width: fit-content; .title {
float: left; grid-column: 1/4;
@media only screen and (min-width: 992px) { grid-row: 1/2;
a { text-align: center;
width: 10em; }
} .left {
grid-column: 1/2;
grid-row: 2/3;
}
.right {
grid-column: 3/4;
grid-row: 2/3;
}
hgroup {
margin: 0;
}
@media only screen and (min-width: 450px) {
.title {
grid-column: 2/3;
grid-row: 1/2;
}
.left {
grid-column: 1/2;
grid-row: 1/2;
}
.right {
grid-column: 3/4;
grid-row: 1/2;
} }
} }
div.right {
float: right;
}
.slider-button {
@extend [role="button"];
height: 1.8em;
width: 1.8em;
padding: 0;
margin: 0;
font-size: 150%;
border-radius: .9em;
line-height: 1.8em;
text-align: center;
a {
color: var(--primary-inverse);
}
}
.slider-button.hidden {
display: none;
}
.slider-button.button-left {
left: .3em;
}
.slider-button.button-right {
right: .3em;
}
} }
.day.today>header, .day.today>header,
.day.today { .day.today {
background: rgba(255, 0, 76, 0.1); background: rgba(255, 0, 76, 0.1);
@ -1526,15 +1543,32 @@ img.preview {
scroll-margin-top: 7em; scroll-margin-top: 7em;
} }
.a-venir {
#navigation {
height: 4.5em;
z-index: 11;
padding-top: 1em;
.title.deuxlignes {
margin-top: -0.55em;
}
}
.day-interval>.sticky {
position: sticky;
top: 4.5em;
z-index: 10;
hgroup {
margin: 0;
padding: 0;
}
}
}
.a-venir, .place, .tag, .tag-descriptions, .organisation { .a-venir, .place, .tag, .tag-descriptions, .organisation {
article#filters { article#filters {
margin: 2em 0; margin: 2em 0;
} }
.day-interval>.sticky {
position: sticky;
top: 0;
z-index: 10;
}
@media only screen and (min-width: 600px) { @media only screen and (min-width: 600px) {
.single-event, .tag-description { .single-event, .tag-description {

View File

@ -25,62 +25,52 @@
{% cache cache_timeout month user.is_authenticated calendar.firstdate category filter.get_url %} {% cache cache_timeout month user.is_authenticated calendar.firstdate category filter.get_url %}
{% include "agenda_culturel/filter-inc.html" with filter=filter noarticle=0 %} {% include "agenda_culturel/filter-inc.html" with filter=filter noarticle=0 %}
<article> <article>
<header> <header id="navigation">
<div class="title small"> <div class="title small">
<h1> <h1>
{% if category %}{{ category.name }} en{% endif %} {% if category %}{{ category.name }} en{% endif %}
{{ calendar.firstdate | date:"F o" }} {{ calendar.firstdate | date:"F o" }}
{% if filter.has_location %}à {{ filter.get_position }}{% endif %} {% if filter.has_location %}à {{ filter.get_position }}{% endif %}
<a aria-label="Quand"
href="#quand-popup"
data-target="quand-popup"
onClick="toggleModal(event)">{% picto_from_name "calendar" %}</a>
</h1> </h1>
</div> </div>
<div class="navigation"> <div class="left">
<div> {% if calendar.firstdate|shift_day:-1|not_before_first %}
{% if calendar.firstdate|shift_day:-1|not_before_first %} {% if calendar.lastdate|not_after_last %}
{% if calendar.lastdate|not_after_last %} {% if category %}
{% if category %} <div class="slider-button slider-button-page button-left">
<a role="button" <a href="{% url 'month_view_category' category.slug calendar.previous_month.year calendar.previous_month.month %}?{{ filter.get_url }}">{% picto_from_name "chevrons-left" %}</a>
href="{% url 'month_view_category' category.slug calendar.previous_month.year calendar.previous_month.month %}?{{ filter.get_url }}"> </div>
{% picto_from_name "chevron-left" %} précédent</a> {% else %}
{% else %} <div class="slider-button slider-button-page button-left">
<a role="button" <a href="{% url 'month_view' calendar.previous_month.year calendar.previous_month.month %}?{{ filter.get_url }}">{% picto_from_name "chevrons-left" %}</a>
href="{% url 'month_view' calendar.previous_month.year calendar.previous_month.month %}?{{ filter.get_url }}"> </div>
{% picto_from_name "chevron-left" %} précédent</a> {% endif %}
{% endif %}
</div>
{% endif %} {% endif %}
{% endif %} {% endif %}
<div class="slider-button slider-button-inside button-left hidden">{% picto_from_name "arrow-left" %}</div>
</div>
<div class="right">
<div class="slider-button slider-button-inside button-right hidden">{% picto_from_name "arrow-right" %}</div>
{% if calendar.lastdate|shift_day:+1|not_after_last %} {% if calendar.lastdate|shift_day:+1|not_after_last %}
{% if calendar.lastdate|not_before_first %} {% if calendar.lastdate|not_before_first %}
<div class="right"> {% if category %}
{% if category %} <div class="slider-button slider-button-page button-right">
<a role="button" <a href="{% url 'month_view_category' category.slug calendar.next_month.year calendar.next_month.month %}?{{ filter.get_url }}">{% picto_from_name "chevrons-right" %}</a>
href="{% url 'month_view_category' category.slug calendar.next_month.year calendar.next_month.month %}?{{ filter.get_url }}">suivant </div>
{% picto_from_name "chevron-right" %}</a> {% else %}
{% else %} <div class="slider-button slider-button-page button-right">
<a role="button" <a href="{% url 'month_view' calendar.next_month.year calendar.next_month.month %}?{{ filter.get_url }}">{% picto_from_name "chevrons-right" %}</a>
href="{% url 'month_view' calendar.next_month.year calendar.next_month.month %}?{{ filter.get_url }}">suivant </div>
{% picto_from_name "chevron-right" %}</a> {% endif %}
{% endif %}
</div>
{% endif %} {% endif %}
{% endif %} {% endif %}
</div> </div>
</header> </header>
<div id="calendar"> <div id="calendar">
<div class="slider-button slider-button-inside button-left hidden">{% picto_from_name "arrow-left" %}</div>
{% if calendar.firstdate|shift_day:-1|not_before_first %}
{% if calendar.lastdate|not_after_last %}
{% if category %}
<div class="slider-button slider-button-page button-left hidden">
<a href="{% url 'month_view_category' category.slug calendar.previous_month.year calendar.previous_month.month %}?{{ filter.get_url }}">{% picto_from_name "chevrons-left" %}</a>
</div>
{% else %}
<div class="slider-button slider-button-page button-left hidden">
<a href="{% url 'month_view' calendar.previous_month.year calendar.previous_month.month %}?{{ filter.get_url }}">{% picto_from_name "chevrons-left" %}</a>
</div>
{% endif %}
{% endif %}
{% endif %}
<div class="grid week-in-month"> <div class="grid week-in-month">
{% for day in calendar.calendar_days_list %} {% for day in calendar.calendar_days_list %}
{% if forloop.counter0|divisibleby:7 %} {% if forloop.counter0|divisibleby:7 %}
@ -180,20 +170,6 @@
{% endwith %} {% endwith %}
{% endfor %} {% endfor %}
</div> </div>
<div class="slider-button slider-button-inside button-right hidden">{% picto_from_name "arrow-right" %}</div>
{% if calendar.lastdate|shift_day:+1|not_after_last %}
{% if calendar.lastdate|not_before_first %}
{% if category %}
<div class="slider-button slider-button-page button-right hidden">
<a href="{% url 'month_view_category' category.slug calendar.next_month.year calendar.next_month.month %}?{{ filter.get_url }}">{% picto_from_name "chevrons-right" %}</a>
</div>
{% else %}
<div class="slider-button slider-button-page button-right hidden">
<a href="{% url 'month_view' calendar.next_month.year calendar.next_month.month %}?{{ filter.get_url }}">{% picto_from_name "chevrons-right" %}</a>
</div>
{% endif %}
{% endif %}
{% endif %}
</div> </div>
{% cache 90000 footer_month user.is_authenticated calendar.firstdate category filter.get_url %} {% cache 90000 footer_month user.is_authenticated calendar.firstdate category filter.get_url %}
<footer> <footer>

View File

@ -42,94 +42,94 @@
{% with cache_timeout=user.is_authenticated|yesno:"30,6000" %} {% with cache_timeout=user.is_authenticated|yesno:"30,6000" %}
{% cache cache_timeout upcoming user.is_authenticated calendar.firstdate filter.get_url category calendar.nb_days %} {% cache cache_timeout upcoming user.is_authenticated calendar.firstdate filter.get_url category calendar.nb_days %}
{% include "agenda_culturel/filter-inc.html" with filter=filter noarticle=1 %} {% include "agenda_culturel/filter-inc.html" with filter=filter noarticle=1 %}
<footer> </article>
<article id="navigation">
<div class="left">
{% if category %} {% if category %}
<a href="{% if calendar.nb_days == 1 %}{% url 'day_view_category' category.slug date_pred.year date_pred.month date_pred.day %}{% else %}{% url 'a_venir_jour_category' category.slug date_pred.year date_pred.month date_pred.day %}{% endif %}?{{ filter.get_url }}" <a href="{% if calendar.nb_days == 1 %}{% url 'day_view_category' category.slug date_pred.year date_pred.month date_pred.day %}{% else %}{% url 'a_venir_jour_category' category.slug date_pred.year date_pred.month date_pred.day %}{% endif %}?{{ filter.get_url }}"
aria-label="dates précédentes" aria-label="dates précédentes"
role="button"> class="slider-button slider-button-page button-left"
{% picto_from_name "chevrons-left" %} role="button">{% picto_from_name "chevrons-left" %}</a>
{% if calendar.nb_days == 1 %}{{ date_pred }}{% endif %}
</a>
{% else %} {% else %}
<a href="{% if calendar.nb_days == 1 %}{% url 'day_view' date_pred.year date_pred.month date_pred.day %}{% else %}{% url 'a_venir_jour' date_pred.year date_pred.month date_pred.day %}{% endif %}?{{ filter.get_url }}" <a href="{% if calendar.nb_days == 1 %}{% url 'day_view' date_pred.year date_pred.month date_pred.day %}{% else %}{% url 'a_venir_jour' date_pred.year date_pred.month date_pred.day %}{% endif %}?{{ filter.get_url }}"
aria-label="dates précédentes" aria-label="dates précédentes"
role="button"> class="slider-button slider-button-page button-left"
{% picto_from_name "chevrons-left" %} role="button">{% picto_from_name "chevrons-left" %}</a>
{% if calendar.nb_days == 1 %}{{ date_pred }}{% endif %}
</a>
{% endif %} {% endif %}
{% if calendar.nb_days > 1 %} </div>
{% for cd in calendar.calendar_days_list %} {% with calendar.calendar_days_list.0 as cd %}
<a href="#{{ cd.id }}" role="button"> <div class="title small {% if cd.is_today or cd.is_tomorrow %}deuxlignes{% endif %}">
<hgroup>
<h2>
{% if cd.is_today %} {% if cd.is_today %}
Aujourd'hui Aujourd'hui
{% else %} {% else %}
{% if cd.is_tomorrow %} {% if cd.is_tomorrow %}
Demain Demain
{% else %} {% else %}
{{ cd.date| date:"l j b"|capfirst }} {{ cd.date| date:"l j F"|frdate|capfirst }}
{% endif %} {% endif %}
{% endif %} {% endif %}
{% picto_from_name "chevrons-down" %}</a> {% if calendar.nb_days > 1 %}et suivants{% endif %}
{% endfor %} <a aria-label="Quand"
{% else %} href="#quand-popup"
{% if category %} data-target="quand-popup"
<a role="button" onClick="toggleModal(event)">{% picto_from_name "calendar" %}</a>
href="{% url 'week_view_category' category.slug calendar.firstdate.year calendar.firstdate|week %}?{{ filter.get_url }}">toute la semaine {% picto_from_name "chevrons-up" %}</a> </h2>
{% else %} <h3>
<a role="button" {% if cd.is_today or cd.is_tomorrow %}{{ cd.date|date:"l j F Y"|frdate }}{% endif %}
href="{% url 'week_view' calendar.firstdate.year calendar.firstdate|week %}?{{ filter.get_url }}">toute la semaine {% picto_from_name "chevrons-up" %}</a> </h3>
{% endif %} </hgroup>
{% endif %} {% endwith %}
</div>
<div class="right">
{% if category %} {% if category %}
<a href="{% if calendar.nb_days == 1 %}{% url 'day_view_category' category.slug date_next.year date_next.month date_next.day %}{% else %}{% url 'a_venir_jour_category' category.slug date_next.year date_next.month date_next.day %}{% endif %}?{{ filter.get_url }}" <a href="{% if calendar.nb_days == 1 %}{% url 'day_view_category' category.slug date_next.year date_next.month date_next.day %}{% else %}{% url 'a_venir_jour_category' category.slug date_next.year date_next.month date_next.day %}{% endif %}?{{ filter.get_url }}"
class="slider-button slider-button-page button-right"
aria-label="dates suivantes" aria-label="dates suivantes"
role="button"> role="button">{% picto_from_name "chevrons-right" %}</a>
{% if calendar.nb_days == 1 %}{{ date_next }}{% endif %}
{% picto_from_name "chevrons-right" %}
</a>
{% else %} {% else %}
<a href="{% if calendar.nb_days == 1 %}{% url 'day_view' date_next.year date_next.month date_next.day %}{% else %}{% url 'a_venir_jour' date_next.year date_next.month date_next.day %}{% endif %}?{{ filter.get_url }}" <a href="{% if calendar.nb_days == 1 %}{% url 'day_view' date_next.year date_next.month date_next.day %}{% else %}{% url 'a_venir_jour' date_next.year date_next.month date_next.day %}{% endif %}?{{ filter.get_url }}"
class="slider-button slider-button-page button-right"
aria-label="dates suivantes" aria-label="dates suivantes"
role="button"> role="button">{% picto_from_name "chevrons-right" %}</a>
{% if calendar.nb_days == 1 %}{{ date_next }}{% endif %}
{% picto_from_name "chevrons-right" %}
</a>
{% endif %} {% endif %}
</footer> </div>
</article> </article>
{% for cd in calendar.calendar_days_list %} {% for cd in calendar.calendar_days_list %}
<article class="day-interval" id="{{ cd.id }}"> <article class="day-interval" id="{{ cd.id }}">
<header class="sticky"> {% if calendar.nb_days > 1 %}
<a role="button" <header class="sticky">
class="secondary slide-buttons" <a role="button"
href="#index-avenir" class="secondary slide-buttons"
data-placement="left" href="#index-avenir"
data-tooltip="Retour en haut">{% picto_from_name "chevrons-up" %}</a> data-placement="left"
{% if cd.is_today %} data-tooltip="Retour en haut">{% picto_from_name "chevrons-up" %}</a>
<hgroup> {% if cd.is_today %}
{% with cd.events|length as nb_events %}
<h2>
Aujourd'hui <a href="#{{ cd.id }}" role="button" class="badge">{{ nb_events }} événement{{ nb_events|pluralize }} {% picto_from_name "calendar" %}</a>
</h2>
{% endwith %}
<h3>{{ cd.date|date:"l j F Y"|frdate }}</h3>
</hgroup>
{% else %}
{% if cd.is_tomorrow %}
<hgroup> <hgroup>
<h2> {% with cd.events|length as nb_events %}
Demain <a href="#{{ cd.id }}" role="button" class="badge">{{ cd.events|length }} {% picto_from_name "calendar" %}</a> <h2>
</h2> Aujourd'hui <a href="#{{ cd.id }}" role="button" class="badge">{{ nb_events }} événement{{ nb_events|pluralize }} {% picto_from_name "calendar" %}</a>
</h2>
{% endwith %}
<h3>{{ cd.date|date:"l j F Y"|frdate }}</h3> <h3>{{ cd.date|date:"l j F Y"|frdate }}</h3>
</hgroup> </hgroup>
{% else %} {% else %}
<h2> {% if cd.is_tomorrow %}
{{ cd.date|date:"l j F Y"|frdate |capfirst }} <a href="#{{ cd.id }}" role="button" class="badge">{{ cd.events|length }} {% picto_from_name "calendar" %}</a> <hgroup>
</h2> <h2>
Demain <a href="#{{ cd.id }}" role="button" class="badge">{{ cd.events|length }} {% picto_from_name "calendar" %}</a>
</h2>
<h3>{{ cd.date|date:"l j F Y"|frdate }}</h3>
</hgroup>
{% else %}
<h2>
{{ cd.date|date:"l j F Y"|frdate |capfirst }} <a href="#{{ cd.id }}" role="button" class="badge">{{ cd.events|length }} {% picto_from_name "calendar" %}</a>
</h2>
{% endif %}
{% endif %} {% endif %}
{% endif %} </header>
</header> {% endif %}
{% if cd.events|length > 0 %} {% if cd.events|length > 0 %}
<div class="resume"> <div class="resume">
{% for ti in cd.get_time_intervals %} {% for ti in cd.get_time_intervals %}
@ -198,21 +198,6 @@
<header> <header>
<h2>Voir aussi</h2> <h2>Voir aussi</h2>
</header> </header>
{% if category %}
<a href="{% if calendar.nb_days == 1 %}{% url 'day_view_category' category.slug date_pred.year date_pred.month date_pred.day %}{% else %}{% url 'a_venir_jour_category' category.slug date_pred.year date_pred.month date_pred.day %}{% endif %}?{{ filter.get_url }}"
aria-label="dates précédentes"
role="button">
{% picto_from_name "chevrons-left" %}
{% if calendar.nb_days == 1 %}{{ date_pred }}{% endif %}
</a>
{% else %}
<a href="{% if calendar.nb_days == 1 %}{% url 'day_view' date_pred.year date_pred.month date_pred.day %}{% else %}{% url 'a_venir_jour' date_pred.year date_pred.month date_pred.day %}{% endif %}?{{ filter.get_url }}"
aria-label="dates précédentes"
role="button">
{% picto_from_name "chevrons-left" %}
{% if calendar.nb_days == 1 %}{{ date_pred }}{% endif %}
</a>
{% endif %}
{% if calendar.today_in_calendar %} {% if calendar.today_in_calendar %}
{% if category %} {% if category %}
<a role="button" <a role="button"
@ -259,21 +244,6 @@
data-tooltip="Copiez ce lien et importez-le dans votre agenda" data-tooltip="Copiez ce lien et importez-le dans votre agenda"
href="{% url 'export_ical' %}?{{ filter.get_url }}">S'abonner à l'agenda {% picto_from_name "calendar" %}</a> href="{% url 'export_ical' %}?{{ filter.get_url }}">S'abonner à l'agenda {% picto_from_name "calendar" %}</a>
{% endif %} {% endif %}
{% if category %}
<a href="{% if calendar.nb_days == 1 %}{% url 'day_view_category' category.slug date_next.year date_next.month date_next.day %}{% else %}{% url 'a_venir_jour_category' category.slug date_next.year date_next.month date_next.day %}{% endif %}?{{ filter.get_url }}"
aria-label="dates suivantes"
role="button">
{% if calendar.nb_days == 1 %}{{ date_next }}{% endif %}
{% picto_from_name "chevrons-right" %}
</a>
{% else %}
<a href="{% if calendar.nb_days == 1 %}{% url 'day_view' date_next.year date_next.month date_next.day %}{% else %}{% url 'a_venir_jour' date_next.year date_next.month date_next.day %}{% endif %}?{{ filter.get_url }}"
aria-label="dates suivantes"
role="button">
{% if calendar.nb_days == 1 %}{{ date_next }}{% endif %}
{% picto_from_name "chevrons-right" %}
</a>
{% endif %}
</article> </article>
{% endcache %} {% endcache %}
{% endwith %} {% endwith %}

View File

@ -39,7 +39,7 @@
{% cache cache_timeout week user.is_authenticated calendar.firstdate category filter.get_url %} {% cache cache_timeout week user.is_authenticated calendar.firstdate category filter.get_url %}
{% include "agenda_culturel/filter-inc.html" with filter=filter noarticle=0 category=category %} {% include "agenda_culturel/filter-inc.html" with filter=filter noarticle=0 category=category %}
<article> <article>
<header> <header id="navigation">
<div class="title small"> <div class="title small">
<h1> <h1>
{% if calendar.today_in_calendar %} {% if calendar.today_in_calendar %}
@ -53,56 +53,46 @@
semaine du {{ calendar.firstdate |date:"j F"|frdate }} semaine du {{ calendar.firstdate |date:"j F"|frdate }}
{% endif %} {% endif %}
{% if filter.has_location %}à {{ filter.get_position }}{% endif %} {% if filter.has_location %}à {{ filter.get_position }}{% endif %}
<a aria-label="Quand"
href="#quand-popup"
data-target="quand-popup"
onClick="toggleModal(event)">{% picto_from_name "calendar" %}</a>
</h1> </h1>
</div> </div>
<div class="navigation"> <div class="left">
<div> {% if calendar.firstdate|shift_day:-1|not_before_first %}
{% if calendar.firstdate|shift_day:-1|not_before_first %} {% if calendar.lastdate|not_after_last %}
{% if calendar.lastdate|not_after_last %} {% if category %}
{% if category %} <div class="slider-button slider-button-page button-left">
<a role="button" <a href="{% url 'week_view_category' category.slug calendar.previous_week|weekyear calendar.previous_week|week %}?{{ filter.get_url }}">{% picto_from_name "chevrons-left" %}</a>
href="{% url 'week_view_category' category.slug calendar.previous_week|weekyear calendar.previous_week|week %}?{{ filter.get_url }}"> </div>
{% picto_from_name "chevron-left" %} précédente</a> {% else %}
{% else %} <div class="slider-button slider-button-page button-left">
<a role="button" <a href="{% url 'week_view' calendar.previous_week|weekyear calendar.previous_week|week %}?{{ filter.get_url }}">{% picto_from_name "chevrons-left" %}</a>
href="{% url 'week_view' calendar.previous_week|weekyear calendar.previous_week|week %}?{{ filter.get_url }}"> </div>
{% picto_from_name "chevron-left" %} précédente</a>
{% endif %}
{% endif %} {% endif %}
{% endif %} {% endif %}
</div> {% endif %}
<div class="slider-button slider-button-inside button-left hidden">{% picto_from_name "arrow-left" %}</div>
</div>
<div class="right">
<div class="slider-button slider-button-inside button-right hidden">{% picto_from_name "arrow-right" %}</div>
{% if calendar.lastdate|shift_day:+1|not_after_last %} {% if calendar.lastdate|shift_day:+1|not_after_last %}
{% if calendar.lastdate|not_before_first %} {% if calendar.lastdate|not_before_first %}
<div class="right"> {% if category %}
{% if category %} <div class="slider-button slider-button-page button-right">
<a role="button" <a href="{% url 'week_view_category' category.slug calendar.next_week|weekyear calendar.next_week|week %}?{{ filter.get_url }}">{% picto_from_name "chevrons-right" %}</a>
href="{% url 'week_view_category' category.slug calendar.next_week|weekyear calendar.next_week|week %}?{{ filter.get_url }}">suivante </div>
{% picto_from_name "chevron-right" %}</a> {% else %}
{% else %} <div class="slider-button slider-button-page button-right">
<a role="button" <a href="{% url 'week_view' calendar.next_week|weekyear calendar.next_week|week %}?{{ filter.get_url }}">{% picto_from_name "chevrons-right" %}</a>
href="{% url 'week_view' calendar.next_week|weekyear calendar.next_week|week %}?{{ filter.get_url }}">suivante </div>
{% picto_from_name "chevron-right" %}</a> {% endif %}
{% endif %}
</div>
{% endif %} {% endif %}
{% endif %} {% endif %}
</div> </div>
</header> </header>
<div id="calendar" class="week"> <div id="calendar" class="week">
<div class="slider-button slider-button-inside button-left hidden">{% picto_from_name "arrow-left" %}</div>
{% if calendar.firstdate|shift_day:-1|not_before_first %}
{% if calendar.lastdate|not_after_last %}
{% if category %}
<div class="slider-button slider-button-page button-left hidden">
<a href="{% url 'week_view_category' category.slug calendar.previous_week|weekyear calendar.previous_week|week %}?{{ filter.get_url }}">{% picto_from_name "chevrons-left" %}</a>
</div>
{% else %}
<div class="slider-button slider-button-page button-left hidden">
<a href="{% url 'week_view' calendar.previous_week|weekyear calendar.previous_week|week %}?{{ filter.get_url }}">{% picto_from_name "chevrons-left" %}</a>
</div>
{% endif %}
{% endif %}
{% endif %}
<div class="grid"> <div class="grid">
{% for day in calendar.calendar_days_list %} {% for day in calendar.calendar_days_list %}
{% with day.date|date:"Y-m-d" as daytag %} {% with day.date|date:"Y-m-d" as daytag %}
@ -244,20 +234,6 @@
{% endwith %} {% endwith %}
{% endfor %} {% endfor %}
</div> </div>
<div class="slider-button slider-button-inside button-right hidden">{% picto_from_name "arrow-right" %}</div>
{% if calendar.lastdate|shift_day:+1|not_after_last %}
{% if calendar.lastdate|not_before_first %}
{% if category %}
<div class="slider-button slider-button-page button-right hidden">
<a href="{% url 'week_view_category' category.slug calendar.next_week|weekyear calendar.next_week|week %}?{{ filter.get_url }}">{% picto_from_name "chevrons-right" %}</a>
</div>
{% else %}
<div class="slider-button slider-button-page button-right hidden">
<a href="{% url 'week_view' calendar.next_week|weekyear calendar.next_week|week %}?{{ filter.get_url }}">{% picto_from_name "chevrons-right" %}</a>
</div>
{% endif %}
{% endif %}
{% endif %}
</div> </div>
{% cache 90000 footer_week user.is_authenticated calendar.firstdate category filter.get_url %} {% cache 90000 footer_week user.is_authenticated calendar.firstdate category filter.get_url %}
<footer> <footer>

View File

@ -62,11 +62,11 @@
{% endblock %} {% endblock %}
{% endif %} {% endif %}
{% block quand-bouton %} {% block quand-bouton %}
<li class="quand-bouton" <li class="quand-bouton">
href="#quand-popup" <a href="#quand-popup"
data-target="quand-popup" data-target="quand-popup"
onClick="toggleModal(event)"> onClick="toggleModal(event)"
<a aria-label="Quand">{% picto_from_name "calendar" %}</a> aria-label="Quand">{% picto_from_name "calendar" %}</a>
</li> </li>
{% endblock %} {% endblock %}
{% block rechercher-bouton %} {% block rechercher-bouton %}
@ -203,7 +203,10 @@
<ul> <ul>
{% block navigation-menu %} {% block navigation-menu %}
<li> <li>
<a href="{% url 'a_venir' %}">maintenant</a> <a href="{% url 'aujourdhui' %}">aujourd'hui</a>
</li>
<li>
<a href="{% url 'a_venir' %}">ces jours-ci</a>
</li> </li>
<li> <li>
<a href="{% url 'cette_semaine' %}">cette semaine</a> <a href="{% url 'cette_semaine' %}">cette semaine</a>

View File

@ -191,7 +191,16 @@ def navigation_links(filter, category):
extra = "?" + filter.get_url() extra = "?" + filter.get_url()
if category is None: if category is None:
result = ( result = (
'<li><a href="' + reverse_lazy("a_venir") + extra + '">maintenant</a></li>' '<li><a href="'
+ reverse_lazy("aujourdhui")
+ extra
+ "\">aujourd'hui</a></li>"
)
result += (
'<li><a href="'
+ reverse_lazy("a_venir")
+ extra
+ '">ces jours-ci</a></li>'
) )
result += ( result += (
'<li><a href="' '<li><a href="'
@ -207,10 +216,16 @@ def navigation_links(filter, category):
) )
else: else:
result = ( result = (
'<li><a href="'
+ reverse_lazy("aujourdhui_category", kwargs={"cat": category.slug})
+ extra
+ "\">aujourd'hui</a></li>"
)
result += (
'<li><a href="' '<li><a href="'
+ reverse_lazy("a_venir_category", kwargs={"cat": category.slug}) + reverse_lazy("a_venir_category", kwargs={"cat": category.slug})
+ extra + extra
+ '">maintenant</a></li>' + '">à venir</a></li>'
) )
result += ( result += (
'<li><a href="' '<li><a href="'