Bug 16515 - Did you mean? links don't wrap on smaller screens
Summary: Did you mean? links don't wrap on smaller screens
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: Main
Hardware: All All
: P5 - low minor
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords: Academy
Depends on:
Blocks:
 
Reported: 2016-05-13 15:21 UTC by Katrin Fischer
Modified: 2017-12-07 22:20 UTC (History)
5 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Trivial patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function:


Attachments
Screenshot (44.04 KB, image/png)
2017-01-17 22:07 UTC, Zoe Schoeler
Details
Second Screenshot (38.71 KB, image/png)
2017-01-17 22:36 UTC, Zoe Schoeler
Details
Bug 16515 - Did you mean? links don't wrap on smaller screens (3.05 KB, patch)
2017-05-04 15:39 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 16515 [Generated CSS] Did you mean? links don't wrap on smaller screens (81.68 KB, patch)
2017-05-04 15:39 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 16515 [Generated CSS] Did you mean? links don't wrap on smaller screens (81.78 KB, patch)
2017-05-10 05:41 UTC, Dilan Johnpullé
Details | Diff | Splinter Review
Screenshot after applying patch (80.24 KB, image/png)
2017-05-10 06:11 UTC, Dilan Johnpullé
Details
Bug 16515 - Did you mean? links don't wrap on smaller screens (3.12 KB, patch)
2017-05-10 12:21 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 16515 [Generated CSS] Did you mean? links don't wrap on smaller screens (81.85 KB, patch)
2017-05-10 12:21 UTC, Jonathan Druart
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Katrin Fischer 2016-05-13 15:21:01 UTC
When you have turned on "did you mean" suggestions in the OPAC, the text in the yellow box won't wrap on smaller screens.

This is because of: 
.searchsuggestion {   white-space: nowrap; }


.searchsuggestion { white-space: normal } in OpacUserCSS seems to fix it.
Comment 1 Katrin Fischer 2016-09-10 09:20:31 UTC
For instructions on how to change the OPAC CSS files see:
https://wiki.koha-community.org/wiki/Working_with_Bootstrap_OPAC_LESS_files
Comment 2 Zoe Schoeler 2017-01-17 22:07:03 UTC
Created attachment 59112 [details]
Screenshot

Katrin, is this what you mean?
Comment 3 Zoe Schoeler 2017-01-17 22:36:09 UTC
Created attachment 59115 [details]
Second Screenshot

This is what it looks like after applying the css, is this the result you wanted?
Comment 4 Katrin Fischer 2017-01-17 23:01:54 UTC
Hi Zoe, it's a bit hard to tell from the screenshots, but it looks like the yellow box is contained inside the 'white box', so that should work better when there is more text from the plugins.
Comment 5 Owen Leonard 2017-05-04 15:39:05 UTC
Created attachment 63128 [details] [review]
Bug 16515 - Did you mean? links don't wrap on smaller screens

This patch tweaks some CSS in the OPAC to give the "Did you mean" block
better layout on smaller screens.

To test, apply the patch and process LESS files. Enable "Did you mean"
plugins for the OPAC in Administration.

Perform a search in the OPAC and confirm that the "Did you mean" block
looks correct. Resize your browser to various widths and confirm that
the block handles all sizes well.
Comment 6 Owen Leonard 2017-05-04 15:39:08 UTC
Created attachment 63129 [details] [review]
Bug 16515 [Generated CSS] Did you mean? links don't wrap on smaller screens

Processed and minified CSS.
Comment 7 Dilan Johnpullé 2017-05-10 05:41:32 UTC
Created attachment 63317 [details] [review]
Bug 16515 [Generated CSS] Did you mean? links don't wrap on smaller screens

Processed and minified CSS.

Works as expected and looks much tidier now.
Signed-off-by: Dilan Johnpulle <dilan@calyx.net.au>
Comment 8 Dilan Johnpullé 2017-05-10 06:11:46 UTC
Created attachment 63318 [details]
Screenshot after applying patch
Comment 9 Jonathan Druart 2017-05-10 12:21:22 UTC
Created attachment 63338 [details] [review]
Bug 16515 - Did you mean? links don't wrap on smaller screens

This patch tweaks some CSS in the OPAC to give the "Did you mean" block
better layout on smaller screens.

To test, apply the patch and process LESS files. Enable "Did you mean"
plugins for the OPAC in Administration.

Perform a search in the OPAC and confirm that the "Did you mean" block
looks correct. Resize your browser to various widths and confirm that
the block handles all sizes well.

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 10 Jonathan Druart 2017-05-10 12:21:51 UTC
Created attachment 63339 [details] [review]
Bug 16515 [Generated CSS] Did you mean? links don't wrap on smaller screens

Processed and minified CSS.

Works as expected and looks much tidier now.
Signed-off-by: Dilan Johnpulle <dilan@calyx.net.au>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 11 Kyle M Hall (khall) 2017-05-12 13:05:47 UTC
Pushed to master for 17.05, thanks Owen!
Comment 12 Katrin Fischer 2017-05-14 10:03:45 UTC
This patch has been pushed to 16.11.x and will be in 16.11.08.
Comment 13 Katrin Fischer 2017-05-14 10:04:17 UTC
...patches even
Comment 14 Julian Maurice 2017-05-22 11:29:22 UTC
Pushed to 3.22.x for 3.22.21
Comment 15 Mason James 2017-05-24 02:39:16 UTC
Pushed to 16.05.x, for 16.05.13 release