Koha/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-MARCdetail.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

215 lines
12 KiB
Text

[% USE raw %]
[% USE Koha %]
[% INCLUDE 'doc-head-open.inc' %]
<title>[% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog &rsaquo; MARC details for record no. [% biblio.biblionumber | html %]</title>
[% INCLUDE 'doc-head-close.inc' %]
[% BLOCK cssinclude %][% END %]
</head>
[% INCLUDE 'bodytag.inc' bodyid='opac-marcdetail' 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" aria-current="page">
<a href="#">MARC view: [% bibliotitle | html %]</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-lg-9">
<div id="opac-detail" class="maincontent">
<div id="usermarcdetail">
<div id="catalogue_detail_biblio">
<div id="views">
<span class="view"><a id="Normalview" class="btn btn-link" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblio.biblionumber | html %]"><i class="fa fa-file-text-o" aria-hidden="true"></i> Normal view</a></span>
<span class="view current-view"><span id="MARCview"><i class="fa fa-list-alt" aria-hidden="true"></i> MARC view</span></span>
[% IF ( ISBD ) %]<span class="view"><a id="ISBDview" class="btn btn-link" href="/cgi-bin/koha/opac-ISBDdetail.pl?biblionumber=[% biblio.biblionumber | html %]"><i class="fa fa-list-ul" aria-hidden="true"></i> ISBD view</a></span>[% END %]
</div>
<h1 class="title">[% bibliotitle | html %] (Record no. [% biblio.biblionumber | html %])</h1>
[% IF ( OPACXSLTDetailsDisplay ) %]
<div id="switchview_div">[ <a id="switchview" href="/cgi-bin/koha/opac-showmarc.pl?id=[% biblio.biblionumber | html %]&amp;viewas=html">view plain</a> ]</div>
<div id="plainmarc"></div>
[% END %]
<div id="labeledmarc">
<table id="marc" class="table table-bordered table-striped">
[% FOREACH tab0X IN tab0XX %]
<tr><th colspan="2">[% tab0X.tag | html %]</th></tr>
[% FOREACH subfiel IN tab0X.subfield %]
<tr>
<td>[% subfiel.marc_lib | $raw %]</td>
<td>[% subfiel.marc_value | html %]</td>
</tr>
[% END %]
[% END %]
[% FOREACH tab1X IN tab1XX %]
<tr><th colspan="2">[% tab1X.tag | html %]</th></tr>
[% FOREACH subfiel IN tab1X.subfield %]
<tr>
<td >[% subfiel.marc_lib | $raw %]</td>
<td >[% subfiel.marc_value | html %]</td>
</tr>
[% END %]
[% END %]
[% FOREACH tab2X IN tab2XX %]
<tr><th colspan="2">[% tab2X.tag | html %]</th></tr>
[% FOREACH subfiel IN tab2X.subfield %]
<tr>
<td>[% subfiel.marc_lib | $raw %]</td>
<td>[% subfiel.marc_value | html %]</td>
</tr>
[% END %]
[% END %]
[% FOREACH tab3X IN tab3XX %]
<tr><th colspan="2">[% tab3X.tag | html %]</th></tr>
[% FOREACH subfiel IN tab3X.subfield %]
<tr>
<td>[% subfiel.marc_lib | $raw %]</td>
<td>[% subfiel.marc_value | html %]</td>
</tr>
[% END %]
[% END %]
[% FOREACH tab4X IN tab4XX %]
<tr><th colspan="2" >[% tab4X.tag | html %]</th></tr>
[% FOREACH subfiel IN tab4X.subfield %]
<tr>
<td>[% subfiel.marc_lib | $raw %]</td>
<td>[% subfiel.marc_value | html %]</td>
</tr>
[% END %]
[% END %]
[% FOREACH tab5X IN tab5XX %]
<tr><th colspan="2">[% tab5X.tag | html %]</th></tr>
[% FOREACH subfiel IN tab5X.subfield %]
<tr>
<td>[% subfiel.marc_lib | $raw %]</td>
<td>[% subfiel.marc_value | html %]</td>
</tr>
[% END %]
[% END %]
[% FOREACH tab6X IN tab6XX %]
<tr><th colspan="2">[% tab6X.tag | html %]</th></tr>
[% FOREACH subfiel IN tab6X.subfield %]
<tr>
<td>[% subfiel.marc_lib | $raw %]</td>
<td>[% subfiel.marc_value | html %]</td>
</tr>
[% END %]
[% END %]
[% FOREACH tab7X IN tab7XX %]
<tr><th colspan="2">[% tab7X.tag | html %]</th></tr>
[% FOREACH subfiel IN tab7X.subfield %]
<tr>
<td>[% subfiel.marc_lib | $raw %]</td>
<td>[% subfiel.marc_value | html %]</td>
</tr>
[% END %]
[% END %]
[% FOREACH tab8X IN tab8XX %]
<tr><th colspan="2">[% tab8X.tag | html %]</th></tr>
[% FOREACH subfiel IN tab8X.subfield %]
<tr>
<td>[% subfiel.marc_lib | $raw %]</td>
<td>[% subfiel.marc_value | html %]</td>
</tr>
[% END %]
[% END %]
[% FOREACH tab9X IN tab9XX %]
<tr><th colspan="2">[% tab9X.tag | html %]</th></tr>
[% FOREACH subfiel IN tab9X.subfield %]
<tr>
<td>[% subfiel.marc_lib | $raw %]</td>
<td>[% subfiel.marc_value | html %]</td>
</tr>
[% END %]
[% END %]
</table>
</div>
[% IF ( item_header_loop ) %]
<table id="items" class="table table-bordered table-condensed table-striped">
<caption>Holdings</caption>
<thead>
<tr>
[% FOREACH header IN item_header_loop %]
<th>[% header | html %]</th>
[% END %]
</tr>
</thead>
<tbody>
[% FOREACH item IN item_loop %]
<tr>
[% FOREACH sf_code IN item_subfield_codes %]
<td>[% item.$sf_code | $raw %]</td>
[% END %]
</tr>
[% END %]
</tbody>
</table>
[% ELSE %]
<p>No items available.</p>
[% END %]
</div> <!-- / #catalogue_detail_biblio -->
</div> <!-- / #usermarcdetail -->
</div> <!-- / #opac-detail -->
</div> <!-- / .col-lg-9 -->
<div class="col-lg-3">
[% INCLUDE 'opac-detail-sidebar.inc' %]
</div>
</div> <!-- / .row -->
</div> <!-- / .container-fluid -->
</div> <!-- / .main -->
[% INCLUDE 'opac-bottom.inc' %]
[% BLOCK jsinclude %]
<script>
[% IF ( OPACXSLTDetailsDisplay ) %]
$(document).ready(function(){
var loaded = 0;
var toggle = 0;
$("#switchview").on("click",function(e){
e.preventDefault();
if( toggle == 0){
$(this).text(_("view labeled"));
$("#labeledmarc").hide();
if(!loaded){
$("#plainmarc").show().html("<div style=\"margin:1em;padding:1em;border:1px solid #EEE;font-size:150%;\"><img src=\"[% interface | html %]/[% theme | html %]/images/loading.gif\" /> "+_("Loading")+"...</div>");
var plain_marc = $.get( "/cgi-bin/koha/opac-showmarc.pl", { id: "[% biblio.biblionumber | html %]", viewas: "html" })
.done(function( data ) {
$("#plainmarc").html( data );
loaded = 1;
})
.fail(function() {
$('#switchview').parent().html("<div class=\"dialog alert\">"+_("Sorry, plain view is temporarily unavailable")+".</div>");
$("#plainmarc").hide();
$("#labeledmarc").show();
});
} else {
$("#plainmarc").show();
}
toggle = 1;
} else {
$(this).text(_("view plain"));
$("#labeledmarc").show();
$("#plainmarc").hide();
toggle = 0;
}
});
});
[% END %]
</script>
[% END %]