| Summary: | Possible CSS adjustments for the header search usability improvement | ||
|---|---|---|---|
| Product: | Koha | Reporter: | Jason Robb <jrobb> |
| Component: | Staff interface | Assignee: | Bugs List <koha-bugs> |
| Status: | NEW --- | QA Contact: | Testopia <testopia> |
| Severity: | enhancement | ||
| Priority: | P5 - low | CC: | barbara.johnson, cbrannon, george, gmcharlt, lucas, madamyk, mspinney |
| Version: | Main | ||
| Hardware: | All | ||
| OS: | All | ||
| Change sponsored?: | --- | Patch complexity: | --- |
| Documentation contact: | Documentation submission: | ||
| Text to go in the release notes: | Version(s) released in: | ||
| Circulation function: | |||
| Attachments: |
Search header css adjustments
CSS Adjustments - White background & bold text |
||
The button highlighting is much appreciated. This is great. I agree with George, thanks for your work on this Jason. +1 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; }
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.
|
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; }