Bug 23720

Summary: Add div wrapper to search results to make moving cover images easier
Product: Koha Reporter: Lucas Gass <lucas>
Component: OPACAssignee: Lucas Gass <lucas>
Status: CLOSED FIXED QA Contact: Testopia <testopia>
Severity: enhancement    
Priority: P5 - low CC: katrin.fischer
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
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 2019-10-02 12:23:34 UTC
Most libraries seem to prefer to having cover images on the OPAC results page appear to the left of the text, this is would also make the OPAC results conform with the results in the staff interface.
Comment 1 Katrin Fischer 2019-10-02 12:33:00 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.
Comment 2 Katrin Fischer 2019-10-02 12:33:23 UTC
Could we make this an optional change somehow? (using CSS or even a pref?)
Comment 3 Lucas Gass 2019-10-02 13:11:44 UTC
Created attachment 93458 [details]
search results with cover image
Comment 4 Lucas Gass 2019-10-02 13:12:13 UTC
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.
Comment 5 Lucas Gass 2019-10-02 13:17:49 UTC
Created attachment 93459 [details] [review]
Bug 23720: Move cover images to the left side of results page
Comment 6 Lucas Gass 2019-10-02 13:22:47 UTC
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.
Comment 7 Owen Leonard 2019-10-03 18:19:37 UTC
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.
Comment 8 Lucas Gass 2019-10-04 09:12:21 UTC
Created attachment 93719 [details] [review]
Bug 23720: Add div wrapper to search results to make moving cover images easier
Comment 9 Lucas Gass 2019-10-04 09:13:16 UTC
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.
Comment 10 Owen Leonard 2019-10-04 12:15:04 UTC
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>
Comment 11 Katrin Fischer 2019-10-07 19:48:10 UTC
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>
Comment 12 Martin Renvoize 2019-10-08 13:57:05 UTC
Nice work!

Pushed to master for 19.11.00