From f734ce7aa55b6089fc044f700838dd63bf3ee7ae Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Thu, 29 Jan 2026 12:38:39 +0000 Subject: [PATCH] Bug 25314: Make OPAC facets collapse This patch implements collapsing facets using the Bootstrap Collapse component. To test, apply the patch and rebuild the OPAC CSS. 1. Clear your browser cache if necessary. 2. Using the sample data, go to Advanced Search in the OPAC. Check the "Books" checkbox under the "Item types" tab and submit. 3. In the left-hand sidebar you should see the facets you normally see, but now each one has an arrow icon to show whether the facet is expanded or collapsed. 4. All facets should be expanded by default. Adding expanded/collapsed settings to system preferences is out of scope for this bug. 5. Test expanding and collapsing facets, as well as the "Show more" link under each one. 6. Click the "Fiction" link under the "Collections" facet. When the refined search results load you clicked should now have a red "X" link next to "Fiction," which should no longer be a link. - Because "Fiction" is the only uption under the "Collections" facet, the facet is not collapsible. I reasoned that it would be important not to let a facet limitation disappear behind hidden facets. * The only way I know to do this in the template is to check for facets with only one option this has the possibly-unwanted side effect of making facets which haven't been selected but still only have one option not collapsible. In this example search "Holding libraries" and "Topics" show this. I'm open to suggestions on this! 7. Test with the displayFacetCount preference both enabled and disabled. Sponsored-by: Athens County Public Libraries --- .../opac-tmpl/bootstrap/css/src/_common.scss | 9 + .../opac-tmpl/bootstrap/css/src/opac.scss | 66 ++++- .../bootstrap/en/includes/opac-facets.inc | 275 ++++++++++-------- 3 files changed, 210 insertions(+), 140 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss index 87fb0fa0b9b..17b96490fa1 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss @@ -176,6 +176,15 @@ caption { } } +.badge { + &.bg-info-subtle, + &.bg-secondary-subtle { + color: #000 !important; + margin-left: .3em; + text-indent: 0; + } +} + .btn-primary { background-color: $base-theme-color; border: 1px solid darken( $base-theme-color, 10% ); diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index 42268b4b126..4c73efaefcd 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -1874,18 +1874,9 @@ nav { } li { - font-size: 90%; - font-weight: bold; + font-size: 95%; list-style-type: none; - li { - font-size: 95%; - font-weight: normal; - line-height: 125%; - margin-bottom: 2px; - padding: .1em .2em; - } - &.showmore { a { font-weight: bold; @@ -1898,8 +1889,59 @@ nav { font-weight: normal; } - .facet-count { - display: inline-block; + .facet-label-selected { + font-weight: bold; + } + + .facet-toggle, + .facet-toggle:hover, + .facet-static { + color: #6F6F6F; + cursor: pointer; + display: inline-flex; + font-weight: bold; + padding: 0.3em 0; + text-decoration: none; + } + .facet-toggle::before { + color: #5A5A5A; + content: "\f0da"; + font-family: "Font Awesome 6 Free"; + font-size: 90%; + line-height: 1.5em; + padding: 0 0.35em 0 0; + transition: transform 0.2s ease; + } + + .facet-toggle[aria-expanded="true"]::before { + content: "\f0d7"; + padding-top: 0; + padding-bottom: 0; + } + + .facet-static::before { + color: #5A5A5A; + content: "\f0c8"; + cursor: default; + font-family: "Font Awesome 6 Free"; + font-size: 50%; + line-height: 1.5em; + padding: .7em 1em 0 0; + } + + .facet-collapse li { + padding: 0.1em 0 0.1em 1.6em; + text-indent: -1em; + } + .facet-remove { + background:#FFF none !important; + color:red !important; + padding:.2em .4em; + border:1px solid rgb(255, 0, 0); + text-indent:0; + } + .facet-remove:hover { + background: rgba(255, 0, 0, 0.1) none !important; } } diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-facets.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-facets.inc index e56965d6634..38742be1d10 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-facets.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-facets.inc @@ -10,161 +10,180 @@