From 3cc082e0cf0aa6457ae3cde7ddb47fa0cc9f951f 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 --- .../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 211f0d1..bc20b47 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 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"); } }); 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 0000000..748bfe6 --- /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