From f09f3663d6ea400bd87cbf3030d66ca225754c32 Mon Sep 17 00:00:00 2001 From: Chris Wilson Date: Mon, 27 Mar 2023 00:12:10 -0400 Subject: [PATCH] [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 | 22 ++++++++ .../{dropdown.png => popover.png} | Bin WebHostLib/static/styles/themes/base.css | 50 +++++++++++------- WebHostLib/templates/header/baseHeader.html | 24 ++++----- 4 files changed, 63 insertions(+), 33 deletions(-) rename WebHostLib/static/static/button-images/{dropdown.png => popover.png} (100%) diff --git a/WebHostLib/static/assets/baseHeader.js b/WebHostLib/static/assets/baseHeader.js index b8ee82dd..7c9be778 100644 --- a/WebHostLib/static/assets/baseHeader.js +++ b/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'; + }); }); diff --git a/WebHostLib/static/static/button-images/dropdown.png b/WebHostLib/static/static/button-images/popover.png similarity index 100% rename from WebHostLib/static/static/button-images/dropdown.png rename to WebHostLib/static/static/button-images/popover.png diff --git a/WebHostLib/static/styles/themes/base.css b/WebHostLib/static/styles/themes/base.css index 0c491f7b..fdfe56af 100644 --- a/WebHostLib/static/styles/themes/base.css +++ b/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; - font-size: 5rem; + padding: 3rem 1.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 { - display: block; -} -#dropdown-menu{ +#base-header-popover-menu{ display: none; + flex-direction: column; position: absolute; background-color: #fff; - min-width: 160px; - padding: 12px 16px; - margin-left: -90px; - border-radius: 15px; + margin-left: -108px; + margin-top: 2.25rem; + border-radius: 10px; 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; } -} \ No newline at end of file +} diff --git a/WebHostLib/templates/header/baseHeader.html b/WebHostLib/templates/header/baseHeader.html index 5865d509..0042937d 100644 --- a/WebHostLib/templates/header/baseHeader.html +++ b/WebHostLib/templates/header/baseHeader.html @@ -11,18 +11,16 @@
- {% endblock %}