Koha/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-readingrecord.tt
Owen Leonard 9cb89b4639 Bug 20168: Update of the OPAC bootstrap template to bootstrap v4
This patch updates the version of Bootstrap in the OPAC from 2.3.1 to
4.5.0. The Bootstrap JavaScript files have been replaced with custom
builds of the 4.5.0 JavaScript source files. The Bootstrap CSS is now
built into the OPAC CSS by loading the required Bootstrap 4.5.0 SCSS
files in node_modules.

OPAC SCSS now starts with Bootstrap customizations:

/* Bootstrap variable customizations */
$headings-color: #727272;
...

Followed by loading the necessary Bootstrap SCSS files:

/* Bootstrap imports */
@import "../../../../../node_modules/bootstrap/scss/functions";
@import "../../../../../node_modules/bootstrap/scss/variables";
...

Followed by our CSS. The build process for generating compiled CSS now
creates a file which bundles Bootstrap CSS and ours. Removed from the
Koha source: Bootstrap CSS files, Bootstrap "glyphicons" images.

The upgrade to Bootstrap 4 involved a lot of markup changes to conform
with new Bootstrap classes, especially in classes related to the grid.
Besides duplicating the grid we used before, this upgrade adds some new
features made possible by Bootstrap 4.5's use of flexbox as a layout
tool. This includes custom ordering of columns based on class names:
https://getbootstrap.com/docs/4.5/layout/grid/#order-classes.

Other areas where the most changes have been made: Navigation menus,
breadcrumb menus, buttons, dropdowns.

Bootstrap's JavaScript file is now "bootstrap.bundle.min.js" to reflect
the fact that a required JavaScript asset is now distributed separately
in Bootstrap 4. The "bundle" version includes Popper.js.

Unrelated changes: Indentation corrections, removal of invalid
"//<![CDATA[" markers, removal of invalid script type attributes.

To test, apply the patch and run 'yarn install' to install Bootstrap as
an npm module. Run 'yarn build --view opac' to regenerate the OPAC CSS.

Test as many aspect of the OPAC as possible, viewing pages at various
browser widths to confirm that everything adjusts well. Test with
various OPAC interface system preferences enabled and disabled.

Test self checkout and self checkin.

Known issues: RTL support has not been updated.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
2020-09-09 14:13:03 +02:00

240 lines
15 KiB
Text

[% USE raw %]
[% USE Koha %]
[% USE KohaDates %]
[% INCLUDE 'doc-head-open.inc' %]
<title>[% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog &rsaquo; Your checkout history</title>
[% INCLUDE 'doc-head-close.inc' %]
[% BLOCK cssinclude %]
<style>ul.ui-tabs-nav li a, ul.ui-tabs-nav li span.a { padding:0.6em 1em; }</style>
[% END %]
</head>
[% INCLUDE 'bodytag.inc' bodyid='opac-readingrecord' %]
[% INCLUDE 'masthead.inc' %]
[% SET AdlibrisEnabled = Koha.Preference('AdlibrisCoversEnabled') %]
[% SET AdlibrisURL = Koha.Preference('AdlibrisCoversURL') %]
[% IF Koha.Preference('AmazonAssocTag') %]
[% AmazonAssocTag = '?tag=' _ Koha.Preference('AmazonAssocTag') %]
[% ELSE %]
[% AmazonAssocTag = '' %]
[% END %]
<div class="main">
<nav aria-label="breadcrumb">
<ul 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" aria-current="page">
<a href="#">Your checkout history</a>
</li>
</ul>
</nav>
<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">
<h3>Checkout history</h3>
[% IF READING_RECORD.size == 0 %]
You have never borrowed anything from this library.
[% ELSE %]
<div id="opac-user-readingrec">
<div class="resultscontrol resort">
<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 ) %]&amp;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 ) %]&amp;order=title[% END %]">Show last 50 items</a>
</p>
[% END %]
[% IF Koha.Preference( 'OnSiteCheckouts' ) == 1 %]
<div id="tabs" class="toptabs">
<ul>
<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>
[% END %]
<div id="tabs-container" style="overflow:hidden">
<table id="readingrec" class="table table-bordered table-striped">
<thead>
<tr>
<th style="display:none;">Type</th>
<th class="nosort"></th>
<th class="anti-the">Title</th>
<th>Item type</th>
<th>Call no.</th>
<th class="title-string">Date</th>
[% IF ( OPACMySummaryHTML ) %]
<th>Links</th>
[% END %]
</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 ( AdlibrisEnabled && issue.normalized_isbn ) %]
[% IF issue.BiblioDefaultViewmarc %]
<a href="/cgi-bin/koha/opac-MARCdetail.pl?biblionumber=[% issue.biblionumber |url %]">
[% ELSIF issue.BiblioDefaultViewisbd %]
<a href="/cgi-bin/koha/opac-ISBDdetail.pl?biblionumber=[% issue.biblionumber |url %]">
[% ELSE %]
<a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% issue.biblionumber |url %]">
[% END %]
<img src="[% AdlibrisURL | html %]?isbn=[% issue.normalized_isbn | html %]" class="adlibris-cover" alt="Adlibris cover image" /></a>
[% END %]
[% 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 &amp; 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 %]/SC.GIF&amp;client=[% SyndeticsClientCode | html %]&amp;type=xw10&amp;upc=[% issue.normalized_upc | html %]&amp;oclc=[% issue.normalized_oclc | html %]" alt="" class="item-thumbnail" />
[% END %]
</td>
<td>
[% IF issue.BiblioDefaultViewmarc %]
<a class="title" href="/cgi-bin/koha/opac-MARCdetail.pl?biblionumber=[% issue.biblionumber |url %]">[% INCLUDE 'biblio-title.inc' biblio=issue %]</a>
[% ELSIF issue.BiblioDefaultViewisbd %]
<a class="title" href="/cgi-bin/koha/opac-ISBDdetail.pl?biblionumber=[% issue.biblionumber |url %]">[% INCLUDE 'biblio-title.inc' biblio=issue %]</a>
[% ELSE %]
<a class="title" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% issue.biblionumber |url %]">[% INCLUDE 'biblio-title.inc' biblio=issue %]</a>
[% END %]
<p class="results-summary item-details">[% issue.author | html %]</p>
[% IF ( Koha.Preference( 'OpacStarRatings' ) == 'all' ) %]
[% INCLUDE 'user-star-ratings.inc' item=issue %]
[% END %]
</td>
<td>
[% UNLESS ( Koha.Preference('OpacNoItemTypeImages') ) %]
[% IF ( issue.imageurl ) %]
<img src="[% issue.imageurl | html %]" alt="" />
[% END %]
[% END %]
<span class="tdlabel">Item type:</span>
[% issue.translated_description | html %]</td>
<td>
<span class="tdlabel">Call number:</span>
[% issue.itemcallnumber | html %]
</td>
<td>
[% IF issue.returndate %]
<span class="tdlabel">Check-in date:</span>
<span title="[% issue.returndate | html %]">[% issue.returndate | $KohaDates %]</span>
[% ELSE %]
<span title="Checked out"><em>(Checked out)</em></span>
[% END %]
</td>
[% IF OPACMySummaryHTML %]
<td>[% issue.MySummaryHTML | $raw %]</td>
[% END %]
</tr>
[% END # / FOREACH issue %]
</tbody>
</table>
</div> <!-- / .tabs-container -->
[% IF ( Koha.Preference( 'OnSiteCheckouts' ) == 1 ) %]
</div> <!-- /#tabs -->
[% END %]
</div> <!-- / .opac-user-readingrec -->
[% END # / IF READING_RECORD.size %]
</div> <!-- / .userreadingrecord -->
</div> <!-- / .col-lg-10 -->
</div> <!-- / .row -->
</div> <!-- / .container-fluid -->
</div> <!-- / .main -->
[% INCLUDE 'opac-bottom.inc' %]
[% BLOCK jsinclude %]
[% INCLUDE 'datatables.inc' %]
<script>
$(document).ready(function(){
[% IF ( GoogleJackets ) %]KOHA.Google.GetCoverFromIsbn();[% END %]
$('#order').change(function() {
$('#sortform').submit();
});
var table = $("#readingrec").dataTable($.extend(true, {}, dataTablesDefaults, {
"sPaginationType": "four_button",
"columnDefs": [
{ "targets": [ "nosort" ],"sortable": false,"searchable": false },
{ "type": "anti-the", "targets" : [ "anti-the" ] },
{ "type": "title-string", "targets" : [ "title-string" ] }
]
}));
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);
}
}
});
});
var borrowernumber = "[% borrowernumber | html %]";
var MSG_YOUR_RATING = _("Your rating: %s, ");
var MSG_AVERAGE_RATING = _("Average rating: %s (%s votes)");
</script>
[% IF ( Koha.Preference('OpacStarRatings') == 'all' ) %]
[% Asset.js("lib/jquery/plugins/jquery.barrating.min.js") | $raw %]
[% Asset.js("js/ratings.js") | $raw %]
[% END %]
[% END %]