From 80f0b3bcab28f792fbd08a7b5638a6a271f777ab Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
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 <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Mason James <mtj@kohaaloha.com>
---
 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 f261e6e94a..d4baa3c2c9 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
@@ -956,10 +956,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 c8d9f9c7dc..3ce1ca7d70 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/less/opac.less
+++ b/koha-tmpl/opac-tmpl/bootstrap/less/opac.less
@@ -1721,10 +1721,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 {
@@ -1733,7 +1739,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