From c5ca160e3b79b7ad1cbc4cfc1c2c7db30d2686ff 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. Signed-off-by: Liz Rea Signed-off-by: Katrin Fischer Signed-off-by: Martin Renvoize --- .../bootstrap/css/src/_responsive.scss | 61 ++++++++++-- .../opac-tmpl/bootstrap/css/src/opac.scss | 18 +++- .../bootstrap/en/includes/page-numbers.inc | 12 +-- .../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 b27de10462..5210599116 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 b020e9f952..1e389c2ab9 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -722,6 +722,7 @@ input[type="text"]:focus { #toolbar.toolbar { background-color: #f0f3f3; border: 1px solid #f0f3f3; + &.clearfix { background-color: #f0f3f3; } @@ -1363,7 +1364,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; } @@ -1544,6 +1545,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 ed86550b5f..3633b0c7c0 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 211f0d180f..bc20b47831 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:
    @@ -159,48 +157,52 @@ [% END %] [% END # IF /searchdesc %] -
    - [% IF ( OpacHighlightedWords ) %] -
    - Unhighlight - Highlight -
    - [% END %] - [% UNLESS tag %] -
    - - -
    - [% END %] -
    - -
    - - - | +
    +
    +
    [% INCLUDE 'page-numbers.inc' %]
    + [% UNLESS tag %] +
    + + +
    + [% END %] +
    + +
    + [% IF ( OpacHighlightedWords ) %] +
    + Unhighlight + Highlight +
    + | + [% END %] + + + | + + + [% IF ( ( Koha.Preference( 'opacbookbag' ) == 1 ) || ( Koha.Preference( 'virtualshelves' ) == 1 ) ) %] + + [% END %] + - - [% IF ( ( Koha.Preference( 'opacbookbag' ) == 1 ) || ( Koha.Preference( 'virtualshelves' ) == 1 ) ) %] - - [% END %] - - - [% IF ( TagsInputEnabled && loggedinusername ) %] - - - - - - [% END %] - -
    + [% IF ( TagsInputEnabled && loggedinusername ) %] + + + + + + [% END %] + +
    +
    @@ -628,6 +630,7 @@ [% IF ( RecordedBooksEnabled ) %][% Asset.js("js/recordedbooks.js") | $raw %][% END %] [% Asset.js("lib/jquery/plugins/jquery.checkboxes.min.js") | $raw %] [% Asset.js("js/authtoresults.js") | $raw %] +[% Asset.js("lib/hc-sticky.js") | $raw %] [% IF ( OpacHighlightedWords ) %][% Asset.js("lib/jquery/plugins/jquery.highlight-3.js") | $raw %] [% END %] diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/script.js b/koha-tmpl/opac-tmpl/bootstrap/js/script.js index de8401b3ed..93f9c8e6de 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"); } }); diff --git a/koha-tmpl/opac-tmpl/lib/hc-sticky.js b/koha-tmpl/opac-tmpl/lib/hc-sticky.js new file mode 100644 index 0000000000..748bfe6c86 --- /dev/null +++ b/koha-tmpl/opac-tmpl/lib/hc-sticky.js @@ -0,0 +1,11 @@ +/*! + * HC-Sticky + * ========= + * Version: 2.2.3 + * Author: Some Web Media + * Author URL: http://somewebmedia.com + * Plugin URL: https://github.com/somewebmedia/hc-sticky + * Description: Cross-browser plugin that makes any element on your page visible while you scroll + * License: MIT + */ +!function(t,e){"use strict";if("object"==typeof module&&"object"==typeof module.exports){if(!t.document)throw new Error("HC-Sticky requires a browser to run.");module.exports=e(t)}else"function"==typeof define&&define.amd?define("hcSticky",[],e(t)):e(t)}("undefined"!=typeof window?window:this,function(U){"use strict";var Y={top:0,bottom:0,bottomEnd:0,innerTop:0,innerSticker:null,stickyClass:"sticky",stickTo:null,followScroll:!0,responsive:null,mobileFirst:!1,onStart:null,onStop:null,onBeforeResize:null,onResize:null,resizeDebounce:100,disable:!1,queries:null,queryFlow:"down"},$=function(t,e,o){console.log("%c! HC Sticky:%c "+t+"%c "+o+" is now deprecated and will be removed. Use%c "+e+"%c instead.","color: red","color: darkviolet","color: black","color: darkviolet","color: black")},Q=U.document,X=function(n,f){var o=this;if("string"==typeof n&&(n=Q.querySelector(n)),!n)return!1;f.queries&&$("queries","responsive","option"),f.queryFlow&&$("queryFlow","mobileFirst","option");var p={},d=X.Helpers,s=n.parentNode;"static"===d.getStyle(s,"position")&&(s.style.position="relative");var u=function(){var t=0>>0;if("function"!=typeof t)throw new TypeError(t+" is not a function");for(1