Koha-community/Koha
13
7
Fork 0
Code Issues Releases Wiki Activity

Bug 33891: Use template wrapper for tabs: OPAC advanced search

Browse source 
This patch adds the tab WRAPPER markup to the OPAC, adapted for the
Bootstrap version used by the OPAC (4.5.0). The advanced search page is
updated to use the wrapper construction.

Unrelated markup fix: an empty size attribute is removed from an
<input>.

To test, apply the patch and view the the advanced search page in the
OPAC. The tabs for item type, shelving location, and collection should
all look correct and work correctly.

In the staff interface, go to Administration -> System preferences ->
OpacAdvancedSearchTypes and try various configurations, confirming each
time that the OPAC page adjustes correctly.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: David Cook <dcook@prosentient.com.au>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This commit is contained in:
Owen Leonard 2023-05-31 17:51:46 +00:00 committed by Tomas Cohen Arazi
parent 399eb51d34
commit 087861cb43
Signed by: tomascohen
GPG key ID: 0A272EA1B2F3C15F
2 changed files with 84 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
koha-tmpl/opac-tmpl/bootstrap/en/includes/html_helpers.inc
View file

@ -33,3 +33,68 @@
[%- END -%]
[%- this_biblio_href | url %][% biblionumber | url -%]
[%- END %]
[% # BOOTSTRAP TAB WRAPPER USAGE %]
[% # [ WRAPPER tabs id= "tabs_container_id" ] %]
[% # [ WRAPPER tabs_nav ] %]
[% # [ WRAPPER tab_item tabname= "tab_name_1" bt_active= 1 ] <span>Tab text 1</span> [ END ] %]
[% # [ WRAPPER tab_item tabname= "tab_name_2" ] <span>Tab text 2</span> [ END ] %]
[% # ... %]
[% # [ END ] %]
[% # [ WRAPPER tab_panels ] %]
[% # [ WRAPPER tab_panel tabname="tab_name_1" bt_active= 1 ] Panel contents 1 [ END ] %]
[% # [ WRAPPER tab_panel tabname="tab_name_2" ] Panel contents 2 [ END ] %]
[% # ... %]
[% # [ END ] %]
[% # [ END ] %]
[% BLOCK tabs %]
[% IF ( id ) %]
<div id="[% id | html %]" class="toptabs">
[% ELSE %]
<div class="toptabs">
[% END %]
[% content | $raw %]
</div>
[% END %]
[% BLOCK tabs_nav %]
<ul class="nav nav-tabs" role="tablist">
[% content | $raw %]
</ul>
[% END %]
[% BLOCK tab_item %]
<li class="nav-item" role="presentation">
[% IF ( bt_active ) %]
[% SET link_class="nav-link active" %]
[% SET aria_selected="true" %]
[% ELSE %]
[% SET link_class="nav-link" %]
[% SET aria_selected="false" %]
[% END %]
<a href="#[% tabname | uri %]_panel" class="[% link_class | html %]" id="[% tabname | html %]-tab" data-toggle="tab" data-target="#[% tabname | html %]_panel" data-tabname="[% tabname | uri %]" aria-controls="[% tabname | uri %]_panel" role="tab" aria-selected="[% aria_selected | html %]">
[% content | $raw %]
</a>
</li>
[% END %]
[% BLOCK tab_panels %]
[% IF ( id ) %]
<div class="tab-content" id="[% id | html %]_content">
[% ELSE %]
<div class="tab-content">
[% END %]
[% content | $raw %]
</div>
[% END %]
[% BLOCK tab_panel %]
[% IF ( bt_active ) %]
<div role="tabpanel" class="tab-pane show active" id="[% tabname | html %]_panel" aria-labelledby="[% tabname | html %]-tab">
[% ELSE %]
<div role="tabpanel" class="tab-pane" id="[% tabname | html %]_panel" aria-labelledby="[% tabname | html %]-tab">
[% END %]
[% content| $raw %]
</div>
[% END %]

40
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-advsearch.tt
View file

@ -112,7 +112,7 @@
</select> <!-- /#search-field_[% loop.index | html %] -->
</div> <!-- .search-term-input -->
<div class="search-term-input">
<input class="form-control" type="text" size="" name="q" title="Enter search terms" value="" />
<input class="form-control" type="text" name="q" title="Enter search terms" value="" />
</div> <!-- .search-term-input -->
[% IF ( expanded_options ) %]
<div class="search-term-input">
@ -144,7 +144,7 @@
See from (non-preferred form) headings are included
</div>
[% END %]
</div> <!-- /.search-terms -->
</div> <!-- /.advanced-search-terms -->
</fieldset>
</div> <!-- /#booleansearch -->
</div> <!-- / .col -->
@ -162,23 +162,21 @@
[%# Following on one line for translatability %]
[% IF ( ( OpacAdvSearchOptions and OpacAdvSearchOptions.grep('itemtype').size > 0 and not expanded_options ) or ( OpacAdvSearchMoreOptions and OpacAdvSearchMoreOptions.grep('itemtype').size > 0 and expanded_options ) ) %]
<div class="col order-first order-md-first order-lg-2">
<div id="advsearches" class="toptabs">
<ul class="nav nav-tabs" role="tablist">
[% WRAPPER tabs id= "advsearches" %]
[% WRAPPER tabs_nav %]
[% FOREACH advsearchloo IN advancedsearchesloop %]
<li class="nav-item" role="presentation" id="advsearch-tab-[% advsearchloo.advanced_search_type | html %]">
<a href="#advsearch-[% advsearchloo.advanced_search_type | uri %]" class="nav-link" aria-controls="advsearch-[% advsearchloo.advanced_search_type | html %]" aria-selected="false" role="tab" data-toggle="tab">
[% IF ( advsearchloo.advanced_search_type == 'itemtypes' ) %]<span>Item type</span>
[% ELSIF ( advsearchloo.advanced_search_type == 'ccode' ) %]<span>Collection</span>
[% ELSIF ( advsearchloo.advanced_search_type == 'loc' ) %]<span>Shelving location</span>
[% ELSE %]<span>Something else</span>
[% END %]
</a>
</li>
[% WRAPPER tab_item tabname= "advsearch-tab-${advsearchloo.advanced_search_type}" bt_active= "0" %]
[% IF ( advsearchloo.advanced_search_type == 'itemtypes' ) %]<span>Item type</span>
[% ELSIF ( advsearchloo.advanced_search_type == 'ccode' ) %]<span>Collection</span>
[% ELSIF ( advsearchloo.advanced_search_type == 'loc' ) %]<span>Shelving location</span>
[% ELSE %]<span>Something else</span>
[% END %]
[% END %]
[% END %]
</ul>
<div class="tab-content">
[% END # /WRAPPER tabs_nav %]
[% WRAPPER tab_panels id= "advsearches" %]
[% FOREACH advsearchloo IN advancedsearchesloop %]
<div role="tabpanel" class="tab-pane" id="advsearch-[% advsearchloo.advanced_search_type | html %]" class="advsearch" aria-labelledby="advsearch-tab-[% advsearchloo.advanced_search_type | html %]">
[% WRAPPER tab_panel tabname="advsearch-tab-${advsearchloo.advanced_search_type}" %]
<fieldset>
<legend>Limit to any of the following:</legend>
<div class="row">
@ -204,13 +202,13 @@
[% END %]
[% END %]
</fieldset>
</div> <!-- / #advsearch-[% advsearchloo.advanced_search_type | html %] -->
[% END # /tab_panel#advsearch-advsearchloo.advanced_search_type %]
[% END # / FOREACH advancedsearchesloop %]
</div> <!-- /.tab-content -->
</div> <!-- / #advsearches -->
[% END # /tab_panels %]
[% END # /WRAPPER tabs#advsearches %]
</div> <!-- / .col -->
[% END # /IF OpacAdvSearchOptions %]
</div>
</div> <!-- /.row -->
<div id="advsearch_limits" class="row">
@ -483,7 +481,7 @@ $(document).ready(function() {
[% END %]
if( $("#advsearches .tab-pane.active").length < 1 ){
$("#advsearches a:first").tab("show");
$("#advsearches li:first a").tab("show");
}
$('.search-term-row .search-term-input select[name="op"]').first().prop("disabled",true).hide();