@@ -, +, @@ in OPAC search results - Perform catalog search in the OPAC which will return multiple results. - View the page at various browser widths. At narrower widths the facets menu should appear as a "collapsed" box with a "Refine your search" link. - Clicking the link should toggle the facets menu visibility. --- .../bootstrap/css/src/_responsive.scss | 45 +++++++++++++++++-- .../bootstrap/en/modules/opac-results.tt | 14 ++---- koha-tmpl/opac-tmpl/bootstrap/js/script.js | 4 +- 3 files changed, 46 insertions(+), 17 deletions(-) --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss +++ a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss @@ -358,10 +358,40 @@ display: none; } + #wrapper { + padding: 0; + } + + .table_controls { + display: block; + + label { + display: block; + } + } +} + +@media only screen and ( max-width: 800px ) { + /* Screens below 800 pixels wide */ + .cartlabel, + .listslabel, + .langlabel, + .userlabel { + display: none; + } + + .navbar { + .divider-vertical { + margin: 0 2px; + } + } +} + +@media only screen and ( max-width: 991px ) { #search-facets { margin-bottom: .5em; - h4 { + h2 { display: block; margin: 0; padding: 0; @@ -370,6 +400,13 @@ border-bottom: 0; font-weight: normal; padding: .7em .2em; + + &::before { + content: "\f0da"; + display: inline-block; + font-family: FontAwesome; + width: 1em; + } } } @@ -377,7 +414,7 @@ padding: .4em; } - h5 { + h3 { margin: .2em; } @@ -386,8 +423,8 @@ } } - #menu h4 a.menu-open, - #search-facets h4 a.menu-open { + #menu h2 a.menu-open, + #search-facets h2 a.menu-open { border-bottom: 1px solid #D8D8D8; } --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt +++ a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt @@ -99,18 +99,10 @@ [% END %] - [% IF ( total ) %] - [% IF ( opacfacets ) %] -
- [% ELSE %] -
- [% END %] + [% IF ( opacfacets ) %] +
[% ELSE %] - [% IF ( opacfacets ) %] -
- [% ELSE %] -
- [% END %] +
[% END %] [% IF ( searchdesc ) %] --- a/koha-tmpl/opac-tmpl/bootstrap/js/script.js +++ a/koha-tmpl/opac-tmpl/bootstrap/js/script.js @@ -11,7 +11,7 @@ enquire.register("screen and (max-width:608px)", { } }); -enquire.register("screen and (min-width:768px)", { +enquire.register("screen and (min-width:992px)", { match : function() { facetMenu( "show" ); }, @@ -44,7 +44,7 @@ $(document).ready(function(){ $(".js-show").show(); $(".js-hide").hide(); - if( $(window).width() < 768 ){ + if( $(window).width() < 991 ){ facetMenu("hide"); } --