From a3e722c70508021a15cc3c0adee5547850779709 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Thu, 24 Jan 2019 19:40:03 +0000
Subject: [PATCH] Bug 21449: Update two-column templates with Bootstrap grid:
 Circulation part 2

This patch modifies several circulation templates to use the
Bootstrap grid instead of YUI.

This patch also removes obsolete "text/javascript" attributes from
<script> tags and "text/css" attributes from <style> tags in the
modified templates.

To test, apply the patch and view the following pages, confirming that
they look correct at various browser widths. For each page, test with
the CircSidebar preference both on and off.

 - Catalog -> Search -> Details -> Items -> View item's checkout history
 - Circulation -> Overdues with fines
 - Circulation -> Transfer
 - Circulation -> Patron -> Batch checkout
 - Circulation -> Built-in offline circulation interface
   - Synchronize
   - Pending offline circulation actions
   - Check out
   - Check in

Signed-off-by: Maryse Simard <maryse.simard@inlibro.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
---
 .../prog/en/modules/circ/bookcount.tt         |  27 ++--
 .../prog/en/modules/circ/branchoverdues.tt    |  36 ++---
 .../prog/en/modules/circ/branchtransfers.tt   |  39 +++---
 .../circ/circulation_batch_checkouts.tt       |  38 +++---
 .../prog/en/modules/circ/offline.tt           | 126 +++++++++---------
 5 files changed, 143 insertions(+), 123 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/bookcount.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/bookcount.tt
index 57f54a89cc..ec4ea1c74c 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/bookcount.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/bookcount.tt
@@ -1,3 +1,4 @@
+[% USE Koha %]
 [% USE KohaDates %]
 [% USE Branches %]
 [% SET footerjs = 1 %]
@@ -16,11 +17,10 @@
     [% UNLESS blocking_error %]&rsaquo; Circulation statistics for [% title |html %][% END %]
 </div>
 
-<div id="doc3" class="yui-t2">
-   
-   <div id="bd">
-	<div id="yui-main">
-	<div class="yui-b">
+<div class="main container-fluid">
+    <div class="row">
+        <div class="col-sm-10 col-sm-push-2">
+            <main>
 
 [% INCLUDE 'blocking_errors.inc' %]
 <h2>[% title |html %] [% IF ( author ) %] by [% author |html %][% END %]</h2>
@@ -58,15 +58,18 @@
     [% END %]
 </table>
 
-</div>
-</div>
-<div class="yui-b">
-[% INCLUDE 'biblio-view-menu.inc' %]
-</div>
-</div>
+            </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+        <div class="col-sm-2 col-sm-pull-10">
+            <aside>
+                [% INCLUDE 'biblio-view-menu.inc' %]
+            </aside>
+        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+     </div> <!-- /.row -->
 
 [% MACRO jsinclude BLOCK %]
-    <script type="text/javascript">
+    <script>
         $(document).ready(function(){
         $("tr.mybranch td").css("background-color", "#CFE7FF");
     });
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/branchoverdues.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/branchoverdues.tt
index e8490d4a47..1531574719 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/branchoverdues.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/branchoverdues.tt
@@ -10,13 +10,14 @@
 
 <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/circ/circulation-home.pl">Circulation</a> &rsaquo; Overdues at [% LoginBranchname | html %]</div>
 
-[% IF Koha.Preference('CircSidebar') %]<div id="doc3" class="yui-t2">[% ELSE %]<div id="doc" class="yui-t7">[% END %]
-
-   <div id="bd">
-	<div id="yui-main">
-        [% IF Koha.Preference('CircSidebar') %]<div class="yui-b">[% END %]
-	<div class="yui-g">
-
+<div class="main container-fluid">
+    <div class="row">
+        [% IF Koha.Preference('CircSidebar') %]
+            <div class="col-sm-10 col-sm-push-2">
+        [% ELSE %]
+            <div class="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
+        [% END %]
+            <main>
 
 <h1>Circulation: Overdues at [% LoginBranchname | html %]</h1>
 
@@ -107,13 +108,16 @@
         </div>
     [% END %]
 
-</div>
-</div>
-[% IF Koha.Preference('CircSidebar') %]
-</div>
-<div class="yui-b noprint">
-    [% INCLUDE 'circ-nav.inc' %]
-</div>
-[% END %]
-</div>
+                </main>
+            </div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+            [% IF Koha.Preference('CircSidebar') %]
+                <div class="col-sm-2 col-sm-pull-10">
+                    <aside>
+                        [% INCLUDE 'circ-nav.inc' %]
+                    </aside>
+                </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+            [% END %]
+        </div> <!-- /.row -->
+
 [% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/branchtransfers.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/branchtransfers.tt
index fcef398891..5dcd93b114 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/branchtransfers.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/branchtransfers.tt
@@ -12,12 +12,17 @@
 
 <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/circ/circulation-home.pl">Circulation</a> &rsaquo; Transfers</div>
 
-[% IF Koha.Preference('CircSidebar') %]<div id="doc3" class="yui-t2">[% ELSE %]<div id="doc" class="yui-t7">[% END %]
-   <div id="bd">
-<div id="yui-main">
-[% IF Koha.Preference('CircSidebar') %]<div class="yui-b">[% END %]
+<div class="main container-fluid">
+    <div class="row">
+        [% IF Koha.Preference('CircSidebar') %]
+            <div class="col-sm-10 col-sm-push-2">
+        [% ELSE %]
+            <div class="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
+        [% END %]
+            <main>
+
 [% IF ( found ) %]
-   <div class="yui-g"> <h3>Reserve found</h3>
+    <h3>Reserve found</h3>
     <table>
         <caption>
             [% IF ( reserved ) %]
@@ -88,7 +93,7 @@
                             </form>
                         </td>
                 </tr>
-    </table></div>
+    </table>
 
 [% ELSE %]
                     [% IF ( reqmessage ) %]
@@ -166,7 +171,6 @@
 </div>
 
     [% IF ( trsfitemloop ) %]
-        <div class="yui-g">
 		<table>
             <caption>Transferred items</caption>
             <tr>
@@ -192,17 +196,20 @@
                 </tr>
             [% END %]
         </table>
-		</div>
     [% END %]
 	
 	
 [% END %]
-</div>
-[% IF Koha.Preference('CircSidebar') %]
-</div>
-<div class="yui-b noprint">
-[% INCLUDE 'circ-nav.inc' %]
-</div>
-[% END %]
-</div>
+
+    </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+        [% IF Koha.Preference('CircSidebar') %]
+            <div class="col-sm-2 col-sm-pull-10">
+                <aside>
+                    [% INCLUDE 'circ-nav.inc' %]
+                </aside>
+            </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+        [% END %]
+    </div> <!-- /.row -->
+
 [% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation_batch_checkouts.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation_batch_checkouts.tt
index 715c9e1a6b..16a9e3dfe6 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation_batch_checkouts.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation_batch_checkouts.tt
@@ -28,13 +28,15 @@
         Batch check out
     [% END %]
 </div>
-<div id="doc3" class="yui-t2">
 
-   <div id="bd">
-<div id="yui-main">
-<div class="yui-b">
-
-<div class="yui-g">
+<div class="main container-fluid">
+    <div class="row">
+        [% IF patron %]
+            <div class="col-sm-10 col-sm-push-2">
+        [% ELSE %]
+            <div class="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
+        [% END %]
+            <main>
 
 [% IF patron %]
 [% INCLUDE 'members-toolbar.inc' %]
@@ -166,7 +168,7 @@
                       <li><i class="fa fa-li fa-warning"></i>High demand item. Loan period shortened to [% checkout_info.HIGHHOLDS.duration | html %] days (due [% checkout_info.HIGHHOLDS.returndate | html %]).</li>
                   [% END %]
                   [% IF checkout_info.HIGHHOLDS %] <!-- FIXME -->
-                      <script type="text/javascript">
+                      <script>
                           $(document).ready(function() {
                               $("input[name=duedatespec]:hidden").val('[% checkout_info.HIGHHOLDS.returndate | html %]');
                           });
@@ -280,22 +282,22 @@
     <div class="dialog message">This patron does not exist. <a href="/cgi-bin/koha/members/members-home.pl">Find another patron?</a></div>
 [% END %]
 
-</div>
-</div>
-</div>
-[% IF patron %]
-    <div class="yui-b">
-        [% INCLUDE 'circ-menu.inc' %]
-    </div>
-[% END %]
-</div>
+                  </main>
+                      </div> <!-- /.col-sm-10.col-sm-push-2 -->
+                      [% IF patron %]
+                          <div class="col-sm-2 col-sm-pull-10">
+                              <aside>
+                                  [% INCLUDE 'circ-menu.inc' %]
+                              </aside>
+                          </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+                      [% END %]
+                  </div> <!-- /.row -->
 
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'calendar.inc' %]
     [% INCLUDE 'datatables.inc' %]
     [% Asset.js("lib/jquery/plugins/jquery-ui-timepicker-addon.min.js") | $raw %]
-    <script type="text/javascript">
-
+    <script>
         $(document).ready(function() {
             if($('#barcodelist').length) {
                 $('#barcodelist').focus();
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/offline.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/offline.tt
index 4cd0174104..2753a09988 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/offline.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/offline.tt
@@ -23,32 +23,33 @@
 
 <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a id="go-to-home" href="#offline-home">Offline circulation</a></div>
 
-<div id="doc3" class="yui-t2">
+<div class="main container-fluid">
+    <div class="row">
+        <div class="col-sm-10 col-sm-push-2">
+            <main>
 
-    <div id="bd">
-        <div id="yui-main">
             <audio id="alert_sound" src="[% interface | html %]/prog/sound/critical.ogg" preload="auto"></audio>
             <audio id="success_sound" src="[% interface | html %]/prog/sound/beep.ogg" preload="auto"></audio>
 
-            <div id="alerts" class="yui-b">
-            </div>
+            <div id="alerts"></div>
+
             [% UNLESS (AllowOfflineCirculation) %]
                 <div id="noofflinecircwarning" class="dialog alert">
                     <p><strong>Warning:</strong> Offline Circulation has been disabled. You may continue and record transactions, but patron and item information will not be available.</p>
                 </div>
             [% END %]
 
-            <div id="offline-home" class="yui-b offline-home">
-                <div class="yui-g">
-                    <h1>Offline circulation</h1>
-                    <div class="yui-u first">
+            <div id="offline-home" class="offline-home">
+                <h1>Offline circulation</h1>
+                <div class="row">
+                    <div class="col-sm-6">
                         <ul>
                             <li><a id="go-to-circ" href="#offline-circulation">Check out</a></li>
                             <li><a id="go-to-returns" href="#offline-returns">Check in</a></li>
                         </ul>
                     </div>
 
-                    <div class="yui-u">
+                    <div class="col-sm-6">
                         <p><strong>Note:</strong> You must be online to use these options.</p>
                         <ul>
                             <li><a id="go-to-sync" href="#offline-sync">Synchronize</a></li>
@@ -58,16 +59,16 @@
                 </div>
             </div>
 
-            <div id="offline-sync" style="display: none;" class="yui-b offline-sync">
+            <div id="offline-sync" style="display: none;" class="offline-sync">
                 <div id="toolbar" class="btn-toolbar">
                     [% IF (AllowOfflineCirculation) %]
-                        <a href="#" id="download-records" class="btn btn-default btn-sm"><i class="fa fa-arrow-down"></i>Download records</a>
+                        <a href="#" id="download-records" class="btn btn-default btn-sm"><i class="fa fa-arrow-down"></i> Download records</a>
                     [% END %]
-                    <a href="#" id="upload-transactions" class="btn btn-default btn-sm"><i class="fa fa-arrow-up"></i>Upload transactions</a>
+                    <a href="#" id="upload-transactions" class="btn btn-default btn-sm"><i class="fa fa-arrow-up"></i> Upload transactions</a>
                 </div>
-                <div class="yui-g">
-                    <h1>Offline circulation</h1>
-                    <div class="yui-u first">
+                <h1>Offline circulation</h1>
+                <div class="row">
+                    <div class="col-sm-6">
                         <div id="download-message">
                             In order for offline circulation to work on this computer,
                             your library's records must be up-to-date on this computer:
@@ -79,7 +80,7 @@
                         </div>
                     </div>
 
-                    <div class="yui-u">
+                    <div class="col-sm-6">
                         <div id="upload-message">
                         </div>
                         <div>View <a href="/cgi-bin/koha/offline_circ/list.pl">pending offline circulation actions</a></div>
@@ -87,12 +88,12 @@
                 </div>
             </div>
 
-            <div id="offline-returns" style="display: none;" class="yui-b offline-returns">
-                <div class="yui-g">
+            <div id="offline-returns" style="display: none;" class="offline-returns">
+                <div class="row">
                     <form id="checkin-form" method="post" action="/cgi-bin/koha/circ/returns.pl" autocomplete="off" >
-                        <div class="yui-u first">
+                        <div class="col-sm-6">
                             <fieldset>
-                                <legend>Check In</legend>
+                                <legend>Check in</legend>
                                 <label for="checkin-barcode">Enter item barcode: </label>
                                 <input name="barcode" id="checkin-barcode" size="14" class="focus" type="text" />
                                 <input type="submit" class="submit" value="Submit" />
@@ -113,34 +114,30 @@
                 </div>
             </div>
 
-            <div style="display: none;" class="yui-b offline-circulation-instructions">
-                <div class="yui-g">
-                    Scan a patron barcode to start.
-                </div>
+            <div style="display: none;" class="offline-circulation-instructions">
+                Scan a patron barcode to start.
             </div>
 
-            <div id="offline-circulation" style="display: none;" class="yui-b offline-circulation">
-                <div class="yui-g">
-                    <form method="post" action="/cgi-bin/koha/circ/offline.pl" id="mainform" name="mainform" autocomplete="off">
-                        <fieldset id="circ_circulation_issue">
-                            <span id="clearscreen"><a href="/cgi-bin/koha/circ/offline.pl" title="Clear screen">x</a></span>
-                            <label for="checkout-barcode">Checking out to <span class="patron-title"></span></label>
-                            <div class="hint">Enter item barcode:</div>
-                            <input type="text" name="barcode" id="checkout-barcode" class="barcode focus" size="14" />
-                            <input type="submit" value="Check Out" />
-
-                            <div class="date-select">
-                                <div class="hint">Specify due date [% INCLUDE 'date-format.inc' %]: </div>
+            <div id="offline-circulation" style="display: none;" class="offline-circulation">
+                <form method="post" action="/cgi-bin/koha/circ/offline.pl" id="mainform" name="mainform" autocomplete="off">
+                    <fieldset id="circ_circulation_issue">
+                        <span id="clearscreen"><a href="/cgi-bin/koha/circ/offline.pl" title="Clear screen">x</a></span>
+                        <label for="checkout-barcode">Checking out to <span class="patron-title"></span></label>
+                        <div class="hint">Enter item barcode:</div>
+                        <input type="text" name="barcode" id="checkout-barcode" class="barcode focus" size="14" />
+                        <input type="submit" value="Check Out" />
+
+                        <div class="date-select">
+                            <div class="hint">Specify due date [% INCLUDE 'date-format.inc' %]: </div>
                                 <input type="text" size="13" id="duedatespec" name="duedatespec" value="[% duedatespec | html %]" />
-                                <label for="stickyduedate"> Remember for session:</label>
-                                <input type="checkbox" id="stickyduedate" onclick="this.form.barcode.focus();" name="stickyduedate" checked="checked" />
-                                <input type="button" class="action" id="cleardate" value="Clear" name="cleardate" onclick="this.checked = false; this.form.duedatespec.value = ''; this.form.stickyduedate.checked = false; this.form.barcode.focus(); return false;" />
-                            </div>
-                        </fieldset>
-                    </form>
-                </div>
+                            <label for="stickyduedate"> Remember for session:</label>
+                            <input type="checkbox" id="stickyduedate" onclick="this.form.barcode.focus();" name="stickyduedate" checked="checked" />
+                            <input type="button" class="action" id="cleardate" value="Clear" name="cleardate" onclick="this.checked = false; this.form.duedatespec.value = ''; this.form.stickyduedate.checked = false; this.form.barcode.focus(); return false;" />
+                        </div>
+                    </fieldset>
+                </form>
 
-                <div class="yui-g"><div id="patronlists" class="toptabs">
+                <div id="patronlists" class="toptabs">
                     <ul>
                         <li><a href="#checkouts"><span class="checkout-count">0</span> Checkouts</a></li>
                         <li><a href="#fines"><span class="fine-amount">0</span> in fines</a></li>
@@ -199,22 +196,29 @@
                 </div>
             </div>
         </div>
-    </div>
+    </main>
 
-    <div class="yui-b offline-circulation" style="display: none;">
-        <div class="patroninfo"><h5 class="patron-title">&nbsp;</h5>
-            <ul>
-                <li id="patron-address-1"></li>
-                <li id="patron-address-2"></li>
-                <li id="patron-address-parts"><!-- city, state, zipcode, country --></li>
-                <li id="patron-phone"></li>
-                <li id="patron-email"></li>
-                <li id="patron-category"></li>
-                <li id="patron-library"></li>
-            </ul>
-        </div>
+            </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+        <div class="offline-circulation" style="display: none;">
+            <div class="col-sm-2 col-sm-pull-10">
+                <aside>
+                    <div class="patroninfo"><h5 class="patron-title">&nbsp;</h5>
+                        <ul>
+                            <li id="patron-address-1"></li>
+                            <li id="patron-address-2"></li>
+                            <li id="patron-address-parts"><!-- city, state, zipcode, country --></li>
+                            <li id="patron-phone"></li>
+                            <li id="patron-email"></li>
+                            <li id="patron-category"></li>
+                            <li id="patron-library"></li>
+                        </ul>
+                    </div>
+                </aside>
+            </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+        </div> <!-- /.row -->
     </div>
-</div>
 
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'calendar.inc' %]
@@ -222,7 +226,7 @@
     [% Asset.js("js/offlinecirc.js") | $raw %]
     [% Asset.js("lib/jquery/plugins/jquery-ui-timepicker-addon.min.js") | $raw %]
     [% INCLUDE 'timepicker.inc' %]
-    <script type="text/javascript">
+    <script>
         var ALERT_SUCCESSFUL_CHECKIN = _("Checked in item.");
         var ALERT_MATERIALS = _("Note about the accompanying materials: %s");
         var ALERT_RESTRICTED = _("Patron is RESTRICTED");
@@ -628,7 +632,7 @@
                 }
             }
             curpatron = patron;
-            $('#yui-main').show();
+            $('main').show();
             setTimeout(function() { $('#checkout-barcode').trigger('focus'), 1 });
         }
 
-- 
2.39.5