Owen Leonard
9cb89b4639
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>
334 lines
15 KiB
Text
334 lines
15 KiB
Text
[% USE Koha %]
|
|
[% USE KohaDates %]
|
|
[% USE Branches %]
|
|
[% INCLUDE 'doc-head-open.inc' %]
|
|
<title>[% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog › Full subscription history for [% bibliotitle | html %]</title>
|
|
[% INCLUDE 'doc-head-close.inc' %]
|
|
[% BLOCK cssinclude %]
|
|
[% FILTER collapse %]
|
|
<style>
|
|
div.tabsub {
|
|
clear: both;
|
|
}
|
|
#filterform label {
|
|
font-weight: bold;
|
|
}
|
|
#filterform select {
|
|
width: 100%;
|
|
}
|
|
#subtabs a {
|
|
display: block;
|
|
float: left;
|
|
border: 1px solid #CCC;
|
|
padding: .2em .4em;
|
|
margin: .3em;
|
|
text-decoration: none;
|
|
font-size: 115%;
|
|
}
|
|
|
|
#subtabs strong {
|
|
display: block;
|
|
float: left;
|
|
font-size: 115%;
|
|
padding: .2em .4em;
|
|
margin: 0.3em 0;
|
|
}
|
|
|
|
#subtabs {
|
|
margin-top: 1em;
|
|
}
|
|
.action .btn {
|
|
font-size: 90%;
|
|
width: 100%;
|
|
}
|
|
.menu-collapse {
|
|
padding: .5em;
|
|
}
|
|
a.currentsubtab {
|
|
background-color: #FFC;
|
|
}
|
|
</style>
|
|
[% END %]
|
|
[% END %]
|
|
</head>
|
|
[% INCLUDE 'bodytag.inc' bodyid='opac-full-serial-issues' bodyclass='scrollto' %]
|
|
[% INCLUDE 'masthead.inc' %]
|
|
|
|
<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-detail.pl?biblionumber=[% biblionumber | uri %]">Details for [% bibliotitle | html %]</a>
|
|
</li>
|
|
<li class="breadcrumb-item active" aria-current="page">
|
|
<a href="#">Full subscription history</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-lg-2">
|
|
<div id="searchfacetscontainer">
|
|
<div id="search-facets">
|
|
<form action="/cgi-bin/koha/opac-serial-issues.pl" id="filterform">
|
|
<h2><a href="#" class="menu-collapse-toggle">Refine your search</a></h2>
|
|
<ul class="menu-collapse">
|
|
<li>
|
|
<label for="libraryfilter">Library: </label>
|
|
<select id="libraryfilter" name="libraryfilter"></select>
|
|
<label for="subscriptionidfilter">Subscription: </label>
|
|
<select id="subscriptionidfilter" name="subscriptionfilter" disabled="disabled"></select>
|
|
</li>
|
|
<li class="action">
|
|
<input type="reset" id="reset" class="btn btn-primary" value="Clear" />
|
|
</li>
|
|
</ul>
|
|
</form>
|
|
</div> <!-- / #search-facets -->
|
|
</div> <!-- / #searchfacetscontainer -->
|
|
<div id="navigation">
|
|
[% INCLUDE 'navigation.inc' %]
|
|
</div>
|
|
</div> <!-- / .col-lg-2 -->
|
|
<div class="col-10 order-first order-md-first order-lg-2">
|
|
<div id="fullserialissues" class="maincontent">
|
|
[% UNLESS ( popup ) %]
|
|
<h2>Full subscription history for [% bibliotitle | html %]</h2>
|
|
<div id="views">
|
|
<span class="view"><a id="Normalview" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblionumber | html %]">Normal view</a></span>
|
|
<span class="view"><a id="Briefhistory" href="/cgi-bin/koha/opac-serial-issues.pl?biblionumber=[% biblionumber | html %]&selectview=small">Brief history</a></span>
|
|
<span class="view"><span id="Fullhistory">Full history</span></span>
|
|
</div>
|
|
[% END %]
|
|
|
|
<div id="subtabs">
|
|
<strong>Show year: </strong>
|
|
[% FOREACH year IN years %]
|
|
[% IF ( year.year ) %]
|
|
<a class="tabsubs" href="#" onclick="showlayer([% year.year | html %]); return false;">[% year.year | html %]</a>
|
|
[% END %]
|
|
[% END %]
|
|
</div>
|
|
|
|
[% FOREACH year IN years %]
|
|
[% IF loop.first %]
|
|
<div class="yeardata tabsub" id="show[% year.year | html %]" style="display:block">
|
|
[% ELSE %]
|
|
<div class="yeardata tabsub" id="show[% year.year | html %]" style="display:none">
|
|
[% END %]
|
|
<table class="subscriptionstclass table table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Library</th>
|
|
<th>Notes</th>
|
|
<th>Date received</th>
|
|
<th>Number</th>
|
|
<th>Status</th>
|
|
<th>Subscription</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
[% FOREACH serial IN year.serials %]
|
|
<tr>
|
|
<td>
|
|
[% IF ( serial.publisheddate ) %]
|
|
<span title="[% serial.publisheddate | html %]">
|
|
[% IF serial.publisheddatetext %]
|
|
[% serial.publisheddatetext | html %]
|
|
[% ELSE %]
|
|
[% serial.publisheddate | $KohaDates %]
|
|
[% END %]
|
|
</span>
|
|
[% ELSE %]
|
|
|
|
[% END %]
|
|
</td>
|
|
<td class="libraryfilterclass">[% Branches.GetName( serial.branchcode ) | html %]</td>
|
|
<td>[% serial.notes | html %]</td>
|
|
<td>
|
|
[% IF ( serial.status2 && serial.planneddate ) %]
|
|
<span title="[% serial.planneddate | html %]">[% serial.planneddate | $KohaDates %]</span>
|
|
[% ELSE %]
|
|
<span title="9999-12-31"> </span>
|
|
[% END %]
|
|
</td>
|
|
<td>[% serial.serialseq | html %]</td>
|
|
<td>
|
|
[% IF ( serial.status1 ) %]Expected[% END %]
|
|
[% IF ( serial.status2 ) %]Arrived[% END %]
|
|
[% IF ( serial.status3 ) %]Late[% END %]
|
|
[% IF ( serial.status4 ) %]Missing[% END %]
|
|
[% IF ( serial.status41 ) %]Missing (never received)[% END %]
|
|
[% IF ( serial.status42 ) %]Missing (sold out)[% END %]
|
|
[% IF ( serial.status43 ) %]Missing (damaged)[% END %]
|
|
[% IF ( serial.status44 ) %]Missing (lost)[% END %]
|
|
[% IF ( serial.status5 ) %]Not available[% END %]
|
|
[% IF ( serial.status6 ) %]Delete[% END %]
|
|
[% IF ( serial.status7 ) %]Claimed[% END %]
|
|
[% IF ( serial.status8 ) %]Stopped[% END %]
|
|
</td>
|
|
<td class="subscriptionidfilterclass">[% serial.subscriptionid | html %]</td>
|
|
</tr>
|
|
[% END %]
|
|
</tbody>
|
|
</table>
|
|
</div> <!-- / .yeardata tabsub -->
|
|
[% END # / FOREACH year %]
|
|
</div> <!-- / #fullserialissues -->
|
|
</div> <!-- / .col-10 -->
|
|
</div> <!-- / .row -->
|
|
</div> <!-- / .container-fluid -->
|
|
</div> <!-- / .main -->
|
|
|
|
[% INCLUDE 'opac-bottom.inc' %]
|
|
[% BLOCK jsinclude %]
|
|
[% INCLUDE 'datatables.inc' %]
|
|
<script>
|
|
$(document).ready(function(){
|
|
showlayer([% yearmin | html %]);
|
|
$("a.tabsubs:first").addClass("currentsubtab");
|
|
$("#filterform").submit(function(){
|
|
filterByLibrary();
|
|
return false;
|
|
});
|
|
$("#libraryfilter").change(function(){
|
|
filterByLibrary();
|
|
});
|
|
$("#subscriptionidfilter").change(function(){
|
|
filterBySubscriptionId();
|
|
});
|
|
$("#reset").click(function(){
|
|
clearFilters();
|
|
});
|
|
$("a.tabsubs").click(function(){
|
|
$("a.tabsubs").removeClass("currentsubtab");
|
|
$(this).addClass("currentsubtab");
|
|
});
|
|
$(".subscriptionstclass").dataTable($.extend(true, {}, dataTablesDefaults, {
|
|
"order": [[ 0, "desc" ]],
|
|
"columns": [
|
|
{ "type": "title-string" },
|
|
null,
|
|
null,
|
|
{ "type": "title-string" },
|
|
null,
|
|
null,
|
|
null
|
|
]
|
|
}));
|
|
});
|
|
|
|
// Filters initialization
|
|
function initFilters() {
|
|
// Deleting everything from the library filter
|
|
$("#libraryfilter option").remove();
|
|
|
|
// Getting each branchcode from the currently displayed tab
|
|
var subarray = [];
|
|
$("div#" + currentYear + " table.subscriptionstclass tbody tr:visible td.libraryfilterclass").each(function() {
|
|
if (subarray.indexOf($(this).text()) == -1) { subarray.push($(this).text()); }
|
|
});
|
|
|
|
// Setting the option values with branchcodes
|
|
$("#libraryfilter").append('<option value="all">'+_("(All)")+'</option>');
|
|
for (var i = 0; i < subarray.length; i++) {
|
|
$("#libraryfilter").append('<option value="' + subarray[i] + '">' + subarray[i] + '</option>');
|
|
}
|
|
}
|
|
|
|
// Filter by Library
|
|
function filterByLibrary() {
|
|
|
|
selectedStatus = $("#libraryfilter").val();
|
|
|
|
// Reset the filters but keeps the selected library
|
|
clearFilters(true);
|
|
|
|
if (selectedStatus != 'all') {
|
|
|
|
// We hide everything
|
|
$("table.subscriptionstclass tbody tr").hide();
|
|
|
|
// Then show the lines that match the currently selected library
|
|
$("table.subscriptionstclass tbody tr td.libraryfilterclass:contains(" + selectedStatus + ")").parent().show();
|
|
|
|
|
|
// We then prepare the subscription filter :
|
|
|
|
// Getting subscription id's for the selected library
|
|
var subarray = [];
|
|
$("div#" + currentYear + " table.subscriptionstclass tbody tr:visible td.subscriptionidfilterclass").each(function() {
|
|
if (subarray.indexOf($(this).text()) == -1) { subarray.push($(this).text()); }
|
|
});
|
|
// Setting the option values with subscription id's
|
|
$("#subscriptionidfilter").append('<option value="all">'+_("(All)")+'</option>');
|
|
for (var i = 0; i < subarray.length; i++) {
|
|
$("#subscriptionidfilter").append('<option value="' + subarray[i] + '">' + subarray[i] + '</option>');
|
|
}
|
|
|
|
// Subscription filtering is now ready
|
|
$("#subscriptionidfilter").removeAttr("disabled");
|
|
}
|
|
}
|
|
|
|
// Filter by subscription id
|
|
function filterBySubscriptionId() {
|
|
|
|
selectedSubscription = $("#subscriptionidfilter").val();
|
|
selectedLibrary = $("#libraryfilter").val();
|
|
|
|
if (selectedSubscription == "all") {
|
|
clearFilters(true);
|
|
filterByLibrary();
|
|
} else {
|
|
|
|
// We hide everything
|
|
$("table.subscriptionstclass tbody tr").hide();
|
|
|
|
// Then show the lines that match the currently selected library
|
|
$("table.subscriptionstclass tbody tr td.libraryfilterclass:contains(" + selectedLibrary + ")").parent().show();
|
|
|
|
// Then hide the lines where the subscription id does not match the selected one
|
|
$("table.subscriptionstclass tbody tr td.subscriptionidfilterclass").not(
|
|
$("table.subscriptionstclass tbody tr td.subscriptionidfilterclass:contains(" + selectedSubscription + ")")
|
|
).parent().hide();
|
|
}
|
|
}
|
|
|
|
// Clears filters : reset everything
|
|
// (Though preserves the selected library if the keeplibrary parameter is set to true)
|
|
function clearFilters(keeplibrary) {
|
|
// Show all content
|
|
$("table.subscriptionstclass tbody tr").show();
|
|
|
|
// Remove old subscription options
|
|
$("#subscriptionidfilter option").remove();
|
|
$("#subscriptionidfilter option").append('<option value="all">'+_("(All)")+'</option>');
|
|
$("#subscriptionidfilter").attr("disabled", "disabled");
|
|
|
|
if (keeplibrary != true) {
|
|
// Reinit library options
|
|
initFilters();
|
|
$("#libraryfilter option[value=all]").attr("selected", "selected");
|
|
}
|
|
}
|
|
|
|
function showlayer(numlayer){
|
|
$(".yeardata").each(function(){
|
|
ong = $(this).attr("id");
|
|
if(ong == "show"+numlayer){
|
|
$(this).show();
|
|
currentYear = ong;
|
|
} else {
|
|
$(this).hide();
|
|
}
|
|
});
|
|
clearFilters();
|
|
}
|
|
</script>
|
|
[% END %]
|