Bugzilla – Attachment 131124 Details for
Bug 30179
Make OPAC moresearches menu more responsive
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 30179: Add mobile friendly moresearches navbar
Bug-30179-Add-mobile-friendly-moresearches-navbar.patch (text/plain), 4.90 KB, created by
ByWater Sandboxes
on 2022-02-25 15:19:36 UTC
(
hide
)
Description:
Bug 30179: Add mobile friendly moresearches navbar
Filename:
MIME Type:
Creator:
ByWater Sandboxes
Created:
2022-02-25 15:19:36 UTC
Size:
4.90 KB
patch
obsolete
>From 843bb2b7aa26db77619c7c982342a14e7e305f1c Mon Sep 17 00:00:00 2001 >From: Lucas Gass <lucas@bywatersolutions.com> >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 <li> 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 <barbara.johnson@bedfordtx.gov> >--- > .../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 %] > </nav> <!-- /navbar --> > >+ <div id="moresearches-mobile" class="container-fluid" style="display: none;"> >+ <div class="topnav"> >+ <div href="#home" class="mobile_active"></div> >+ <div id="mobile-links"></div> >+ <a class="icon" onclick="openMoreSearches()"> <i class="fa fa-bars"></i> </a> >+ </div> >+ </div> >+ > [% IF ( OpacHeader ) %] > <div class="container-fluid"> > <div class="row"> >@@ -355,6 +363,7 @@ > </li> > [% PROCESS koha_news_block news => OpacMoreSearches %] > </ul> <!-- /.nav#moresearches --> >+ > </div> <!-- /.row --> > </div> <!-- /.container-fluid --> > [% 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"; >+ } >+} > </script> >+ >+ >+ > [% PROCESS jsinclude %] > [% IF ( Koha.Preference('OPACUserJS') ) %] > <script> >-- >2.30.2
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 30179
:
131095
|
131124
|
131125
|
131133