diff --git a/src/agenda_culturel/static/js/calendar-buttons.js b/src/agenda_culturel/static/js/calendar-buttons.js index 5f1168b..32a3804 100644 --- a/src/agenda_culturel/static/js/calendar-buttons.js +++ b/src/agenda_culturel/static/js/calendar-buttons.js @@ -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; diff --git a/src/agenda_culturel/static/style.scss b/src/agenda_culturel/static/style.scss index 1149d91..7757d10 100644 --- a/src/agenda_culturel/static/style.scss +++ b/src/agenda_culturel/static/style.scss @@ -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,31 +456,74 @@ 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; - padding: 0; - div { - width: fit-content; - float: left; - @media only screen and (min-width: 992px) { - a { - width: 10em; - } + 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; } } - 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 { background: rgba(255, 0, 76, 0.1); @@ -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 { diff --git a/src/agenda_culturel/templates/agenda_culturel/page-month.html b/src/agenda_culturel/templates/agenda_culturel/page-month.html index b917556..11a29e1 100644 --- a/src/agenda_culturel/templates/agenda_culturel/page-month.html +++ b/src/agenda_culturel/templates/agenda_culturel/page-month.html @@ -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 %}
-
+
- - {% if calendar.firstdate|shift_day:-1|not_before_first %} - {% if calendar.lastdate|not_after_last %} - {% if category %} - - {% else %} - - {% endif %} - {% endif %} - {% endif %}
{% for day in calendar.calendar_days_list %} {% if forloop.counter0|divisibleby:7 %} @@ -180,20 +170,6 @@ {% endwith %} {% endfor %}
- - {% if calendar.lastdate|shift_day:+1|not_after_last %} - {% if calendar.lastdate|not_before_first %} - {% if category %} - - {% else %} - - {% endif %} - {% endif %} - {% endif %}
{% cache 90000 footer_month user.is_authenticated calendar.firstdate category filter.get_url %}
+ {% for cd in calendar.calendar_days_list %}
-
- {% picto_from_name "chevrons-up" %} - {% if cd.is_today %} -
- {% with cd.events|length as nb_events %} -

- Aujourd'hui {{ nb_events }} événement{{ nb_events|pluralize }} {% picto_from_name "calendar" %} -

- {% endwith %} -

{{ cd.date|date:"l j F Y"|frdate }}

-
- {% else %} - {% if cd.is_tomorrow %} + {% if calendar.nb_days > 1 %} +
+ {% picto_from_name "chevrons-up" %} + {% if cd.is_today %}
-

- Demain {{ cd.events|length }} {% picto_from_name "calendar" %} -

+ {% with cd.events|length as nb_events %} +

+ Aujourd'hui {{ nb_events }} événement{{ nb_events|pluralize }} {% picto_from_name "calendar" %} +

+ {% endwith %}

{{ cd.date|date:"l j F Y"|frdate }}

{% else %} -

- {{ cd.date|date:"l j F Y"|frdate |capfirst }} {{ cd.events|length }} {% picto_from_name "calendar" %} -

+ {% if cd.is_tomorrow %} +
+

+ Demain {{ cd.events|length }} {% picto_from_name "calendar" %} +

+

{{ cd.date|date:"l j F Y"|frdate }}

+
+ {% else %} +

+ {{ cd.date|date:"l j F Y"|frdate |capfirst }} {{ cd.events|length }} {% picto_from_name "calendar" %} +

+ {% endif %} {% endif %} - {% endif %} -
+
+ {% endif %} {% if cd.events|length > 0 %}
{% for ti in cd.get_time_intervals %} @@ -198,21 +198,6 @@

Voir aussi

- {% if category %} - - {% picto_from_name "chevrons-left" %} - {% if calendar.nb_days == 1 %}{{ date_pred }}{% endif %} - - {% else %} - - {% picto_from_name "chevrons-left" %} - {% if calendar.nb_days == 1 %}{{ date_pred }}{% endif %} - - {% endif %} {% if calendar.today_in_calendar %} {% if category %} S'abonner à l'agenda {% picto_from_name "calendar" %} {% endif %} - {% if category %} - - {% if calendar.nb_days == 1 %}{{ date_next }}{% endif %} - {% picto_from_name "chevrons-right" %} - - {% else %} - - {% if calendar.nb_days == 1 %}{{ date_next }}{% endif %} - {% picto_from_name "chevrons-right" %} - - {% endif %}
{% endcache %} {% endwith %} diff --git a/src/agenda_culturel/templates/agenda_culturel/page-week.html b/src/agenda_culturel/templates/agenda_culturel/page-week.html index 591b596..2a74365 100644 --- a/src/agenda_culturel/templates/agenda_culturel/page-week.html +++ b/src/agenda_culturel/templates/agenda_culturel/page-week.html @@ -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 %}
-
+
- - {% if calendar.firstdate|shift_day:-1|not_before_first %} - {% if calendar.lastdate|not_after_last %} - {% if category %} - - {% else %} - - {% endif %} - {% endif %} - {% endif %}
{% for day in calendar.calendar_days_list %} {% with day.date|date:"Y-m-d" as daytag %} @@ -244,20 +234,6 @@ {% endwith %} {% endfor %}
- - {% if calendar.lastdate|shift_day:+1|not_after_last %} - {% if calendar.lastdate|not_before_first %} - {% if category %} - - {% else %} - - {% endif %} - {% endif %} - {% endif %}
{% cache 90000 footer_week user.is_authenticated calendar.firstdate category filter.get_url %}