Amélioration de la mise en page à venir sur PC

src/agenda_culturel/static/style.scss

@@ -165,7 +165,7 @@ details[role="list"] summary + ul li.selected>a:hover {
     }
 }
 
-#filters .clear {
+.clear {
     clear: both;
 }
 
@@ -1215,19 +1215,18 @@ article {
             column-count: 4;
         }
         .single-event {
-            .head {
+            display: grid;
-                float: left;
+            grid-template-columns: 30% auto 14em;
-                width: 30%;
+            grid-column-gap: 1em;
-                margin-right: 1em;
+
-            }
+            header {
-            .description {
+                margin: 0;
-                float: left;
-                width: calc(70% - 16em);
-                max-width: 42em;
-                margin-bottom: 1em;
             }
             .illustration {
-                width: 14em;
+                width: auto;
+            }
+            .description>div {
+                max-width: 42em;
             }
         }
     }

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

@@ -5,12 +5,7 @@
 {% load tag_extra %}
 
 <article id="event-{{ event.pk}}" class="single-event">
-    {% if event.image or event.local_image %}
+    <header class="head">
-    <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'>
@@ -47,13 +42,11 @@
                 {% include "agenda_culturel/date-times-inc.html" with event=event %}
             </em></p>
         {% endif %}
-    </div>
+        <div class="buttons">
-
+            {% if perms.agenda_culturel.change_event %}
-    <div class="description">
+            {% include "agenda_culturel/edit-buttons-inc.html" with event=event %}
-    <p>{{ event.description |linebreaks2 | truncatewords:60 }}</p>
+            {% endif %}
-    </div>
+        </div>
-    
-    <footer class="infos-and-buttons">
         <div class="infos">
             <p>
                 {% for tag in event.tags %}
@@ -70,14 +63,25 @@
             </p>
             {% endif %}
             </div>
-        {% if perms.agenda_culturel.change_event %}
+
-        <div class="buttons">
+    </header>
-            {% include "agenda_culturel/edit-buttons-inc.html" with event=event %}
+
-            <a href="{{ event.get_absolute_url }}" role="button">Voir l'événement <svg width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <div class="description">
+        <div>
+            <p>{{ event.description |linebreaks2 | truncatewords:60 }}</p>
+            <div class="right">
+            <a href="{{ event.get_absolute_url }}">Voir l'événement <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' %}#chevron-right" />
             </svg></a>
+            </div>
         </div>
-        {% endif %}
+    </div>
-        </footer>
+
+    <article class='illustration'>
+        {% if event.image or event.local_image %}
+        <img src="{% if event.local_image %}{{ event.local_image.url }}{% else %}{{ event.image }}{% endif %}" alt="{{ event.image_alt }}" />
+    {% endif %}
+    </article>
+
 </article>