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>
(cherry picked from commit b754eb5b5a)
Signed-off-by: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>
This commit is contained in:
Owen Leonard 2023-05-31 17:51:46 +00:00 committed by Matt Blenkinsop
parent 43017b514f
commit 3fb26d1f48
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 -%] [%- END -%]
[%- this_biblio_href | url %][% biblionumber | url -%] [%- this_biblio_href | url %][% biblionumber | url -%]
[%- END %] [%- 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 %] --> </select> <!-- /#search-field_[% loop.index | html %] -->
</div> <!-- .search-term-input --> </div> <!-- .search-term-input -->
<div class="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 --> </div> <!-- .search-term-input -->
[% IF ( expanded_options ) %] [% IF ( expanded_options ) %]
<div class="search-term-input"> <div class="search-term-input">
@ -144,7 +144,7 @@
See from (non-preferred form) headings are included See from (non-preferred form) headings are included
</div> </div>
[% END %] [% END %]
</div> <!-- /.search-terms --> </div> <!-- /.advanced-search-terms -->
</fieldset> </fieldset>
</div> <!-- /#booleansearch --> </div> <!-- /#booleansearch -->
</div> <!-- / .col --> </div> <!-- / .col -->
@ -162,23 +162,21 @@
[%# Following on one line for translatability %] [%# 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 ) ) %] [% 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 class="col order-first order-md-first order-lg-2">
<div id="advsearches" class="toptabs"> [% WRAPPER tabs id= "advsearches" %]
<ul class="nav nav-tabs" role="tablist"> [% WRAPPER tabs_nav %]
[% FOREACH advsearchloo IN advancedsearchesloop %] [% FOREACH advsearchloo IN advancedsearchesloop %]
<li class="nav-item" role="presentation" id="advsearch-tab-[% advsearchloo.advanced_search_type | html %]"> [% WRAPPER tab_item tabname= "advsearch-tab-${advsearchloo.advanced_search_type}" bt_active= "0" %]
<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>
[% IF ( advsearchloo.advanced_search_type == 'itemtypes' ) %]<span>Item type</span> [% ELSIF ( advsearchloo.advanced_search_type == 'ccode' ) %]<span>Collection</span>
[% ELSIF ( advsearchloo.advanced_search_type == 'ccode' ) %]<span>Collection</span> [% ELSIF ( advsearchloo.advanced_search_type == 'loc' ) %]<span>Shelving location</span>
[% ELSIF ( advsearchloo.advanced_search_type == 'loc' ) %]<span>Shelving location</span> [% ELSE %]<span>Something else</span>
[% ELSE %]<span>Something else</span> [% END %]
[% END %] [% END %]
</a>
</li>
[% END %] [% END %]
</ul> [% END # /WRAPPER tabs_nav %]
<div class="tab-content"> [% WRAPPER tab_panels id= "advsearches" %]
[% FOREACH advsearchloo IN advancedsearchesloop %] [% 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> <fieldset>
<legend>Limit to any of the following:</legend> <legend>Limit to any of the following:</legend>
<div class="row"> <div class="row">
@ -204,13 +202,13 @@
[% END %] [% END %]
[% END %] [% END %]
</fieldset> </fieldset>
</div> <!-- / #advsearch-[% advsearchloo.advanced_search_type | html %] --> [% END # /tab_panel#advsearch-advsearchloo.advanced_search_type %]
[% END # / FOREACH advancedsearchesloop %] [% END # / FOREACH advancedsearchesloop %]
</div> <!-- /.tab-content --> [% END # /tab_panels %]
</div> <!-- / #advsearches --> [% END # /WRAPPER tabs#advsearches %]
</div> <!-- / .col --> </div> <!-- / .col -->
[% END # /IF OpacAdvSearchOptions %] [% END # /IF OpacAdvSearchOptions %]
</div> </div> <!-- /.row -->
<div id="advsearch_limits" class="row"> <div id="advsearch_limits" class="row">
@ -483,7 +481,7 @@ $(document).ready(function() {
[% END %] [% END %]
if( $("#advsearches .tab-pane.active").length < 1 ){ 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(); $('.search-term-row .search-term-input select[name="op"]').first().prop("disabled",true).hide();