From 1e1495da9e542ecc1c63654b963b0af2392ef355 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 --- .../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 | 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 321691d..5b160b8 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 69387d7..de9d5b1 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..55fe8aa 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 ) %]