💄 Feat(bo): update messages UI (#922)

MTES-MCT · Dec 3, 2024 · 3f4b35e · 3f4b35e
1 parent 87c4ff3
commit 3f4b35e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 10 deletions.
diff --git a/dossierfacile-bo/src/main/resources/static/css/main.css b/dossierfacile-bo/src/main/resources/static/css/main.css
@@ -418,30 +418,48 @@ input::-webkit-inner-spin-button {
     position: relative;
 }
 
-#chat-page ul {
+#chat-page .message-area {
     list-style-type: none;
     margin: 0;
     overflow: auto;
     overflow-y: scroll;
     padding: 0 20px 0px 20px;
-    height: calc(100vh - 220px);
+    height: 500px;
+    margin-top:10px;
+    margin-bottom:5px;
+    border-radius: 5px;
+}
+
+#chat-page .custom-message {
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
 }
 
 #chat-page #messageForm {
     padding: 20px;
 }
 
-#chat-page ul li {
+#chat-page .message-area li {
     line-height: 1.5rem;
     padding: 10px 20px;
     margin: 0;
 }
 
+#chat-page .message-area .custom-message > li {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
 ul.customMessage li:not(:last-child) {
     border-bottom: 1px solid var(--bs-secondary-bg-subtle);
 }
 
-#chat-page ul li p {
+#chat-page .message-area li p {
     margin: 0;
 }
 
@@ -509,10 +527,6 @@ ul.customMessage li:not(:last-child) {
 
     }
 
-    #chat-page ul {
-        height: calc(100% - 120px);
-    }
-
     #messageForm .input-group button {
         width: 65px;
     }

diff --git a/dossierfacile-bo/src/main/resources/templates/bo/message.html b/dossierfacile-bo/src/main/resources/templates/bo/message.html
@@ -10,8 +10,7 @@
             <div class="chat-container bg-primary-subtle">
                 <div class="row hidden-xs">
                     <div class="col-md-12">
-                        <ul th:id="'messageArea' + ${tenant.getId()}" style="height: 500px;margin-top:10px;
-                            margin-bottom:5px;border-radius: 5px;" class="bg-light-subtle">
+                        <ul th:id="'messageArea' + ${tenant.getId()}" class="message-area bg-light-subtle">
                             <li class="chat-message"
                                 style="border-radius: 10px;margin-top:10px;margin-bottom:10px;"
                                 th:each="message: ${messages}" th:classappend="${message.getFromUser()==null}?'bg-secondary-subtle':'bg-dark-subtle'"