setop/agenda_culturel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Révision de la navigation

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/agenda_culturel/static/js/calendar-buttons.js
View File

@ -4,28 +4,23 @@
function displayButtons() {
delta = 60
agenda = document.getElementById("calendar");
navigation = document.getElementById("navigation");
grid = agenda.querySelector(".grid");
buttonLeft = agenda.querySelector(".slider-button.slider-button-inside.button-left");
buttonRight = agenda.querySelector(".slider-button.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");
buttonLeft = navigation.querySelector(".slider-button-inside.button-left");
buttonRight = navigation.querySelector(".slider-button-inside.button-right");
if (agenda.offsetWidth < grid.offsetWidth) {
if (agenda.scrollLeft < delta) {
buttonLeft.classList.add("hidden");
buttonLeftPage.classList.remove("hidden");
}
else {
buttonLeft.classList.remove("hidden");
buttonLeftPage.classList.add("hidden");
}
if (agenda.scrollLeft + agenda.offsetWidth - grid.offsetWidth >= -2) {
buttonRight.classList.add("hidden");
buttonRightPage.classList.remove("hidden");
}
else {
buttonRight.classList.remove("hidden");
buttonRightPage.classList.add("hidden");
}
@ -33,8 +28,6 @@ function displayButtons() {
else {
buttonLeft.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();
// 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");
grid = agenda.querySelector(".grid");
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
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");
grid = agenda.querySelector(".grid");
agenda.scrollLeft += grid.offsetWidth / 7;

124
src/agenda_culturel/static/style.scss
View File

@ -371,32 +371,6 @@ footer [data-tooltip] {
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) {
@ -482,29 +456,72 @@ header .title {
font-size: 150%;
}
.navigation {
margin: 1em 0;
height: 2.5em;
@media only screen and (min-width: 992px) {
margin: -3.4em 0 3.4em 0;
height: fit-content;
#navigation {
z-index: 10;
position: sticky;
top: 0;
display: grid;
grid-template-columns: fit-content(6em) 3fr fit-content(6em);
.title {
grid-column: 1/4;
grid-row: 1/2;
text-align: center;
}
.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;
}
}
.slider-button {
@extend [role="button"];
height: 1.8em;
width: 1.8em;
padding: 0;
div {
width: fit-content;
float: left;
@media only screen and (min-width: 992px) {
margin: 0;
font-size: 150%;
border-radius: .9em;
line-height: 1.8em;
text-align: center;
a {
width: 10em;
color: var(--primary-inverse);
}
}
.slider-button.hidden {
display: none;
}
.slider-button.button-left {
left: .3em;
}
.slider-button.button-right {
right: .3em;
}
div.right {
float: right;
}
}
.day.today>header,
@ -1526,15 +1543,32 @@ img.preview {
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 {
article#filters {
margin: 2em 0;
}
.day-interval>.sticky {
position: sticky;
top: 0;
z-index: 10;
}
@media only screen and (min-width: 600px) {
.single-event, .tag-description {

80
src/agenda_culturel/templates/agenda_culturel/page-month.html
View File

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

96
src/agenda_culturel/templates/agenda_culturel/page-upcoming.html
View File

@ -42,64 +42,63 @@
{% 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 %}
{% include "agenda_culturel/filter-inc.html" with filter=filter noarticle=1 %}
<footer>
</article>
<article id="navigation">
<div class="left">
{% 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>
class="slider-button slider-button-page button-left"
role="button">{% picto_from_name "chevrons-left" %}</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>
class="slider-button slider-button-page button-left"
role="button">{% picto_from_name "chevrons-left" %}</a>
{% endif %}
{% if calendar.nb_days > 1 %}
{% for cd in calendar.calendar_days_list %}
<a href="#{{ cd.id }}" role="button">
</div>
{% with calendar.calendar_days_list.0 as cd %}
<div class="title small {% if cd.is_today or cd.is_tomorrow %}deuxlignes{% endif %}">
<hgroup>
<h2>
{% if cd.is_today %}
Aujourd'hui
{% else %}
{% if cd.is_tomorrow %}
Demain
{% else %}
{{ cd.date| date:"l j b"|capfirst }}
{% endif %}
{% endif %}
{% picto_from_name "chevrons-down" %}</a>
{% endfor %}
{% else %}
{% if category %}
<a role="button"
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>
{% else %}
<a role="button"
href="{% url 'week_view' calendar.firstdate.year calendar.firstdate|week %}?{{ filter.get_url }}">toute la semaine {% picto_from_name "chevrons-up" %}</a>
{{ cd.date| date:"l j F"|frdate|capfirst }}
{% endif %}
{% endif %}
{% if calendar.nb_days > 1 %}et suivants{% endif %}
<a aria-label="Quand"
href="#quand-popup"
data-target="quand-popup"
onClick="toggleModal(event)">{% picto_from_name "calendar" %}</a>
</h2>
<h3>
{% if cd.is_today or cd.is_tomorrow %}{{ cd.date|date:"l j F Y"|frdate }}{% endif %}
</h3>
</hgroup>
{% endwith %}
</div>
<div class="right">
{% 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 }}"
class="slider-button slider-button-page button-right"
aria-label="dates suivantes"
role="button">
{% if calendar.nb_days == 1 %}{{ date_next }}{% endif %}
{% picto_from_name "chevrons-right" %}
</a>
role="button">{% 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 }}"
class="slider-button slider-button-page button-right"
aria-label="dates suivantes"
role="button">
{% if calendar.nb_days == 1 %}{{ date_next }}{% endif %}
{% picto_from_name "chevrons-right" %}
</a>
role="button">{% picto_from_name "chevrons-right" %}</a>
{% endif %}
</footer>
</div>
</article>
{% for cd in calendar.calendar_days_list %}
<article class="day-interval" id="{{ cd.id }}">
{% if calendar.nb_days > 1 %}
<header class="sticky">
<a role="button"
class="secondary slide-buttons"
@ -130,6 +129,7 @@
{% endif %}
{% endif %}
</header>
{% endif %}
{% if cd.events|length > 0 %}
<div class="resume">
{% for ti in cd.get_time_intervals %}
@ -198,21 +198,6 @@
<header>
<h2>Voir aussi</h2>
</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 category %}
<a role="button"
@ -259,21 +244,6 @@
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>
{% 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>
{% endcache %}
{% endwith %}

80
src/agenda_culturel/templates/agenda_culturel/page-week.html
View File

@ -39,7 +39,7 @@
{% 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 %}
<article>
<header>
<header id="navigation">
<div class="title small">
<h1>
{% if calendar.today_in_calendar %}
@ -53,56 +53,46 @@
semaine du {{ calendar.firstdate |date:"j F"|frdate }}
{% 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>
</div>
<div class="navigation">
<div>
<div class="left">
{% if calendar.firstdate|shift_day:-1|not_before_first %}
{% if calendar.lastdate|not_after_last %}
{% if category %}
<a role="button"
href="{% url 'week_view_category' category.slug calendar.previous_week|weekyear calendar.previous_week|week %}?{{ filter.get_url }}">
{% picto_from_name "chevron-left" %} précédente</a>
{% else %}
<a role="button"
href="{% url 'week_view' calendar.previous_week|weekyear calendar.previous_week|week %}?{{ filter.get_url }}">
{% picto_from_name "chevron-left" %} précédente</a>
{% endif %}
{% endif %}
{% endif %}
</div>
{% if calendar.lastdate|shift_day:+1|not_after_last %}
{% if calendar.lastdate|not_before_first %}
<div class="right">
{% if category %}
<a role="button"
href="{% url 'week_view_category' category.slug calendar.next_week|weekyear calendar.next_week|week %}?{{ filter.get_url }}">suivante
{% picto_from_name "chevron-right" %}</a>
{% else %}
<a role="button"
href="{% url 'week_view' calendar.next_week|weekyear calendar.next_week|week %}?{{ filter.get_url }}">suivante
{% picto_from_name "chevron-right" %}</a>
{% endif %}
</div>
{% endif %}
{% endif %}
</div>
</header>
<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">
<div class="slider-button slider-button-page button-left">
<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">
<div class="slider-button slider-button-page button-left">
<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="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|not_before_first %}
{% if category %}
<div class="slider-button slider-button-page button-right">
<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">
<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>
</header>
<div id="calendar" class="week">
<div class="grid">
{% for day in calendar.calendar_days_list %}
{% with day.date|date:"Y-m-d" as daytag %}
@ -244,20 +234,6 @@
{% endwith %}
{% endfor %}
</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>
{% cache 90000 footer_week user.is_authenticated calendar.firstdate category filter.get_url %}
<footer>

13
src/agenda_culturel/templates/agenda_culturel/page.html
View File

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

19
src/agenda_culturel/templatetags/utils_extra.py
View File

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