Bugzilla – Attachment 103997 Details for
Bug 25314
Make OPAC facets collapse
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 25314: Make OPAC facets collapse
Bug-25314-Make-OPAC-facets-collapse.patch (text/plain), 8.46 KB, created by
Lucas Gass (lukeg)
on 2020-04-29 21:27:02 UTC
(
hide
)
Description:
Bug 25314: Make OPAC facets collapse
Filename:
MIME Type:
Creator:
Lucas Gass (lukeg)
Created:
2020-04-29 21:27:02 UTC
Size:
8.46 KB
patch
obsolete
>From 5bd331dbbdce74a84885eb0912e548725bb2291d Mon Sep 17 00:00:00 2001 >From: Lucas Gass <lucas@bywatersolutions.com> >Date: Wed, 29 Apr 2020 15:45:44 +0000 >Subject: [PATCH] Bug 25314: Make OPAC facets collapse > >TO TEST: >1. Apply patch >2. Regenerate CSS (yarn build --view opac) >3. DO a search and look at the facets. They should be collapsed. >4. Try mousing over a facet heading and click, that list should appear. >5. Try clicking the heading again to make th facet disappear. >6. Play around with different limiters and make sure eveything works. >7. Check aria labels look correct and you can tab through facets without a keyboard. >--- > koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 25 ++++++++++----- > .../bootstrap/en/includes/opac-facets.inc | 36 ++++++++-------------- > .../opac-tmpl/bootstrap/en/modules/opac-results.tt | 7 +++++ > 3 files changed, 37 insertions(+), 31 deletions(-) > >diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >index 2fec169b94..618eb7691c 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >@@ -2052,7 +2052,7 @@ input { > a { > background-color: #F0F3F3; > border-bottom: 1px solid #D8D8D8; >- display: block; >+ display: block; > font-weight: bold; > padding: .7em .2em; > text-decoration: none; >@@ -2071,13 +2071,6 @@ input { > margin-bottom: 2px; > padding: .1em .2em; > } >- >- &.showmore { >- a { >- font-weight: bold; >- text-indent: 1em; >- } >- } > } > > a { >@@ -2089,6 +2082,22 @@ input { > display: inline-block; > } > >+ .toggle-facet { >+ cursor: pointer; >+ } >+ >+ .toggle-facet::before { >+ font-family: "FontAwesome"; >+ cursor: pointer; >+ content: '\f054'; >+ font-weight: 100; >+ font-size: 10px; >+ padding-right: 3px; >+ } >+ >+ .facet-list-expanded::before { >+ content: '\f078'; >+ } > } > > #menu { >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 da5e98134e..6a2fb62168 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-facets.inc >+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-facets.inc >@@ -21,20 +21,20 @@ > [% FOREACH facets_loo IN facets_loop %] > [% IF facets_loo.facets.size > 0 %] > <li id="[% facets_loo.type_id | html %]"> >- [% IF facets_loo.type_label_Authors %]<h5 id="facet-authors">Authors</h5>[% END %] >- [% IF facets_loo.type_label_Titles %]<h5 id="facet-titles">Titles</h5>[% END %] >- [% IF facets_loo.type_label_Topics %]<h5 id="facet-topics">Topics</h5>[% END %] >- [% IF facets_loo.type_label_Places %]<h5 id="facet-places">Places</h5>[% END %] >- [% IF facets_loo.type_label_Series %]<h5 id="facet-series">Series</h5>[% END %] >- [% IF facets_loo.type_label_ItemTypes %]<h5 id="facet-itemtypes">Item types</h5>[% END %] >- [% IF facets_loo.type_label_CollectionCodes %]<h5 id="facet-collections">Collections</h5>[% END %] >- [% IF facets_loo.type_label_Language %]<h5 id="facet-languages">Languages</h5>[% END %] >+ [% IF facets_loo.type_label_Authors %]<h5 id="facet-authors" class="toggle-facet" role="button" tabindex="0" aria-expanded="false">Authors</h5>[% END %] >+ [% IF facets_loo.type_label_Titles %]<h5 id="facet-titles" class="toggle-facet" role="button" tabindex="0" aria-expanded="false">Titles</h5>[% END %] >+ [% IF facets_loo.type_label_Topics %]<h5 id="facet-topics" class="toggle-facet" role="button" tabindex="0" aria-expanded="false">Topics</h5>[% END %] >+ [% IF facets_loo.type_label_Places %]<h5 id="facet-places" class="toggle-facet" role="button" tabindex="0" aria-expanded="false">Places</h5>[% END %] >+ [% IF facets_loo.type_label_Series %]<h5 id="facet-series" class="toggle-facet" role="button" tabindex="0" aria-expanded="false">Series</h5>[% END %] >+ [% IF facets_loo.type_label_ItemTypes %]<h5 id="facet-itemtypes" class="toggle-facet" role="button" tabindex="0" aria-expanded="false">Item types</h5>[% END %] >+ [% IF facets_loo.type_label_CollectionCodes %]<h5 id="facet-collections" class="toggle-facet" role="button" tabindex="0" aria-expanded="false">Collections</h5>[% END %] >+ [% IF facets_loo.type_label_Language %]<h5 id="facet-languages" class="toggle-facet" role="button" tabindex="0" aria-expanded="false">Languages</h5>[% END %] > [% UNLESS singleBranchMode %] >- [% IF ( facets_loo.type_label_HomeLibrary ) %]<h5 id="facet-home-libraries">Home libraries</h5>[% END %] >- [% IF ( facets_loo.type_label_HoldingLibrary ) %]<h5 id="facet-holding-libraries">Holding libraries</h5>[% END %] >+ [% IF ( facets_loo.type_label_HomeLibrary ) %]<h5 id="facet-home-libraries" class="toggle-facet" role="button" tabindex="0" aria-expanded="false">Home libraries</h5>[% END %] >+ [% IF ( facets_loo.type_label_HoldingLibrary ) %]<h5 id="facet-holding-libraries" class="toggle-facet" role="button" tabindex="0" aria-expanded="false">Holding libraries</h5>[% END %] > [% END %] >- [% IF facets_loo.type_label_Location %]<h5 id="facet-locations">Locations</h5>[% END %] >- <ul> >+ [% IF facets_loo.type_label_Location %]<h5 id="facet-locations" class="toggle-facet" role="button" tabindex="0" aria-expanded="false">Locations</h5>[% END %] >+ <ul class="collapsible-list" 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 %] >@@ -45,9 +45,7 @@ > [% FOREACH facet IN facets_loo.facets %] > [% IF facets_loo.type_label_CollectionCodes %][% SET facet.facet_label_value = AuthorisedValues.GetByCode('CCODE',facet.facet_label_value,1) || facet.facet_label_value %][% END %] > [% IF facets_loo.type_label_Language %][% SET facet.facet_label_value = Languages.GetByISOCode(lang,facet.facet_label_value) || facet.facet_label_value %][% END %] >- [% IF loop.count > 5 && !facet.active %] >- <li class="collapsible-facet" style="display:none"> >- [% ELSE %] >+ [% IF !facet.active %] > <li> > [% END %] > [% IF facet.active %] >@@ -63,14 +61,6 @@ > [% END %] > </li> > [% END %] >- [% IF facets_loo.facets.size > 5 %] >- <li class="moretoggle"> >- <a href="#"><strong>Show more</strong></a> >- </li> >- <li class="moretoggle" style="display:none"> >- <a href="#"><strong>Show less</strong></a> >- </li> >- [% END %] > </ul> > </li> > [% END # / IF facets_loo.facets.size > 0 %] >diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt >index a226ceefc8..87e655f247 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt >+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt >@@ -997,5 +997,12 @@ $("input.newtag").on('keydown', function(e){ > }); > > }); >+$('.toggle-facet').click( function() { >+ $(this).siblings('.collapsible-list').toggle(); >+ $(this).toggleClass('facet-list-expanded'); >+ $(this).attr('aria-expanded' , function(index, attr) { >+ return attr == 'true' ? false : true; >+ }) >+}) > </script> > [% END %] >-- >2.11.0
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 25314
:
103957
|
103958
|
103997
|
107447
|
107448
|
107450
|
107451
|
107452