From 572a188a4b024b0ddfa5c823aaa3138d47529757 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Tue, 11 Jun 2019 15:47:28 +0000 Subject: [PATCH] Bug 5287: Add floating toolbar to search results in OPAC This patch adds the "hc-sticky" JavaScript library to the OPAC and uses it to make the search results toolbar "stick" to the top of the page as the user scrolls down. This patch also moves search results pagination into the toolbar so that pagination links are available. Font Awesome icons are added to the pagination include to replace arrow HTML entities. To test, apply the patch and rebuild the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). - Perform a catalog search in the OPAC which will return multiple pages of results. Confirm that the toolbar "sticks" and that all controls in the toolbar work correctly. - Test at various browser widths to confirm that it adapt well to various sizes. --- .../opac-tmpl/bootstrap/css/src/_responsive.scss | 59 +++++++++++++++++++--- .../bootstrap/en/includes/page-numbers.inc | 8 +-- koha-tmpl/opac-tmpl/bootstrap/js/script.js | 2 - 3 files changed, 56 insertions(+), 13 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss index 9bcc996..5210599 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss @@ -150,12 +150,22 @@ } } - #toolbar .resort { - @include border-radius-all( 5px ); - font-size: 14px; - margin: .5em 0; - max-width: 100%; - padding: 4px 6px; + .toolbar { + .resort { + @include border-radius-all( 5px ); + font-size: 14px; + max-width: 100%; + padding: 4px 6px; + } + + .pagination { + li { + a { + font-size: 105%; + padding: .3em .7em; + } + } + } } .mastheadsearch { @@ -359,7 +369,6 @@ } .breadcrumb, - #top-pages, .menu-collapse { display: none; } @@ -453,6 +462,12 @@ } } } + + .toolbar { + select { + width: 220px; + } + } } @media only screen and ( min-width: 768px ) { @@ -483,6 +498,14 @@ .searchsuggestion { white-space: nowrap; } + + .pagination { + li { + &.page-num { + display: inline; + } + } + } } @media only screen and ( min-width: 768px ) and ( max-width: 984px ) { @@ -498,6 +521,28 @@ width: 53%; } + .pagination { + li { + &.page-first, + &.page-last { + display: inline; + } + + &.page-first { + a { + border-left: 1px solid #DDD; + } + } + + &.page-prev, + &.page-next { + a { + border-left: 0; + border-radius: 0; + } + } + } + } } @media only screen and ( max-width: 1040px ) { diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/page-numbers.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/page-numbers.inc index 277ebe5..3633b0c 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/page-numbers.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/page-numbers.inc @@ -3,8 +3,8 @@ [% IF hits_to_paginate < total %]
[% hits_to_paginate | html %] of [% total | html %] results loaded, refine your search to view other records
[% END %] diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/script.js b/koha-tmpl/opac-tmpl/bootstrap/js/script.js index de8401b..93f9c8e 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/js/script.js +++ b/koha-tmpl/opac-tmpl/bootstrap/js/script.js @@ -1,7 +1,6 @@ enquire.register("screen and (max-width:608px)", { match : function() { $("#masthead_search").insertAfter("#select_library"); - $(".sort_by").removeClass("pull-right"); if($("body.scrollto").length > 0){ $("body.scrollto").animate({ scrollTop: $(".maincontent").offset().top @@ -9,7 +8,6 @@ enquire.register("screen and (max-width:608px)", { } }, unmatch : function() { - $(".sort_by").addClass("pull-right"); } }); -- 2.1.4