Amélioration de l'affichage à venir

This commit is contained in:
Jean-Marie Favreau 2024-10-05 17:37:33 +02:00
parent 8eaee2b1a6
commit fbed65adcc
5 changed files with 73 additions and 54 deletions

View File

@ -37,6 +37,7 @@ class DayInCalendar:
self.events_by_category = {} self.events_by_category = {}
self.time_intervals = None self.time_intervals = None
self.id = d.strftime('%Y-%m-%d')
def is_in_past(self): def is_in_past(self):
return self.in_past return self.in_past
@ -157,7 +158,6 @@ class DayInCalendar:
interval_markers = [datetime.combine(self.date, time(h, m)) for h, m in [(11, 30), (13, 0), (18, 0)]] interval_markers = [datetime.combine(self.date, time(h, m)) for h, m in [(11, 30), (13, 0), (18, 0)]]
self.build_time_intervals(all_day_name, interval_names, interval_markers) self.build_time_intervals(all_day_name, interval_names, interval_markers)
logger.error("hop " + str(len(self.time_intervals)))
return self.time_intervals return self.time_intervals
@ -165,8 +165,8 @@ class IntervalInDay(DayInCalendar):
def __init__(self, d, id, name): def __init__(self, d, id, name):
self.name = name self.name = name
self.id = d.strftime('%Y-%m-%d') + '-' + str(id)
super().__init__(d) super().__init__(d)
self.id = self.id + '-' + str(id)
class CalendarList: class CalendarList:
def __init__(self, firstdate, lastdate, filter=None, exact=False): def __init__(self, firstdate, lastdate, filter=None, exact=False):

View File

@ -526,12 +526,6 @@ article#filters {
.slide-buttons { .slide-buttons {
float: right; float: right;
margin-bottom: -2.8em;
}
@media only screen and (min-width: 992px) {
.slide-buttons {
margin-left: -3em;
}
} }
.highlight { .highlight {
@ -817,19 +811,19 @@ nav>div {
} }
} }
nav .badge { .badge {
@extend [role="button"]; @extend [role="button"];
font-size: 70%; font-size: 70%;
padding: 0.2em .8em; padding: 0.2em .8em;
border-radius: .5em; border-radius: .5em;
} }
nav .badge.error { .badge.error {
background: #b71c1c; background: #b71c1c;
border-color: #cb1b1b; border-color: #cb1b1b;
} }
nav .badge.simple { .badge.simple {
background: var(--secondary); background: var(--secondary);
border-color: var(--secondary); border-color: var(--secondary);
color: var(--secondary-inverse); color: var(--secondary-inverse);
@ -1216,4 +1210,23 @@ article {
top: 0; top: 0;
z-index: 10; z-index: 10;
} }
@media only screen and (min-width: 992px) {
.resume {
column-count: 4;
}
.single-event {
.head {
float: left;
width: 30%;
margin-right: 1em;
}
.description {
float: left;
width: calc(70% - 16em);
}
.illustration {
width: 14em;
}
}
}
} }

View File

@ -32,13 +32,13 @@
{% include "agenda_culturel/filter-inc.html" with filter=filter %} {% include "agenda_culturel/filter-inc.html" with filter=filter %}
<footer> <footer>
{% for ti in calendar.time_intervals_list_first %} {% for cd in calendar.calendar_days_list %}
<a href="#{{ ti.id }}" role="button"> <a href="#{{ cd.id }}" role="button">
{% if ti.is_today %}Aujourd'hui {% if cd.is_today %}Aujourd'hui
{% else %} {% else %}
{% if ti.is_tomorrow %}Demain {% if cd.is_tomorrow %}Demain
{% else %} {% else %}
{{ ti.date| date:"l j" }} {{ cd.date| date:"l j" }}
{% endif %} {% endif %}
{% endif %} {% endif %}
{% picto_from_name "chevrons-down" %}</a> {% picto_from_name "chevrons-down" %}</a>
@ -46,45 +46,52 @@
</footer> </footer>
</article> </article>
{% for cd in calendar.calendar_days_list %}
{% for ti in calendar.time_intervals_list %} <article class="day-interval" id="{{ cd.id }}">
<article class="day-interval" id="{{ ti.id }}">
<header class="sticky"> <header class="sticky">
<a role="button" class="secondary slide-buttons" href="#index-avenir" data-placement="left" data-tooltip="Retour en haut">{% picto_from_name "chevrons-up" %}</a> <a role="button" class="secondary slide-buttons" href="#index-avenir" data-placement="left" data-tooltip="Retour en haut">{% picto_from_name "chevrons-up" %}</a>
<hgroup> <h2>{{ cd.date }}</h2>
<h2>{{ ti.name }}</h2>
<h3>{{ ti.date }}</h3>
</hgroup>
</header> </header>
<div class="grid two-columns grid-reverse"> {% if cd.events|length > 0 %}
<div> <div class="resume">
{% if ti.events|length > 1 %} {% for ti in cd.get_time_intervals %}
<h3>Résumé</h3> {% if ti.events|length > 0 %}
<ul> <h3>{{ ti.name }} <a class="badge simple" href="#{{ ti.id }}" data-placement="left" data-tooltip="Aller à {{ ti.name }}">{% picto_from_name "chevron-down" %}</a></h3>
{% for event in ti.events %} <ul>
{% for event in ti.events %}
<li>{{ event.category | circle_cat:event.has_recurrences }} <li>{{ event.category | circle_cat:event.has_recurrences }}
{% if event.start_time %} {% if event.start_time %}
{{ event.start_time }} {{ event.start_time }}
{% endif %} {% endif %}
{{ event|picto_status }} <a href="#event-{{ event.id }}">{{ event.title }}</a> {{ event|picto_status }} <a href="#event-{{ event.id }}">{{ event.title }}</a>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
{% endif %} {% endif %}
</div> {% endfor %}
<div>
{% if ti.events|length > 1 %}
<h3>Événements</h3>
{% endif %}
{% with indexti=ti.id %}
{% for event in ti.events %}
{% include "agenda_culturel/single-event/event-in-upcoming-inc.html" with event=event filter=filter day=day indexti=indexti %}
{% endfor %}
{% endwith %}
</div>
</div> </div>
{% else %}
<em>Aucun événement</em>
{% endif %}
</article> </article>
{% for ti in cd.get_time_intervals %}
{% if ti.events|length > 0 %}
<article class="day-interval" id="{{ ti.id }}">
<header class="sticky">
<a role="button" class="secondary slide-buttons" href="#{{ cd.id }}" data-placement="left" data-tooltip="Retour au résumé de la journée">{% picto_from_name "chevron-up" %}</a>
<hgroup>
<h3>{{ ti.name }}</h3>
<h4>{{ ti.date }}</h4>
</hgroup>
</header>
{% with indexti=cd.id %}
{% for event in ti.events %}
{% include "agenda_culturel/single-event/event-in-upcoming-inc.html" with event=event filter=filter day=day indexti=indexti %}
{% endfor %}
{% endwith %}
</article>
{% endif %}
{% endfor %}
{% endfor %} {% endfor %}

View File

@ -61,7 +61,6 @@
document.querySelector(".choices__inner").classList.add("contrast"); document.querySelector(".choices__inner").classList.add("contrast");
document.querySelector(".choices__inner").classList.add("outline"); document.querySelector(".choices__inner").classList.add("outline");
document.querySelector(".choices__inner").setAttribute("role", "button"); document.querySelector(".choices__inner").setAttribute("role", "button");
console.log("hop");
</script> </script>

View File

@ -4,13 +4,13 @@
{% load event_extra %} {% load event_extra %}
{% load tag_extra %} {% load tag_extra %}
<article id="event-{{ event.pk}}"> <article id="event-{{ event.pk}}" class="single-event">
<a role="button" class="secondary slide-buttons" href="#{{ indexti }}" data-tooltip="Retour au résumé" data-placement="left">{% picto_from_name "arrow-up" %}</a>
{% if event.image or event.local_image %} {% if event.image or event.local_image %}
<article class='illustration'> <article class='illustration'>
<img src="{% if event.local_image %}{{ event.local_image.url }}{% else %}{{ event.image }}{% endif %}" alt="{{ event.image_alt }}" /> <img src="{% if event.local_image %}{{ event.local_image.url }}{% else %}{{ event.image }}{% endif %}" alt="{{ event.image_alt }}" />
</article> </article>
{% endif %} {% endif %}
<div class="head">
{% if event|can_show_start_time:day %} {% if event|can_show_start_time:day %}
{% if event.start_time %} {% if event.start_time %}
<article class='ephemeris-hour'> <article class='ephemeris-hour'>
@ -28,15 +28,15 @@
{{ event.category | small_cat_recurrent:event.has_recurrences }} {{ event.category | small_cat_recurrent:event.has_recurrences }}
{% if event.location or event.exact_location %}<hgroup>{% endif %} {% if event.location or event.exact_location %}<hgroup>{% endif %}
<h3> <h4>
{{ event|picto_status }} {{ event|picto_status }}
<a href="{{ event.get_absolute_url }}">{{ event.title }}</a> <a href="{{ event.get_absolute_url }}">{{ event.title }}</a>
</h3> </h4>
{% if event.location or event.exact_location %} {% if event.location or event.exact_location %}
<h4> <h5>
{% picto_from_name "map-pin" %} {% picto_from_name "map-pin" %}
{% include "agenda_culturel/event-location-inc.html" with event=event %} {% include "agenda_culturel/event-location-inc.html" with event=event %}
</h4> </h5>
</hgroup> </hgroup>
{% endif %} {% endif %}
@ -47,11 +47,11 @@
{% include "agenda_culturel/date-times-inc.html" with event=event %} {% include "agenda_culturel/date-times-inc.html" with event=event %}
</em></p> </em></p>
{% endif %} {% endif %}
</div>
<div class="description">
<p>{{ event.description |linebreaks2 | truncatewords:60 }}</p> <p>{{ event.description |linebreaks2 | truncatewords:60 }}</p>
</div>
<footer class="infos-and-buttons"> <footer class="infos-and-buttons">
<div class="infos"> <div class="infos">