Bug 31919

Summary: Hovered items in "More" should change background color
Product: Koha Reporter: Jonathan Druart <jonathan.druart>
Component: Staff interfaceAssignee: Owen Leonard <oleonard>
Status: CLOSED FIXED QA Contact: Katrin Fischer <katrin.fischer>
Severity: normal    
Priority: P5 - low CC: gmcharlt, lucas, martin.renvoize, oleonard
Version: Main   
Hardware: All   
OS: All   
GIT URL: Change sponsored?: ---
Patch complexity: Trivial patch Documentation contact:
Documentation submission: Text to go in the release notes:
Version(s) released in:
22.11.00
Circulation function:
Bug Depends on: 30952    
Bug Blocks:    
Attachments: Bug 31919: Add background-color to a:hover in the header
Bug 31919: Add background-color to a:hover in the header
Bug 31919: Add background-color to a:hover in the header
Bug 31919: [alternate] Add backgground color to hovered items in header dropdowns
Bug 31919: Add backgground color to hovered items in header dropdowns
Bug 31919: Add backgground color to hovered items in header dropdowns

Description Jonathan Druart 2022-10-21 15:29:21 UTC
when I am on acqui-home.pl, the nav menu is showing the item hovered by the pointer with a nice green label on the left of the element, and changing its background. However the behaviour in the "More" dropdown menu is to simply underline the selected items.
Comment 1 Jonathan Druart 2022-10-27 11:28:12 UTC
Created attachment 142709 [details] [review]
Bug 31919: Add background-color to a:hover in the header
Comment 2 Jonathan Druart 2022-10-27 11:28:50 UTC
Like that?
Comment 3 Martin Renvoize (ashimema) 2022-10-28 08:24:16 UTC
Created attachment 142755 [details] [review]
Bug 31919: Add background-color to a:hover in the header

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 4 Martin Renvoize (ashimema) 2022-10-28 08:29:38 UTC
I like it I think.. though I'm not 100% on the bottom marging staying black..

Signing off, but other opinions are welcome.
Comment 5 Katrin Fischer 2022-10-30 09:43:56 UTC
Please don't forget to set assignee!
Comment 6 Katrin Fischer 2022-10-30 09:47:41 UTC
Created attachment 142810 [details] [review]
Bug 31919: Add background-color to a:hover in the header

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 7 Katrin Fischer 2022-10-30 10:00:46 UTC
I like that this makes it easier visible what you have selected. Love it on the pull downs, not completely sure about the menu items. But I think it's better than the underline that is not as visible by far.
Comment 8 Jonathan Druart 2022-10-31 06:47:52 UTC
(In reply to Katrin Fischer from comment #5)
> Please don't forget to set assignee!

It was not a clean patch (it was not NSO) and hadn't more time to spend on this, it was only a suggestion patch and didn't set the assignee on purpose ;)
Comment 9 Jonathan Druart 2022-10-31 06:48:43 UTC
I would wait for Owen's opinion before pushing this.
Comment 10 Owen Leonard 2022-10-31 11:39:06 UTC
Created attachment 142828 [details] [review]
Bug 31919: [alternate] Add backgground color to hovered items in header dropdowns

This alternate patch is different in a few ways:

- Add a hover background color only to items in dropdown menus.
- Use an SCSS variable for the background color
- Update the specificity of the hover CSS to more fully override
  Bootstrap's default.

To test, apply the patch and rebuild the staff interface CSS.

- On any page in the staff interface, test the behavior of links in the
  nav header.
- The always-visible links (Circulation, Patrons, etc) should keep the
  same style as before: Underline on hover.
- In dropdown menus like "More" and the user menu in the upper right
  corner, hovered links should have a green background.
Comment 11 Jonathan Druart 2022-10-31 13:39:25 UTC
The behaviour of the background-color for the "Search bottom array" is really weird. But it's not coming from this patch I think. Could you have a look?
Comment 12 Jonathan Druart 2022-10-31 14:10:27 UTC
Created attachment 142831 [details] [review]
Bug 31919: Add backgground color to hovered items in header dropdowns

This alternate patch is different in a few ways:

- Add a hover background color only to items in dropdown menus.
- Use an SCSS variable for the background color
- Update the specificity of the hover CSS to more fully override
  Bootstrap's default.

To test, apply the patch and rebuild the staff interface CSS.

- On any page in the staff interface, test the behavior of links in the
  nav header.
- The always-visible links (Circulation, Patrons, etc) should keep the
  same style as before: Underline on hover.
- In dropdown menus like "More" and the user menu in the upper right
  corner, hovered links should have a green background.

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 13 Katrin Fischer 2022-11-01 15:06:56 UTC
Created attachment 142893 [details] [review]
Bug 31919: Add backgground color to hovered items in header dropdowns

This alternate patch is different in a few ways:

- Add a hover background color only to items in dropdown menus.
- Use an SCSS variable for the background color
- Update the specificity of the hover CSS to more fully override
  Bootstrap's default.

To test, apply the patch and rebuild the staff interface CSS.

- On any page in the staff interface, test the behavior of links in the
  nav header.
- The always-visible links (Circulation, Patrons, etc) should keep the
  same style as before: Underline on hover.
- In dropdown menus like "More" and the user menu in the upper right
  corner, hovered links should have a green background.

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 14 Tomás Cohen Arazi (tcohen) 2022-11-04 22:25:45 UTC
Pushed to master for 22.11.

Nice work everyone, thanks!