From e340b7010cb62533874cc6d69809d7caeba6cd62 Mon Sep 17 00:00:00 2001 From: Ben Sturmfels Date: Fri, 15 Oct 2021 23:06:34 +1100 Subject: [PATCH] Add mobile menu and DuckDuckGo-based search. --- www/conservancy/static/css/conservancy.css | 55 ++++++++++++++++--- www/conservancy/static/img/font_awesome.svg | 9 +++ www/conservancy/static/js/conservancy.js | 7 +++ .../templates/base_conservancy.html | 27 +++++++-- www/conservancy/templates/frontpage.html | 1 + 5 files changed, 84 insertions(+), 15 deletions(-) diff --git a/www/conservancy/static/css/conservancy.css b/www/conservancy/static/css/conservancy.css index 1078c763..1b0db98a 100644 --- a/www/conservancy/static/css/conservancy.css +++ b/www/conservancy/static/css/conservancy.css @@ -61,23 +61,25 @@ a, form { position: relative; } .fixme, a[href$="#fixme"]:before, form[action$="#fixme"]:before { - border: 1px solid purple; - border-radius: 2px; - content: 'FIXME'; - font-size: 0.55rem; - color: purple; + border: 1px solid var(--orange); + border-radius: 6px; + content: '?'; + font-size: 0.6rem; + color: var(--orange); position: absolute; - top: -5px; - right: -5px; + top: -4px; + right: -4px; padding: 1px; background: yellow; - opacity: 0.8; + /* opacity: 0.8; */ + width: 12px; + text-align: center; } input:focus { z-index: 3; border-color: #86b7fe; - box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); + box-shadow: 0 0 0 .25rem rgb(236, 99, 67, .5); }; @@ -181,6 +183,7 @@ body > header { } #navbar ul { list-style: none; + text-transform: uppercase; padding: 0; } #navbar li { @@ -226,6 +229,7 @@ body > header { top: 100%; left: 0; min-width: 15rem; + text-transform: none; } #navbar li ul a { font-weight: normal; @@ -240,6 +244,39 @@ body > header { text-align: right; } +#menu-icon:active, #search-icon:active { + transform: scale(1.1); +} +#navbar-outer { min-height: .5rem; } +#navbar.mobile { + display: block; + max-width: 32rem; +} +#navbar.mobile.search { display: block; } +#navbar.mobile li { + display: block; +} +#navbar.mobile ul { + padding-left: .5rem; + padding-right: .5rem; + display: block !important; + position: relative !important; + top: auto !important; + left: 0 !important; + right: auto !important; + text-align: left !important; +} +#navbar.mobile > ul > li { + padding-top: .5rem; + padding-bottom: .5rem; +} +#navbar.mobile > ul > li { + border-bottom: 1px solid rgba(255, 255, 255, 0.2); +} +#navbar.mobile li ul { + margin-left: .5rem; +} + #mainContent { overflow: auto; diff --git a/www/conservancy/static/img/font_awesome.svg b/www/conservancy/static/img/font_awesome.svg index c2c9bf63..259a35c8 100644 --- a/www/conservancy/static/img/font_awesome.svg +++ b/www/conservancy/static/img/font_awesome.svg @@ -22,4 +22,13 @@ License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL + + + + + + + + + diff --git a/www/conservancy/static/js/conservancy.js b/www/conservancy/static/js/conservancy.js index fad6efd4..58e78370 100644 --- a/www/conservancy/static/js/conservancy.js +++ b/www/conservancy/static/js/conservancy.js @@ -100,4 +100,11 @@ $(document).ready(function() { $tShirtSelector.slideUp(duration); } }).filter(':checked').trigger('change', 0); + + function toggleMenu(event) { + $('#navbar').toggleClass('mobile'); + $('#search-query').focus(); + } + $('#menu-icon').on('click', toggleMenu); + $('#search-icon').on('click', toggleMenu); }); diff --git a/www/conservancy/templates/base_conservancy.html b/www/conservancy/templates/base_conservancy.html index 24f2d127..fdb58467 100644 --- a/www/conservancy/templates/base_conservancy.html +++ b/www/conservancy/templates/base_conservancy.html @@ -39,23 +39,38 @@
+ + + Donate Join - Special + Special + + +
-