From 3399ba891026175847911abe24d805010f671abe Mon Sep 17 00:00:00 2001
From: DJ2LS <75909252+DJ2LS@users.noreply.github.com>
Date: Sun, 23 Mar 2025 18:03:58 +0100
Subject: [PATCH] more mobile adjustments

---
 .../src/components/chat_new_message.vue       | 14 ++++++----
 .../src/components/main_footer_navbar.vue     | 28 +++++++++++++++----
 freedata_gui/src/components/main_screen.vue   |  2 +-
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/freedata_gui/src/components/chat_new_message.vue b/freedata_gui/src/components/chat_new_message.vue
index eb3e5257..84ccbef7 100644
--- a/freedata_gui/src/components/chat_new_message.vue
+++ b/freedata_gui/src/components/chat_new_message.vue
@@ -14,6 +14,8 @@ import DOMPurify from 'dompurify';
 import ImageCompressor from 'js-image-compressor'; // Import the compressor
 import { displayToast } from "../js/popupHandler";
 
+import { useIsMobile } from '../js/mobile_devices.js';
+const { isMobile } = useIsMobile(992);
 
 
 // Emoji Handling
@@ -251,6 +253,8 @@ function applyMarkdown(formatType) {
       <!-- Message Input Area -->
       <div class="input-group bottom-0 ms-2">
         <button
+
+            v-if="!isMobile"
           type="button"
           class="btn btn-outline-secondary border-0 rounded-pill me-1"
           data-bs-toggle="modal"
@@ -270,12 +274,12 @@ function applyMarkdown(formatType) {
           <i class="bi bi-paperclip" style="font-size: 1.2rem"></i>
         </button>
 
-        <div class="vr mx-2"></div>
+        <div v-if="!isMobile" class="vr mx-2"></div>
 
         <!-- Markdown Formatting Buttons -->
-        <button class="btn btn-outline-secondary border-0 rounded-pill" @click="applyMarkdown('bold')"><b>B</b></button>
-        <button class="btn btn-outline-secondary border-0 rounded-pill" @click="applyMarkdown('italic')"><i>I</i></button>
-        <button class="btn btn-outline-secondary border-0 rounded-pill" @click="applyMarkdown('underline')"><u>U</u></button>
+        <button v-if="!isMobile" class="btn btn-outline-secondary border-0 d-md-block rounded-pill" @click="applyMarkdown('bold')"><b>B</b></button>
+        <button v-if="!isMobile" class="btn btn-outline-secondary border-0 rounded-pill" @click="applyMarkdown('italic')"><i>I</i></button>
+        <button v-if="!isMobile" class="btn btn-outline-secondary border-0 rounded-pill" @click="applyMarkdown('underline')"><u>U</u></button>
 
         <textarea
           class="form-control border rounded-pill"
@@ -292,7 +296,7 @@ function applyMarkdown(formatType) {
           @click="transmitNewMessage()"
           type="button"
         >
-          <i class="bi bi-send ms-4 me-4" style="font-size: 1.2rem"></i>
+          <i class="bi bi-send ms-2 me-2" style="font-size: 1.2rem"></i>
         </button>
       </div>
     </div>
diff --git a/freedata_gui/src/components/main_footer_navbar.vue b/freedata_gui/src/components/main_footer_navbar.vue
index 44243d82..08210461 100644
--- a/freedata_gui/src/components/main_footer_navbar.vue
+++ b/freedata_gui/src/components/main_footer_navbar.vue
@@ -3,6 +3,12 @@ import { setActivePinia } from 'pinia';
 import pinia from '../store/index';
 import { useStateStore } from '../store/stateStore.js';
 
+import { useIsMobile } from '../js/mobile_devices.js';
+const { isMobile } = useIsMobile(992);
+
+import { useChatStore } from '../store/chatStore.js';
+const chat = useChatStore(pinia);
+
 // Set the active Pinia store
 setActivePinia(pinia);
 
@@ -11,9 +17,13 @@ const state = useStateStore(pinia);
 </script>
 
 <template>
-  <nav class="navbar navbar-expand-xl bg-body-secondary border-top sticky-bottom border-1 p-2 col-11 col-lg-auto">
-
-    <div class="col">
+<nav
+  :class="[
+    'navbar bg-body-secondary border-top sticky-bottom border-1 p-2',
+    (isMobile && chat.selectedCallsign) ? 'col-11' : 'col-12',
+    'col-lg-auto'
+  ]">
+    <div class="col-lg-8 col-md-9 col-sm-10 col-xs-11 col-8">
       <div class="btn-toolbar" role="toolbar">
         <div class="btn-group btn-group-sm me-1" role="group">
           <button
@@ -162,7 +172,7 @@ const state = useStateStore(pinia);
       </div>
     </div>
 
-    <div class="col-lg-4 col-lg-3 col-sm-2 col-xs-1 col-4">
+    <div class="col-lg-4 col-md-3 col-sm-2 col-xs-1 col-1">
       <div class="progress w-100 bg-secondary me-2" style="height: 30px;">
         <div
           class="progress-bar progress-bar-striped bg-primary force-gpu"
@@ -173,11 +183,19 @@ const state = useStateStore(pinia);
           aria-valuemin="0"
           aria-valuemax="100"
         ></div>
-        <p class="justify-content-center m-0 d-flex position-absolute w-100 mt-1 text-light">
+        <p v-if="!isMobile" class="justify-content-center m-0 d-flex position-absolute w-100 mt-1 text-light">
           {{state.arq_transmission_percent}}% [ {{ state.arq_bytes_per_minute || '---' }}
     bpm / {{ state.arq_bits_per_second || '--' }}
     bps ]
         </p>
+
+        <p v-if="isMobile" class="justify-content-center m-0 d-flex position-absolute w-100 mt-1 text-light">
+          {{state.arq_transmission_percent}}%
+        </p>
+
+
+
+
       </div>
 
       <!-- TODO: This code block can be removed I think, DJ2LS -->
diff --git a/freedata_gui/src/components/main_screen.vue b/freedata_gui/src/components/main_screen.vue
index e539795d..41891bf9 100644
--- a/freedata_gui/src/components/main_screen.vue
+++ b/freedata_gui/src/components/main_screen.vue
@@ -11,7 +11,7 @@
   <div class="container-fluid d-flex flex-column min-vh-100">
     <div class="row flex-nowrap flex-grow-1">
       <!-- Left Navbar -->
-      <div class="col-1 col-lg-auto p-0 bg-body-secondary border-end d-flex flex-column">
+      <div class="col-1 col-lg-auto p-0 bg-body-secondary border-end d-flex flex-column" style="min-width: 65px;">
         <div class="flex-shrink-0 m-1 m-lg-3">
             <main_left_navbar />
         </div>