From 893ead43f751df78bfdcb23ebb137b7975885ec9 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Sat, 29 Apr 2017 18:45:30 +0000 Subject: [PATCH] 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 Signed-off-by: Kyle M Hall --- koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt | 5 +---- koha-tmpl/opac-tmpl/bootstrap/less/opac.less | 9 +++++++-- koha-tmpl/opac-tmpl/bootstrap/less/responsive.less | 9 +++++++++ 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt index 2d85671953..b5e05b9f9d 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt @@ -974,10 +974,7 @@ $(document).ready(function(){ [% IF ( DidYouMean ) %] $("#didyoumean").load("/cgi-bin/koha/svc/suggestion?render=stub&q=[% querystring |uri %]", function() { - $(".searchsuggestion").parent().parent().css({ - "border-color": "#F4ECBE", - "background-color": "#FFFBEA" - }); + $(this).addClass("dym-loaded"); }); [% END %] diff --git a/koha-tmpl/opac-tmpl/bootstrap/less/opac.less b/koha-tmpl/opac-tmpl/bootstrap/less/opac.less index 8fc5da43b4..63961e8835 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/less/opac.less +++ b/koha-tmpl/opac-tmpl/bootstrap/less/opac.less @@ -1735,10 +1735,16 @@ input.editshelf { #didyoumean { background-color: #EEE; border: 1px solid #E8E8E8; - margin: 0 0 0.5em; + box-sizing: border-box; + margin: .5em 1.5em; text-align: left; padding: 0.5em; .border-radius-all(3px); + + &.dym-loaded { + border-color: #F4ECBE; + background-color: #FFFBEA; + } } .suggestionlabel { @@ -1747,7 +1753,6 @@ input.editshelf { .searchsuggestion { padding: 0.2em 0.5em; - white-space: nowrap; display: inline-block; } diff --git a/koha-tmpl/opac-tmpl/bootstrap/less/responsive.less b/koha-tmpl/opac-tmpl/bootstrap/less/responsive.less index 6fc735856e..2ef2168455 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/less/responsive.less +++ b/koha-tmpl/opac-tmpl/bootstrap/less/responsive.less @@ -41,6 +41,9 @@ .input-fluid { width : 75%; } + .searchsuggestion { + display: block; + } } /* Override Bootstrap Responsive CSS fixed navbar */ @media (max-width: 979px) { @@ -421,6 +424,12 @@ padding: 1em 0 1em 0; } } + #didyoumean { + margin: 0; + } + .searchsuggestion { + white-space: nowrap; + } } @media only screen and (min-width: 768px) and (max-width: 984px) { -- 2.39.5