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: Kyle M Hall <kyle@bywatersolutions.com>
(cherry picked from commit 893ead43f751df78bfdcb23ebb137b7975885ec9)
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
(cherry picked from commit 505ba12bafb729b624e5ab183f3a5c9015d26084)
Signed-off-by: Julian Maurice <julian.maurice@biblibre.com>

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 7fe17a9..e83bc77 100644 (file)
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
@@ -951,10 +951,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 d2a2998..8a9e7da 100644 (file)
--- 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 6fc7358..2ef2168 100644 (file)
--- 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) {