From b393060edb0afd592d4cb88be143df6e20d1ee66 Mon Sep 17 00:00:00 2001
From: Hemna <waboring@hemna.com>
Date: Fri, 15 Sep 2023 11:34:38 -0400
Subject: [PATCH] Webchat: tweaks to UI for expanding chat

This patch changes the layout containers a bit.  Moved the tabs to the
header section and made the tab contents fill the rest of the height of
the browser and it is the only portion that scrolls.
---
 aprsd/web/chat/static/css/chat.css       | 10 ++-
 aprsd/web/chat/static/css/index.css      | 33 +++++++--
 aprsd/web/chat/static/js/send-message.js |  4 +-
 aprsd/web/chat/templates/index.html      | 85 +++++++++++++-----------
 4 files changed, 78 insertions(+), 54 deletions(-)

diff --git a/aprsd/web/chat/static/css/chat.css b/aprsd/web/chat/static/css/chat.css
index 270d682..2cbaf15 100644
--- a/aprsd/web/chat/static/css/chat.css
+++ b/aprsd/web/chat/static/css/chat.css
@@ -3,11 +3,8 @@ input[type=search]::-webkit-search-cancel-button {
 }
 
 .speech-wrapper {
+  padding-top: 0px;
   padding: 5px 30px;
-  border: 1px solid #ccc;
-  height: 450px;
-  overflow-y: scroll;
-  overflow-x: none;
   background-color: #CCCCCC;
 }
 
@@ -42,7 +39,7 @@ input[type=search]::-webkit-search-cancel-button {
     width: 280px;
     font-weight: 600;
     font-size: 12px;
-    margin: 0 0 4px;
+    margin: 0 0 0px;
     color: #3498db;
     display: flex;
     align-items: center;
@@ -66,8 +63,9 @@ input[type=search]::-webkit-search-cancel-button {
 .bubble-message {
     font-size: 16px;
     margin: 0px;
-    padding: 0px 5px 5px 0px;
+    padding: 0px 0px 0px 0px;
     color: #2b2b2b;
+    text-align: left;
 }
 
 .bubble-arrow {
diff --git a/aprsd/web/chat/static/css/index.css b/aprsd/web/chat/static/css/index.css
index 3f99928..e876335 100644
--- a/aprsd/web/chat/static/css/index.css
+++ b/aprsd/web/chat/static/css/index.css
@@ -1,14 +1,9 @@
 body {
     background: #eeeeee;
-    margin: 1em;
+    /*margin: 1em;*/
     text-align: center;
     font-family: system-ui, sans-serif;
-}
-
-footer {
-    padding: 2em;
-    text-align: center;
-    height: 10vh;
+    height: 100%;
 }
 
 #title {
@@ -45,3 +40,27 @@ footer {
     width: 16px;
     height: 16px;
 }
+
+.wc-container {
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+}
+.wc-container .wc-row {
+  /*border: 1px dotted #0313fc;*/
+  padding: 2px;
+}
+.wc-container .wc-row.header {
+  flex: 0 1 auto;
+}
+.wc-container .wc-row.content {
+  flex: 1 1 auto;
+  overflow-y: auto;
+}
+.wc-container .wc-row.footer {
+  flex: 0 1 0px;
+}
+
+.material-symbols-rounded.md-10 {
+  font-size: 18px !important;
+}
diff --git a/aprsd/web/chat/static/js/send-message.js b/aprsd/web/chat/static/js/send-message.js
index e6d9515..31682bd 100644
--- a/aprsd/web/chat/static/js/send-message.js
+++ b/aprsd/web/chat/static/js/send-message.js
@@ -178,7 +178,7 @@ function create_callsign_tab(callsign, active=false) {
   }
 
   item_html = '<li class="nav-item" role="presentation" callsign="'+callsign+'" id="'+tab_id_li+'">';
-  item_html += '<button onClick="$(\'#to_call\').val(\''+callsign+'\');" callsign="'+callsign+'" class="nav-link '+active_str+'" id="'+tab_id+'" data-bs-toggle="tab" data-bs-target="#'+tab_content+'" type="button" role="tab" aria-controls="'+callsign+'" aria-selected="true">';
+  item_html += '<button onClick="callsign_select(\''+callsign+'\');" callsign="'+callsign+'" class="nav-link '+active_str+'" id="'+tab_id+'" data-bs-toggle="tab" data-bs-target="#'+tab_content+'" type="button" role="tab" aria-controls="'+callsign+'" aria-selected="true">';
   item_html += callsign+'&nbsp;&nbsp;';
   item_html += '<span onclick="delete_tab(\''+callsign+'\');">×</span>';
   item_html += '</button></li>'
@@ -397,4 +397,6 @@ function ack_msg(msg) {
 function callsign_select(callsign) {
    var tocall = $("#to_call");
    tocall.val(callsign);
+   var d = $('#wc-content');
+   d.animate({ scrollTop: d.prop('scrollHeight') }, 500);
 }
diff --git a/aprsd/web/chat/templates/index.html b/aprsd/web/chat/templates/index.html
index 0ed2c16..6bd3161 100644
--- a/aprsd/web/chat/templates/index.html
+++ b/aprsd/web/chat/templates/index.html
@@ -64,51 +64,56 @@
     </head>
 
     <body>
-        <div class='container text-center'>
-            <div class="row">
-                <div class="column">
-                    <h1>APRSD WebChat {{ version }}</h1>
-                </div>
-            </div>
-            <div class="row">
-                <div class="column">
-                    <span style='color: green'>{{ callsign }}</span>
-                    connected to
-                    <span style='color: blue' id='aprs_connection'>{{ aprs_connection|safe }}</span>
-                    <span id='uptime'>NONE</span>
-                </div>
-            </div>
-            <div class="row">
-                <form class="row gx-1 gy-1 justify-content-center align-items-center" id="sendform" name="sendmsg" action="">
-                    <div class="col-sm-3">
-                        <label for="to_call" class="visually-hidden">Callsign</label>
-                        <input type="search" class="form-control mb-2 mr-sm-2" name="to_call" id="to_call" placeholder="To Callsign" size="11" maxlength="9">
+        <div class="wc-container">
+            <div class="wc-row header">
+               <div class="container-sm">
+                   <div class="row">
+                       <div class="column">
+                            <h1>APRSD WebChat {{ version }}</h1>
+                       </div>
+                   </div>
+                   <div class="row">
+                        <div class="column">
+                            <span style='color: green'>{{ callsign }}</span>
+                            connected to
+                            <span style='color: blue' id='aprs_connection'>{{ aprs_connection|safe }}</span>
+                            <span id='uptime'>NONE</span>
+                        </div>
+                   </div>
+                    <div class="row">
+                        <form class="row gx-1 gy-1 justify-content-center align-items-center" id="sendform" name="sendmsg" action="">
+                            <div class="col-sm-3">
+                                <label for="to_call" class="visually-hidden">Callsign</label>
+                                <input type="search" class="form-control mb-2 mr-sm-2" name="to_call" id="to_call" placeholder="To Callsign" size="11" maxlength="9">
+                            </div>
+                            <div class="col-sm-3">
+                              <label for="message" class="visually-hidden">Message</label>
+                              <input type="text" class="form-control mb-2 mr-sm-2" name="message" id="message" size="40" maxlength="40" placeholder="Message">
+                            </div>
+                            <div class="col-auto">
+                            <input type="submit" name="submit" class="btn btn-primary mb-2" id="send_msg" value="Send" />
+                            <button type="button" class="btn btn-primary mb-2" id="send_beacon" value="Send GPS Beacon">Send GPS Beacon</button>
+                            <!-- <button type="button" class="btn btn-primary mb-2" id="wipe_local" value="wipe local storage">Wipe LocalStorage</button> -->
+                            </div>
+                        </form>
                     </div>
-                    <div class="col-sm-3">
-                      <label for="message" class="visually-hidden">Message</label>
-                      <input type="text" class="form-control mb-2 mr-sm-2" name="message" id="message" size="40" maxlength="40" placeholder="Message">
-                    </div>
-                    <div class="col-auto">
-                    <input type="submit" name="submit" class="btn btn-primary mb-2" id="send_msg" value="Send" />
-                    <button type="button" class="btn btn-primary mb-2" id="send_beacon" value="Send GPS Beacon">Send GPS Beacon</button>
-                    <!-- <button type="button" class="btn btn-primary mb-2" id="wipe_local" value="wipe local storage">Wipe LocalStorage</button> -->
-                    </div>
-                </form>
+               </div>
+               <div class="container-sm" style="max-width: 800px">
+                    <ul class="nav nav-tabs" id="msgsTabList" role="tablist"></ul>
+               </div>
             </div>
-
-            <div class="row">
-                <div class="container-sm" style="max-width: 800px;">
-                    <ul class="nav nav-tabs" id="msgsTabList" role="tablist">
-                    </ul>
-                    <div class="tab-content" id="msgsTabContent">
+            <div class="wc-row content" id="wc-content">
+                <div class="container" style="max-width: 800px;">
+                    <div class="tab-content" id="msgsTabContent" style="height: 100%">
                     </div>
                 </div>
             </div>
-        </div>
-
-        <div class="ui text container" style="padding-top: 40px">
-            <a href="https://badge.fury.io/py/aprsd"><img src="https://badge.fury.io/py/aprsd.svg" alt="PyPI version" height="18"></a>
-            <a href="https://github.com/craigerl/aprsd"><img src="https://img.shields.io/badge/Made%20with-Python-1f425f.svg" height="18"></a>
+            <div class="wc-row footer">
+                <div class="container-sm" style="padding-top: 40px">
+                    <a href="https://badge.fury.io/py/aprsd"><img src="https://badge.fury.io/py/aprsd.svg" alt="PyPI version" height="18"></a>
+                    <a href="https://github.com/craigerl/aprsd"><img src="https://img.shields.io/badge/Made%20with-Python-1f425f.svg" height="18"></a>
+                </div>
+            </div>
         </div>
     </body>
 </html>