From 3f2ef99912c4136709419deace9159745bcb64a4 Mon Sep 17 00:00:00 2001
From: Jon <>
Date: Tue, 20 Aug 2024 14:57:06 +0100
Subject: [PATCH] Adjusted mobile layout

---
 GuildWarsPartySearch.NodeJSServer/index.html      |  3 +--
 GuildWarsPartySearch.NodeJSServer/index.mjs       | 15 +++++++++------
 .../src/css/mobile.scss                           |  4 ++++
 .../src/css/utilities.scss                        |  6 ++++++
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/GuildWarsPartySearch.NodeJSServer/index.html b/GuildWarsPartySearch.NodeJSServer/index.html
index cca147f..0b62785 100644
--- a/GuildWarsPartySearch.NodeJSServer/index.html
+++ b/GuildWarsPartySearch.NodeJSServer/index.html
@@ -84,8 +84,7 @@
                             <th class="header text-start">Description</th>
                         </tr>
                         <tr class="row show-on-mobile">
-                            <th class="header text-start">Party Details</th>
-                            <th class="header text-start">Description</th>
+                            <th class="header">Party Details</th>
                         </tr>
                         </thead>
                     </table>
diff --git a/GuildWarsPartySearch.NodeJSServer/index.mjs b/GuildWarsPartySearch.NodeJSServer/index.mjs
index 966da41..ec18359 100644
--- a/GuildWarsPartySearch.NodeJSServer/index.mjs
+++ b/GuildWarsPartySearch.NodeJSServer/index.mjs
@@ -249,7 +249,7 @@ async function navigateToLocation(map_id, showParties) {
     setTimeout(() => {
         navigating = 0;
     }, 1200);
-    
+
 }
 
 function get_parties_for_map(map_id) {
@@ -297,18 +297,21 @@ function redrawPartyWindow() {
 
 
         party_rows_html += parties_by_type.map((party) => {
-            return `<tr class="${row_class} hide-on-mobile row small centered">
+            return `<tr class="${row_class} hide-on-mobile row small centered party-search-result">
             <td class="text-start">${party.sender || ''}</td>\
             <td>${getDistrictName(party.district_region) || ''}</td>\
             <td>${party.party_size}</td>\
             <td>${party.district_number}</td>\
             <td class="text-start">${party.message || ''}</td>\
         </tr>
-        <tr class="${row_class} show-on-mobile row small centered">
+        <tr class="${row_class} show-on-mobile row small centered party-search-result">
             <td class="text-start">
-                ${party.sender || ''}<br/>
-                ${getDistrictName(party.district_region)} ${party.district_number}<br/>
-            </td><td class="text-start">${party.message}</td>
+                <div class="d-flex">
+                    <div class="w-50">${party.sender || ''}</div>
+                    <div class="w-50 text-end">${getDistrictName(party.district_region)} ${party.district_number}</div>
+                </div>
+                <div>${party.message}</div>
+            </td>
         </tr>`;
         }).join('');
     });
diff --git a/GuildWarsPartySearch.NodeJSServer/src/css/mobile.scss b/GuildWarsPartySearch.NodeJSServer/src/css/mobile.scss
index 6ea0dc1..196841e 100644
--- a/GuildWarsPartySearch.NodeJSServer/src/css/mobile.scss
+++ b/GuildWarsPartySearch.NodeJSServer/src/css/mobile.scss
@@ -6,6 +6,10 @@
 /* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 600px) {
 
+  .party-search-result {
+    border-bottom: 1px solid rgba(200,200,200,0.2);
+  }
+
   .show-on-mobile {
     display:revert !important;
   }
diff --git a/GuildWarsPartySearch.NodeJSServer/src/css/utilities.scss b/GuildWarsPartySearch.NodeJSServer/src/css/utilities.scss
index 7788b4b..7df89c3 100644
--- a/GuildWarsPartySearch.NodeJSServer/src/css/utilities.scss
+++ b/GuildWarsPartySearch.NodeJSServer/src/css/utilities.scss
@@ -48,9 +48,15 @@
 .text-nowrap {
   white-space: nowrap;
 }
+.text-end {
+  text-align:right;
+}
 .align-items-center {
   align-items: center;
 }
 .align-self-stretch {
   align-self: stretch;
+}
+.w-50 {
+  width:50%;
 }
\ No newline at end of file