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 <wizzyrea@gmail.com> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de> Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
This commit is contained in:
parent
a87f5a0150
commit
c5ca160e3b
GPG key ID:
422B469130441A0F
6 changed files with 137 additions and 58 deletions
|
|
@ -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 ) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -3,19 +3,19 @@
|
|||
[% IF hits_to_paginate < total %]<h6>[% hits_to_paginate | html %] of [% total | html %] results loaded, refine your search to view other records</h6>[% END %]
|
||||
<ul>
|
||||
[% IF ( previous_page_offset.defined ) %]
|
||||
<li><a href="/cgi-bin/koha/opac-search.pl?[% query_cgi | $raw %][% limit_cgi | $raw %][% IF ( sort_by ) %]&sort_by=[% sort_by | uri %][% END %]">First</a></li>
|
||||
<li><a href="/cgi-bin/koha/opac-search.pl?[% query_cgi | $raw %][% limit_cgi | $raw %]&offset=[% previous_page_offset | uri %][% IF ( sort_by ) %]&sort_by=[% sort_by | uri %][% END %]">« Previous</a></li>
|
||||
<li class="page-first"><a href="/cgi-bin/koha/opac-search.pl?[% query_cgi | $raw %][% limit_cgi | $raw %][% IF ( sort_by ) %]&sort_by=[% sort_by | uri %][% END %]"><i class="fa fa-fw fa-angle-double-left"></i> First</a></li>
|
||||
<li class="page-prev"><a href="/cgi-bin/koha/opac-search.pl?[% query_cgi | $raw %][% limit_cgi | $raw %]&offset=[% previous_page_offset | uri %][% IF ( sort_by ) %]&sort_by=[% sort_by | uri %][% END %]"> <i class="fa fa-fw fa-angle-left"></i> Previous</a></li>
|
||||
[% END %]
|
||||
[% FOREACH PAGE_NUMBER IN PAGE_NUMBERS %]
|
||||
[% IF ( PAGE_NUMBER.highlight ) %]
|
||||
<li class="active"><a href="#">[% PAGE_NUMBER.pg | html %]</a></li>
|
||||
<li class="active"><a clas="page-num current" href="#">[% PAGE_NUMBER.pg | html %]</a></li>
|
||||
[% ELSE %]
|
||||
<li><a href="/cgi-bin/koha/opac-search.pl?[% query_cgi | $raw %][% limit_cgi | $raw %]&offset=[% PAGE_NUMBER.offset | uri %][% IF ( sort_by ) %]&sort_by=[% sort_by | uri %][% END %]">[% PAGE_NUMBER.pg | html %]</a></li>
|
||||
<li class="page-num"><a href="/cgi-bin/koha/opac-search.pl?[% query_cgi | $raw %][% limit_cgi | $raw %]&offset=[% PAGE_NUMBER.offset | uri %][% IF ( sort_by ) %]&sort_by=[% sort_by | uri %][% END %]">[% PAGE_NUMBER.pg | html %]</a></li>
|
||||
[% END %]
|
||||
[% END %]
|
||||
[% IF ( next_page_offset ) %]
|
||||
<li><a href="/cgi-bin/koha/opac-search.pl?[% query_cgi | $raw %][% limit_cgi | $raw %]&offset=[% next_page_offset | uri %][% IF ( sort_by ) %]&sort_by=[% sort_by | uri %][% END %]">Next »</a></li>
|
||||
<li><a href="/cgi-bin/koha/opac-search.pl?[% query_cgi | $raw %][% limit_cgi | $raw %]&offset=[% last_page_offset | uri %][% IF ( sort_by ) %]&sort_by=[% sort_by | uri %][% END %]">Last</a></li>
|
||||
<li class="page-next"><a href="/cgi-bin/koha/opac-search.pl?[% query_cgi | $raw %][% limit_cgi | $raw %]&offset=[% next_page_offset | uri %][% IF ( sort_by ) %]&sort_by=[% sort_by | uri %][% END %]">Next <i class="fa fa-fw fa-angle-double-right"></i></a></li>
|
||||
<li class="page-last"><a href="/cgi-bin/koha/opac-search.pl?[% query_cgi | $raw %][% limit_cgi | $raw %]&offset=[% last_page_offset | uri %][% IF ( sort_by ) %]&sort_by=[% sort_by | uri %][% END %]">Last <i class="fa fa-fw fa-angle-double-right"></i></a></li>
|
||||
[% END %]
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -119,8 +119,6 @@
|
|||
<div id="didyoumean">Not what you expected? Check for <a href="/cgi-bin/koha/svc/suggestion?render=standalone&q=[% querystring |uri %]">suggestions</a></div>
|
||||
[% END %]
|
||||
|
||||
<div id="top-pages">[% INCLUDE 'page-numbers.inc' %]</div>
|
||||
|
||||
[% IF ( koha_spsuggest ) %]
|
||||
Did you mean:
|
||||
<ul style="list-style: none;">
|
||||
|
|
@ -159,48 +157,52 @@
|
|||
[% END %]
|
||||
[% END # IF /searchdesc %]
|
||||
|
||||
<div id="toolbar" class="toolbar clearfix">
|
||||
[% IF ( OpacHighlightedWords ) %]
|
||||
<div class="highlight_controls noprint">
|
||||
<a href="#" class="highlight_toggle" id="highlight_toggle_off">Unhighlight</a>
|
||||
<a href="#" class="highlight_toggle" id="highlight_toggle_on">Highlight</a>
|
||||
</div>
|
||||
[% END %]
|
||||
[% UNLESS tag %]
|
||||
<div class="sort_by pull-right">
|
||||
<select id="sort_by" class="resort" name="sort_by"> [% INCLUDE 'resort_form.inc' %] </select>
|
||||
<input type="submit" class="btn btn-small clearfix" id="sortsubmit" value="Go" />
|
||||
</div>
|
||||
[% END %]
|
||||
</div> <!-- / #toolbar -->
|
||||
<div id="floating">
|
||||
<div id="toolbar" class="toolbar clearfix">
|
||||
<div id="top-pages" class="pull-left">[% INCLUDE 'page-numbers.inc' %]</div>
|
||||
[% UNLESS tag %]
|
||||
<div class="sort_by pull-right">
|
||||
<select id="sort_by" class="resort" name="sort_by"> [% INCLUDE 'resort_form.inc' %] </select>
|
||||
<input type="submit" class="btn btn-small clearfix" id="sortsubmit" value="Go" />
|
||||
</div>
|
||||
[% END %]
|
||||
</div> <!-- / #toolbar -->
|
||||
|
||||
<div id="selections-toolbar" class="toolbar noprint">
|
||||
<!-- checkall, clearall are now needed for placehold -->
|
||||
<span class="checkall"></span>
|
||||
<span class="clearall"></span> <span class="sep">|</span>
|
||||
<div id="selections-toolbar" class="toolbar noprint">
|
||||
[% IF ( OpacHighlightedWords ) %]
|
||||
<div class="highlight_controls noprint">
|
||||
<a href="#" class="highlight_toggle" id="highlight_toggle_off">Unhighlight</a>
|
||||
<a href="#" class="highlight_toggle" id="highlight_toggle_on">Highlight</a>
|
||||
</div>
|
||||
<span class="sep">|</span>
|
||||
[% END %]
|
||||
<!-- checkall, clearall are now needed for placehold -->
|
||||
<span class="checkall"></span>
|
||||
<span class="clearall"></span> <span class="sep">|</span>
|
||||
|
||||
<span class="links">
|
||||
[% IF ( ( Koha.Preference( 'opacbookbag' ) == 1 ) || ( Koha.Preference( 'virtualshelves' ) == 1 ) ) %]
|
||||
<span class="addto"></span>
|
||||
[% END %]
|
||||
<span id="placehold"><!-- input class="submit" type="submit" value="Place Hold"/ --></span>
|
||||
<span class="links">
|
||||
[% IF ( ( Koha.Preference( 'opacbookbag' ) == 1 ) || ( Koha.Preference( 'virtualshelves' ) == 1 ) ) %]
|
||||
<span class="addto"></span>
|
||||
[% END %]
|
||||
<span id="placehold"><!-- input class="submit" type="submit" value="Place Hold"/ --></span>
|
||||
|
||||
[% IF ( TagsInputEnabled && loggedinusername ) %]
|
||||
<span id="tagsel_span">
|
||||
<input id="tagsel_tag" class="disabled" type="submit" value="Tag"/>
|
||||
</span>
|
||||
<span id="tagsel_form" style="display:none">
|
||||
<label for="tagsel_new">New tag:</label>
|
||||
<input type="text" name="tagsel_new" id="tagsel_new" maxlength="100" />
|
||||
<input id="tagsel_button" name="tagsel_button" class="tagsel_button btn btn-small" title="Add" type="submit" value="Add" />
|
||||
<a href="#" id="tagsel_cancel">(done)</a>
|
||||
</span>
|
||||
<span id="tagsel_status" class="tagsel_tatus" style="display:none;">
|
||||
Tag status here.
|
||||
</span>
|
||||
[% END %]
|
||||
</span> <!-- / .links -->
|
||||
</div> <!-- / #selections-toolbar -->
|
||||
[% IF ( TagsInputEnabled && loggedinusername ) %]
|
||||
<span id="tagsel_span">
|
||||
<input id="tagsel_tag" class="disabled" type="submit" value="Tag"/>
|
||||
</span>
|
||||
<div id="tagsel_form" style="display:none">
|
||||
<label for="tagsel_new">New tag:</label>
|
||||
<input type="text" name="tagsel_new" id="tagsel_new" maxlength="100" />
|
||||
<input id="tagsel_button" name="tagsel_button" class="tagsel_button btn btn-small" title="Add" type="submit" value="Add" />
|
||||
<a href="#" id="tagsel_cancel">(done)</a>
|
||||
</div>
|
||||
<div id="tagsel_status" class="tagsel_tatus" style="display:none;">
|
||||
Tag status here.
|
||||
</div>
|
||||
[% END %]
|
||||
</span> <!-- / .links -->
|
||||
</div> <!-- / #selections-toolbar -->
|
||||
</div> <!-- /#floating -->
|
||||
|
||||
<!-- TABLE RESULTS START -->
|
||||
<table class="table table-striped">
|
||||
|
|
@ -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 %]<script>
|
||||
//<![CDATA[
|
||||
|
|
@ -1041,6 +1044,12 @@ $("input.newtag").on('keydown', function(e){
|
|||
if (e.keyCode == 13) { e.preventDefault(); }
|
||||
});
|
||||
|
||||
Sticky = $("#floating");
|
||||
Sticky.hcSticky({
|
||||
stickTo: ".searchresults",
|
||||
stickyClass: "floating"
|
||||
});
|
||||
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
11
koha-tmpl/opac-tmpl/lib/hc-sticky.js
Normal file
11
koha-tmpl/opac-tmpl/lib/hc-sticky.js
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue