From 3c887b4e07acf9459767a7b934aa4f6c16cae534 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 8 May 2018 13:45:37 +0000
Subject: [PATCH] Bug 19709: Move template JavaScript to the footer: Labels

This patch modifies the staff client label creator templates so that
JavaScript is included in the footer instead of the header.

To test, apply the patch and test the JavaScript-driven features of
each modified template: All button controls, DataTables functionality,
form validation, etc.

This patch also modifies the templates to use the Bootstrap grid instead
of YUI, and 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 test the following interactions:

- Creating and managing layouts
- Creating and managing batches
- Creating and managing templates
- Creating and managing printer profiles
- Creating quick spine labels

Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
---
 .../prog/en/modules/labels/label-edit-batch.tt     | 361 +++++++++++----------
 .../prog/en/modules/labels/label-edit-layout.tt    |  94 +++---
 .../prog/en/modules/labels/label-edit-profile.tt   | 107 +++---
 .../prog/en/modules/labels/label-edit-template.tt  | 114 +++----
 .../prog/en/modules/labels/label-home.tt           |  37 ++-
 .../prog/en/modules/labels/label-manage.tt         | 194 +++++------
 .../prog/en/modules/labels/label-print.tt          |  38 ++-
 .../intranet-tmpl/prog/en/modules/labels/result.tt | 100 +++---
 .../intranet-tmpl/prog/en/modules/labels/search.tt |  11 +-
 .../prog/en/modules/labels/spinelabel-home.tt      |  33 +-
 .../prog/en/modules/labels/spinelabel-print.tt     |  39 ++-
 11 files changed, 585 insertions(+), 543 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-edit-batch.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-edit-batch.tt
index 178151edcd..3422d3a50e 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-edit-batch.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-edit-batch.tt
@@ -1,177 +1,12 @@
 [% USE Asset %]
 [% USE ItemTypes %]
+[% SET footerjs = 1 %]
     [% INCLUDE 'doc-head-open.inc' %]
     <title>Koha &rsaquo; Tools &rsaquo; Label creator &rsaquo; Batches &rsaquo; [% IF batch_id %]Edit ([% batch_id %])[% ELSE %]New[% END %]</title>
     [% INCLUDE 'doc-head-close.inc' %]
-    [% INCLUDE 'greybox.inc' %]
     [% Asset.css("css/datatables.css") %]
-    [% INCLUDE 'datatables.inc' %]
-    <script type="text/javascript">
-    //<![CDATA[
-        function DeleteConfirm() {
-            var msg = _("Are you sure you want to delete batch %s?").format("[% batch_id %]");
-            var answer = confirm(msg);
-            if (answer) {
-                window.location = "/cgi-bin/koha/labels/label-manage.pl?op=delete&amp;label_element=batch&amp;element_id=[% batch_id %]";
-            }
-            else {
-                return; // abort delete
-            }
-        };
-        function dofocus() {    // named function req'd for body onload event by some FF and IE7 security models
-            $(".focus:last").select();
-        }
-        function verifyBarcodes(barcodes) {
-            if (barcodes.value == '') {
-                alert(_("Please add barcodes using either the direct entry text area or the item search."));
-                return false;   // not ok
-            }
-            else {
-                return true;    // ok
-            };
-        }
-            function Remove() {
-                items = new Array;
-                item_num = new Array;
-                if(document.items.action.length > 0) {
-                    for (var i=0; i < document.items.action.length; i++) {
-                        if (document.items.action[i].checked) {
-                            items.push("label_id=" +  document.items.action[i].value);
-                            item_num.push(i+1);
-                        }
-                    }
-                    getstr = items.join("&");
-                    item_msg = item_num.join(", ");
-                    var msg = _("Are you sure you want to remove label number(s): %s from this batch?").format(item_msg);
-                } else if (document.items.action.checked) {
-		    alert(_("Deletion of label from a batch with only one label will delete the batch.") + "\n\n" + _("If this is what you want, select the 'Delete batch' option from the toolbar"));
-                    return; // no deletion for single item batch
-                }
-                else {
-                    alert(_("Please select at least one label to delete."));
-                    return;     // no item selected
-                }
-                var answer = confirm(msg);
-                if (answer) {
-                    window.location = "/cgi-bin/koha/labels/label-edit-batch.pl?op=remove&amp;batch_id=[% batch_id %]&amp;" + getstr;
-                }
-                else {
-                    return; // abort delete
-                }
-            };
-            function Add() {
-                var number_list = document.getElementById("number_list");
-                if (number_list.value == '') {
-                    window.open("/cgi-bin/koha/labels/label-item-search.pl?batch_id=[% batch_id %]&amp;type=labels",'FindABibIndex','width=875,height=400,toolbar=no,scrollbars=yes');
-                }
-                else {
-                    document.forms["add_by_number"].submit();
-                }
-            };
-
-            function add_item(item_number) {
-                $("#itemnum_enter").prop("checked",true);
-                $("#number_list").val($("#number_list").val()+item_number+"\r\n");
-            };
-
-            function DeDuplicate() {
-                window.location = "/cgi-bin/koha/labels/label-edit-batch.pl?op=de_duplicate&amp;batch_id=[% batch_id %]";
-            };
-            function Xport(mode) {
-                if (mode == 'label') {
-                    labels= new Array;
-                    if(document.items.action.length > 0) {
-                        for (var i=0; i < document.items.action.length; i++) {
-                            if (document.items.action[i].checked) {
-                                labels.push("label_id=" +  document.items.action[i].value);
-                            }
-                        }
-                        if (labels.length < 1) {
-                            alert(_("Please select at least one label to export."));
-                            return;     // no batch selected
-                        }
-                        getstr = labels.join("&");
-                    }
-                    else if (document.items.action.checked) {
-                        getstr = document.items.action.value;
-                    }
-                    else {
-                        alert(_("Please select at least one label to export."));
-                        return;     // no batch selected
-                    }
-                    return GB_showCenter(_("Export labels"), "/cgi-bin/koha/labels/label-print.pl?batch_id=[% batch_id %]&" + getstr, 400, 800);
-                }
-                else if (mode == 'batch') {
-                    return GB_showCenter(_("Export labels"), "/cgi-bin/koha/labels/label-print.pl?batch_id=[% batch_id %]", 400, 800);
-                }
-                else {
-                    // some pass-thru error trapping just in case...
-                }
-            };
-           function selected_layout() {
-                if (document.items.action.length) {
-                for (i=0;i<document.items.action.length;i++){
-                    if (document.items.action[i].checked==true){
-                        return(document.items.action[i].value);
-                    }
-                };
-                }
-                else {
-                    if (document.items.action.checked){
-                        return(document.items.action.value);
-                    }
-                };
-                alert(_("Please select at least one item."));
-                return (-1);
-            };
-
-         $(document).ready(function() {
-            $("#batcht").dataTable($.extend(true, {}, dataTablesDefaults, {
-                "autoWidth": false,
-                "aoColumnDefs": [
-                    { "sType": "anti-the", "aTargets" : [ "anti-the" ] },
-                    { "aTargets": [ -1, -2 ], "bSortable": false, "bSearchable": false },
-                ],
-                "aaSorting": [[ 0, "asc" ]],
-                "sPaginationType": "four_button"
-            }));
-            $("#additems").click(function(){
-                Add();
-                return false;
-            });
-            $("#removeitems").click(function(){
-                Remove();
-                return false;
-            });
-            $("#deletebatch").click(function(){
-                DeleteConfirm();
-                return false;
-            });
-            $("#deduplicate").click(function(){
-                DeDuplicate();
-                return false;
-            });
-            $("#exportitems").click(function(){
-                Xport('label');
-                return false;
-            });
-            $("#exportbatch").click(function(){
-                Xport('batch');
-                return false;
-            });
-            $(".delete").on("click", function(){
-                return confirmDelete( _("Are you sure you want to delete this?") );
-            });
-            $(".export").on("click", function(e){
-                e.preventDefault();
-                var label_id = $(this).data("label-id");
-                var batch_id = $(this).data("batch-id");
-                GB_showCenter(_("Export labels"),"/cgi-bin/koha/labels/label-print.pl?batch_id=" + batch_id + "&label_id=" + label_id, 400, 800);
-            });
-         });
-    //]]>
-    </script>
 </head>
+
 <body id="labels_label-edit-batch" class="tools labels" onload="dofocus();">
     [% INCLUDE 'header.inc' %]
     [% INCLUDE 'cat-search.inc' %]
@@ -186,10 +21,12 @@
             New
         [% 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 'labels-toolbar.inc' %]
                         [% IF ( err ) %]
                             [% BLOCK xlate_errtype %]
@@ -311,10 +148,178 @@
                                     </div>
                                 [% END %]
                             </div>
-                        </div>
-                </div>
-            <div class="yui-b">
-              [% INCLUDE 'tools-menu.inc' %]
-            </div>
-            </div>
-    [% INCLUDE 'intranet-bottom.inc' %]
+            </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+        <div class="col-sm-2 col-sm-pull-10">
+            <aside>
+                [% INCLUDE 'tools-menu.inc' %]
+            </aside>
+        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+     </div> <!-- /.row -->
+
+[% MACRO jsinclude BLOCK %]
+    [% Asset.js("js/tools-menu.js") %]
+    [% INCLUDE 'greybox.inc' %]
+    [% INCLUDE 'datatables.inc' %]
+    <script>
+        function DeleteConfirm() {
+            var msg = _("Are you sure you want to delete batch %s?").format("[% batch_id %]");
+            var answer = confirm(msg);
+            if (answer) {
+                window.location = "/cgi-bin/koha/labels/label-manage.pl?op=delete&amp;label_element=batch&amp;element_id=[% batch_id %]";
+            }
+            else {
+                return; // abort delete
+            }
+        }
+        function dofocus() {    // named function req'd for body onload event by some FF and IE7 security models
+            $(".focus:last").select();
+        }
+        function verifyBarcodes(barcodes) {
+            if (barcodes.value == '') {
+                alert(_("Please add barcodes using either the direct entry text area or the item search."));
+                return false;   // not ok
+            }
+            else {
+                return true;    // ok
+            }
+        }
+        function Remove() {
+            items = new Array;
+            item_num = new Array;
+            if(document.items.action.length > 0) {
+                for (var i=0; i < document.items.action.length; i++) {
+                    if (document.items.action[i].checked) {
+                        items.push("label_id=" +  document.items.action[i].value);
+                        item_num.push(i+1);
+                    }
+                }
+                getstr = items.join("&");
+                item_msg = item_num.join(", ");
+                var msg = _("Are you sure you want to remove label number(s): %s from this batch?").format(item_msg);
+            } else if (document.items.action.checked) {
+                alert(_("Deletion of label from a batch with only one label will delete the batch.") + "\n\n" + _("If this is what you want, select the 'Delete batch' option from the toolbar"));
+                    return; // no deletion for single item batch
+            } else {
+                alert(_("Please select at least one label to delete."));
+                return;     // no item selected
+            }
+            var answer = confirm(msg);
+            if (answer) {
+                window.location = "/cgi-bin/koha/labels/label-edit-batch.pl?op=remove&amp;batch_id=[% batch_id %]&amp;" + getstr;
+            } else {
+                return; // abort delete
+            }
+        }
+        function Add() {
+            var number_list = document.getElementById("number_list");
+            if (number_list.value == '') {
+                window.open("/cgi-bin/koha/labels/label-item-search.pl?batch_id=[% batch_id %]&amp;type=labels",'FindABibIndex','width=875,height=400,toolbar=no,scrollbars=yes');
+            } else {
+                document.forms["add_by_number"].submit();
+            }
+        }
+
+        function add_item(item_number) {
+            $("#itemnum_enter").prop("checked",true);
+            $("#number_list").val($("#number_list").val()+item_number+"\r\n");
+        }
+
+        function DeDuplicate() {
+            window.location = "/cgi-bin/koha/labels/label-edit-batch.pl?op=de_duplicate&amp;batch_id=[% batch_id %]";
+        }
+
+        function Xport(mode) {
+            if (mode == 'label') {
+                labels= new Array;
+                if(document.items.action.length > 0) {
+                    for (var i=0; i < document.items.action.length; i++) {
+                        if (document.items.action[i].checked) {
+                            labels.push("label_id=" +  document.items.action[i].value);
+                        }
+                    }
+                    if (labels.length < 1) {
+                        alert(_("Please select at least one label to export."));
+                        return;     // no batch selected
+                    }
+                    getstr = labels.join("&");
+                }
+                else if (document.items.action.checked) {
+                    getstr = document.items.action.value;
+                } else {
+                    alert(_("Please select at least one label to export."));
+                    return;     // no batch selected
+                }
+                return GB_showCenter(_("Export labels"), "/cgi-bin/koha/labels/label-print.pl?batch_id=[% batch_id %]&" + getstr, 400, 800);
+            } else if (mode == 'batch') {
+                return GB_showCenter(_("Export labels"), "/cgi-bin/koha/labels/label-print.pl?batch_id=[% batch_id %]", 400, 800);
+            } else {
+                // some pass-thru error trapping just in case...
+            }
+        }
+
+        function selected_layout() {
+            if (document.items.action.length) {
+                for (i=0;i<document.items.action.length;i++){
+                    if (document.items.action[i].checked==true){
+                        return(document.items.action[i].value);
+                    }
+                }
+            } else {
+                if (document.items.action.checked){
+                    return(document.items.action.value);
+                }
+            }
+            alert(_("Please select at least one item."));
+            return (-1);
+        }
+
+         $(document).ready(function() {
+            $("#batcht").dataTable($.extend(true, {}, dataTablesDefaults, {
+                "autoWidth": false,
+                "aoColumnDefs": [
+                    { "sType": "anti-the", "aTargets" : [ "anti-the" ] },
+                    { "aTargets": [ -1, -2 ], "bSortable": false, "bSearchable": false },
+                ],
+                "aaSorting": [[ 0, "asc" ]],
+                "sPaginationType": "four_button"
+            }));
+            $("#additems").click(function(){
+                Add();
+                return false;
+            });
+            $("#removeitems").click(function(){
+                Remove();
+                return false;
+            });
+            $("#deletebatch").click(function(){
+                DeleteConfirm();
+                return false;
+            });
+            $("#deduplicate").click(function(){
+                DeDuplicate();
+                return false;
+            });
+            $("#exportitems").click(function(){
+                Xport('label');
+                return false;
+            });
+            $("#exportbatch").click(function(){
+                Xport('batch');
+                return false;
+            });
+            $(".delete").on("click", function(){
+                return confirmDelete( _("Are you sure you want to delete this?") );
+            });
+            $(".export").on("click", function(e){
+                e.preventDefault();
+                var label_id = $(this).data("label-id");
+                var batch_id = $(this).data("batch-id");
+                GB_showCenter(_("Export labels"),"/cgi-bin/koha/labels/label-print.pl?batch_id=" + batch_id + "&label_id=" + label_id, 400, 800);
+            });
+         });
+    </script>
+[% END %]
+
+[% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-edit-layout.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-edit-layout.tt
index 402ea9e24c..c1ae3e051c 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-edit-layout.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-edit-layout.tt
@@ -1,3 +1,4 @@
+[% SET footerjs = 1 %]
 [% BLOCK translate_label_types %]
 [%  SWITCH type %]
 [%   CASE 'BIB'    %]Biblio
@@ -10,36 +11,8 @@
     [% INCLUDE 'doc-head-open.inc' %]
     <title>Koha &rsaquo; Tools &rsaquo; Label creator &rsaquo; Layouts &rsaquo; [% IF ( layout_id ) %]Edit ([% layout_id %])[% ELSE %]New[% END %]</title>
     [% INCLUDE 'doc-head-close.inc' %]
-    <script type="text/JavaScript">
-        //<![CDATA[
-            $(document).ready(function() {
-                $("input[name='layout_choice']").change( function() { layout_method() } );
-                layout_method();
-                $("#font").on("change",function(){
-                     checkOblique();
-                });
-            });
-            function layout_method() {
-                if( $("input[name='layout_choice']:checked").val() == 'layout_string' ) {
-                    $('#layout_table').hide();
-                    $('#layout_string').show();
-                } else {
-                    $('#layout_table').show();
-                    $('#layout_string').hide();
-                }
-            }
-            function checkOblique() {
-                var font = document.getElementById("font");
-                var selectedfont = font.options[font.selectedIndex].value;
-                if ( selectedfont.match("I$") || selectedfont.match("O$") ) {
-                    document.getElementById("oblique_title").disabled = true;
-                } else {
-                    document.getElementById("oblique_title").disabled = false;
-                }
-            }
-        //]]>
-    </script>
 </head>
+
 [% BLOCK translate_justification_types %]
 [%  SWITCH type %]
 [%   CASE 'L' %]Left
@@ -57,16 +30,14 @@
         <a href="/cgi-bin/koha/labels/label-manage.pl?label_element=layout">Layouts</a> &rsaquo;
         [% IF ( layout_id ) %]Edit ([% layout_id %])[% ELSE %]New[% 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">
+            <div class="col-sm-10 col-sm-push-2">
+                <main>
+
                     [% INCLUDE 'labels-toolbar.inc' %]
-                        <div class="yui-u first">
 
-                        </div>
-                    </div>
                     <form name="input" action="/cgi-bin/koha/labels/label-edit-layout.pl" method="get">
                         <fieldset class="rows">
                             <legend>[% IF ( layout_id ) %]Edit[% ELSE %]Create[% END %] label layout</legend>
@@ -207,10 +178,45 @@
                             <input type="hidden" name="layout_id" value="[% layout_id %]" />
                         </fieldset>
                     </form>
-                </div>
-            </div>
-            <div class="yui-b">
-              [% INCLUDE 'tools-menu.inc' %]
-            </div>
-        </div>
-        [% INCLUDE 'intranet-bottom.inc' %]
+            </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+        <div class="col-sm-2 col-sm-pull-10">
+            <aside>
+                [% INCLUDE 'tools-menu.inc' %]
+            </aside>
+        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+     </div> <!-- /.row -->
+
+[% MACRO jsinclude BLOCK %]
+    [% Asset.js("js/tools-menu.js") %]
+    <script>
+        $(document).ready(function() {
+            $("input[name='layout_choice']").change( function() { layout_method() } );
+            layout_method();
+            $("#font").on("change",function(){
+                 checkOblique();
+            });
+        });
+        function layout_method() {
+            if( $("input[name='layout_choice']:checked").val() == 'layout_string' ) {
+                $('#layout_table').hide();
+                $('#layout_string').show();
+            } else {
+                $('#layout_table').show();
+                $('#layout_string').hide();
+            }
+        }
+        function checkOblique() {
+            var font = document.getElementById("font");
+            var selectedfont = font.options[font.selectedIndex].value;
+            if ( selectedfont.match("I$") || selectedfont.match("O$") ) {
+                document.getElementById("oblique_title").disabled = true;
+            } else {
+                document.getElementById("oblique_title").disabled = false;
+            }
+        }
+    </script>
+[% END %]
+
+[% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-edit-profile.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-edit-profile.tt
index 03d1a50b50..944d736501 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-edit-profile.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-edit-profile.tt
@@ -1,41 +1,9 @@
+[% SET footerjs = 1 %]
     [% INCLUDE 'doc-head-open.inc' %]
     <title>Koha &rsaquo; Tools &rsaquo; Label creator &rsaquo; Profiles &rsaquo; [% IF ( profile_id ) %]Edit ([% profile_id %])[% ELSE %]New[% END%]</title>
     [% INCLUDE 'doc-head-close.inc' %]
-	<script type="text/javascript">
-        //<![CDATA[
-		$(document).ready(function(){
-		var selectedUnit = $("#units option:selected").attr("value");
-		var unitfields = $("#offset_horz,#offset_vert,#creep_horz,#creep_vert");
-		$(unitfields).after("<span class=\"unit\">"+getUnit(selectedUnit)+"</span>");
-		$("#units").change(function(){
-			$(".unit").html(getUnit($(this).val()));
-		});
-		function getUnit(unit){
-			switch(unit){
-				case "POINT":
-					var unit = " pt";
-					break;
-				case "AGATE":
-					var unit = " ag";
-					break;
-				case "INCH":
-					var unit = " in";
-					break;
-				case "MM":
-					var unit = " mm";
-					break;
-				case "CM":
-					var unit = " cm";
-					break;
-				default:
-					var unit = "";
-			}
-			return unit;
-		}
-		});
-        //]]>
-	</script>
 </head>
+
 <body id="labels_label-edit-profile" class="tools labels">
     [% INCLUDE 'header.inc' %]
     [% INCLUDE 'cat-search.inc' %]
@@ -46,16 +14,14 @@
         <a href="/cgi-bin/koha/labels/label-manage.pl?label_element=profile">Profiles</a> &rsaquo;
         [% IF ( profile_id ) %]Edit ([% profile_id %])[% ELSE %]New[% 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">
+            <div class="col-sm-10 col-sm-push-2">
+                <main>
+
                     [% INCLUDE 'labels-toolbar.inc' %]
-                    </div>
-                        <div class="yui-u first">
                             <h3>Edit printer profile</h3>
-                                <div class="yui-g first">
                     <form name="input" action="/cgi-bin/koha/labels/label-edit-profile.pl" method="get">
                                     <fieldset class="rows"><legend>Profile settings</legend>
                                         <ol>
@@ -138,12 +104,51 @@
                                         <input type="hidden" name="profile_id" value="[% profile_id %]" />
                                     </fieldset>
                     </form>
-                                </div>
-                            </div>
-                        </div>
-                </div>
-                <div class="yui-b">
-                  [% INCLUDE 'tools-menu.inc' %]
-                </div>
-            </div>
-            [% INCLUDE 'intranet-bottom.inc' %]
+
+            </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+        <div class="col-sm-2 col-sm-pull-10">
+            <aside>
+                [% INCLUDE 'tools-menu.inc' %]
+            </aside>
+        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+     </div> <!-- /.row -->
+
+[% MACRO jsinclude BLOCK %]
+    [% Asset.js("js/tools-menu.js") %]
+    <script>
+        $(document).ready(function(){
+            var selectedUnit = $("#units option:selected").attr("value");
+            var unitfields = $("#offset_horz,#offset_vert,#creep_horz,#creep_vert");
+            $(unitfields).after("<span class=\"unit\">"+getUnit(selectedUnit)+"</span>");
+            $("#units").change(function(){
+                $(".unit").html(getUnit($(this).val()));
+            });
+        });
+        function getUnit(unit){
+            switch(unit){
+                case "POINT":
+                    var unit = " pt";
+                    break;
+                case "AGATE":
+                    var unit = " ag";
+                    break;
+                case "INCH":
+                    var unit = " in";
+                    break;
+                case "MM":
+                    var unit = " mm";
+                    break;
+                case "CM":
+                    var unit = " cm";
+                    break;
+                default:
+                    var unit = "";
+            }
+            return unit;
+        }
+    </script>
+[% END %]
+
+[% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-edit-template.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-edit-template.tt
index b9ba5562e1..75a35671e3 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-edit-template.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-edit-template.tt
@@ -1,41 +1,9 @@
+[% SET footerjs = 1 %]
     [% INCLUDE 'doc-head-open.inc' %]
     <title>Koha &rsaquo; Tools &rsaquo; Label creator &rsaquo; Templates &rsaquo; [% IF ( template_id ) %]Edit ([% template_id %])[% ELSE %]New[% END %]</title>
     [% INCLUDE 'doc-head-close.inc' %]
-	<script type="text/javascript">
-        //<![CDATA[
-		$(document).ready(function(){
-		var selectedUnit = $("#units option:selected").attr("value");
-		var unitfields = $("#page_height,#page_width,#label_width,#label_height,#top_margin,#left_margin,#top_text_margin,#left_text_margin,#col_gap,#row_gap");
-		$(unitfields).after("<span class=\"unit\">"+getUnit(selectedUnit)+"</span>");
-		$("#units").change(function(){
-			$(".unit").html(getUnit($(this).val()));
-		});
-		function getUnit(unit){
-			switch(unit){
-				case "POINT":
-					var unit = " pt";
-					break;
-				case "AGATE":
-					var unit = " ag";
-					break;
-				case "INCH":
-					var unit = " in";
-					break;
-				case "MM":
-					var unit = " mm";
-					break;
-				case "CM":
-					var unit = " cm";
-					break;
-				default:
-					var unit = "";
-			}
-			return unit;
-		}
-		});
-        //]]>
-	</script>
 </head>
+
 <body id="labels_label-edit-template" class="tools labels">
     [% INCLUDE 'header.inc' %]
     [% INCLUDE 'cat-search.inc' %]
@@ -46,20 +14,17 @@
         <a href="/cgi-bin/koha/labels/label-manage.pl?label_element=template">Templates</a> &rsaquo;
         [% IF ( template_id ) %]Edit ([% template_id %])[% ELSE %]New[% 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">
+            <div class="col-sm-10 col-sm-push-2">
+                <main>
                     [% INCLUDE 'labels-toolbar.inc' %]
-                        <div class="yui-u first">
 
-                        </div>
-                    </div>
+                    <h3>Edit label template</h3>
                     <form name="input" action="/cgi-bin/koha/labels/label-edit-template.pl" method="get">
-                    <div class="yui-g">
-                        <h3>Edit label template</h3>
-                        <div class="yui-u first">
+                    <div class="row">
+                        <div class="col-sm-6">
                             <fieldset class="rows">
                                 <ol>
                                     <li>
@@ -119,7 +84,7 @@
                                 </ol>
                             </fieldset>
                         </div>
-                        <div class="yui-u">
+                        <div class="col-sm-6">
                             <fieldset class="rows">
                                 <ol><li>
                                     <label for="top_margin">Top page margin:</label>
@@ -176,7 +141,6 @@
                             </fieldset>
                         </div>
                     </div>
-                    <div class="yui-g">
                         <fieldset class="action">
                             <input type="submit" class="submit" value="Save" /><a class="cancel" href="/cgi-bin/koha/labels/label-manage.pl?label_element=template">Cancel</a>
                             <input type="hidden" name="op" value="save" />
@@ -184,12 +148,52 @@
                             <input type="hidden" name="template_id" value="[% template_id %]" />
                             [% END %]
                         </fieldset>
-                    </div>
                 </form>
-            </div>
-        </div>
-        <div class="yui-b">
-          [% INCLUDE 'tools-menu.inc' %]
-        </div>
-    </div>
-    [% INCLUDE 'intranet-bottom.inc' %]
+
+            </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+        <div class="col-sm-2 col-sm-pull-10">
+            <aside>
+                [% INCLUDE 'tools-menu.inc' %]
+            </aside>
+        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+     </div> <!-- /.row -->
+
+[% MACRO jsinclude BLOCK %]
+    [% Asset.js("js/tools-menu.js") %]
+    <script>
+        $(document).ready(function(){
+            var selectedUnit = $("#units option:selected").attr("value");
+            var unitfields = $("#page_height,#page_width,#label_width,#label_height,#top_margin,#left_margin,#top_text_margin,#left_text_margin,#col_gap,#row_gap");
+            $(unitfields).after("<span class=\"unit\">"+getUnit(selectedUnit)+"</span>");
+            $("#units").change(function(){
+                $(".unit").html(getUnit($(this).val()));
+            });
+        });
+        function getUnit(unit){
+            switch(unit){
+                case "POINT":
+                    var unit = " pt";
+                    break;
+                case "AGATE":
+                    var unit = " ag";
+                    break;
+                case "INCH":
+                    var unit = " in";
+                    break;
+                case "MM":
+                    var unit = " mm";
+                    break;
+                case "CM":
+                    var unit = " cm";
+                    break;
+                default:
+                    var unit = "";
+            }
+            return unit;
+        }
+    </script>
+[% END %]
+
+[% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-home.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-home.tt
index 79f790795c..4bf1aaed32 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-home.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-home.tt
@@ -1,4 +1,5 @@
 [% USE Asset %]
+[% SET footerjs = 1 %]
     [% INCLUDE 'doc-head-open.inc' %]
     <title>Koha &rsaquo; Tools &rsaquo; Label creator</title>
     [% INCLUDE 'doc-head-close.inc' %]
@@ -14,20 +15,24 @@
         <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a> &rsaquo;
         Label creator
     </div>
-    <div id="doc3" class="yui-t2">
-        <div id="bd">
-            <div id="yui-main">
-                <div class="yui-b">
-                    <div class="yui-g">
-                    [% INCLUDE 'labels-toolbar.inc' %]
-                        <div class="yui-u first">
 
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="yui-b">
-              [% INCLUDE 'tools-menu.inc' %]
-            </div>
-        </div>
-        [% INCLUDE 'intranet-bottom.inc' %]
+<div class="main container-fluid">
+    <div class="row">
+        <div class="col-sm-10 col-sm-push-2">
+            <main>
+                [% INCLUDE 'labels-toolbar.inc' %]
+            </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+        <div class="col-sm-2 col-sm-pull-10">
+            <aside>
+                [% INCLUDE 'tools-menu.inc' %]
+            </aside>
+        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+     </div> <!-- /.row -->
+
+[% MACRO jsinclude BLOCK %]
+    [% Asset.js("js/tools-menu.js") %]
+[% END %]
+
+[% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-manage.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-manage.tt
index 18a4467ffe..3dd7899fa6 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-manage.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-manage.tt
@@ -1,4 +1,5 @@
 [% USE Asset %]
+[% SET footerjs = 1 %]
 [% BLOCK translate_label_element %]
 [%-  SWITCH element -%]
 [%-  CASE 'layout'    -%]layout
@@ -14,83 +15,9 @@
     [% INCLUDE 'doc-head-open.inc' %]
     <title>Koha &rsaquo; Tools &rsaquo; Label creator &rsaquo; [% PROCESS translate_label_element element=label_element_title %]</title>
     [% INCLUDE 'doc-head-close.inc' %]
-    [% INCLUDE 'greybox.inc' %]
-    <script type="text/javascript">
-        //<![CDATA[
-            function Xport() {
-                batches= new Array;
-                if(document.layouts.action.length > 0) {
-                    for (var i=0; i < document.layouts.action.length; i++) {
-                        if (document.layouts.action[i].checked) {
-                            batches.push("batch_id=" +  document.layouts.action[i].value);
-                        }
-                    }
-                    if (batches.length < 1) {
-                        alert(_("Please select at least one batch to export."));
-                        return;     // no batch selected
-                    }
-                    getstr = batches.join("&");
-                }
-                else if (document.layouts.action.checked) {
-                    getstr = "batch_id="+document.layouts.action.value;
-                }
-                else {
-                    alert(_("Please select at least one batch to export."));
-                    return;     // no batch selected
-                }
-                return GB_showCenter(_("Export Labels"), "/cgi-bin/koha/labels/label-print.pl?" + getstr, 400, 800);
-            };
-            function selected_layout(op) {
-                var selected = new Array;
-                if (document.layouts.action.length) {
-                    for (i=0;i<document.layouts.action.length;i++){
-                        if (document.layouts.action[i].checked){
-                            selected.push(i);
-                        }
-                    };
-                    if (selected.length == 1) {
-                        return(document.layouts.action[selected[0]].value);
-                    }
-                    else {
-                        alert(_("Please select only one %s to %s.").format("[% label_element %]", op));
-                        return (-1);
-                    }
-                }
-                else {
-                    if (document.layouts.action.checked){
-                        return(document.layouts.action.value);
-                    }
-                };
-                alert(_("Please select a %s.").format("[% label_element %]"));
-                return (-1);
-            };
-            $(document).ready(function(){
-                $("#print").click(function(e){
-                    e.preventDefault();
-                    Xport();
-                });
-                $(".delete").on("click", function(){
-                    return confirmDelete( _("Are you sure you want to delete this?") );
-                });
-            });
-        //]]>
-    </script>
-
 [% Asset.css("css/datatables.css") %]
-[% INCLUDE 'datatables.inc' %]
-<script type="text/javascript" id="js">
- $(document).ready(function() {
-    $("#labels-table").dataTable($.extend(true, {}, dataTablesDefaults, {
-        "sPaginationType": "four_button",
-        "aaSorting": [[ 1, "asc" ]],
-        "aoColumnDefs": [
-            { "aTargets": [ -1 ], "bSortable": false, "bSearchable": false },
-        ]
-    }));
- });
-</script>
-
 </head>
+
 <body id="labels_label-manage" class="tools labels">
     [% INCLUDE 'header.inc' %]
     [% INCLUDE 'cat-search.inc' %]
@@ -100,13 +27,21 @@
         <a href="/cgi-bin/koha/labels/label-home.pl">Label creator</a> &rsaquo;
         [% PROCESS translate_label_element element=label_element_title %]
     </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 'labels-toolbar.inc' %]
-                    <div class="yui-gc">
-                        <div class="yui-u first" id="manage-label-layouts">
+
+                        [% IF ( error ) %]
+                            <div class="dialog alert">
+                                <strong>WARNING:</strong> An error was encountered and the [% op %] operation for [% label_element %] [% element_id %] was not completed. Please have your system administrator check the error log for details.
+                            </div>
+                        [% END %]
+
+                        <div id="manage-label-layouts">
                             <div class="hint">Current library: [% LoginBranchname %]</div>
                             [% IF ( table_loop ) %]
                             <form name="layouts" action="/cgi-bin/koha/label-manage.pl?label_element=[% label_element %]">
@@ -176,18 +111,85 @@
                             [% PROCESS translate_label_element element=label_element %].</p></div>
                             [% END %]
                         </div>
-                        [% IF ( error ) %]
-                        <div class="yui-u">
-                            <div class="dialog alert">
-                                <strong>WARNING:</strong> An error was encountered and the [% op %] operation for [% label_element %] [% element_id %] was not completed. Please have your system administrator check the error log for details.
-                            </div>
-                        </div>
-                        [% END %]
-                    </div>
-                </div>
-            </div>
-        <div class="yui-b">
-          [% INCLUDE 'tools-menu.inc' %]
-        </div>
-        </div>
-    [% INCLUDE 'intranet-bottom.inc' %]
+            </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+        <div class="col-sm-2 col-sm-pull-10">
+            <aside>
+                [% INCLUDE 'tools-menu.inc' %]
+            </aside>
+        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+     </div> <!-- /.row -->
+
+[% MACRO jsinclude BLOCK %]
+    [% Asset.js("js/tools-menu.js") %]
+    [% INCLUDE 'greybox.inc' %]
+    [% INCLUDE 'datatables.inc' %]
+    <script>
+        function Xport() {
+            batches= new Array;
+            if(document.layouts.action.length > 0) {
+                for (var i=0; i < document.layouts.action.length; i++) {
+                    if (document.layouts.action[i].checked) {
+                        batches.push("batch_id=" +  document.layouts.action[i].value);
+                    }
+                }
+                if (batches.length < 1) {
+                    alert(_("Please select at least one batch to export."));
+                    return;     // no batch selected
+                }
+                getstr = batches.join("&");
+            }
+            else if (document.layouts.action.checked) {
+                getstr = "batch_id="+document.layouts.action.value;
+            }
+            else {
+                alert(_("Please select at least one batch to export."));
+                return;     // no batch selected
+            }
+            return GB_showCenter(_("Export Labels"), "/cgi-bin/koha/labels/label-print.pl?" + getstr, 400, 800);
+        }
+        function selected_layout(op) {
+            var selected = new Array;
+            if (document.layouts.action.length) {
+                for (i=0;i<document.layouts.action.length;i++){
+                    if (document.layouts.action[i].checked){
+                        selected.push(i);
+                    }
+                };
+                if (selected.length == 1) {
+                    return(document.layouts.action[selected[0]].value);
+                }
+                else {
+                    alert(_("Please select only one %s to %s.").format("[% label_element %]", op));
+                    return (-1);
+                }
+            }
+            else {
+                if (document.layouts.action.checked){
+                    return(document.layouts.action.value);
+                }
+            };
+            alert(_("Please select a %s.").format("[% label_element %]"));
+            return (-1);
+        }
+        $(document).ready(function(){
+            $("#print").click(function(e){
+                e.preventDefault();
+                Xport();
+            });
+            $(".delete").on("click", function(){
+                return confirmDelete( _("Are you sure you want to delete this?") );
+            });
+            $("#labels-table").dataTable($.extend(true, {}, dataTablesDefaults, {
+                "sPaginationType": "four_button",
+                "aaSorting": [[ 1, "asc" ]],
+                "aoColumnDefs": [
+                    { "aTargets": [ -1 ], "bSortable": false, "bSearchable": false },
+                ]
+            }));
+        });
+    </script>
+[% END %]
+
+[% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-print.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-print.tt
index 0bb80b9427..914d375f72 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-print.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-print.tt
@@ -1,25 +1,13 @@
+[% SET footerjs = 1 %]
     [% INCLUDE 'doc-head-open.inc' %]
     <title>Koha &rsaquo; Tools &rsaquo; Label creator &rsaquo; Label printing/exporting</title>
     [% INCLUDE 'doc-head-close.inc' popup => 1 %]
-    <script type="text/javascript">
-        //<![CDATA[
-            function Done() {
-                window.location = "[% referer %]";
-            };
-            $(document).ready(function(){
-                $(".gb-close").on("click",function(){
-                    parent.parent.GB_hide();
-                });
-            });
-        //]]>
-    </script>
-    <style type="text/css">#custom-doc {width:47.23em; *width:46.04em; min-width:610px; margin:auto; margin-top:0.4em;}</style>
-    <style type="text/css">table {border-collapse: separate; border-spacing: 0; border: hidden none;} .header {cursor: auto; background-position: center center; background-repeat: repeat;}</style>
+    <style>table {border-collapse: separate; border-spacing: 0; border: hidden none;} .header {cursor: auto; background-position: center center; background-repeat: repeat;}</style>
 </head>
+
 <body id="labels_label-print" class="tools labels">
-    <div id="custom-doc" class="yui-t2">
-        <div id="bd">
-            [% IF ( batches ) %]
+    <div class="main container-fluid">
+        [% IF ( batches ) %]
             <form>
                 <h3>Click on the following links to download the exported batch(es).</h3>
                         [% FOREACH batche IN batches %]
@@ -107,4 +95,20 @@
             </form>
             [% END %]
         </div>
+
+[% MACRO jsinclude BLOCK %]
+    [% Asset.js("js/tools-menu.js") %]
+    [% INCLUDE 'greybox.inc' %]
+    <script>
+        function Done() {
+            window.location = "[% referer %]";
+        };
+        $(document).ready(function(){
+            $(".gb-close").on("click",function(){
+                parent.parent.GB_hide();
+            });
+        });
+    </script>
+[% END %]
+
 [% INCLUDE 'popup-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/labels/result.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/labels/result.tt
index c02a2170d3..6d130f7ea6 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/labels/result.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/labels/result.tt
@@ -1,56 +1,12 @@
 [% USE Asset %]
+[% SET footerjs = 1 %]
     [% INCLUDE 'doc-head-open.inc' %]
     <title>Koha &rsaquo; Barcodes and labels &rsaquo; Search results</title>
     [% INCLUDE 'doc-head-close.inc' %]
-    <style type="text/css">#custom-doc { width:46.23em;*width:45.04em;min-width:700px; margin:auto;margin-top: .4em; text-align:left; }</style>
-    [% Asset.js("lib/jquery/plugins/jquery.fixFloat.js") %]
-    <script type="text/javascript">
-        //<![CDATA[
-            $(document).ready(function(){
-                $("#toolbar").fixFloat();
-                $("#CheckAll").click(function(e){
-                    e.preventDefault();
-                    $("input[type='checkbox']").prop("checked",true);
-                });
-                $("#CheckNone").click(function(e){
-                    e.preventDefault();
-                    $("input[type='checkbox']").prop("checked",false);
-                });
-                $("#add_items").on("click",function(){
-                    add_item('checked',[% batch_id %],'[% type %]');
-                });
-                $(".select_item").on("click",function(e){
-                    e.preventDefault();
-                    var batch_id = $(this).data("batch-id");
-                    var itemnumber = $(this).data("item-number");
-                    var type = $(this).data("field-type");
-                    add_item(itemnumber, batch_id, type);
-                });
-            });
-            function add_item(item_number,batch_id,type_id){
-                var p = window.opener;
-                if (item_number == 'checked') {
-                    items= new Array;
-                    if(document.resultform.action.length > 0) {
-                        for (var i=0; i < document.resultform.action.length; i++) {
-                            if (document.resultform.action[i].checked) {
-                                p.add_item(document.resultform.action[i].value);
-                            }
-                        }
-                    } else {
-                        p.add_item(document.resultform.action.value);
-                    }
-                }
-                else {
-                    p.add_item(item_number);
-                }
-            }
-            //]]>
-    </script>
 </head>
+
 <body id="labels_result" class="tools labels">
-    <div id="custom-doc" class="yui-t7">
-        <div id="bd">
+    <div class="main container-fluid">
             <h1>Search results</h1>
         <div class="results">
                 [% IF ( displayprev || displaynext ) %]
@@ -106,7 +62,7 @@
                                             <th>Select</th>
                                         [% CASE %]
                                             <th>[% header_field.field_label %]</th>
-z                                    [% END -%]
+                                    [% END -%]
                                 [% END %]
                             </tr>
                         </thead>
@@ -151,4 +107,50 @@ z                                    [% END -%]
         <div id="closewindow"><a href="#" class="btn btn-default btn-default close">Close</a></div>
             [% END %]
     </div>
-    [% INCLUDE 'popup-bottom.inc' %]
+
+[% MACRO jsinclude BLOCK %]
+    [% Asset.js("lib/jquery/plugins/jquery.fixFloat.js") %]
+    <script>
+        $(document).ready(function(){
+            $("#toolbar").fixFloat();
+            $("#CheckAll").click(function(e){
+                e.preventDefault();
+                $("input[type='checkbox']").prop("checked",true);
+            });
+            $("#CheckNone").click(function(e){
+                e.preventDefault();
+                $("input[type='checkbox']").prop("checked",false);
+            });
+            $("#add_items").on("click",function(){
+                add_item('checked',[% batch_id %],'[% type %]');
+            });
+            $(".select_item").on("click",function(e){
+                e.preventDefault();
+                var batch_id = $(this).data("batch-id");
+                var itemnumber = $(this).data("item-number");
+                var type = $(this).data("field-type");
+                add_item(itemnumber, batch_id, type);
+            });
+        });
+        function add_item(item_number,batch_id,type_id){
+            var p = window.opener;
+            if (item_number == 'checked') {
+                items= new Array;
+                if(document.resultform.action.length > 0) {
+                    for (var i=0; i < document.resultform.action.length; i++) {
+                        if (document.resultform.action[i].checked) {
+                            p.add_item(document.resultform.action[i].value);
+                        }
+                    }
+                } else {
+                    p.add_item(document.resultform.action.value);
+                }
+            }
+            else {
+                p.add_item(item_number);
+            }
+        }
+    </script>
+[% END %]
+
+[% INCLUDE 'intranet-bottom.inc' popup_window=1 %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/labels/search.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/labels/search.tt
index d9d52357ad..d67a67cab8 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/labels/search.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/labels/search.tt
@@ -1,12 +1,11 @@
+[% SET footerjs = 1 %]
 [% INCLUDE 'doc-head-open.inc' %]<title>Koha &rsaquo;  Labels</title>
 [% INCLUDE 'doc-head-close.inc' %]
 [% INCLUDE 'calendar.inc' %]
-<style type="text/css">#custom-doc { width:47.23em;*width:46.04em;min-width:610px; margin:auto;margin-top: .4em; text-align:left; }</style>
 </head>
-<body id="labels_search" class="tools labels">
 
-<div id="custom-doc" class="yui-t7">
-   <div id="bd">
+<body id="labels_search" class="tools labels">
+    <div class="main container-fluid">
 
 <h1>Search for items
 [% IF ( batch_id ) %]
@@ -104,5 +103,5 @@ to add to Batch [% batch_id %]
 <fieldset class="action"><input type="submit" value="Search" class="submit" /> <a class="cancel close" href="#">Cancel</a></fieldset>
 </form>
 </div>
-</div>
-[% INCLUDE 'popup-bottom.inc' %]
+
+[% INCLUDE 'intranet-bottom.inc' popup_window=1 %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/labels/spinelabel-home.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/labels/spinelabel-home.tt
index e324db596c..f834a0f722 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/labels/spinelabel-home.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/labels/spinelabel-home.tt
@@ -1,17 +1,20 @@
+[% USE Asset %]
+[% SET footerjs = 1 %]
 [% INCLUDE 'doc-head-open.inc' %]<title>Koha &rsaquo; Tools &rsaquo; Quick spine label creator</title>
 [% INCLUDE 'doc-head-close.inc' %]
 </head>
+
 <body id="labels_spinelabel-home" class="tools labels">
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'cat-search.inc' %]
 
 <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a> &rsaquo; Quick spine label creator</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>
+
 			<h2>Quick spine label creator</h2>
 				<form action="/cgi-bin/koha/labels/spinelabel-print.pl" method="post">
 				<fieldset class="brief">
@@ -23,11 +26,19 @@
 				<fieldset class="action"><input type="submit" value="View spine label" /></fieldset>
 				</fieldset>
 				</form>
-			</div>
-		</div>
-       <div class="yui-b">
-            [% INCLUDE 'tools-menu.inc' %]
-        </div>
 
-</div>
+            </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+        <div class="col-sm-2 col-sm-pull-10">
+            <aside>
+                [% INCLUDE 'tools-menu.inc' %]
+            </aside>
+        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+     </div> <!-- /.row -->
+
+[% MACRO jsinclude BLOCK %]
+    [% Asset.js("js/tools-menu.js") %]
+[% END %]
+
 [% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/labels/spinelabel-print.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/labels/spinelabel-print.tt
index 4c71cfcc70..615c639e21 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/labels/spinelabel-print.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/labels/spinelabel-print.tt
@@ -1,32 +1,23 @@
 [% USE Asset %]
+[% SET footerjs = 1 %]
 <!DOCTYPE html>
 [% IF ( bidi ) %]<html lang="[% lang %]" dir="[% bidi %]">[% ELSE %]<html lang="[% lang %]">[% END %]
 <head>
 <title>Koha &rsaquo; Tools &rsaquo; Spine labels</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 [% Asset.css("css/spinelabel.css") %]
-
-		<style type="text/css">
-		@media print {
-			.noprint { display: none; }
-		}
-	</style>
-[% IF ( IntranetUserCSS ) %]<style type="text/css">[% IntranetUserCSS %]</style>[% END %]
-[% IF ( IntranetUserJS ) %]
-    [% Asset.js("lib/jquery/jquery-2.2.3.min.js") %]
-    [% Asset.js("lib/jquery/jquery-migrate-1.3.0.min.js") %]
-    <script type="text/javascript">
-    //<![CDATA[
-    [% IntranetUserJS %]
-    //]]>
-    </script>
-[% END %]
+<style>
+    @media print {
+        .noprint { display: none; }
+    }
+</style>
+[% IF ( IntranetUserCSS ) %]<style>[% IntranetUserCSS %]</style>[% END %]
 </head>
+
 	[% IF ( BarcodeNotFound ) %]
 		<body id="labels_spinelabel-print" class="tools labels">
             <p>The barcode [% Barcode |html %] was not found.</p>
             <p><a href="spinelabel-home.pl">Return to spine label printer</a></p>
-		</body>
 	[% ELSE %]
 		[% IF ( autoprint ) %]
             <body id="labels_spinelabel-print" class="tools labels" onload="window.print()">
@@ -37,8 +28,16 @@
 				[% content %]
 			</span>
 			<span id="print_button" class="noprint">
-                <button onclick="window.print()">Print this label</button>
+                <button onclick="window.print()">Print this slabel</button>
 			</span>
-		</body>
 	[% END %]
-</html>
+
+[% IF ( IntranetUserJS ) %]
+    [% Asset.js( "lib/jquery/jquery-2.2.3.min.js" ) %]
+    [% Asset.js( "lib/jquery/jquery-migrate-1.3.0.min.js" ) %]
+    <script>
+        [% IntranetUserJS %]
+    </script>
+[% END %]
+
+[% INCLUDE 'popup-bottom.inc' %]
-- 
2.11.4.GIT