make chat mobile friendly

mrf7777 · Oct 10, 2023 · 2fd559c · 2fd559c
1 parent 50d2bad
commit 2fd559c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/furfolio/templates/furfolio/commissions/chat/chat.html b/furfolio/templates/furfolio/commissions/chat/chat.html
@@ -27,14 +27,24 @@
 {% endfor %}
 
 {% if commission_messages %}
-    <div class="row mb-3">
+    <div class="row mb-3 d-none d-md-flex">
         <div class="col-md-6">
             {% include "furfolio/users/badge.html" with user=other_user show_avatar=True only %}
         </div>
         <div class="col-md-6">
             {% include "furfolio/users/badge.html" with user=request.user show_avatar=True only %}
         </div>
     </div>
+
+    <div class="d-flex d-md-none">
+        <div class="p-3 border border-secondary-subtle rounded">
+            {% include "furfolio/users/badge.html" with user=other_user show_avatar=True only %}
+        </div>
+        <div class="flex-fill"></div>
+        <div class="p-3 bg-success border border-secondary-subtle rounded">
+            {% include "furfolio/users/badge.html" with user=request.user show_avatar=True only %}
+        </div>
+    </div>
 {% endif %}
 
 <form method="post" id="chat-form" enctype="multipart/form-data">

diff --git a/furfolio/templates/furfolio/commissions/chat/message_card.html b/furfolio/templates/furfolio/commissions/chat/message_card.html
@@ -10,7 +10,7 @@
     - "NON_CURRENT_USER": use this to make card styled as if the message is sent from someone else
 {% endcomment %}
 
-<div id="{{ id }}" class="card {% if sender == "CURRENT_USER" %}bg-success-subtle{% elif sender == "NON_CURRENT_USER" %}{% endif %}">
+<div id="{{ id }}" class="card {% if sender == "CURRENT_USER" %}bg-success{% elif sender == "NON_CURRENT_USER" %}{% endif %}">
     <div class="card-body">
         <div class="card-text">
             <p>