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

136 lines
6.8 KiB
Text

[% USE Koha %]
[% INCLUDE 'doc-head-open.inc' %]
<title>[% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog &rsaquo; Share a list</title>
[% INCLUDE 'doc-head-close.inc' %]
[% BLOCK cssinclude %][% END %]
</head>
[% INCLUDE 'bodytag.inc' bodyid='opac-shareshelf' 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>
[% IF ( loggedinusername ) %]
<li class="breadcrumb-item">
<a href="/cgi-bin/koha/opac-user.pl">[% INCLUDE 'patron-title.inc' patron = logged_in_user %]</a>
</li>
[% END %]
<li class="breadcrumb-item">
<a href="/cgi-bin/koha/opac-shelves.pl">Lists</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
Share a list
</li>
</ul> <!-- / .breadcrumb -->
</nav>
<div class="container-fluid">
<div class="row">
[% IF ( OpacNav ) %]
<div class="col-lg-2">
<div id="navigation">
[% INCLUDE 'navigation.inc' IsPatronPage=1 %]
</div>
</div>
[% END %]
<div class="col-10 order-first order-md-first order-lg-2">
<div id="shareshelf" class="maincontent">
[%# This section contains the essential code for error messages and three operations: invite, confirm_invite and accept. %]
<h2>Share a list with another patron</h2>
[% IF errcode %]
[% IF errcode==1 && op %]
<div class="alert alert-warning">The operation [% op | html %] is not supported.</div>
[% END %]
[% IF errcode==1 && !op %]
<div class="alert alert-warning">No operation parameter has been passed.</div>
[% END %]
[% IF errcode==2 %]
<div class="alert alert-warning">Invalid shelf number.</div>
[% END %]
[% IF errcode==3 %]
<div class="alert alert-warning">The feature of sharing lists is not in use in this library.</div>
[% END %]
[% IF errcode==4 %]
<div class="alert alert-warning">You can only share a list if you are the owner.</div>
[% END %]
[% IF errcode==5 %]
<div class="alert alert-warning">You cannot share a public list.</div>
[% END %]
[% IF errcode==6 %]
<div class="alert alert-warning">Sorry, but you did not enter a valid email address.</div>
[% END %]
[% IF errcode==7 %]
<div class="alert alert-warning">Sorry, but we could not accept this key. The invitation may have expired. Contact the patron who sent you the invitation.</div>
[% END %]
[% IF errcode==8 %]
<div class="alert alert-warning">As owner of a list you cannot accept an invitation for sharing it.</div>
[% END %]
<p><a href="/cgi-bin/koha/opac-shelves.pl?op=list&amp;category=1">Return to your lists</a></p>
[% ELSIF op=='invite' %]
<div id="invite">
<form id="share_list">
<fieldset class="rows">
<input type="hidden" name="op" value="conf_invite"/>
<input type="hidden" name="shelfnumber" value="[% shelfnumber | html %]"/>
<ol>
<li>
<label for="name">List name:</label> [% shelfname | html %]
</li>
<li>
<label for="invite_address">Email address:</label>
<input type="text" id="invite_address" name="invite_address" size="40" />
</li>
</ol>
</fieldset>
<fieldset class="action">
<input type="submit" value="Send" class="btn btn-primary" />
<a href="/cgi-bin/koha/opac-shelves.pl?op=list&amp;category=1" class="cancel">Cancel</a>
</fieldset>
</form> <!-- /#share_list -->
</div> <!-- /#invite -->
[% ELSIF op=='conf_invite' %]
<div id="conf_invite">
[% IF approvedaddress %]
<p>An invitation to share list <em>[% shelfname | html %]</em> will be sent shortly to [% approvedaddress | html %].</p>
[% END %]
[% IF failaddress %]
<p>Something went wrong while processing the following addresses. Please check them. These are: [% failaddress | html %]</p>
[% END %]
[% IF approvedaddress %]
<p>You will receive an email notification if someone accepts your share within two weeks.</p>
[% END %]
<p><a href="/cgi-bin/koha/opac-shelves.pl?op=list&amp;category=1">Return to your lists</a></p>
</div>
[% ELSIF op=='accept' %]
[%# Nothing to do: we already display an error or we redirect. %]
[% END %]
[%# End of essential part %]
</div> <!-- / #shareshelf.maincontent -->
</div> <!-- / .span10 -->
</div> <!-- / .row -->
</div> <!-- / .container-fluid -->
</div> <!-- / .main -->
[% INCLUDE 'opac-bottom.inc' %]
[% BLOCK jsinclude %]
<script>
$(document).ready(function(){
$("#share_list").on('submit', function(e) {
var address = $("#invite_address").val();
if ( address.length == 0) {
e.preventDefault();
}
});
});
</script>
[% END %]