UI improvements

Closes #74 Closes #73
gwdevhub · Aug 11, 2024 · a20c78f · a20c78f
1 parent eecae24
commit a20c78f
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 24 deletions.
diff --git a/GuildWarsPartySearch.FrontEnd/Content/app.js b/GuildWarsPartySearch.FrontEnd/Content/app.js
@@ -985,7 +985,7 @@ function mapRowClicked(mapObj) {
 }
 
 function hidePartyWindowRows(rowType) {
-    const tbody = document.querySelector("#popupWindowTable tbody");
+    const tbody = document.querySelector("#partyWindowTable tbody");
     const existingRows = tbody.querySelectorAll(`.${rowType}`);
     existingRows.forEach(row => row.remove());
     const pivotRow = document.getElementById(`${rowType}`);
@@ -996,7 +996,7 @@ function hidePartyWindowRows(rowType) {
 }
 
 function populatePartyWindowRows(rowType, partySearchesArray) {
-    const tbody = document.querySelector("#popupWindowTable tbody");
+    const tbody = document.querySelector("#partyWindowTable tbody");
     const existingRows = tbody.querySelectorAll(`.${rowType}`);
     existingRows.forEach(row => row.remove());
     const pivotRow = document.getElementById(`${rowType}`);
@@ -1053,7 +1053,7 @@ async function buildPartyWindow() {
         return;
     }
 
-    let popupWindowTitle = document.querySelector("#popupWindowTitle");
+    let popupWindowTitle = document.querySelector("#partyWindowTitle");
     popupWindowTitle.textContent = `Party Search - ${map.name}`;
     if (aggregatedPartySearches[map.id.toString()] &&
         aggregatedPartySearches[map.id.toString()][0] &&
@@ -1428,18 +1428,18 @@ async function waitForLoaded(){
 }
 
 function togglePartyWindow(){
-    document.querySelector("#popupWindow").classList.toggle("hidden");
+    document.querySelector("#partyWindow").classList.toggle("hidden");
 }
 
 function hidePartyWindow(){
-    if (!document.querySelector("#popupWindow").classList.contains("hidden")) {
+    if (!document.querySelector("#partyWindow").classList.contains("hidden")) {
         togglePartyWindow();
         window.location.hash = "";
     }
 }
 
 function showPartyWindow(){
-    if (document.querySelector("#popupWindow").classList.contains("hidden")) {
+    if (document.querySelector("#partyWindow").classList.contains("hidden")) {
         togglePartyWindow();
     }
 }

diff --git a/GuildWarsPartySearch.FrontEnd/Content/index.html b/GuildWarsPartySearch.FrontEnd/Content/index.html
@@ -52,10 +52,10 @@
         </div>
     </div>
     <div id="mapdiv" class="zoomed" style="width: 100vw; height: 100vh; background-color: #ffffff;"></div>
-    <div id="popupWindow" class="hidden">
-        <div id="popupWindowTitle" class="divider">Party Search</div>
+    <div id="partyWindow" class="popupWindow hidden">
+        <div id="partyWindowTitle" class="popupWindowTitle divider">Party Search</div>
         <div class="closeButton" onclick="hidePartyWindow()">x</div>
-        <table id="popupWindowTable" class="table">
+        <table id="partyWindowTable" class="table">
             <thead>
                 <tr class="row">
                     <th class="header">Party Leader</th>
@@ -67,19 +67,19 @@
             </thead>
             <tbody>
                 <tr class="divider row" id="missionRow">
-                    <td colspan="4">Mission</td>
+                    <td colspan="5">Mission</td>
                 </tr>
                 <tr class="divider row" id="questRow">
-                    <td colspan="4">Quest</td>
+                    <td colspan="5">Quest</td>
                 </tr>
                 <tr class="divider row" id="huntingRow">
-                    <td colspan="4">Hunting</td>
+                    <td colspan="5">Hunting</td>
                 </tr>
                 <tr class="divider row" id="guildRow">
-                    <td colspan="4">Guild</td>
+                    <td colspan="5">Guild</td>
                 </tr>
                 <tr class="divider row" id="tradeRow">
-                    <td colspan="4">Trade</td>
+                    <td colspan="5">Trade</td>
                 </tr>
                 <tr class="divider" id="endRow">
                 </tr>

diff --git a/GuildWarsPartySearch.FrontEnd/Content/stylesheet.css b/GuildWarsPartySearch.FrontEnd/Content/stylesheet.css
@@ -305,7 +305,7 @@ body {
     font-size: 10pt;
 }
 
-#popupWindow {
+.popupWindow {
     position: absolute;
     right: 25%;
     top: 25%;
@@ -321,16 +321,16 @@ body {
     display: block;
     color: #ffffff;
     overflow-y: auto;
-    overflow-x: auto;
+    overflow-x: hidden;
     border: solid 1px #808080;
 }
 
-    #popupWindow.hidden {
+    .popupWindow.hidden {
         opacity: 0;
         pointer-events: none;
     }
 
-    #popupWindow .closeButton {
+    .popupWindow .closeButton {
         position: absolute;
         top: 0;
         right: 0;
@@ -339,32 +339,37 @@ body {
         cursor: pointer;
     }
 
-        #popupWindow .closeButton:hover {
+        .popupWindow .closeButton:hover {
             background: #1d1d1d;
         }
 
-    #popupWindow .table{
+    .popupWindow .table{
         display: table;
+        overflow-wrap: anywhere;
         width: 100%;
     }
 
-    #popupWindow .table .row{
+    .popupWindow .table .row{
         display: table-row;
         margin-left: 5px;
     }
 
-    #popupWindow .divider {
+    .popupWindow .divider {
         font-size: 12pt;
         margin: 5px;
     }
 
-    #popupWindow .table .row .header{
+    .popupWindow .table tr.divider td {
+        border-top: solid 1px #808080;
+    }
+
+    .popupWindow .table .row .header{
         display: table-cell;
         text-align: center;
         font-size: 12pt;
     }
 
-    #popupWindow .table .row .cell {
+    .popupWindow .table .row .cell {
             display: table-cell;
             text-align: center;
             font-size: 10pt;