Summary: | Add div wrapper to search results to make moving cover images easier | ||
---|---|---|---|
Product: | Koha | Reporter: | Lucas Gass (lukeg) <lucas> |
Component: | OPAC | Assignee: | Lucas Gass (lukeg) <lucas> |
Status: | CLOSED FIXED | QA Contact: | Testopia <testopia> |
Severity: | enhancement | ||
Priority: | P5 - low | ||
Version: | Main | ||
Hardware: | All | ||
OS: | All | ||
Change sponsored?: | --- | Patch complexity: | Trivial patch |
Documentation contact: | Documentation submission: | ||
Text to go in the release notes: | Version(s) released in: |
19.11.00
|
|
Circulation function: | |||
Attachments: |
search results with cover image
Bug 23720: Move cover images to the left side of results page Bug 23720: Add div wrapper to search results to make moving cover images easier Bug 23720: Add div wrapper to search results to make moving cover images easier Bug 23720: Add div wrapper to search results to make moving cover images easier |
Description
Lucas Gass (lukeg)
2019-10-02 12:23:34 UTC
I wonder about usability here. If your covers have different sizes and or you are missing some, it might get a little harder to read the titles for quick orientation. For academic libraries we often only have a few covers per page. Could we make this an optional change somehow? (using CSS or even a pref?) Created attachment 93458 [details]
search results with cover image
Katrin, I think this could be done much easier with CSS if we added a new <div> wrapper around the title and summary information. A common problem now is that results with too much information end up overflowing like the attached image. Created attachment 93459 [details] [review] Bug 23720: Move cover images to the left side of results page TEST PLAN: 1. Apply this patch and turn on some cover images. 2. Add this CSS: '.bibliocol {display: flex;}.coverimages {padding-right:20px;}' to the OPACUserCSS. 3. Notice covers on left. 4. Remove CSS and notice covers should look normal on the right side. This looks like it will work well, but needs a minor change: You can't add a non-unique ID attribute to an element which will be repeated for each search results. I suggest this: <div id="title_summary_[% SEARCH_RESULT.biblionumber | html %]" class="title_summary"> That provides a class for global styling and a unique ID just in case. Created attachment 93719 [details] [review] Bug 23720: Add div wrapper to search results to make moving cover images easier TEST PLAN remains the same: 1. Apply this patch and turn on some cover images. 2. Add this CSS: '.bibliocol {display: flex;}.coverimages {padding-right:20px;}' to the OPACUserCSS. 3. Notice covers on left. 4. Remove CSS and notice covers should look normal on the right side. Created attachment 93744 [details] [review] Bug 23720: Add div wrapper to search results to make moving cover images easier TEST PLAN: 1. Apply this patch and turn on some cover images. 2. Add this CSS: '.bibliocol {display: flex;}.coverimages {padding-right:20px;}' to the OPACUserCSS. 3. Notice covers on left. 4. Remove CSS and notice covers should look normal on the right side. Signed-off-by: Owen Leonard <oleonard@myacpl.org> Created attachment 93844 [details] [review] Bug 23720: Add div wrapper to search results to make moving cover images easier TEST PLAN: 1. Apply this patch and turn on some cover images. 2. Add this CSS: '.bibliocol {display: flex;}.coverimages {padding-right:20px;}' to the OPACUserCSS. 3. Notice covers on left. 4. Remove CSS and notice covers should look normal on the right side. Signed-off-by: Owen Leonard <oleonard@myacpl.org> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de> Nice work! Pushed to master for 19.11.00 |