Bug 33773 - Possible CSS adjustments for the header search usability improvement
Summary: Possible CSS adjustments for the header search usability improvement
Status: NEW
Alias: None
Product: Koha
Classification: Unclassified
Component: Staff interface (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Bugs List
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2023-05-18 18:51 UTC by Jason Robb
Modified: 2023-06-23 14:17 UTC (History)
7 users (show)

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


Attachments
Search header css adjustments (218.12 KB, image/gif)
2023-05-18 18:51 UTC, Jason Robb
Details
CSS Adjustments - White background & bold text (27.68 KB, image/png)
2023-06-23 14:17 UTC, Michael Adamyk
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Jason Robb 2023-05-18 18:51:15 UTC
Created attachment 151437 [details]
Search header css adjustments

The header search post-redesign is a little claustrophobic. Some of my libraries are staffed by people who struggle with mousing and keyboarding and will have trouble with accidentally hitting top nav bar links when attempting to click into the search input.

I've made some css tweaks on my system to give it a little more breathing room and improve usability -- sharing in case others might find any of the changes beneficial enough to make them standard.

The attached gif shows what the css below does.

#header_search {
  padding: 0.6em;
}

#header_search .form-title {
  background-color: #6FAF42;
  padding: 0 16px;
  border-radius: 16px;
}

#header_search .form-title label {
  margin: 0 auto;
}

#header_search .nav-tabs>li>a {
  padding: 0.3em 0.5em;
}

#header_search .nav-tabs>li.active a, #header_search .nav-tabs>li.active a:hover {
    cursor: default;
    padding: 0.3em .5em;
    border: 2px solid #7CBB51;
    background-color: #7CBB51;
    border-radius: 16px;
}

#header_search .nav-tabs>li>a:hover, #header_search .nav-tabs>li>a:focus {
    background-color: #408540;
    border: 2px solid #408540;
    border-bottom-color: #6faf44;
    padding: 0.3em .5em;
    text-decoration: none;
}
Comment 1 George Williams (NEKLS) 2023-05-18 19:07:06 UTC
The button highlighting is much appreciated.
Comment 2 Michelle Spinney 2023-05-19 14:58:47 UTC
This is great. I agree with George, thanks for your work on this Jason.
Comment 3 Christopher Brannon 2023-05-22 20:08:03 UTC
+1
Comment 4 Michael Adamyk 2023-06-23 14:14:04 UTC
Jason, thanks for this. It makes things much more visible. I chose to use white as the background for the active buttons because it seems a bit easier to read for our libraries. 

I've also found that bolding the text helps a lot. I used the following:

.tab-title { font-weight: bold; }
Comment 5 Michael Adamyk 2023-06-23 14:17:31 UTC
Created attachment 152640 [details]
CSS Adjustments - White background & bold text

Jason's original CSS adjustments, modified to bold the header text and give a white background on active.