From 843bb2b7aa26db77619c7c982342a14e7e305f1c 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. Signed-off-by: Barbara Johnson --- .../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 ea327506d0..02058d7e01 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -390,6 +390,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 33f0e487a1..d0994a42bc 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 fb57e6c18d..f645fb79a7 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') ) %]