Owen Leonard
ff1b7f74d6
This patch adds responsiveness to several DataTables which were not
updated in 32341. The patch removes the CSS-based responsive styling
which was previously used for these tables.
This patch also adds some additional configuration to the tables on the
user home page so that the title column is always prioritized when
DataTables collapses columns in narrow views.
To test, apply the patch and rebuild the OPAC CSS. Ideally this should
be tested with a user who has checkouts, overdues, holds, tags, and a
checkout history.
- Log in to the OPAC and test the user summary page. Check that each
table adjusts well to narrow browser widths. In each case the column
containing the title should never be hidden no matter how narrow the
window:
- Checkouts
- Relatives' checkouts (requires that the user is a guarantor for a
patron with checkouts and that the guarantee's account is set up to
show checkouts to the guarantor).
- Overdues
- Holds
- Article requests
The new places the responsive DataTables extension is being used:
- Checkout history
- Suggestions
- Tags (in the table of user-submitted tags)
- Most popular
Again, in each case the table should be responsive and the title column
should be prioritized so that it doesn't get hidden at narrow page
widths.
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
(cherry picked from commit 2661943214)
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
262 lines
13 KiB
Text
262 lines
13 KiB
Text
[% USE raw %]
|
|
[% USE Koha %]
|
|
[% USE KohaDates %]
|
|
[% USE TablesSettings %]
|
|
[% USE AdditionalContents %]
|
|
[% USE Asset %]
|
|
[% USE Price %]
|
|
[% 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' %]
|
|
<title>Your checkout history › [% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog</title>
|
|
[% INCLUDE 'doc-head-close.inc' %]
|
|
[% BLOCK cssinclude %][% END %]
|
|
</head>
|
|
[% INCLUDE 'bodytag.inc' bodyid='opac-readingrecord' %]
|
|
[% INCLUDE 'masthead.inc' %]
|
|
|
|
[% IF Koha.Preference('AmazonAssocTag') %]
|
|
[% AmazonAssocTag = '?tag=' _ Koha.Preference('AmazonAssocTag') %]
|
|
[% ELSE %]
|
|
[% AmazonAssocTag = '' %]
|
|
[% END %]
|
|
|
|
<div class="main">
|
|
<nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item">
|
|
<a href="/cgi-bin/koha/opac-main.pl">Home</a>
|
|
</li>
|
|
<li class="breadcrumb-item">
|
|
<a href="/cgi-bin/koha/opac-user.pl">[% INCLUDE 'patron-title.inc' patron = logged_in_user %]</a>
|
|
</li>
|
|
<li class="breadcrumb-item active">
|
|
<a href="#" aria-current="page">Your checkout history</a>
|
|
</li>
|
|
</ol>
|
|
</nav> <!-- /#breadcrumbs -->
|
|
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col col-lg-2 order-2 order-lg-1">
|
|
<div id="navigation">
|
|
[% INCLUDE 'navigation.inc' IsPatronPage=1 %]
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12 col-lg-10 order-1">
|
|
|
|
<div id="userreadingrecord" class="maincontent">
|
|
<h1>Checkout history</h1>
|
|
|
|
[% IF READING_RECORD.size == 0 %]
|
|
You have never borrowed anything from this library.
|
|
[% ELSE %]
|
|
<div id="opac-user-readingrec">
|
|
|
|
[% IF savings %]
|
|
<div class="alert alert-info" id="savings">
|
|
Congratulations, you have saved a total of [% savings | $Price with_symbol => 1 %] by using the library.
|
|
</div>
|
|
[% END %]
|
|
|
|
<div class="resultscontrol resort js-hide">
|
|
<form id="sortform" action="/cgi-bin/koha/opac-readingrecord.pl" method="get">
|
|
[% UNLESS ( limit ) %]<input type="hidden" name="limit" value="full" />[% END %]
|
|
<select name="order" id="order">
|
|
[% IF ( orderbydate ) %]<option value="" selected="selected">Order by date</option>[% ELSE %]<option value="">Order by date</option>[% END %]
|
|
[% IF ( orderbytitle ) %]<option value="title" selected="selected">Order by title</option>[% ELSE %]<option value="title">Order by title</option>[% END %]
|
|
[% IF ( orderbyauthor ) %]<option value="author" selected="selected">Order by author</option>[% ELSE %]<option value="author">Order by author</option>[% END %]
|
|
</select>
|
|
<input type="submit" value="Go" id="sortsubmit" class="submit clearfix" />
|
|
</form>
|
|
</div>
|
|
|
|
[% IF limit %]
|
|
<p>
|
|
Showing last 50 items. <a href="/cgi-bin/koha/opac-readingrecord.pl?limit=full[% IF ( orderbytitle ) %]&order=title[% END %]">Show all items</a>
|
|
</p>
|
|
[% ELSE %]
|
|
<p>
|
|
Showing all items. <a href="/cgi-bin/koha/opac-readingrecord.pl?limit=50[% IF ( orderbytitle ) %]&order=title[% END %]">Show last 50 items</a>
|
|
</p>
|
|
[% END %]
|
|
|
|
[% IF Koha.Preference( 'OnSiteCheckouts' ) == 1 %]
|
|
[% WRAPPER tabs id= "tabs" %]
|
|
[% WRAPPER tabs_nav %]
|
|
[% WRAPPER tab_item tabid= "all_checkouts" tabname="tabs-container" bt_active= 1 %]
|
|
<span>All</span>
|
|
[% END %]
|
|
[% WRAPPER tab_item tabid= "checkout" tabname="tabs-container" %]
|
|
<span>Checkouts</span>
|
|
[% END %]
|
|
[% WRAPPER tab_item tabid= "onsite_checkout" tabname="tabs-container" %]
|
|
<span>On-site checkouts</span>
|
|
[% END %]
|
|
[% END # /WRAPPER tabs_nav %]
|
|
[% WRAPPER tab_panels %]
|
|
[% WRAPPER tab_panel tabname="tabs-container" bt_active= 1 %]
|
|
[% PROCESS checkout_history_table %]
|
|
[% END # /tab_panel# %]
|
|
[% END # /WRAPPER tab_panels %]
|
|
[% END # /WRAPPER tabs %]
|
|
[% ELSE %]
|
|
[% PROCESS checkout_history_table %]
|
|
[% END %]
|
|
|
|
</div> <!-- / .opac-user-readingrec -->
|
|
[% END # / IF READING_RECORD.size %]
|
|
</div> <!-- / .userreadingrecord -->
|
|
</div> <!-- / .col-lg-10 -->
|
|
</div> <!-- / .row -->
|
|
</div> <!-- / .container-fluid -->
|
|
</div> <!-- / .main -->
|
|
|
|
[% BLOCK checkout_history_table %]
|
|
<table id="readingrec" class="table table-bordered table-striped">
|
|
<caption class="sr-only">Checkout history</caption>
|
|
<thead>
|
|
<tr>
|
|
<th style="display:none;" class="noExport">Type</th>
|
|
<th class="NoSort noExport"></th>
|
|
<th class="all anti-the">Title</th>
|
|
<th>Author</th>
|
|
<th>Item type</th>
|
|
<th>Call number</th>
|
|
<th>Vol info</th>
|
|
<th>Date</th>
|
|
[% IF ( OPACMySummaryHTML ) %]
|
|
<th class="NoSort noExport">Links</th>
|
|
[% END %]
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
[% FOREACH issue IN READING_RECORD %]
|
|
<tr>
|
|
<td style="display:none;">
|
|
[% IF issue.onsite_checkout %][% issuetype = 'onsite_checkout' %]
|
|
[% ELSE %][% issuetype = 'standard_checkout' %]
|
|
[% END %]
|
|
[% issuetype | html %]
|
|
</td>
|
|
<td>
|
|
[% IF OPACAmazonCoverImages %]
|
|
[% IF issue.normalized_isbn %]
|
|
<a href="http://www.amazon.com/gp/reader/[% issue.normalized_isbn | uri %][% AmazonAssocTag | uri %]#reader-link"><img src="https://images-na.ssl-images-amazon.com/images/P/[% issue.normalized_isbn | html %].01.THUMBZZZ.jpg" alt="" class="item-thumbnail" /></a>
|
|
[% ELSE %]
|
|
<span class="no-image">No cover image available</span>
|
|
[% END %]
|
|
[% END %]
|
|
|
|
[% IF GoogleJackets %]
|
|
[% IF issue.normalized_isbn %]
|
|
<div title="[% issue.biblionumber |url %]" class="[% issue.normalized_isbn | html %]" id="gbs-thumbnail[% loop.count | html %]"></div>
|
|
[% ELSE %]
|
|
<span class="no-image">No cover image available</span>
|
|
[% END %]
|
|
[% END %]
|
|
|
|
[% IF BakerTaylorEnabled %]
|
|
[% bt_id = ( issue.normalized_upc || issue.normalized_isbn ) %]
|
|
[% IF ( bt_id ) %]
|
|
<a href="https://[% BakerTaylorBookstoreURL | uri %][% bt_id | uri %]"><img alt="See Baker & Taylor" src="[% BakerTaylorImageURL | html %][% bt_id | html %]" /></a>
|
|
[% ELSE %]
|
|
<span class="no-image">No cover image available</span>
|
|
[% END %]
|
|
[% END %]
|
|
|
|
[% IF SyndeticsEnabled && SyndeticsCoverImages %]
|
|
<img src="https://secure.syndetics.com/index.aspx?isbn=[% issue.normalized_isbn | html %]/[% SyndeticsCoverImageSize | uri %].GIF&client=[% SyndeticsClientCode | html %]&type=xw10&upc=[% issue.normalized_upc | html %]&oclc=[% issue.normalized_oclc | html %]" alt="" class="item-thumbnail" />
|
|
[% END %]
|
|
</td>
|
|
<td>
|
|
[% INCLUDE 'biblio-title.inc' biblio=issue, link => 1 %]
|
|
[% IF ( Koha.Preference( 'OpacStarRatings' ) == 'all' ) %]
|
|
[% INCLUDE 'user-star-ratings.inc' item=issue %]
|
|
[% END %]
|
|
</td>
|
|
<td>[% issue.author | html %]</td>
|
|
<td>
|
|
[% UNLESS ( Koha.Preference('OpacNoItemTypeImages') ) %]
|
|
[% IF ( issue.imageurl ) %]
|
|
<img src="[% issue.imageurl | html %]" alt="" />
|
|
[% END %]
|
|
[% END %]
|
|
<span class="itypetext"><span class="tdlabel">Item type:</span>
|
|
[% issue.translated_description | html %]</span>
|
|
</td>
|
|
<td>
|
|
<span class="tdlabel">Call number:</span>
|
|
[% issue.itemcallnumber | html %]
|
|
</td>
|
|
<td>
|
|
[% IF issue.enumchron %]
|
|
[% issue.enumchron | html %]
|
|
[% END %]
|
|
</td>
|
|
[% IF issue.returndate %]
|
|
<td data-order="[% issue.returndate | html %]">
|
|
<span class="tdlabel">Check-in date:</span>
|
|
[% issue.returndate | $KohaDates %]
|
|
[% ELSE %]
|
|
<td data-order="Checked out">
|
|
<em>(Checked out)</em>
|
|
[% END %]
|
|
</td>
|
|
[% IF OPACMySummaryHTML %]
|
|
<td>[% issue.MySummaryHTML | $raw %]</td>
|
|
[% END %]
|
|
<td></td>
|
|
</tr>
|
|
[% END # / FOREACH issue %]
|
|
</tbody>
|
|
</table>
|
|
[% END %]
|
|
|
|
[% INCLUDE 'opac-bottom.inc' %]
|
|
[% BLOCK jsinclude %]
|
|
[% INCLUDE 'datatables.inc' %]
|
|
[% INCLUDE 'columns_settings.inc' %]
|
|
<script>
|
|
$(document).ready(function(){
|
|
[% IF ( GoogleJackets ) %]KOHA.Google.GetCoverFromIsbn();[% END %]
|
|
$('#order').change(function() {
|
|
$('#sortform').submit();
|
|
});
|
|
|
|
var columns_settings = []; // Empty because there are no columns we want to be configurable
|
|
var table = KohaTable("#readingrec", {
|
|
"dom": '<"top"<"table_entries"i><"table_controls"fB>>t',
|
|
"autoWidth": false,
|
|
"language": {
|
|
"search": "_INPUT_",
|
|
"searchPlaceholder": _("Search")
|
|
},
|
|
"responsive": {
|
|
"details": {"type": 'column',"target": -1}
|
|
},
|
|
"aoColumnDefs": [
|
|
{ "className": "dtr-control","orderable": false,"targets": [-1] },
|
|
{ "visible": false, "targets": [0]},
|
|
{ "orderable": false, "targets": [1]}
|
|
],
|
|
}, columns_settings);
|
|
|
|
$("#tabs a[data-toggle='tab']").on("shown.bs.tab", function (e) {
|
|
var id = e.target.id;
|
|
if ( id == "checkout-tab" ) {
|
|
table.fnFilter("standard_checkout", 0);
|
|
} else if ( id == "onsite_checkout-tab" ) {
|
|
table.fnFilter("onsite_checkout", 0);
|
|
} else { // all
|
|
table.fnFilter('', 0);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
[% IF ( Koha.Preference('OpacStarRatings') == 'all' ) %]
|
|
[% Asset.js("lib/jquery/plugins/jquery.barrating.min.js") | $raw %]
|
|
[% Asset.js("js/ratings.js") | $raw %]
|
|
[% END %]
|
|
[% END %]
|