Bug 30179

Summary: Make OPAC moresearches menu more responsive
Product: Koha Reporter: Lucas Gass (lukeg) <lucas>
Component: OPACAssignee: Lucas Gass (lukeg) <lucas>
Status: Failed QA --- QA Contact: Testopia <testopia>
Severity: enhancement    
Priority: P5 - low CC: barbara.johnson
Version: Main   
Hardware: All   
OS: All   
GIT URL: Change sponsored?: ---
Patch complexity: --- Documentation contact:
Documentation submission: Text to go in the release notes:
Version(s) released in:
Circulation function:
Attachments: Bug 30179: Add mobile friendly moresearches navbar
Bug 30179: Add mobile friendly moresearches navbar
Bug 30179: Add mobile friendly moresearches navbar
Bug 30179: Add mobile friendly moresearches navbar

Description Lucas Gass (lukeg) 2022-02-24 23:05:27 UTC
When you have many links on the moresearches navigation bar it can look a bit cluttered at smaller screen sizes. For many OPAC's I have been adding a custom "hambugerized" menu. I'm curious if anyone thinks that would be a good addition to Koha.
Comment 1 Lucas Gass (lukeg) 2022-02-24 23:16:58 UTC
Created attachment 131095 [details] [review]
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.
Comment 2 ByWater Sandboxes 2022-02-25 15:19:36 UTC
Created attachment 131124 [details] [review]
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>
Comment 3 ByWater Sandboxes 2022-02-25 15:19:44 UTC
Created attachment 131125 [details] [review]
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>

Signed-off-by: Barbara Johnson <barbara.johnson@bedfordtx.gov>
Comment 4 Barbara Johnson 2022-02-25 15:20:24 UTC
Worked great.  Nice feature for smaller screens.
Comment 5 Lucas Gass (lukeg) 2022-02-25 21:55:03 UTC
Created attachment 131133 [details] [review]
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>
Comment 6 Katrin Fischer 2022-02-28 18:22:50 UTC
Hi Lucas, is something wrong with the patch?
Comment 7 Lucas Gass (lukeg) 2022-02-28 18:25:43 UTC
(In reply to Katrin Fischer from comment #6)
> Hi Lucas, is something wrong with the patch?

Yes! Sorry, I meant to update. I realized, after looking again, this doesn't work good from an accessibility standpoint. The responsive menu cannot be navigated with well with a screen reader to tabbed through easily. 

I will work on a follow-up ASAP.
Comment 8 Katrin Fischer 2022-02-28 18:31:34 UTC
Thx for clarifying and great to hear about your testing for accessibility!