From 0e0da812eeb68c9f2159aa7ff6984e579d0fa5b9 Mon Sep 17 00:00:00 2001
From: hellodeloo <hello@hellodeloo.com>
Date: Fri, 22 Nov 2024 11:01:55 +0100
Subject: [PATCH] fix: little ui adjustments

---
 .../forum_conversation/topic_simple_list.html | 76 +++++++++----------
 lacommunaute/templates/layouts/base.html      | 11 ++-
 lacommunaute/templates/pages/home.html        |  2 +-
 3 files changed, 45 insertions(+), 44 deletions(-)

diff --git a/lacommunaute/templates/forum_conversation/topic_simple_list.html b/lacommunaute/templates/forum_conversation/topic_simple_list.html
index 03513d8b..f362be55 100644
--- a/lacommunaute/templates/forum_conversation/topic_simple_list.html
+++ b/lacommunaute/templates/forum_conversation/topic_simple_list.html
@@ -1,57 +1,49 @@
 {% load i18n %}
 <div id="topicsarea">
     {% if topics or not hide_if_empty %}
-        <hr>
+        <ul class="list-group list-group-flush">
         {% for topic in topics %}
-            <div class="row">
-                <div class="col-12">
-                    <div id="{{ topic.pk }}" class="post mb-3">
-                        <div class="mb-1 d-flex flex-column flex-md-row align-items-md-center">
-                            <p class="h4 mb-0 flex-grow-1">
-                                <a href="{% url 'forum_conversation:topic' topic.forum.slug topic.forum.pk topic.slug topic.pk %}"
-                                   class="matomo-event"
+            <li class="list-group-item list-group-item-action">
+                <div id="{{ topic.pk }}" class="post">
+                    <a href="{% url 'forum_conversation:topic' topic.forum.slug topic.forum.pk topic.slug topic.pk %}"
+                       class="h4 text-tertiary d-block mb-1 matom-event"
+                       data-matomo-category="engagement"
+                       data-matomo-action="view"
+                       data-matomo-option="topic">
+                       {{ topic.subject }}
+                    </a>
+                    <div class="mb-3">
+                        {% include "forum_conversation/partials/poster.html" with post=topic.first_post topic=topic is_topic_head=True forum=forum %}
+                    </div>
+                    <div class="post-content">
+                        <div id="showmoretopicsarea{{ topic.pk }}">
+                            {% include 'partials/rendered_md.html' with content=topic.first_post.content truncatechars=1 only %}
+                            {% if topic.first_post.content.rendered|length > 200 %}
+                                <a hx-get="{% url 'forum_conversation_extension:showmore_topic' topic.forum.slug topic.forum.pk topic.slug topic.pk %}"
+                                   id="showmoretopic-button{{ topic.pk }}"
+                                   hx-target="#showmoretopicsarea{{ topic.pk }}"
+                                   hx-swap="outerHTML"
+                                   class="btn btn-link p-0 mb-3 mt-n3 matomo-event"
                                    data-matomo-category="engagement"
-                                   data-matomo-action="view"
-                                   data-matomo-option="topic">{{ topic.subject }}</a>
-                            </p>
-                        </div>
-                        <div class="pt-0">
-                            <div class="row">
-                                <div class="col-12 post-content-wrapper mb-1">
-                                    {% include "forum_conversation/partials/poster.html" with post=topic.first_post topic=topic is_topic_head=True forum=forum %}
-                                </div>
-                                <div class="col-12 post-content">
-                                    <div id="showmoretopicsarea{{ topic.pk }}">
-                                        {% include 'partials/rendered_md.html' with content=topic.first_post.content truncatechars=1 only %}
-                                        {% if topic.first_post.content.rendered|length > 200 %}
-                                            <a hx-get="{% url 'forum_conversation_extension:showmore_topic' topic.forum.slug topic.forum.pk topic.slug topic.pk %}"
-                                               id="showmoretopic-button{{ topic.pk }}"
-                                               hx-target="#showmoretopicsarea{{ topic.pk }}"
-                                               hx-swap="outerHTML"
-                                               class="btn btn-link p-0 mh-auto matomo-event"
-                                               data-matomo-category="engagement"
-                                               data-matomo-action="showmore"
-                                               data-matomo-option="topic">{% trans "+ show more" %}</a>
-                                        {% endif %}
-                                    </div>
-                                </div>
-                            </div>
+                                   data-matomo-action="showmore"
+                                   data-matomo-option="topic">
+                                   {% trans "+ show more" %}
+                                </a>
+                            {% endif %}
                         </div>
                     </div>
-                    <div id="showmorepostsarea{{ topic.pk }}">
-                        <div id="postinfeedarea{{ topic.pk }}">
-                            {% include "forum_conversation/partials/post_feed_form_collapsable.html" with post_form=form %}
-                        </div>
+                </div>
+                <div id="showmorepostsarea{{ topic.pk }}">
+                    <div id="postinfeedarea{{ topic.pk }}">
+                        {% include "forum_conversation/partials/post_feed_form_collapsable.html" with post_form=form %}
                     </div>
                 </div>
-            </div>
-            <div class="row align-items-sm-center mb-3">
-                <div class="col-12 col-sm">
+                <div class="mb-3">
                     {% include "forum_conversation/partials/topic_detail_actions.html" with posts_count=topic.posts_count %}
                 </div>
-            </div>
-            <hr>
+            </li>
         {% endfor %}
+        </ul>
     {% endif %}
 </div>
 <script nonce="{{ request.csp_nonce }}">
diff --git a/lacommunaute/templates/layouts/base.html b/lacommunaute/templates/layouts/base.html
index 7503c77d..0e641135 100644
--- a/lacommunaute/templates/layouts/base.html
+++ b/lacommunaute/templates/layouts/base.html
@@ -65,11 +65,20 @@
                 </li>
             </ul>
         </nav>
+        {% if ENVIRONMENT != "PROD" %}
+            <div class="global-messages-container" id="debug-mode-banner">
+                <div class="alert alert-danger alert-dismissible fade show" role="status">
+                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fermer"></button>
+                    <p class="mb-0">
+                        <strong class="text-uppercase">DEV MODE</strong>
+                    </p>
+                </div>
+            </div>
+        {% endif %}
         {% block header %}
             {% include "partials/header.html" %}
         {% endblock %}
         {% block sub_header %}{% endblock %}
-        {% if ENVIRONMENT != "PROD" %}<div id="debug-mode-banner" class="bg-danger text-white mt-3">DEV MODE</div>{% endif %}
         <main id="main" role="main" class="s-main">
             {% block messages %}
                 {% if messages %}
diff --git a/lacommunaute/templates/pages/home.html b/lacommunaute/templates/pages/home.html
index f922641e..a820ea44 100644
--- a/lacommunaute/templates/pages/home.html
+++ b/lacommunaute/templates/pages/home.html
@@ -161,7 +161,7 @@ <h1 class="h1-hero">L’espace d’entraide des professionnels de l’inclusion<
         </div>
     </section>
     {% if unanswered_topics %}
-        <section class="s-section mt-0">
+        <section class="s-section my-5 my-md-9">
             <div class="s-section__container container">
                 <div class="s-section__row row">
                     <div class="s-section__col col-12">