Adjusted mobile layout

gwdevhub · Aug 20, 2024 · 3f2ef99 · 3f2ef99
1 parent 68d29b8
commit 3f2ef99
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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%;
 }