From 662e64f76652cc4b3708fba8a16fa86a28d248ba Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Fri, 31 Aug 2018 14:09:01 +0000 Subject: [PATCH] Bug 20898: Replace OPAC detail's results browser with non-JavaScript version This patch moves generation of the OPAC detail page's results browser from JavaScript to the template. This makes the template easier to understand and easier to debug. It also makes it possible for the widget to be completely non-dependent on JavaScript. To test, apply the patch and regenerate the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client) - Enable the OpacBrowseResults system preference and perform a search in the OPAC which will return multiple results. - Click on any title in the first page of search results. - On the bibliographic detail page there should be a "Browse results" link in the right-hand sidebar just as before. - Test that the "Previous," "Back to results," and "Next" links work correctly. - Click the "Browse results" link. A list of the first 20 search results should appear. An arrow should indicate the title you're viewing. - Click any title in the results browser. The page should correctly load that record. - Clicking the numbered links at the top of the results browser should do the same. Signed-off-by: Cab Vinton Signed-off-by: Katrin Fischer Signed-off-by: Nick Clemens --- .../bootstrap/css/src/_responsive.scss | 11 +- .../opac-tmpl/bootstrap/css/src/opac.scss | 112 +++++----- .../bootstrap/en/modules/opac-detail.tt | 210 ++++-------------- opac/opac-detail.pl | 2 +- 4 files changed, 109 insertions(+), 226 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss index 321691d0fc..5b160b8b6b 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss @@ -497,17 +497,24 @@ } @media only screen and ( max-width: 1040px ) { + #a_listResults, + #close_pagination { + padding: 5px; + } + .pg_menu { li { a { + display: block; float: none; text-align: left; } &.back_results { a { - border: 1px solid #D0D0D0; - border-width: 1px 0 1px 0; + border: 0; + border-bottom: 1px solid #DDD; + border-top: 1px solid #DDD; } } } diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index 69387d7694..de9d5b1ead 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -1458,17 +1458,13 @@ div { /* pagination */ .results-pagination { background-color: #F3F3F3; - border: 1px solid #D0D0D0; display: none; - height: auto; - left: -1px; padding-bottom: 10px; - position: absolute; - top: 32px; - width: 100%; - z-index: 100; } +.close_pagination { + display: none; +} .back { float: right; @@ -1481,20 +1477,19 @@ div { .pagination_list { ul { - padding-left: 0; - padding-top: 40px; + margin: 0; + padding: 0; } li { + border-top: 1px solid #DDDDDD; color: #999; float: bottom; list-style: none; padding: 4px; &.highlight { - background-color: #F3F3F3; - border-bottom: 1px solid #DDDDDD; - border-top: 1px solid #DDDDDD; + background-color: #DDDDDD; } a { @@ -1503,9 +1498,8 @@ div { } .li_pag_index { - color: #999999; - float: left; - font-size: 15px; + color: #636363; + font-size: 90%; font-weight: bold; padding-right: 10px; text-align: right; @@ -1513,37 +1507,49 @@ div { } } +.pagination_footer { + background-color: #E1E1E1; + text-align: center; + + .close_pagination { + display: none; + } +} + +.l_Results { + background-color: #E1E1E1; + + .close_pagination { + float: right; + padding: 8px 12px; + } +} + .nav_results { - background-color: #F3F3F3; border: 1px solid #D0D0D0; font-size: 95%; font-weight: bold; margin-top: .5em; position: relative; +} - .l_Results { - a { - background: #E1E1E1 url( "../images/sprite.png" ) no-repeat 0 -504px; /* Browse results menu */ - color: #006699; - display: block; - padding: 8px 28px; - text-decoration: none; - } - - &:hover { - background-color: #D9D9D9; - } - } +#a_listResults { + color: #006699; + display: inline-block; + padding: 8px 28px; + text-decoration: none; } .pg_menu { + background-color: #F3F3F3; border-top: 1px solid #D0D0D0; margin: 0; white-space: nowrap; li { color: #B2B2B2; - display: inline; + display: inline-block; + float: left; list-style: none; margin: 0; @@ -1573,61 +1579,55 @@ div { #listResults { li { - background-color: #999999; color: #C5C5C5; - display: block; + display: inline-block; font-size: 80%; font-weight: normal; - margin-right: 1px; - min-width: 18px; padding: 0; text-align: center; - &:hover { - background-color: #006699; - } - a { + background-color: #999999; color: #FFFFFF; + display: block; font-weight: normal; + min-width: 18px; + text-decoration: none; + + &:hover { + background-color: #006699; + } + } + + .highlight { + a { + background-color: #616161; + } } } } /* nav */ .nav_pages { - .close_pagination { - padding-right: 10px; - position: absolute; - right: 3px; - top: -25px; - - a { - text-decoration: none !important; - } - } + border-top: 1px solid #DDD; + padding: .6em; ul { - padding-top: 10px; + display: inline-block; + margin: 0; + padding: 0; } li { color: #999; - float: left; list-style: none; padding: 4px; a { - text-decoration: none !important; - &:hover { text-decoration: underline; } } - - ul { - float: left; - } } } diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt index 975d5a3c26..55fe8aac15 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt @@ -1062,19 +1062,20 @@
- [% IF ( OpacBrowseResults && busc ) %] + [% IF ( Koha.Preference('OpacBrowseResults') && busc ) %]
-
+
  • [% IF ( previousBiblionumber ) %] - « Previous + Previous [% ELSE %] Previous [% END %] @@ -1083,7 +1084,7 @@
  • Back to results
  • [% IF ( nextBiblionumber ) %] - Next » + Next [% ELSE %] Next [% END %] @@ -1092,14 +1093,33 @@ [% IF ( listResults ) %]
    - Close -
      +
        + [% FOREACH listitem IN listResults %] + [% IF ( listitem.biblionumber == biblionumber ) %] +
      • + [% ELSE %] +
      • + [% END %] + [% loop.count + offset %]
        • + [% END %] +
      -
        +
          + [% FOREACH listitem IN listResults %] + [% IF ( listitem.biblionumber == biblionumber ) %] +
        • [% loop.count + offset %][% title %]
          [% IF ( author ) %]by [% author %][% END %]
          • + [% ELSE %] +
        • [% loop.count + offset %][% listitem.title %]
          [% IF ( listitem.author ) %]by [% listitem.author %][% END %]
          • + [% END %] + [% END %] +
        [% END %] +
        + Close +
      [% END # / IF OpacBrowseResults && busc %] @@ -1354,7 +1374,7 @@ [% INCLUDE 'datatables.inc' %] [% INCLUDE 'columns_settings.inc' %] [% IF ( SocialNetworks ) %] - + diff --git a/opac/opac-detail.pl b/opac/opac-detail.pl index 2c61b369f9..2ee3fd4318 100755 --- a/opac/opac-detail.pl +++ b/opac/opac-detail.pl @@ -173,7 +173,6 @@ if ( $xslfile ) { } my $OpacBrowseResults = C4::Context->preference("OpacBrowseResults"); -$template->{VARS}->{'OpacBrowseResults'} = $OpacBrowseResults; # We look for the busc param to build the simple paging from the search if ($OpacBrowseResults) { @@ -460,6 +459,7 @@ if ($session->param('busc')) { } $template->param('listResults' => \@listResults) if (@listResults); $template->param('indexPag' => 1 + $offset, 'totalPag' => $arrParamsBusc{'total'}, 'indexPagEnd' => scalar(@arrBiblios) + $offset); + $template->param( 'offset' => $offset ); } } -- 2.39.5