From 1cea1fc4ea0fe729fcd6411e476eee8a4aa7b1fa 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 Signed-off-by: Paul Derscheid Signed-off-by: Katrin Fischer Signed-off-by: Lucas Gass (cherry picked from commit 2546c08688107bc44a0dbf8ab77cec61ac47ac36) Signed-off-by: Jacob O'Mara --- .../opac-tmpl/bootstrap/css/src/_common.scss | 9 + .../opac-tmpl/bootstrap/css/src/opac.scss | 66 ++++- .../bootstrap/en/includes/opac-facets.inc | 277 ++++++++++-------- 3 files changed, 211 insertions(+), 141 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss index 87fb0fa0b9..17b96490fa 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 6d64804491..5ca6136c02 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -1840,18 +1840,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; @@ -1864,8 +1855,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 e56965d663..38742be1d1 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 @@
    [% IF Koha.Preference("SavedSearchFilters") && search_filters.size > 0 %]
  • -

    Custom search filters

    -
      - [% SET base_url = "/cgi-bin/koha/opac-search.pl?" _ query_cgi _ limit_cgi %] - [% FOREACH search_filter IN search_filters %] - [% SET search_filter_id = search_filter.id | uri %] -
    • - [% IF active_filters.${search_filter.id} %] - [% search_filter.name | html %][x] - [% ELSE %] - [% search_filter.name | html %] - [% END %] -
      • - [% END %] -
    + Custom search filters +
    +
      + [% SET base_url = "/cgi-bin/koha/opac-search.pl?" _ query_cgi _ limit_cgi %] + [% FOREACH search_filter IN search_filters %] + [% SET search_filter_id = search_filter.id | uri %] +
    • + [% IF active_filters.${search_filter.id} %] + [% search_filter.name | html %][x] + [% ELSE %] + [% search_filter.name | html %] + [% END %] +
      • + [% END %] +
    +
    • [% END %] -

  • Availability

    - - [% IF ( related ) %]
  • (related searches: [% FOREACH relate IN related %][% relate.related_search | html %][% END %])
    • [% END %] +
  • + Availability +
    +
      + [% IF ( available ) %] +
    • Showing only records with available items
    • Show all records
      • + [% ELSE %] +
    • Limit to records with available items
      • + [% END %] + [% IF ( related ) %]
    • (related searches: [% FOREACH relate IN related %][% relate.related_search | html %][% END %])
      • [% END %] +
    +
    • [% FOREACH facets_loo IN facets_loop %] [% IF facets_loo.facets.size > 0 %]
  • + [% IF ( facets_loo.facets.size == 1 ) %] + [% attrs = "class='facet-static'" %] + [% ELSE %] + [% attrs = "class='facet-toggle' aria-expanded='true' data-bs-toggle='collapse' data-bs-target='#" _ facets_loo.type_id _ "_collapse'" %] + [% END %] [% SWITCH facets_loo.label %] [% CASE 'Authors' %] -

    Authors

    + Authors [% CASE 'Titles' %] -

    Titles

    + Titles [% CASE 'Topics' %] -

    Topics

    + Topics [% CASE 'Places' %] -

    Places

    + Places [% CASE 'Series' %] -

    Series

    + Series [% CASE 'Item types' %] -

    Item types

    + Item types [% CASE 'Home libraries' %] -

    Home libraries

    + Home libraries [% CASE 'Holding libraries' %] -

    Holding libraries

    + Holding libraries [% CASE 'Location' %] -

    Locations

    + Locations [% CASE 'Collections' %] -

    Collections

    + Collections [% CASE 'Languages' %] -

    Languages

    + Languages [% CASE %] - + [% facets_loo.type_id | html %] [% END %] -
      - [% SET url = "/cgi-bin/koha/opac-search.pl?" _ query_cgi _ limit_cgi %] - [% IF ( sort_by ) %] - [% url = BLOCK %][% url | $raw %][% "&sort_by=" _ sort_by | url %][% END %] - [% END %] - [% IF ( results_per_page ) %] - [% url = BLOCK %][% url | $raw %][% "&count=" _ results_per_page | url %][% END %] - [% END %] - [% FOREACH facet IN facets_loo.facets %] - [% IF facets_loo.label == 'Collections' %][% SET facet.facet_label_value = AuthorisedValues.GetDescriptionByKohaField( kohafield => 'items.ccode', authorised_value => facet.facet_label_value, opac =>1 ) || facet.facet_label_value %][% END %] - [% IF facets_loo.label == 'Languages' %][% SET facet.facet_label_value = Languages.GetByISOCode(lang,facet.facet_label_value) || facet.facet_label_value %][% END %] - [% SET li_class = '' %] - [% SET li_style = '' %] - [% IF loop.count > 5 && !facet.active %] - [% li_class = "collapsible-facet" %] - [% li_style = "display:none" %] +
      +
        + [% SET url = "/cgi-bin/koha/opac-search.pl?" _ query_cgi _ limit_cgi %] + [% IF ( sort_by ) %] + [% url = BLOCK %][% url | $raw %][% "&sort_by=" _ sort_by | url %][% END %] [% END %] -
      • - [% IF facet.active %] - [% local_url = BLOCK %][% url | $raw %][% "&nolimit=" _ facet.type_link_value _ ":" _ facet.facet_link_value | url %][% END %] - [% facet.facet_label_value | html %] - [% IF ( displayFacetCount ) %] - ([% facet.facet_count | html %]) + [% IF ( results_per_page ) %] + [% url = BLOCK %][% url | $raw %][% "&count=" _ results_per_page | url %][% END %] + [% END %] + [% FOREACH facet IN facets_loo.facets %] + [% IF facets_loo.label == 'Collections' %][% SET facet.facet_label_value = AuthorisedValues.GetDescriptionByKohaField( kohafield => 'items.ccode', authorised_value => facet.facet_label_value, opac =>1 ) || facet.facet_label_value %][% END %] + [% IF facets_loo.label == 'Languages' %][% SET facet.facet_label_value = Languages.GetByISOCode(lang,facet.facet_label_value) || facet.facet_label_value %][% END %] + [% SET li_class = '' %] + [% SET li_style = '' %] + [% IF loop.count > 5 && !facet.active %] + [% li_class = "collapsible-facet" %] + [% li_style = "display:none" %] + [% END %] +
      • + [% IF facet.active %] + [% local_url = BLOCK %][% url | $raw %][% "&nolimit=" _ facet.type_link_value _ ":" _ facet.facet_link_value | url %][% END %] + [% FILTER collapse %] + + [% facet.facet_label_value | html %] + [% IF ( displayFacetCount ) %] +  [% facet.facet_count | html %] + [% END %] +  x + + [% END %] + [% ELSE %] + [% local_url = BLOCK %][% url | $raw %][% "&limit=" _ facet.type_link_value _ ":" _ facet.facet_link_value | url %][% END %] + [% facet.facet_label_value | html %] + [% IF ( displayFacetCount ) %] + [% facet.facet_count | html %] + [% END %] [% END %] - [x] - [% ELSE %] - [% local_url = BLOCK %][% url | $raw %][% "&limit=" _ facet.type_link_value _ ":" _ facet.facet_link_value | url %][% END %] - [% facet.facet_label_value | html %] - [% IF ( displayFacetCount ) %] - ([% facet.facet_count | html %]) +
        • + [% END %] + [% IF facets_loo.facets.size > 5 %] +
      • + [% SET aria_label = t("Show more") %] + [% SWITCH facets_loo.label %] + [% CASE 'Authors' %] + [% aria_label = t("Show more authors") %] + [% CASE 'Titles' %] + [% aria_label = t("Show more titles") %] + [% CASE 'Topics' %] + [% aria_label = t("Show more topics") %] + [% CASE 'Places' %] + [% aria_label = t("Show more places") %] + [% CASE 'Series' %] + [% aria_label = t("Show more series") %] + [% CASE 'Item types' %] + [% aria_label = t("Show more item types") %] + [% CASE 'Home libraries' %] + [% aria_label = t("Show more home libraries") %] + [% CASE 'Holding libraries' %] + [% aria_label = t("Show more holding libraries") %] + [% CASE 'Location' %] + [% aria_label = t("Show more locations") %] + [% CASE 'Collections' %] + [% aria_label = t("Show more collections") %] + [% CASE 'Languages' %] + [% aria_label = t("Show more languages") %] [% END %] - [% END %] -
        • - [% END %] - [% IF facets_loo.facets.size > 5 %] -
      • - [% SET aria_label = t("Show more") %] - [% SWITCH facets_loo.label %] - [% CASE 'Authors' %] - [% aria_label = t("Show more authors") %] - [% CASE 'Titles' %] - [% aria_label = t("Show more titles") %] - [% CASE 'Topics' %] - [% aria_label = t("Show more topics") %] - [% CASE 'Places' %] - [% aria_label = t("Show more places") %] - [% CASE 'Series' %] - [% aria_label = t("Show more series") %] - [% CASE 'Item types' %] - [% aria_label = t("Show more item types") %] - [% CASE 'Home libraries' %] - [% aria_label = t("Show more home libraries") %] - [% CASE 'Holding libraries' %] - [% aria_label = t("Show more holding libraries") %] - [% CASE 'Location' %] - [% aria_label = t("Show more locations") %] - [% CASE 'Collections' %] - [% aria_label = t("Show more collections") %] - [% CASE 'Languages' %] - [% aria_label = t("Show more languages") %] - [% END %] - Show more -
        • - + - [% END %] -
      + [% IF aria_label %] + Show less + [% END %] + + [% END %] +
    +
    • [% END # / IF facets_loo.facets.size > 0 %] [% END # / FOREACH facets_loo %]