fix(documentation): améliorer l'affichage des bannières des fiches pratiques

lacommunaute/static/stylesheets/itou_communaute.scss

@@ -56,6 +56,15 @@
   }
 }
 
+.card-header-thumbnail {
+  height: 200px;
+
+  >img {
+    height: 100%;
+  }
+}
+
+
 .card.forumlist .card-body .forum-icon {
   display: inline-block;
   width: 42px;

lacommunaute/templates/forum/forum_detail.html

@@ -41,7 +41,13 @@ <h1>{{ forum.name }}</h1>
                                 {% include "partials/upvotes.html" with obj=forum kind="forum" %}
                                 {% include "partials/social_share_buttons.html" with text=forum.name instance=forum id=forum.pk %}
                             </div>
-                            <div class="col-12 col-sm-auto">{% include "forum/partials/forum_banner.html" with forum=forum only %}</div>
+                            {% if forum.image %}
+                                <div class="col-12 col-sm-auto">
+                                    <div class="d-none d-md-block forum-image mt-3" loading="lazy">
+                                        <img src="{{ forum.image.url }}" alt="{{ forum.name }}" class="rounded img-fluid" />
+                                    </div>
+                                </div>
+                            {% endif %}
                             <div class="col-12 col-sm-auto mt-3">
                                 <div class="textarea_cms_md">{{ forum.description.rendered|urlizetrunc_target_blank:30 }}</div>
                             </div>

lacommunaute/templates/forum/forum_list.html

@@ -52,22 +52,23 @@ <h3 class="h3 mb-0">
         <div class="row mt-4">
             {% for node in forum_contents.top_nodes %}
                 <div class="col-12 col-md-4 mb-3 mb-md-5">
-                    <div class="card c-card has-links-inside h-100">
+                    <div class="card c-card has-one-link-inside h-100">
+                        {% if node.obj.image %}
+                            <div class="card-header card-header-thumbnail rounded">
+                                <img src="{{ node.obj.image.url }}" alt="{{ node.obj.name }}" class="img-fitcover img-fluid" loading="lazy" />
+                            </div>
+                        {% endif %}
                         <div class="card-body pb-0">
-                            <p class="h3 lh-base">
-                                <i class="ri-newspaper-line font-weight-normal"></i> {{ node.obj.name }}
-                            </p>
-                            <div>{% include "forum/partials/forum_banner.html" with forum=node.obj only %}</div>
+                            <p class="h3 lh-base">{{ node.obj.name }}</p>
                             {% if node.obj.short_description %}<div class="mt-3">{{ node.obj.short_description }}</div>{% endif %}
                         </div>
                         <div class="card-footer text-end">
                             <a href="{% url 'forum_extension:forum' node.obj.slug node.obj.id %}"
-                               class="btn btn-ico btn-link stretched-link matomo-event"
+                               class="btn btn-sm btn-ico btn-link stretched-link matomo-event"
                                data-matomo-category="engagement"
                                data-matomo-action="view"
                                data-matomo-option="fiches_techniques">
-                                <span>Consulter la fiche</span>
-                                <i class="ri-arrow-right-up-line ri-lg"></i>
+                                <i class="ri-arrow-right-line ri-lg"></i>
                             </a>
                         </div>
                     </div>