@@ -, +, @@ - Open the "Browse search" page in the OPAC. - Test various searches: Author, Subject, and Title. - When results are found, the should be displayed as a Bootstrap-styled accordion widget. Clicking any individual result should expand the panel containing the corresponding records. - Clicking the record link should open the bibliographic detail page in a new window. - When no results are found, a Bootstrap-style "alert" box should appear. --- koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss | 2 +- koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 139 +++++++--------- .../opac-tmpl/bootstrap/en/modules/opac-browse.tt | 88 ++++++---- koha-tmpl/opac-tmpl/bootstrap/js/browse.js | 179 +++++++++------------ opac/opac-browse.pl | 1 + 5 files changed, 195 insertions(+), 214 deletions(-) --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss +++ a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss @@ -44,7 +44,7 @@ $sci-heading-color: #727272; @import "../../../../../node_modules/bootstrap/scss/breadcrumb"; @import "../../../../../node_modules/bootstrap/scss/button-group"; @import "../../../../../node_modules/bootstrap/scss/buttons"; -// @import "../../../../../node_modules/bootstrap/scss/card"; +@import "../../../../../node_modules/bootstrap/scss/card"; // @import "../../../../../node_modules/bootstrap/scss/carousel"; @import "../../../../../node_modules/bootstrap/scss/close"; // @import "../../../../../node_modules/bootstrap/scss/code"; --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -2513,94 +2513,35 @@ $star-selected: #EDB867; } /*opac browse search*/ -#browse-search { - - form { - label { - display: inline-block; - margin-right:5px; - } - - [type=submit] { - margin-top: 10px; - } - } - - #browse-resultswrapper { - margin-top: 4em; - - @media (min-width: 768px) and (max-width: 984px) { - margin-top: 2em; - } - - @media (max-width: 767px) { - margin-top: 1em; - } - } - #browse-searchresults, #browse-selectionsearch { - border: 1px solid #E3E3E3; - border-radius: 4px; - padding: 0; - overflow-y: auto; - max-height: 31em; - margin-bottom: 2em; - } - #browse-searchresults { - max-height: 31em; - list-style: none; - padding: 10px; - a { - display: block; - margin-bottom: 5px; - - &.selected { - background-color:#EEE; - } - } +#browse-resultswrapper { + margin-top: 15px; +} +#browse-searchfuzziness { + padding: 15px 0; +} - li:last-child a { - margin-bottom: 0; - } +#browse-searchresults, #browse-selectionsearch { + border: 1px solid #E3E3E3; + border-radius: 4px; + padding: 0; + margin-bottom: 2em; +} - @media (max-width: 767px) { - max-height: 13em; - } - } - #browse-selection { - margin-top: -40px; - padding-top: 0; +#browse-selectionsearch p.subjects { + font-size: 0.9em; + margin-bottom: 0; +} - @media (max-width: 767px) { - margin-top: 0; - } - } - #browse-selectionsearch ol { - list-style: none; - margin: 0; +#browse-selectionsearch h4 { + margin: 0; +} - li { - padding: 1em; +#browse-suggestionserror { + margin-top: 1rem; +} - &:nth-child(odd) { - background-color: #F4F4F4; - } - } - } - #browse-selectionsearch p.subjects { - font-size: 0.9em; - margin-bottom: 0; - } - #browse-selectionsearch h4 { - margin: 0; - } - .error, .no-results { - background-color: #EEE; - border: 1px solid #E8E8E8; - text-align: left; - padding: 0.5em; - border-radius: 3px; - } +#browse-search { .loading { text-align: center; @@ -2611,6 +2552,15 @@ $star-selected: #EDB867; } } } + +#card_template { + display: none; +} + +.result-title { + margin-bottom: .4rem; + margin-left: 1rem; +} /*end browse search*/ /* Skip to content link. CSS adapted from https://webaim.org/ */ @@ -2638,4 +2588,29 @@ $star-selected: #EDB867; } } +.accordion { + .card-header { + padding: 0; + + a { + display: block; + padding: .75rem 1.25rem; + + &[aria-expanded="true"] { font-weight: bold; } + &[aria-expanded="false"] { font-weight: normal; } + + &:hover { + background-color: rgba(255, 255, 204, 0.8); + text-decoration: none; + } + } + } + + .collapse { + &.show { + border-top: 1px solid #888; + } + } +} + @import "responsive"; --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-browse.tt +++ a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-browse.tt @@ -41,44 +41,70 @@