[WebHost] Unify style and behavior of popover and mobile menus (#1596)

* [WebHost] Unify styles for popover and mobile menus. Adjust popover menu to function the same as the mobile menu, and toggle via JS.

* Remove class `first-link` in favor of CSS `:first-child`.

* Adjust mobile menu link font size and padding. Change wording of popover trigger text. Add border-right to popover menu. Change "Upload Host File" to "Host Game"

* Change mobile menu text to "Host Game"

WebHostLib/static/assets/baseHeader.js

@@ -1,9 +1,11 @@
 window.addEventListener('load', () => {
+  // Mobile menu handling
   const menuButton = document.getElementById('base-header-mobile-menu-button');
   const mobileMenu = document.getElementById('base-header-mobile-menu');
 
   menuButton.addEventListener('click', (evt) => {
     evt.preventDefault();
+    evt.stopPropagation();
 
     if (!mobileMenu.style.display || mobileMenu.style.display === 'none') {
       return mobileMenu.style.display = 'flex';
@@ -15,4 +17,24 @@ window.addEventListener('load', () => {
   window.addEventListener('resize', () => {
     mobileMenu.style.display = 'none';
   });
+
+  // Popover handling
+  const popoverText = document.getElementById('base-header-popover-text');
+  const popoverMenu = document.getElementById('base-header-popover-menu');
+
+  popoverText.addEventListener('click', (evt) => {
+    evt.preventDefault();
+    evt.stopPropagation();
+
+    if (!popoverMenu.style.display || popoverMenu.style.display === 'none') {
+      return popoverMenu.style.display = 'flex';
+    }
+
+    popoverMenu.style.display = 'none';
+  });
+
+  document.body.addEventListener('click', () => {
+    mobileMenu.style.display = 'none';
+    popoverMenu.style.display = 'none';
+  });
 });

WebHostLib/static/styles/themes/base.css

@@ -30,6 +30,8 @@ html{
 }
 
 #base-header-right{
+    display: flex;
+    flex-direction: row;
     margin-top: 4px;
 }
 
@@ -42,7 +44,7 @@ html{
     margin-top: 4px;
 }
 
-#base-header a, #base-header-mobile-menu a, #dropdown #dropdown-text{
+#base-header a, #base-header-mobile-menu a, #base-header-popover-text{
     color: #2f6b83;
     text-decoration: none;
     cursor: pointer;
@@ -72,41 +74,49 @@ html{
     position: absolute;
     top: 7rem;
     right: 0;
-    padding-top: 1rem;
 }
 
 #base-header-mobile-menu a{
-    padding: 4rem 2rem;
+    padding: 3rem 1.5rem;
-    font-size: 5rem;
+    font-size: 4rem;
     line-height: 5rem;
     color: #699ca8;
     border-top: 1px solid #d3d3d3;
 }
 
+#base-header-mobile-menu :first-child, #base-header-popover-menu :first-child{
+    border-top: none;
+}
+
 #base-header-right-mobile img{
     height: 3rem;
 }
-#dropdown {
-    display: inline-block;
-}
 
-#dropdown:hover #dropdown-menu {
+#base-header-popover-menu{
-    display: block;
-}
-#dropdown-menu{
     display: none;
+    flex-direction: column;
     position: absolute;
     background-color: #fff;
-    min-width: 160px;
+    margin-left: -108px;
-    padding: 12px 16px;
+    margin-top: 2.25rem;
-    margin-left: -90px;
+    border-radius: 10px;
-    border-radius: 15px;
     border-left: 2px solid #d0ebe6;
     border-bottom: 2px solid #d0ebe6;
+    border-right: 1px solid #d0ebe6;
     filter: drop-shadow(-6px 6px 2px #2e3e83);
 }
-#dropdown-icon {
+
-    height: 7px;
+#base-header-popover-menu a{
+    color: #699ca8;
+    border-top: 1px solid #d3d3d3;
+    text-align: center;
+    font-size: 1.5rem;
+    line-height: 3rem;
+    margin-right: 2px;
+    padding: 0.25rem 1rem;
+}
+
+#base-header-popover-icon {
     width: 14px;
     margin-bottom: 3px;
     margin-left: 2px;
@@ -142,10 +152,10 @@ html{
     }
 
     #base-header-mobile-menu a{
-        font-size: 2rem;
+        font-size: 1.5rem;
         line-height: 3rem;
         margin: 0;
-        padding: 0 1rem;
+        padding: 0.25rem 1rem;
     }
 }
 
@@ -165,4 +175,4 @@ html{
         margin-top: 30px;
         margin-left: 20px;
     }
-}
+}

WebHostLib/templates/header/baseHeader.html

@@ -11,18 +11,16 @@
             </a>
         </div>
         <div id="base-header-right">
-            <div id="dropdown">
+            <div id="base-header-popover-text">
-                <span id="dropdown-text">
+                <img id="base-header-popover-icon" src="/static/static/button-images/popover.png" alt="Popover Menu" />
-                    <img id="dropdown-icon" src="/static/static/button-images/dropdown.png"></img>
+                get started
-                    start playing
+            </div>
-                </span>
+            <div id="base-header-popover-menu">
-                <span id="dropdown-menu">
+                <a href="/games">supported games</a>
-                    <div><a href="/games">supported games</a></div>
+                <a href="/tutorial">setup guides</a>
-                    <div><a href="/generate">generate game</a></div>
+                <a href="/generate">generate game</a>
-                    <div><a href="/uploads">upload game</a></div>
+                <a href="/uploads">host game</a>
-                    <div><a href="/user-content">user content</a></div>
+                <a href="/user-content">user content</a>
-                    <div><a href="/tutorial">setup guides</a></div>
-                </span>
             </div>
             <a href="/faq/en">f.a.q</a>
             <a href="https://discord.gg/8Z65BR2" target="_blank">discord</a>
@@ -38,8 +36,8 @@
         <a href="/tutorial">setup guides</a>
         <a href="/faq/en">f.a.q.</a>
         <a href="/generate">generate game</a>
+        <a href="/uploads">host game</a>
         <a href="/user-content">user content</a>
-        <a href="/uploads">upload game</a>
         <a href="https://discord.gg/8Z65BR2" target="_blank">discord</a>
     </div>
 {% endblock %}