From 3115969966e02a5e0ae921a8ac2c0f7a7f385518 Mon Sep 17 00:00:00 2001 From: Lucas Gass Date: Thu, 24 Feb 2022 23:07:25 +0000 Subject: [PATCH] Bug 30179: Add mobile friendly moresearches navbar To test: 1. Apply patch 2. Regenerate CSS ( https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface ) 3. Make sure you have links on the moresearches bar. You can turn on course reserves, tag cloud, OPAC authorities, and add
  • elements to OPACMOreSearches ( via HTML customizations ) 4. Now look at the OPAC on a fairly large screen, more than 800px. Everything should look the same 5. Make your screen smaller than 800px and notice the original moresearches navbar dissappears. 6. Also notice the 3 bar icon now appearing in the top left, underneath Log in to my account 7. Click the icon to open the mobile moresearch navbar, it should contain all the same links in the original moresearch navbar 8. Try adding and removing things more the moresearches navbar and make sure the mobile navbar links are consistent with the orginal one. 9. Check as many OPAC pages as possible to make sure it looks and works good. --- .../bootstrap/css/src/_responsive.scss | 8 +++++ .../opac-tmpl/bootstrap/css/src/opac.scss | 36 +++++++++++++++++++ .../bootstrap/en/includes/masthead.inc | 9 +++++ .../bootstrap/en/includes/opac-bottom.inc | 16 +++++++++ 4 files changed, 69 insertions(+) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss index 0e5f462fbf..261c90a275 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss @@ -408,6 +408,14 @@ margin: 0 2px; } } + + #moresearches { + display: none; + } + + #moresearches-mobile { + display: block !important; + } } @media only screen and ( max-width: 991px ) { diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index a650a1f081..24bccdedf8 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -389,6 +389,42 @@ th { } } +#moresearches-mobile { + color: #fff; + + .topnav { + position: relative; + + #mobile-links { + display: none; + } + + a { + color: #000; + padding: 14px 16px; + text-decoration: none; + display: block; + + &:hover { + background-color: #e9ecef; + } + } + + .icon { + color: #000; + display: block; + position: absolute; + right: 0; + top: 0; + } + } + + .mobile_active { + color: white; + height: 50px; + } +} + #news { margin: .5em 0; padding: 1em; diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc index e75c419734..e599c3cedd 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc @@ -140,6 +140,14 @@ [% END # IF opacuserlogin || EnableOpacSearchHistory || opaclanguagesdisplay %] + + [% IF ( OpacHeader ) %]
    @@ -355,6 +363,7 @@
  • [% PROCESS koha_news_block news => OpacMoreSearches %] + [% END # / OpacPublic %] diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc index 5398bf3fcb..f9da5dbed0 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc @@ -291,7 +291,23 @@ $(document).ready(function() { }); } }); + +$('#moresearches li').each( function() { + $('#mobile-links').append( $(this).clone() ); +}); + +function openMoreSearches() { + var x = document.getElementById("mobile-links"); + if (x.style.display === "block") { + x.style.display = "none"; + } else { + x.style.display = "block"; + } +} + + + [% PROCESS jsinclude %] [% IF ( Koha.Preference('OPACUserJS') ) %]