Fixed layout bug on mobile related to menu position

gwdevhub · Aug 20, 2024 · 082bd14 · 082bd14
1 parent 3f2ef99
commit 082bd14
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 24 deletions.
diff --git a/GuildWarsPartySearch.NodeJSServer/index.html b/GuildWarsPartySearch.NodeJSServer/index.html
@@ -19,28 +19,30 @@
         <div class="toggleElement cursor-pointer" data-selector="#menu"><img src="src/resources/hamburger.png" /></div>
     </div>
     <div id="menu" class="hidden">
-        <div class="menuHeader">Locations</div>
-        <div class="maplist">
-            <div class="mapLink cursor-pointer" data-id="0">Ascalon (Pre-searing)</div>
-            <div class="mapLink cursor-pointer" data-id="1">Tyria</div>
-            <div class="mapLink cursor-pointer" data-id="2">Cantha</div>
-            <div class="mapLink cursor-pointer" data-id="3">Elona</div>
-            <div class="mapLink cursor-pointer" data-id="4">The Battle Isles</div>
-            <div class="mapLink cursor-pointer" data-id="5">Realm of Torment</div>
-        </div>
-        <div class="menuHeader">Parties</div>
-        <div class="partyList">
-        </div>
-        <div class="legal">
-            <p>
-                Guild Wars Party Search tool by <a href="https://opencollective.com/gwdevhub_collective" target="_blank">gwdevhub</a>
-            </p>
-            <p>
-                <a href="https://www.guildwars.com" target="_blank">Guild Wars</a> Interactive map by <a href="https://www.thatshaman.com" target="_blank">that_shaman</a>
-            </p>
-            <p>
-                NCSOFT, the interlocking NC logo, ArenaNet, Guild Wars, Guild Wars Factions, Guild Wars Nightfall, Guild Wars: Eye of the North, Guild Wars 2, and all associated logos and designs are trademarks or registered trademarks of NCSOFT Corporation. All other trademarks are the property of their respective owners.
-            </p>
+        <div class="menuInner">
+            <div class="menuHeader">Locations</div>
+            <div class="maplist">
+                <div class="mapLink cursor-pointer" data-id="0">Ascalon (Pre-searing)</div>
+                <div class="mapLink cursor-pointer" data-id="1">Tyria</div>
+                <div class="mapLink cursor-pointer" data-id="2">Cantha</div>
+                <div class="mapLink cursor-pointer" data-id="3">Elona</div>
+                <div class="mapLink cursor-pointer" data-id="4">The Battle Isles</div>
+                <div class="mapLink cursor-pointer" data-id="5">Realm of Torment</div>
+            </div>
+            <div class="menuHeader">Parties</div>
+            <div class="partyList">
+            </div>
+            <div class="legal">
+                <p>
+                    Guild Wars Party Search tool by <a href="https://opencollective.com/gwdevhub_collective" target="_blank">gwdevhub</a>
+                </p>
+                <p>
+                    <a href="https://www.guildwars.com" target="_blank">Guild Wars</a> Interactive map by <a href="https://www.thatshaman.com" target="_blank">that_shaman</a>
+                </p>
+                <p>
+                    NCSOFT, the interlocking NC logo, ArenaNet, Guild Wars, Guild Wars Factions, Guild Wars Nightfall, Guild Wars: Eye of the North, Guild Wars 2, and all associated logos and designs are trademarks or registered trademarks of NCSOFT Corporation. All other trademarks are the property of their respective owners.
+                </p>
+            </div>
         </div>
     </div>
     <div id="mapdiv" class="zoomed" style="width: 100vw; height: 100vh; background-color: #ffffff;"></div>

diff --git a/GuildWarsPartySearch.NodeJSServer/index.scss b/GuildWarsPartySearch.NodeJSServer/index.scss
@@ -75,19 +75,27 @@ body {
     text-align: left;
     background: rgba(0, 0, 0, 0.90);
     opacity: 1;
-    transition: right 0.3s, opacity 0.3s;
+    transition: width .3s, opacity 0.3s;
     border-left: solid 1px #808080;
     box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.9);
     color: #ffffff;
     overflow-y: auto;
+    overflow-x:hidden;
     display: flex;
     flex-direction: column;
+    .menuInner {
+        position:relative;
+        width:300px;
+        height:100%;
+        flex-direction: column;
+        display:flex;
+    }
     a {
         color: #ffffff;
         text-decoration: none;
     }
     &.hidden {
-        right: -300px;
+        width:0px;
         opacity: 0;
         pointer-events: none;
     }

diff --git a/GuildWarsPartySearch.NodeJSServer/src/css/mobile.scss b/GuildWarsPartySearch.NodeJSServer/src/css/mobile.scss
@@ -8,6 +8,9 @@
 
   .party-search-result {
     border-bottom: 1px solid rgba(200,200,200,0.2);
+    td {
+      padding:.25rem 0;
+    }
   }
 
   .show-on-mobile {