Bug 21304: (follow-up) Fix style of search results browser

This follow-up revises the style of the search result browser in the
staff client, making it behave better at smaller browser widths.

The patch also makes a couple of ESLint-prompted changes to browser.js

To test, apply the patch and regenerate CSS.

 - Perform a catalog search in the staff client.
 - Click on one of the search results.
 - On the bibliographic detail page there should be results browsing
   controls in the left-hand sidebar.
   - Resize the browser window and confirm that the controls work well
     at various sizes.
   - Test with both the first and last search result.

Signed-off-by: Liz Rea <wizzyrea@gmail.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>

diff --git a/koha-tmpl/intranet-tmpl/js/browser.js b/koha-tmpl/intranet-tmpl/js/browser.js
index 173eaa0..e706833 100644 (file)
--- a/koha-tmpl/intranet-tmpl/js/browser.js
+++ b/koha-tmpl/intranet-tmpl/js/browser.js
@@ -1,3 +1,5 @@
+/* global BROWSER_PREVIOUS BROWSER_NEXT BROWSER_RETURN_TO_SEARCH */
+
 if ( KOHA === undefined ) var KOHA = {};
 
 KOHA.browser = function (searchid, biblionumber) {
@@ -70,7 +72,7 @@ KOHA.browser = function (searchid, biblionumber) {
                 if ( ev.which == 2 || ev.which == 1 && ev.ctrlKey ) {
                     // Middle click or ctrl + click
                     ev.preventDefault();
-                    var newwindow = window.open( $(this).attr('href') + '&searchid=' + me.searchid, '_blank' )
+                    var newwindow = window.open( $(this).attr('href') + '&searchid=' + me.searchid, '_blank' );
                     newwindow.blur();
                     window.focus();
                 } else if ( ev.which == 1 ) {
@@ -102,7 +104,7 @@ KOHA.browser = function (searchid, biblionumber) {
                     } else {
                         nextbutton = '<a href="#" id="browse-next" class="browse-button">' + BROWSER_NEXT + ' »</a>';
                     }
-                    $('#menu').before('<div class="browse-controls"><div class="browse-controls-inner"><div class="browse-label"><a href="' + searchURL + '" id="browse-return-to-results" class="browse-button searchwithcontext">' + BROWSER_RETURN_TO_SEARCH + '</a></div><div class="browse-prev-next">' + prevbutton + nextbutton + '</div></div></div>');
+                    $('#menu').before('<div class="browse-controls"><div class="browse-controls-inner"><div class="browse-label"><a href="' + searchURL + '" id="browse-return-to-results" class="searchwithcontext">' + BROWSER_RETURN_TO_SEARCH + '</a></div><div class="browse-prev-next">' + prevbutton + nextbutton + '</div></div></div>');
                     $('a#browse-previous').click(function (ev) {
                         ev.preventDefault();
                         browseRecords(-1);

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
index af5afa2..fe8b35e 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -3682,16 +3682,26 @@ progress {
 }
 
 #browse-return-to-results {
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
+    background-color: #E8F0F6;
+    border: 1px solid #B9D8D9;
+    border-bottom-width: 0;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
     display: block;
+    padding: .5em;
     text-align: center;
 }
 
 .browse-button {
+    background-color: #FFF;
+    border: 1px solid #B9D8D9;
     color: #004D99;
-    display: inline-block;
+    display: block;
+    overflow: hidden;
     padding: .4em .6em;
+    text-align: center;
+    white-space: nowrap;
+    width: 100%;
 
     &:hover {
         background: #FAFAFA;
@@ -3741,34 +3751,13 @@ span {
     }
 }
 
-.browse-label,
-.browse-prev-next {
-    border: 1px solid #B9D8D9;
-}
-
-.browse-label {
-    background-color: #E8F0F6;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-}
-
-.browse-prev-next {
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
-    border-top-width: 0;
-}
-
 #browse-previous {
-    border-bottom-left-radius: 5px;
-    border-right: 1px solid #B9D8D9;
-    padding-right: 1em;
+    border-bottom-width: 0;
 }
 
 #browse-next {
     border-bottom-right-radius: 5px;
-    border-top-width: 0;
-    float: right;
-    padding-right: 1em;
+    border-bottom-left-radius: 5px;
 }
 
 .loading-overlay {
@@ -4550,6 +4539,24 @@ span {
     }
 }
 
+@media only screen and ( max-width: 768px ) {
+    .browse-button {
+        display: inline-block;
+        width: 50%;
+    }
+
+    #browse-previous {
+        border-bottom-left-radius: 5px;
+        border-bottom-width: 1px;
+        border-right-width: 0;
+    }
+
+    #browse-next {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 5px;
+    }
+}
+
 @media (min-width: 800px) {
 
 
@@ -4580,3 +4587,22 @@ span {
 div#makechart ol li {
     list-style: none;
 }
+
+@media only screen and ( min-width: 1200px ) {
+    .browse-button {
+        display: inline-block;
+        width: 50%;
+    }
+
+    #browse-previous {
+        border-bottom-left-radius: 5px;
+        border-bottom-width: 1px;
+        border-right-width: 0;
+    }
+
+    #browse-next {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 5px;
+        text-align: right;
+    }
+}

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/results.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/results.tt
index 16ad66c..63943ba 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/results.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/results.tt
@@ -627,7 +627,7 @@
 
         <div class="col-sm-2 col-sm-pull-10">
             <aside>
-                [% INCLUDE 'admin-menu.inc' %]
+                [% INCLUDE 'facets.inc' %]
             </aside>
         </div> <!-- /.col-sm-2.col-sm-pull-10 -->
      </div> <!-- /.row -->