Vertically align chat buttons

- Bump to 0.13.1
open-cogsci · Mar 11, 2024 · 880971c · 880971c
1 parent ea18d03
commit 880971c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/heymans/__init__.py b/heymans/__init__.py
@@ -1,3 +1,3 @@
 """AI-based chatbot that provides sensible answers based on documentation"""
 
-__version__ = '0.13.0'
+__version__ = '0.13.1'
diff --git a/heymans/templates/chat.html b/heymans/templates/chat.html
@@ -16,10 +16,12 @@
             <div id="message-box">
                 <div id="message-container">
                     <textarea id="message" placeholder="Enter your message"></textarea>
-                    <button title="Send" id="send" disabled><i class="fas fa-paper-plane"></i></button>
-                    <button title="Cancel" id="cancel"><i class="fas fa-stop-circle"></i></button>
-                    <button title="Show menu" id="expand" onclick="app.__vue__.toggleMenu()"><i class="fas fa-bars"></i></button>
-                    <button title="Expand message box" id="expand" onclick="expandMessageBox()"><i class="fas fa-expand"></i></button>
+                    <div id="button-container">
+                        <button title="Send" id="send" disabled><i class="fas fa-paper-plane"></i></button>
+                        <button title="Cancel" id="cancel"><i class="fas fa-stop-circle"></i></button>
+                        <button title="Show menu" id="expand" onclick="app.__vue__.toggleMenu()"><i class="fas fa-bars"></i></button>
+                        <button title="Expand message box" id="expand" onclick="expandMessageBox()"><i class="fas fa-expand"></i></button>
+                    </div>
                 </div>
             </div>
             <div id="message-counter" style="text-align: right;"></div>

diff --git a/heymans/templates/stylesheet.css.jinja b/heymans/templates/stylesheet.css.jinja
@@ -174,15 +174,23 @@ a:visited {
 
 #message-container {
     width: 100%;
+    display: flex;
+    align-items: stretch;
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 4px;
     background-color: white;
 }
 
+#button-container {
+    display: flex;
+    flex-direction: column;
+    align-self: flex-start;
+}
+
 textarea#message {
     border: none;
-    width: 80%;
+    flex-grow: 1;
     height: 100%;
 }
 
@@ -198,7 +206,6 @@ button#cancel,
 button#expand,
 button#send {
     font-size: 1.2em;
-    float:right;
     height:100%;
     border: none;
     color: #fff;