[Bug 33773] New: Possible CSS adjustments for the header search usability improvement
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33773 Bug ID: 33773 Summary: Possible CSS adjustments for the header search usability improvement Change sponsored?: --- Product: Koha Version: master Hardware: All OS: All Status: NEW Severity: enhancement Priority: P5 - low Component: Staff interface Assignee: koha-bugs@lists.koha-community.org Reporter: jrobb@sekls.org QA Contact: testopia@bugs.koha-community.org CC: gmcharlt@gmail.com Created attachment 151437 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=151437&action=edit 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; } -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33773 George Williams (NEKLS) <george@nekls.org> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |george@nekls.org --- Comment #1 from George Williams (NEKLS) <george@nekls.org> --- The button highlighting is much appreciated. -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33773 Lucas Gass <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |lucas@bywatersolutions.com -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33773 mspinney@clamsnet.org changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |mspinney@clamsnet.org -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33773 --- Comment #2 from mspinney@clamsnet.org --- This is great. I agree with George, thanks for your work on this Jason. -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33773 Barbara Johnson <barbara.johnson@bedfordtx.gov> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |barbara.johnson@bedfordtx.g | |ov -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33773 Christopher Brannon <cbrannon@cdalibrary.org> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |cbrannon@cdalibrary.org --- Comment #3 from Christopher Brannon <cbrannon@cdalibrary.org> --- +1 -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33773 Michael Adamyk <madamyk@ckls.org> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |madamyk@ckls.org --- Comment #4 from Michael Adamyk <madamyk@ckls.org> --- 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; } -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=33773 --- Comment #5 from Michael Adamyk <madamyk@ckls.org> --- Created attachment 152640 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=152640&action=edit CSS Adjustments - White background & bold text Jason's original CSS adjustments, modified to bold the header text and give a white background on active. -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
participants (1)
-
bugzilla-daemon@bugs.koha-community.org