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

Bug 30570: Replace the use of jQueryUI tabs in OPAC templates

Browse source 
This patch switches to Bootstrap tabs anywhere in the OPAC where
jQueryUI tabs were used.

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- Test the item type/collection/shelvinglocation tabs on the advanced
  search page. Test that it works correctly with different variations of
  the OpacAdvancedSearchTypes system preference.
- Search for an authority record and view the details. The "Notes"
  tab should be styled correctly.
- Locate a bibliographic record and view the detail page. Verify
  that tabs are working, including all the options:
- Holdings
- Other holdings ( If OpacSeparateHoldings is enabled)
- Descriptions ( MARC notes )
- Subscriptions
- Serial collection (UNIMARC, untested)
- Components ( If ShowComponentRecords is enabled. Link to sample
  record:
  https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=78023 )
- Comments
- Editions (OPACFRBRizeEditions)
- Html5media ( If HTML5MediaEnabled is on. Link to sample records:
  (https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=10685)
- Images ( If OPACLocalCoverImages is enabled )

Bonus points for testing these tabs for which I don't have
credentials:
- Syndetics TOC
- Syndetics Excerpt
- Syndetics Reviews
- Syndetics AuthorNotes
- LibraryThing for Libraries (with LibraryThingForLibrariesTabbedView
  set to "in tabs."
- NovelistSelect

- Check tabs on these patron-related pages:
  - Checkout history
  - Search history
  - Patron summary. The following tabs are
    ✓ Checkouts
    ✓ Relatives' checkouts
    ✓ Overdues
    ✓ Fines
    ✓ Relatives' fines
    ✓ Holds
    ✓ Recalls
    ✓ Article requests
    ✓ Overdrive

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

Bug 30570: (follow-up) Correct rebase errors

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
(cherry picked from commit 894f7013eb)

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
This commit is contained in:
Owen Leonard 2022-07-06 11:36:11 +00:00 committed by Lucas Gass
parent 4f5b10118a
commit ebc552cac6
9 changed files with 1375 additions and 1239 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
View file

@ -901,6 +901,40 @@ ul {
/* end jQueryUI core */
/* Bootstrap Tabs */
.tab-content {
background-color: #FFF;
border: 1px solid #d8d8d8;
border-top-width: 0;
margin-bottom: 1em;
padding: 1em;
}
.nav-tabs {
.nav-link {
background-color: #f0f3f3;
border: 1px solid #d8d8d8;
border-radius: 0;
margin-right: .4em;
&:hover,
&:focus {
border-color: #d8d8d8;
}
&.active {
background-color: #fff;
border: 1px solid #d8d8d8;
border-bottom-color: transparent;
color: #000;
cursor: default;
}
}
}
/* end Bootstrap Tabs */
.close {
color: #0088CC;
filter: none;
@ -1002,16 +1036,6 @@ button {
}
}
.nav-link {
&.active {
font-weight: bold;
}
}
.tab-content {
padding: 15px 0;
}
#logo {
background: transparent url( "../images/koha-green-logo.svg" ) no-repeat scroll 0%;
border: 0;

2
koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
View file

@ -267,7 +267,7 @@ th {
}
.advsearch_limit {
border: 1px solid #EEE;
border: 1px solid #d8d8d8;
font-size: 90%;
height: 100%;
margin-bottom: 15px;

2
koha-tmpl/opac-tmpl/bootstrap/en/includes/holds-table.inc
View file

@ -4,7 +4,7 @@
[% PROCESS 'i18n.inc' %]
[% IF ( HOLDS.count ) %]
<div id="opac-user-holds">
<div id="opac-user-holds" class="tab-pane" role="tabpanel" aria-labelledby="opac-user-holds-tab">
<table id="holdst" class="table table-bordered table-striped">
<caption>Holds <span class="count">([% HOLDS.count | html %] total)</span></caption>
<!-- HOLDS TABLE ROWS -->

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

@ -157,48 +157,50 @@
[% 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>
<ul class="nav nav-tabs" role="tablist">
[% FOREACH advsearchloo IN advancedsearchesloop %]
<li id="advsearch-tab-[% advsearchloo.advanced_search_type | html %]">
<a href="#advsearch-[% advsearchloo.advanced_search_type | uri %]">
[% 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>
<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>
[% END %]
</ul>
[% FOREACH advsearchloo IN advancedsearchesloop %]
<div id="advsearch-[% advsearchloo.advanced_search_type | html %]" class="advsearch">
<fieldset>
<legend>Limit to any of the following:</legend>
<div class="row">
[% FOREACH itemtypeloo IN advsearchloo.code_loop %]
[% IF (advsearchloo.advanced_search_type != 'itemtypes') OR (((!itemtypeloo.searchcategory) AND (itemtypeloo.cat == 0)) OR (itemtypeloo.cat == 1)) %]
<div class="col-sm-6 col-lg-3">
<input type="checkbox"
id="[% itemtypeloo.ccl FILTER remove(',') | html %]-[% itemtypeloo.number | html %]"
name="[% IF ( itemtypeloo.cat == 1 ) %]searchcat[% ELSE %]limit[% END %]"
value="[% IF ( itemtypeloo.cat == 1 ) %][% itemtypeloo.code | html %][% ELSE %]mc-[% itemtypeloo.ccl | html %]:[% itemtypeloo.code | html %][% END %]"
/>
<label for="[% itemtypeloo.ccl FILTER remove(',') | html %]-[% itemtypeloo.number | html %]">
[% UNLESS ( Koha.Preference('OpacNoItemTypeImages')) %]
[% IF ( itemtypeloo.imageurl ) %]
<img src="[% itemtypeloo.imageurl | html %]" alt="[% itemtypeloo.description | html %]" />
<div class="tab-content">
[% 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 %]">
<fieldset>
<legend>Limit to any of the following:</legend>
<div class="row">
[% FOREACH itemtypeloo IN advsearchloo.code_loop %]
[% IF (advsearchloo.advanced_search_type != 'itemtypes') OR (((!itemtypeloo.searchcategory) AND (itemtypeloo.cat == 0)) OR (itemtypeloo.cat == 1)) %]
<div class="col-sm-6 col-lg-3">
<input type="checkbox"
id="[% itemtypeloo.ccl FILTER remove(',') | html %]-[% itemtypeloo.number | html %]"
name="[% IF ( itemtypeloo.cat == 1 ) %]searchcat[% ELSE %]limit[% END %]"
value="[% IF ( itemtypeloo.cat == 1 ) %][% itemtypeloo.code | html %][% ELSE %]mc-[% itemtypeloo.ccl | html %]:[% itemtypeloo.code | html %][% END %]"
/>
<label for="[% itemtypeloo.ccl FILTER remove(',') | html %]-[% itemtypeloo.number | html %]">
[% UNLESS ( Koha.Preference('OpacNoItemTypeImages')) %]
[% IF ( itemtypeloo.imageurl ) %]
<img src="[% itemtypeloo.imageurl | html %]" alt="[% itemtypeloo.description | html %]" />
[% END %]
&nbsp;
[% END %]
&nbsp;
[% END %]
[% itemtypeloo.description | html %]
</label>
</div>
[% IF ( loop.last ) %]</div>[% ELSE %][% UNLESS ( loop.count % 4 ) %]</div><div class="row">[% END %][% END %]
[% itemtypeloo.description | html %]
</label>
</div>
[% IF ( loop.last ) %]</div>[% ELSE %][% UNLESS ( loop.count % 4 ) %]</div><div class="row">[% END %][% END %]
[% END %]
[% END %]
[% END %]
</fieldset>
</div> <!-- / #advsearch-[% advsearchloo.advanced_search_type | html %] -->
[% END # / FOREACH advancedsearchesloop %]
</fieldset>
</div> <!-- / #advsearch-[% advsearchloo.advanced_search_type | html %] -->
[% END # / FOREACH advancedsearchesloop %]
</div> <!-- /.tab-content -->
</div> <!-- / #advsearches -->
</div> <!-- / .col -->
[% END # /IF OpacAdvSearchOptions %]
@ -470,7 +472,9 @@ $(document).ready(function() {
});
[% END %]
$('#advsearches').tabs();
if( $("#advsearches .tab-pane.active").length < 1 ){
$("#advsearches a:first").tab("show");
}
$('.search-term-row .search-term-input select[name="op"]').first().prop("disabled",true).hide();

21
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth-detail.tt
View file

@ -153,16 +153,20 @@
[% END # / IF MARCURLS %]
<div id="authdescriptions" class="toptabs">
<ul>
<li id="tab_descriptions"><a href="#descriptions">Notes</a></li>
<ul class="nav nav-tabs" role="tablist">
<li id="tab_descriptions" class="nav-item" role="presentation">
<a class="nav-link active" id="descriptions-tab" data-toggle="tab" href="#descriptions" role="tab" aria-controls="descriptions" aria-selected="true" href="#descriptions">Notes</a>
</li>
</ul>
<div id="descriptions">
<div class="content_set">
[% FOREACH note IN summary.notes %]
<p class="note auth[% note.field | html %]">[% note.note | html %]</p>
[% END %]
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" aria-labelledby="descriptions-tab" id="descriptions">
<div class="content_set">
[% FOREACH note IN summary.notes %]
<p class="note auth[% note.field | html %]">[% note.note | html %]</p>
[% END %]
</div>
</div>
</div>
</div> <!-- /.tab-content -->
</div>
</div> <!-- / .#userauthdetails -->
</div> <!-- / .col-lg-10/12 -->
@ -177,7 +181,6 @@
[% END %]
<script>
$(document).ready(function() {
$('#authdescriptions').tabs();
[% IF ( displayhierarchy ) %]
$('#hierarchies').jstree({
"types" : {

998
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
View file

File diff suppressed because it is too large Load diff

41
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-readingrecord.tt
View file

@ -3,6 +3,7 @@
[% USE KohaDates %]
[% USE TablesSettings %]
[% USE AdditionalContents %]
[% USE Asset %]
[% SET OpacNav = AdditionalContents.get( location => "OpacNav", lang => lang, library => logged_in_user.branchcode || default_branch, blocktitle => 0 ) %]
[% SET OpacNavBottom = AdditionalContents.get( location => "OpacNavBottom", lang => lang, library => logged_in_user.branchcode || default_branch, blocktitle => 0 ) %]
[% INCLUDE 'doc-head-open.inc' %]
@ -76,14 +77,21 @@
[% END %]
[% IF Koha.Preference( 'OnSiteCheckouts' ) == 1 %]
<div id="tabs" class="toptabs">
<ul class="js-show">
<li id="tab_all"><a href="#tabs-container">All</a></li>
<li id="tab_checkout"><a href="#tabs-container">Checkouts</a></li>
<li id="tab_onsite_checkout"><a href="#tabs-container">On-site checkouts</a></li>
</ul>
<div id="tabs" class="toptabs">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<a id="tab_all" class="nav-link active" data-toggle="tab" role="tab" aria-controls="tabs-container" aria-selected="true" href="#tabs-container">All</a>
</li>
<li class="nav-item" role="presentation">
<a id="tab_checkout" class="nav-link" data-toggle="tab" role="tab" aria-controls="tabs-container" aria-selected="false" href="#tabs-container">Checkouts</a>
</li>
<li class="nav-item" role="presentation">
<a id="tab_onsite_checkout" class="nav-link" data-toggle="tab" role="tab" aria-controls="tabs-container" aria-selected="false" href="#tabs-container">On-site checkouts</a>
</li>
</ul>
<div class="tab-content">
[% END %]
<div id="tabs-container" style="overflow:hidden">
<div class="tab-pane active" role="tabpanel" id="tabs-container">
<table id="readingrec" class="table table-bordered table-striped">
<caption class="sr-only">Checkout history</caption>
<thead>
@ -177,6 +185,7 @@
</table>
</div> <!-- / .tabs-container -->
[% IF ( Koha.Preference( 'OnSiteCheckouts' ) == 1 ) %]
</div> <!-- /.tab-content -->
</div> <!-- /#tabs -->
[% END %]
</div> <!-- / .opac-user-readingrec -->
@ -208,16 +217,14 @@
}
}, columns_settings);
var tabs = $("#tabs").tabs({
activate: function(e, ui) {
var id = $(ui.newTab).attr("id");
if ( id == "tab_checkout" ) {
table.fnFilter("standard_checkout", 0);
} else if ( id == "tab_onsite_checkout" ) {
table.fnFilter("onsite_checkout", 0);
} else { // all
table.fnFilter('', 0);
}
$("#tabs a[data-toggle='tab']").on("shown.bs.tab", function (e) {
var id = e.target.id;
if ( id == "tab_checkout" ) {
table.fnFilter("standard_checkout", 0);
} else if ( id == "tab_onsite_checkout" ) {
table.fnFilter("onsite_checkout", 0);
} else { // all
table.fnFilter('', 0);
}
});
});

160
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-search-history.tt
View file

@ -51,12 +51,17 @@
<h1>Search history</h1>
[% IF Koha.Preference( 'OpacAuthorities' ) == 1 %]
<div id="tabs" class="toptabs">
<ul>
<li><a href="#biblio_tab">Catalog</a></li>
<li><a href="#authority_tab">Authority</a></li>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="biblio-tab-link" href="#biblio_tab" aria-controls="biblio_tab" role="tab" data-toggle="tab" aria-selected="true">Catalog</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="authority-tab-link" href="#authority_tab" aria-controls="authority_tab" role="tab" data-toggle="tab" aria-selected="false">Authority</a>
</li>
</ul>
<div class="tab-content">
[% END %]
<div id="biblio_tab">
<div id="biblio_tab" role="tabpanel" class="tab-pane active" aria-labelledby="biblio-tab-link">
<div id="current_biblio">
[% IF ( current_biblio_searches ) %]
<h2>Current session</h2>
@ -155,85 +160,90 @@
</div> <!-- / #biblio_tab -->
[% IF Koha.Preference( 'OpacAuthorities' ) == 1 %]
<div id="authority_tab">
[% IF ( current_authority_searches ) %]
<h2>Current session</h2>
<form action="/cgi-bin/koha/opac-search-history.pl" method="post">
<legend class="sr-only">Toolbar control</legend>
[% INCLUDE 'toolbar_controls' %]
<input type="hidden" name="action" value="delete" />
<table class="historyt table table-bordered table-striped">
<caption class="sr-only">Current session</caption>
<thead>
<tr>
<th></th>
<th>Date</th>
<th>Search</th>
<th>Results</th>
</tr>
</thead>
<tbody>
[% FOREACH s IN current_authority_searches %]
<div id="authority_tab" role="tabpanel" class="tab-pane" aria-labelledby="authority-tab-link">
<div id="current_authority">
[% IF ( current_authority_searches ) %]
<h2>Current session</h2>
<form action="/cgi-bin/koha/opac-search-history.pl" method="post">
<legend class="sr-only">Toolbar control</legend>
[% INCLUDE 'toolbar_controls' %]
<input type="hidden" name="action" value="delete" />
<table class="historyt table table-bordered table-striped">
<caption class="sr-only">Current session</caption>
<thead>
<tr>
<td class="selectcol">
<input type="checkbox" name="id" value="[% s.id | html %]" id="result[% s.id | html %]" />
</td>
<td data-order="[% s.time | html %]">
<label for="result[% s.id | html %]">
[% s.time |$KohaDates with_hours => 1 %]
</label>
</td>
<td><a href="/cgi-bin/koha/opac-authorities-home.pl?[% s.query_cgi | $raw %]">[% s.query_desc | html %]</a></td>
<td>[% s.total | html %]</td>
<th></th>
<th>Date</th>
<th>Search</th>
<th>Results</th>
</tr>
[% END %]
</tbody>
</table>
<input type="submit" class="btn btn-danger remove-selected" value="Remove selected searches">
</form>
[% END # / IF ( current_authority_searches ) %]
[% IF ( previous_authority_searches ) %]
<h2>Previous sessions</h2>
<form action="/cgi-bin/koha/opac-search-history.pl" method="post">
<legend class="sr-only">Toolbar control</legend>
[% INCLUDE 'toolbar_controls' %]
<input type="hidden" name="action" value="delete" />
<table class="historyt table table-bordered table-striped">
<caption class="sr-only">Previous sessions</caption>
<thead>
<tr>
<th></th>
<th>Date</th>
<th>Search</th>
<th>Results</th>
</tr>
</thead>
<tbody>
[% FOREACH s IN previous_authority_searches %]
</thead>
<tbody>
[% FOREACH s IN current_authority_searches %]
<tr>
<td class="selectcol">
<input type="checkbox" name="id" value="[% s.id | html %]" id="result[% s.id | html %]" />
</td>
<td data-order="[% s.time | html %]">
<label for="result[% s.id | html %]">
[% s.time |$KohaDates with_hours => 1 %]
</label>
</td>
<td><a href="/cgi-bin/koha/opac-authorities-home.pl?[% s.query_cgi | $raw %]">[% s.query_desc | html %]</a></td>
<td>[% s.total | html %]</td>
</tr>
[% END %]
</tbody>
</table>
<input type="submit" class="btn btn-danger remove-selected" value="Remove selected searches">
</form>
[% END # / IF ( current_authority_searches ) %]
</div> <!-- / #current_authority -->
<hr />
<div id="previous_authority">
[% IF ( previous_authority_searches ) %]
<h2>Previous sessions</h2>
<form action="/cgi-bin/koha/opac-search-history.pl" method="post">
<legend class="sr-only">Toolbar control</legend>
[% INCLUDE 'toolbar_controls' %]
<input type="hidden" name="action" value="delete" />
<table class="historyt table table-bordered table-striped">
<caption class="sr-only">Previous sessions</caption>
<thead>
<tr>
<td class="selectcol">
<input type="checkbox" name="id" value="[% s.id | html %]" id="result[% s.id | html %]" />
</td>
<td data-order="[% s.time | html %]">
<label for="result[% s.id | html %]">
[% s.time |$KohaDates with_hours => 1 %]
</label>
</td>
<td><a href="/cgi-bin/koha/opac-authorities-home.pl?[% s.query_cgi | $raw %]">[% s.query_desc | html %]</a></td>
<td>[% s.total | html %]</td>
<th></th>
<th>Date</th>
<th>Search</th>
<th>Results</th>
</tr>
[% END %]
</tbody>
</table>
<input type="submit" class="btn btn-danger remove-selected" value="Remove selected searches">
</form>
[% END # / IF ( previous_authority_searches )%]
</thead>
<tbody>
[% FOREACH s IN previous_authority_searches %]
<tr>
<td class="selectcol">
<input type="checkbox" name="id" value="[% s.id | html %]" id="result[% s.id | html %]" />
</td>
<td data-order="[% s.time | html %]">
<label for="result[% s.id | html %]">
[% s.time |$KohaDates with_hours => 1 %]
</label>
</td>
<td><a href="/cgi-bin/koha/opac-authorities-home.pl?[% s.query_cgi | $raw %]">[% s.query_desc | html %]</a></td>
<td>[% s.total | html %]</td>
</tr>
[% END %]
</tbody>
</table>
<input type="submit" class="btn btn-danger remove-selected" value="Remove selected searches">
</form>
[% END # / IF ( previous_authority_searches )%]
</div>
[% IF !current_authority_searches && !previous_authority_searches %]
<p>Your authority search history is empty.</p>
[% END %]
</div> <!-- / #authority_tab -->
</div> <!-- /.tab-content -->
[% END # / IF Koha.Preference( 'OpacAuthorities' ) %]
</div> <!-- / #tabs -->
</div> <!-- / #searchhistory -->
@ -278,8 +288,6 @@
}
}));
[% IF Koha.Preference( 'OpacAuthorities' ) == 1 %]$('#tabs').tabs();[% END %]
$(".CheckNone").click(function(e){
e.preventDefault();
var form = $(this).parents("form").get(0);

1266
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
View file

File diff suppressed because it is too large Load diff