Bug 30179 - Make OPAC moresearches menu more responsive
Summary: Make OPAC moresearches menu more responsive
Status: Failed QA
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Lucas Gass
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2022-02-24 23:05 UTC by Lucas Gass
Modified: 2022-02-28 18:31 UTC (History)
1 user (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:


Attachments
Bug 30179: Add mobile friendly moresearches navbar (4.84 KB, patch)
2022-02-24 23:16 UTC, Lucas Gass
Details | Diff | Splinter Review
Bug 30179: Add mobile friendly moresearches navbar (4.90 KB, patch)
2022-02-25 15:19 UTC, ByWater Sandboxes
Details | Diff | Splinter Review
Bug 30179: Add mobile friendly moresearches navbar (4.96 KB, patch)
2022-02-25 15:19 UTC, ByWater Sandboxes
Details | Diff | Splinter Review
Bug 30179: Add mobile friendly moresearches navbar (4.87 KB, patch)
2022-02-25 21:55 UTC, Lucas Gass
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Lucas Gass 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 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 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 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!