From e5ee5ca79c569c277f8d344739824bbf83c5a617 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Tue, 11 Jun 2019 12:16:10 +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 | 61 ++++++++++++-- koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 18 +++- .../bootstrap/en/includes/page-numbers.inc | 12 +-- .../opac-tmpl/bootstrap/en/modules/opac-results.tt | 95 ++++++++++++---------- koha-tmpl/opac-tmpl/bootstrap/js/script.js | 2 - koha-tmpl/opac-tmpl/lib/hc-sticky.js | 11 +++ 6 files changed, 139 insertions(+), 60 deletions(-) create mode 100644 koha-tmpl/opac-tmpl/lib/hc-sticky.js diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss index b27de10..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 ) { @@ -477,12 +492,20 @@ } #didyoumean { - margin: 0; + margin: .5em 0; } .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/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index 29fc16c..c18d493 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -716,6 +716,7 @@ input[type="text"]:focus { #toolbar.toolbar { background-color: #f0f3f3; border: 1px solid #f0f3f3; + &.clearfix { background-color: #f0f3f3; } @@ -1357,7 +1358,7 @@ div { #selections-toolbar, .selections-toolbar { background: linear-gradient( #B2B2B2 0%, #E0E0E0 14%, #E8E8E8 100% ); - margin: 0 0 1em; + margin: 0; padding-left: 10px; padding-top: .5em; } @@ -1538,6 +1539,21 @@ div { } /* pagination */ + +.pagination { + display: inline-block; + margin: 10px 0 0 10px; +} + +.pagination { + li { + &.page-first, + &.page-last { + display: none; + } + } +} + .results-pagination { background-color: #F3F3F3; display: none; 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 ed86550..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,19 +3,19 @@ [% 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/en/modules/opac-results.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt index e6bd51b..828a0d6 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt @@ -119,8 +119,6 @@
Not what you expected? Check for suggestions
[% END %] -
[% INCLUDE 'page-numbers.inc' %]
- [% IF ( koha_spsuggest ) %] Did you mean: