Amélioration de l'affichage à venir

src/agenda_culturel/calendar.py

@@ -37,6 +37,7 @@ class DayInCalendar:
 
         self.events_by_category = {}
         self.time_intervals = None
+        self.id = d.strftime('%Y-%m-%d')
 
     def is_in_past(self):
         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)]]
             self.build_time_intervals(all_day_name, interval_names, interval_markers)
 
-        logger.error("hop " + str(len(self.time_intervals)))        
         return self.time_intervals
 
 
@@ -165,8 +165,8 @@ class IntervalInDay(DayInCalendar):
 
     def __init__(self, d, id, name):
         self.name = name
-        self.id = d.strftime('%Y-%m-%d') + '-' + str(id)
         super().__init__(d)
+        self.id = self.id + '-' + str(id)
 
 class CalendarList:
     def __init__(self, firstdate, lastdate, filter=None, exact=False):

src/agenda_culturel/static/style.scss

@@ -526,12 +526,6 @@ article#filters {
 
 .slide-buttons {
     float: right;
-    margin-bottom: -2.8em;
-}
-@media only screen and (min-width: 992px) {
-    .slide-buttons {
-        margin-left: -3em;
-    }
 }
 
 .highlight {
@@ -817,19 +811,19 @@ nav>div {
     }
 }
 
-nav .badge {
+.badge {
     @extend [role="button"];
     font-size: 70%;
     padding: 0.2em .8em;
     border-radius: .5em;
 }
 
-nav .badge.error {
+.badge.error {
     background: #b71c1c;
     border-color: #cb1b1b;
 }
 
-nav .badge.simple {
+.badge.simple {
     background: var(--secondary);
     border-color: var(--secondary);
     color: var(--secondary-inverse);
@@ -1216,4 +1210,23 @@ article {
     top: 0;
     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;
+            }
+        }
+    }
 }

src/agenda_culturel/templates/agenda_culturel/page-upcoming.html

@@ -32,13 +32,13 @@
      {% include "agenda_culturel/filter-inc.html" with filter=filter %}
 
     <footer>
-    {% for ti in calendar.time_intervals_list_first %}
-        <a href="#{{ ti.id }}" role="button">
-            {% if ti.is_today %}Aujourd'hui
+    {% for cd in calendar.calendar_days_list %}
+        <a href="#{{ cd.id }}" role="button">
+            {% if cd.is_today %}Aujourd'hui
             {% else %}
-                {% if ti.is_tomorrow %}Demain
+                {% if cd.is_tomorrow %}Demain
                 {% else %}
-                {{ ti.date| date:"l j"  }}
+                {{ cd.date| date:"l j"  }}
                 {% endif %}
             {% endif %}
         {% picto_from_name "chevrons-down" %}</a>
@@ -46,45 +46,52 @@
 </footer>
 </article>
 
-
-{% for ti in calendar.time_intervals_list %}
-    <article class="day-interval" id="{{ ti.id }}">
+{% for cd in calendar.calendar_days_list %}
+    <article class="day-interval" id="{{ cd.id }}">
         <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>
-            <hgroup>
-            <h2>{{ ti.name }}</h2>
-            <h3>{{ ti.date }}</h3>
-            </hgroup>
+            <h2>{{ cd.date }}</h2>
         </header>
-        <div class="grid two-columns grid-reverse">
-            <div>
-                {% if ti.events|length > 1 %}
-                    <h3>Résumé</h3>
-                    <ul>
-                    {% for event in ti.events %}
+        {% if cd.events|length > 0 %}
+        <div class="resume">
+            {% for ti in cd.get_time_intervals %}
+            {% if ti.events|length > 0 %}
+                <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>
+                <ul>
+                {% for event in ti.events %}
                     <li>{{ event.category | circle_cat:event.has_recurrences }}
                         {% if event.start_time %}
                         {{ event.start_time }}
                         {% endif %}
                         {{ event|picto_status }} <a href="#event-{{ event.id }}">{{ event.title }}</a>
                     </li>
-                    {% endfor %}
-                    </ul>
-                {% endif %}
-            </div>
-            <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>
+                {% endfor %}
+                </ul>
+            {% endif %}
+            {% endfor %}
         </div>
+        {% else %}
+        <em>Aucun événement</em>
+        {% endif %}
     </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 %}
 

src/agenda_culturel/templates/agenda_culturel/place_unknown_form.html

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

src/agenda_culturel/templates/agenda_culturel/single-event/event-in-upcoming-inc.html

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