From b931fdfd1b71f32446864a681cab3b9205971567 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Fri, 10 Aug 2018 12:41:36 +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 --- .../opac-tmpl/bootstrap/css/src/_responsive.scss | 11 +- koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 112 +++++------ .../opac-tmpl/bootstrap/en/modules/opac-detail.tt | 208 +++++---------------- opac/opac-detail.pl | 2 +- 4 files changed, 109 insertions(+), 224 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss index 832bbf3..6d50192 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss @@ -492,17 +492,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 1f13274..0dc9bd1 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 975d5a3..fe87602 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 ) %]