From 1e972454e7780425929466d716a4e7c5f502a271 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 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 29fc16c452..c18d49321a 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 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 e6bd51b2d9..828a0d6749 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 %] + +
    +
    @@ -627,6 +629,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