Bug 23720 - Add div wrapper to search results to make moving cover images easier
Summary: Add div wrapper to search results to make moving cover images easier
Status: Pushed to master
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Lucas Gass
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2019-10-02 12:23 UTC by Lucas Gass
Modified: 2019-10-08 13:57 UTC (History)
1 user (show)

See Also:
Change sponsored?: ---
Patch complexity: Trivial patch
Who signed the patch off:
Text to go in the release notes:
Version(s) released in:
19.11.00


Attachments
search results with cover image (322.53 KB, image/png)
2019-10-02 13:11 UTC, Lucas Gass
Details
Bug 23720: Move cover images to the left side of results page (1.67 KB, patch)
2019-10-02 13:17 UTC, Lucas Gass
Details | Diff | Splinter Review
Bug 23720: Add div wrapper to search results to make moving cover images easier (1.75 KB, patch)
2019-10-04 09:12 UTC, Lucas Gass
Details | Diff | Splinter Review
Bug 23720: Add div wrapper to search results to make moving cover images easier (2.05 KB, patch)
2019-10-04 12:15 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 23720: Add div wrapper to search results to make moving cover images easier (2.11 KB, patch)
2019-10-07 19:48 UTC, Katrin Fischer
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
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