On améliore le rendu (dates, pictos)

src/agenda_culturel/static/style.scss

@@ -97,4 +97,38 @@ ul {
 
 span.small-cat {
     cursor: default;
-}
+}
+
+svg {
+    vertical-align: middle;
+}
+
+.ephemeris {
+    float: left;
+    font-size: 110%;
+    padding: 0.8em 0;
+    margin: 0 1em 0 0;
+    text-align: center;
+    width: 7em;
+
+    .large {
+        font-size: 140%;
+        font-weight: bold;
+    }
+
+    footer {
+        font-size: 140%;
+        padding: 0.3em;
+        margin: .6em 0 -0.8em 0;
+        font-weight: bold;
+        color: var(--primary);
+    }
+}
+
+.ephemeris-hour {
+    @extend .ephemeris;
+    padding: 1.5em 0.1em;
+    width: 5em;
+    font-weight: bold;
+}
+

src/agenda_culturel/templates/agenda_culturel/date-times-inc.html

@@ -0,0 +1,8 @@
+{{ event.start_day }} 
+{% if event.start_time %} {% if not event.end_day %}{% if event.end_time %}de{% else %}à{% endif %}{% endif %}
+    {{ event.start_time }}
+{% endif %}
+{% if event.end_day %}
+    au {% if event.end_day %}{{ event.end_day }}{% endif %}
+{% endif %}
+{% if event.end_time %} {% if not event.end_day %}jusqu'à{% endif %} {{ event.end_time }}{% endif %}

src/agenda_culturel/templates/agenda_culturel/ephemeris-inc.html

@@ -0,0 +1,23 @@
+<article class='ephemeris'>
+    {% if not event.end_day or event.start_day == event.end_day %}
+        {{ event.start_day |date:"l" }}<br />
+        <span class="large">{{ event.start_day |date:"j" }}</span><br />
+        {{ event.start_day |date:"F" }}
+        {% if event.start_time %}
+            <footer>
+                <span class="large">{{ event.start_time }}</span>
+            </footer>
+        {% endif %}
+    {% else %}
+     du
+     {{ event.start_day |date:"D" }}<br />
+     <span class="large">{{ event.start_day |date:"j" }} </span>
+     {% if event.start_day|date:"F" != event.end_day|date:"F" %}
+        {{ event.start_day |date:"F" }}
+     {% endif %}<br />
+     au 
+     {{ event.start_day |date:"D" }} <br />
+     <span class="large">{{ event.end_day |date:"j" }}</span><br />
+     {{ event.end_day |date:"F" }}
+    {% endif %}
+</article>

src/agenda_culturel/templates/agenda_culturel/event-inc.html

@@ -1,36 +1,66 @@
+{% load static %}
 {% load cat_extra %}
-
+{% load utils_extra %}
+{% load event_extra %}
 
 <article>
-    {% comment %}
-        Le début contient les informations principales: titre, date
-    {% endcomment %}
     {% if display in "in list by day" %}
-        {% if display == "in list" %}<h2>{% else %}<h3>{% endif %}
+    {% if display == "in list by day" and event|can_show_start_time %}
-            {% if not event.end_day and event.start_time %}{{ event.start_time }}{% endif %}
+        <article class='ephemeris-hour'>
+            {% if event.start_time %}
+            {% if display == "in list" %}<footer>{% endif %}
+                <span class="large">{{ event.start_time }}</span>
+            {% if display == "in list" %}</footer>{% endif %}
+        {% endif %}
+        </article>
+    {% endif %}
+    {% if display == "in list" %}
+        {% include "agenda_culturel/ephemeris-inc.html" with event=event %}
+    {% endif %}
+    {% if event.location %}<hgroup>{% endif %}
+            {% if display == "in list" %}<h2>{% else %}<h3>{% endif %}
             <a href="{{ event.get_absolute_url }}">{{ event.title }}</a>
             {% if display == "in list" %}</h2>{% else %}</h3>{% endif %}
-        {% if event.end_day %}<p><em>Cet événement dure du {{ event.start_day |date:"l j F" }} au {{ event.end_day |date:"l j F" }}</em></p>{% endif %}
+    {% if event.location %}
+    {% if display == "in list" %}<h3>{% else %}<h4>{% endif %}
+        <svg width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <use href="{% static 'images/feather-sprite.svg' %}#map-pin" />
+        </svg>
+        {{ event.location }}
+        {% if display == "in list" %}</h3>{% else %}</h4>{% endif %}
+    </hgroup>
+    {% endif %}
+        {% if event|need_complete_display:display %}<p>
+            <svg width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <use href="{% static 'images/feather-sprite.svg' %}#calendar" />
+            </svg>
+    
+            <em>{% if event.end_day %}Cet événement dure du {% else %}Cet événement a lieu le{% endif %}
+                {% include "agenda_culturel/date-times-inc.html" with event=event %}
+            </em></p>
+        {% endif %}
     {% else %}
     <header>
+        {% include "agenda_culturel/ephemeris-inc.html" with event=event %}
         <h1>{{ event.title }}</h1>
-        <ul>
+        <p>
-            <li>Début&nbsp;: {{ event.start_day }} {% if event.start_time %} à {{ event.start_time }}{% endif %}</li>
+            <svg width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            {% if event.end_day or event.end_time %}
+                <use href="{% static 'images/feather-sprite.svg' %}#map-pin" />
-            <li>Fin&nbsp;: 
+            </svg>
-            {% if event.end_day %}{{ event.end_day }}{% endif %}
+            {{ event.location }}
-            {% if event.end_time %}{{ event.end_time }}{% endif %}
+        </p>
-            </li>
+        <p><svg width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            {% endif %}
+            <use href="{% static 'images/feather-sprite.svg' %}#calendar" />
-        </ul>    
+        </svg>
+            {% if event.end_day %}du{% else %}le{% endif %}
+            {% include "agenda_culturel/date-times-inc.html" with event=event %}
+        </p>
     </header>
     {% endif %}
 
     {% comment %}
     manque encore: 
-    * location,
     * image, image_alt
-    * reference_urls
     {% endcomment %}
 
     {% comment %}
@@ -74,7 +104,7 @@
     <p>Cet événement est proposé par&nbsp;:
     {% endif %} 
     {% for eurl in event.reference_urls %}
-    <a href="{{ eurl }}">{{ eurl }}</a>{% if not forloop.last %}, {% endif %}
+    <a href="{{ eurl }}">{{ eurl|hostname }}</a>{% if not forloop.last %}, {% endif %}
     {% endfor %}
     </p>
 {% else %}

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

@@ -10,6 +10,6 @@
 
 {% block content %}
 
-{% include "agenda_culturel/event-inc.html" with event=event %}
+{% include "agenda_culturel/event-inc.html" with event=event display="single" %}
 
 {% endblock %}

src/agenda_culturel/templatetags/event_extra.py

@@ -13,3 +13,12 @@ def in_date(event, date):
 @register.simple_tag
 def nb_draft_events():
     return Event.objects.filter(status=Event.STATUS.DRAFT).count()
+
+@register.filter
+def can_show_start_time(event):
+    return event.start_time and (not event.end_day or event.end_day == event.start_day)
+
+
+@register.filter
+def need_complete_display(event, display):
+    return event.end_day and event.end_day != event.start_day and (event.start_time or event.end_time or display == "in list by day")

src/agenda_culturel/templatetags/utils_extra.py

@@ -0,0 +1,12 @@
+from django import template
+from django.utils.safestring import mark_safe
+
+from urllib.parse import urlparse
+
+register = template.Library()
+
+
+@register.filter
+def hostname(url):
+    obj = urlparse(url)
+    return mark_safe(obj.hostname)