From 3d195f4740ad00f4f4158f504607ca221ab47a95 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Thu, 25 Oct 2018 19:02:31 +0000
Subject: [PATCH] Bug 21672: Switch templates to Bootstrap grid: Various

This patch modifies various templates to add or improve coverage of the
Bootstrap grid.

Also changed: Remove script "type" attribute; ill-requests.tt JavaScript
moved to the footer.

To test, apply the patch and view the following pages, confirming that
they look correct at various browser widths:

 - Administration -> Item circulation alerts
 - Authorities -> Authorities search -> Merge records
 - Catalog -> Bibliographic details -> Rota (StockRotation must be
   enabled)
 - ILL requests: Details for all requests and "Manage request" view
 - Tools -> News: Main and add/edit view
---
 .../prog/en/includes/merge-record-strings.inc      |   2 +-
 .../en/modules/admin/item_circulation_alerts.tt    |  11 +-
 .../prog/en/modules/authorities/merge.tt           |  24 +-
 .../prog/en/modules/catalogue/stockrotation.tt     |  25 +-
 .../prog/en/modules/ill/ill-requests.tt            | 589 +++++++++++----------
 .../prog/en/modules/tools/koha-news.tt             |  33 +-
 6 files changed, 347 insertions(+), 337 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/merge-record-strings.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/merge-record-strings.inc
index 66c55c4..d13a7b9 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/merge-record-strings.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/merge-record-strings.inc
@@ -1,5 +1,5 @@
 [%# transletable strings for merge-record.js %]
-<script type="text/javascript">
+<script>
     var MSG_MERGEREC_ALREADY_EXISTS = _("The field is non-repeatable and already exists in the destination record. Therefore, you cannot add it.");
     var MSG_MERGEREC_SUBFIELD_ALREADY_EXISTS = _("The subfield is non-repeatable and already exists in the destination record. Therefore, you cannot add it.");
 </script>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/item_circulation_alerts.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/item_circulation_alerts.tt
index c6f1cf2..bec399c 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/item_circulation_alerts.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/item_circulation_alerts.tt
@@ -51,9 +51,8 @@ table.grid td.default {
     <div class="row">
         <div class="col-sm-10 col-sm-push-2">
             <main>
-
-<div class="yui-g">
-<div class="yui-u first">
+                <div class="row">
+                    <div class="col-sm-6">
 <h1>Item circulation alerts</h1>
 <h2>Select a library:</h2>
 <form id="branch_selector" method="get" action="/cgi-bin/koha/admin/item_circulation_alerts.pl">
@@ -64,7 +63,7 @@ table.grid td.default {
 <input type="submit" name="pick" value="Pick" />
 </form>
 </div>
-<div class="yui-u">
+                    <div class="col-sm-6">
 <table class="grid">
 <caption>Legend</caption>
 <thead>
@@ -88,8 +87,8 @@ table.grid td.default {
   </tr>
 </tbody>
 </table>
-</div>
-</div>
+                    </div> <!-- /.col-sm-6 -->
+                </div> <!-- /.row -->
 
 <h2>Circulation alerts for [% Branches.GetName( branch ) || 'Default' | html %]</h2>
 <p>Click on the grid to toggle the settings.</p>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/merge.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/merge.tt
index 73816de..45f2654 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/merge.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/merge.tt
@@ -5,7 +5,7 @@
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Cataloging &rsaquo; Merging records</title>
 [% INCLUDE 'doc-head-close.inc' %]
-<style type="text/css">
+<style>
 div.record ul, div.record li { float:none; display:block; }
 div#result { margin-top: 1em; }
 /* We use this style "against" the li ui-tabs-nav style automatically applied */
@@ -20,6 +20,7 @@ div#result { margin-top: 1em; }
 <div class="main container-fluid">
     <div class="row">
         <div class="col-md-8 col-md-offset-2">
+            <main>
 
 <h1>Merging records</h1>
 
@@ -45,7 +46,7 @@ div#result { margin-top: 1em; }
 
 [% ELSIF ( result ) %]
 
-        <script type="text/javascript">window.location.href="/cgi-bin/koha/authorities/detail.pl?authid=[% recordid1 | html %]"</script>
+    <script>window.location.href="/cgi-bin/koha/authorities/detail.pl?authid=[% recordid1 | html %]";</script>
         <p>The merging was successful. <a href="/cgi-bin/koha/authorities/detail.pl?authid=[% recordid1 | html %]">Click here to see the merged record.</a></p>
 
 [% ELSIF ( choosereference ) %]
@@ -84,13 +85,14 @@ div#result { margin-top: 1em; }
 
 <form id="mergeform" action="/cgi-bin/koha/authorities/merge.pl" method="post" onsubmit="return mergeformsubmit()">
 
-<div class="yui-g">
-<div class="yui-u first">
+    <div class="row">
+        <div class="col-sm-6">
 [% PROCESS mergesource sourcerecords=records %]
 </div>
-<div class="yui-u">
+        <div class="col-sm-6">
 [% PROCESS mergetarget %]
-</div> <!-- .yui-u -->
+</div>
+</div>
 
 <input type="hidden" name="recordid1" value="[% recordid1 | html %]" />
 <input type="hidden" name="recordid2" value="[% recordid2 | html %]" />
@@ -98,20 +100,19 @@ div#result { margin-top: 1em; }
 <input type="hidden" name="frameworkcode" value="[% framework | html %]" />
 
 <fieldset class="action"><input type="submit" name="merge" value="Merge" /></fieldset>
-</div>
 </form>
 
 [% END %]
 
-</div>
+        </main>
+    </div> <!-- /.col-md-8 col-md-offset-2 -->
+</div> <!-- /.row -->
 
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'merge-record-strings.inc' %]
     [% INCLUDE 'authorities_js.inc' %]
     [% Asset.js("js/merge-record.js") | $raw %]
-    [% INCLUDE 'merge-record-strings.inc' %]
-    <script type="text/javascript">
-    //<![CDATA[
+    <script>
 
         // When submiting the form
         function mergeformsubmit() {
@@ -140,7 +141,6 @@ div#result { margin-top: 1em; }
         $("#Frameworks").val(fw);
     }
 
-    //]]>
     </script>
 [% END %]
 
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/stockrotation.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/stockrotation.tt
index ca6e142..cb262a8 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/stockrotation.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/stockrotation.tt
@@ -14,11 +14,10 @@
 
 <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/catalogue/search.pl">Catalog</a>  &rsaquo; Stock rotation details for <i>[% biblio.title | html %][% FOREACH subtitle IN biblio.subtitles %][% subtitle.subfield | html %][% END %]</i></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>
 
 <div id="catalogue_detail_biblio">
 
@@ -157,12 +156,16 @@
 
 </div>
 
-</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 %]
     [% INCLUDE 'browser-strings.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/ill/ill-requests.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/ill/ill-requests.tt
index 5846162..dda4e17 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/ill/ill-requests.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/ill/ill-requests.tt
@@ -3,295 +3,11 @@
 [% USE Branches %]
 [% USE Koha %]
 [% USE KohaDates %]
-
+[% SET footerjs = 1 %]
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; ILL requests  &rsaquo;</title>
 [% INCLUDE 'doc-head-close.inc' %]
-[% Asset.js("lib/jquery/plugins/jquery.checkboxes.min.js") | $raw %]
 [% Asset.css("css/datatables.css") | $raw %]
-[% INCLUDE 'datatables.inc' %]
-<script type="text/javascript">
-    //<![CDATA[
-    $(document).ready(function() {
-
-        // Illview Datatable setup
-
-        // Fields we don't want to display
-        var ignore = [
-            'accessurl',
-            'backend',
-            'branchcode',
-            'completed',
-            'capabilities',
-            'cost',
-            'medium',
-            'notesopac',
-            'notesstaff',
-            'placed',
-            'replied'
-        ];
-
-        // Fields we need to expand (flatten)
-        var expand = [
-            'metadata',
-            'patron'
-        ];
-
-        // Expanded fields
-        // This is auto populated
-        var expanded = {};
-
-        // The core fields that should be displayed first
-        var core = [
-            'metadata_Author',
-            'metadata_Title',
-            'borrowername',
-            'biblio_id',
-            'library',
-            'status',
-            'updated',
-            'illrequest_id',
-            'action'
-        ];
-
-        // Remove any fields we're ignoring
-        var removeIgnore = function(dataObj) {
-            dataObj.forEach(function(thisRow) {
-                ignore.forEach(function(thisIgnore) {
-                    if (thisRow.hasOwnProperty(thisIgnore)) {
-                        delete thisRow[thisIgnore];
-                    }
-                });
-            });
-        };
-
-        // Expand any fields we're expanding
-        var expandExpand = function(row) {
-            expand.forEach(function(thisExpand) {
-                if (row.hasOwnProperty(thisExpand)) {
-                    if (!expanded.hasOwnProperty(thisExpand)) {
-                        expanded[thisExpand] = [];
-                    }
-                    var expandObj = row[thisExpand];
-                    Object.keys(expandObj).forEach(
-                        function(thisExpandCol) {
-                            var expColName = thisExpand + '_' + thisExpandCol;
-                            // Keep a list of fields that have been expanded
-                            // so we can create toggle links for them
-                            if (expanded[thisExpand].indexOf(expColName) == -1) {
-                                expanded[thisExpand].push(expColName);
-                            }
-                            expandObj[expColName] =
-                                expandObj[thisExpandCol];
-                            delete expandObj[thisExpandCol];
-                        }
-                    );
-                    $.extend(true, row, expandObj);
-                    delete row[thisExpand];
-                }
-            });
-        };
-
-        // Build a de-duped list of all column names
-        var allCols = {};
-        core.map(function(thisCore) {
-            allCols[thisCore] = 1;
-        });
-
-        // Strip the expand prefix if it exists, we do this for display
-        var stripPrefix = function(value) {
-            expand.forEach(function(thisExpand) {
-                var regex = new RegExp(thisExpand + '_', 'g');
-                value = value.replace(regex, '');
-            });
-            return value;
-        };
-
-        // Our 'render' function for borrowerlink
-        var createPatronLink = function(data, type, row) {
-            return '<a title="' + _("View borrower details") + '" ' +
-                'href="/cgi-bin/koha/members/moremember.pl?' +
-                'borrowernumber='+row.borrowernumber+'">' +
-                row.patron_firstname + ' ' + row.patron_surname +
-                '</a>';
-        };
-
-        // Our 'render' function for biblio_id
-        var createBiblioLink = function(data, type, row) {
-            return (row.biblio_id) ?
-                '<a title="' + _("View biblio details") + '" ' +
-                'href="/cgi-bin/koha/catalogue/detail.pl?biblionumber=' +
-                row.biblio_id + '">' +
-                row.biblio_id +
-                '</a>' : '';
-        };
-
-        // Our 'render' function for the library name
-        var createLibrary = function(data, type, row) {
-            return row.library.branchname;
-        };
-
-        // Render function for request ID
-        var createRequestId = function(data, type, row) {
-            return row.id_prefix + row.illrequest_id;
-        };
-
-        // Render function for request status
-        var createStatus = function(data, type, row, meta) {
-            var origData = meta.settings.oInit.originalData;
-            if (origData.length > 0) {
-                var status_name = meta.settings.oInit.originalData[0].capabilities[
-                    row.status
-                ].name;
-                switch( status_name ) {
-                    case "New request":
-                        return _("New request");
-                    case "Requested":
-                        return _("Requested");
-                    case "Requested from partners":
-                        return _("Requested from partners");
-                    case "Request reverted":
-                        return _("Request reverted");
-                    case "Queued request":
-                        return _("Queued request");
-                    case "Cancellation requested":
-                        return _("Cancellation requested");
-                    case "Completed":
-                        return _("Completed");
-                    case "Delete request":
-                        return _("Delete request");
-                    default:
-                        return status_name;
-                }
-            } else {
-                return '';
-            }
-        };
-
-        // Render function for creating a row's action link
-        var createActionLink = function(data, type, row) {
-            return '<a class="btn btn-default btn-sm" ' +
-                'href="/cgi-bin/koha/ill/ill-requests.pl?' +
-                'method=illview&amp;illrequest_id=' +
-                row.illrequest_id +
-                '">' + _("Manage request") + '</a>';
-        };
-
-        // Columns that require special treatment
-        var specialCols = {
-            action: {
-                name: '',
-                func: createActionLink
-            },
-            borrowername: {
-                name: _("Patron"),
-                func: createPatronLink
-            },
-            illrequest_id: {
-                name: _("Request number"),
-                func: createRequestId
-            },
-            status: {
-                name: _("Status"),
-                func: createStatus
-            },
-            biblio_id: {
-                name: _("Bibliograpic record ID"),
-                func: createBiblioLink
-            },
-            library: {
-                name: _("Library"),
-                func: createLibrary
-            }
-        };
-
-        // Filter partner list
-        $('#partner_filter').keyup(function() {
-            var needle = $('#partner_filter').val();
-            $('#partners > option').each(function() {
-                var regex = new RegExp(needle, 'i');
-                if (
-                    needle.length == 0 ||
-                    $(this).is(':selected') ||
-                    $(this).text().match(regex)
-                ) {
-                    $(this).show();
-                } else {
-                    $(this).hide();
-                }
-            });
-        });
-
-        // Display the modal containing request supplier metadata
-        $('#ill-request-display-metadata').on('click', function(e) {
-            e.preventDefault();
-            $('#dataPreview').modal({show:true});
-        });
-
-        // Get our data from the API and process it prior to passing
-        // it to datatables
-        var ajax = $.ajax(
-            '/api/v1/illrequests?embed=metadata,patron,capabilities,library'
-            ).done(function() {
-                var data = JSON.parse(ajax.responseText);
-                // Make a copy, we'll be removing columns next and need
-                // to be able to refer to data that has been removed
-                var dataCopy = $.extend(true, [], data);
-                // Remove all columns we're not interested in
-                removeIgnore(dataCopy);
-                // Expand columns that need it and create an array
-                // of all column names
-                $.each(dataCopy, function(k, row) {
-                    expandExpand(row);
-                });
-
-                // Assemble an array of column definitions for passing
-                // to datatables
-                var colData = [];
-                Object.keys(allCols).forEach(function(thisCol) {
-                    // Create the base column object
-                    var colObj = {
-                        name: thisCol,
-                        className: thisCol
-                    };
-                    // We may need to process the data going in this
-                    // column, so do it if necessary
-                    if (
-                        specialCols.hasOwnProperty(thisCol) &&
-                        specialCols[thisCol].hasOwnProperty('func')
-                    ) {
-                        colObj.render = specialCols[thisCol].func;
-                    } else {
-                        colObj.data = thisCol;
-                    }
-                    colData.push(colObj);
-                });
-
-                // Initialise the datatable
-                $('#ill-requests').DataTable($.extend(true, {}, dataTablesDefaults, {
-                    'aoColumnDefs': [  // Last column shouldn't be sortable or searchable
-                        {
-                            'aTargets': [ 'actions' ],
-                            'bSortable': false,
-                            'bSearchable': false
-                        },
-                    ],
-                    'aaSorting': [[ 6, 'desc' ]], // Default sort, updated descending
-                    'processing': true, // Display a message when manipulating
-                    'iDisplayLength': 10, // 10 results per page
-                    'sPaginationType': "full_numbers", // Pagination display
-                    'deferRender': true, // Improve performance on big datasets
-                    'data': dataCopy,
-                    'columns': colData,
-                    'originalData': data // Enable render functions to access
-                                       // our original data
-                }));
-            }
-        );
-
-    });
-    //]]>
-</script>
 </head>
 
 <body id="illrequests" class="ill">
@@ -308,10 +24,12 @@
     [% END %]
 </div>
 
-<div id="doc3" class="yui-t2">
-    <div id="bd">
-        <div id="yui-main">
-            <div id="interlibraryloans" class="yui-b">
+<div class="main container-fluid">
+    <div class="row">
+        <div class="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
+            <main>
+
+            <div id="interlibraryloans">
         [% IF !backends_available %]
             <div class="dialog message">ILL module configuration problem. Take a look at the <a href="/cgi-bin/koha/about.pl#sysinfo">about page</a></div>
         [% ELSE %]
@@ -486,7 +204,7 @@
                 [% ELSIF query_type == 'illview' %]
                     [% req_status = request.status %]
                     <h1>Manage ILL request</h1>
-                    <div id="toolbar" class="btn-toolbar">
+                    <div class="btn-toolbar">
                         <a title="Edit request" id="ill-toolbar-btn-edit-action" class="btn btn-sm btn-default" href="/cgi-bin/koha/ill/ill-requests.pl?method=edit_action&amp;illrequest_id=[% request.illrequest_id | html %]">
                         <span class="fa fa-pencil"></span>
                         Edit request
@@ -635,13 +353,298 @@
                 [% END %]
         [% END %]
             </div>
-        </div>
-    </div>
-</div>
+
+            </main>
+        </div> <!-- /.col-sm-12 -->
+    </div> <!-- /.row -->
+
 
 [% TRY %]
 [% PROCESS backend_jsinclude %]
 [% CATCH %]
 [% END %]
 
+[% MACRO jsinclude BLOCK %]
+    [% INCLUDE 'datatables.inc' %]
+    <script>
+        $(document).ready(function() {
+
+            // Illview Datatable setup
+
+            // Fields we don't want to display
+            var ignore = [
+                'accessurl',
+                'backend',
+                'branchcode',
+                'completed',
+                'capabilities',
+                'cost',
+                'medium',
+                'notesopac',
+                'notesstaff',
+                'placed',
+                'replied'
+            ];
+
+            // Fields we need to expand (flatten)
+            var expand = [
+                'metadata',
+                'patron'
+            ];
+
+            // Expanded fields
+            // This is auto populated
+            var expanded = {};
+
+            // The core fields that should be displayed first
+            var core = [
+                'metadata_Author',
+                'metadata_Title',
+                'borrowername',
+                'biblio_id',
+                'library',
+                'status',
+                'updated',
+                'illrequest_id',
+                'action'
+            ];
+
+            // Remove any fields we're ignoring
+            var removeIgnore = function(dataObj) {
+                dataObj.forEach(function(thisRow) {
+                    ignore.forEach(function(thisIgnore) {
+                        if (thisRow.hasOwnProperty(thisIgnore)) {
+                            delete thisRow[thisIgnore];
+                        }
+                    });
+                });
+            };
+
+            // Expand any fields we're expanding
+            var expandExpand = function(row) {
+                expand.forEach(function(thisExpand) {
+                    if (row.hasOwnProperty(thisExpand)) {
+                        if (!expanded.hasOwnProperty(thisExpand)) {
+                            expanded[thisExpand] = [];
+                        }
+                        var expandObj = row[thisExpand];
+                        Object.keys(expandObj).forEach(
+                            function(thisExpandCol) {
+                                var expColName = thisExpand + '_' + thisExpandCol;
+                                // Keep a list of fields that have been expanded
+                                // so we can create toggle links for them
+                                if (expanded[thisExpand].indexOf(expColName) == -1) {
+                                    expanded[thisExpand].push(expColName);
+                                }
+                                expandObj[expColName] =
+                                    expandObj[thisExpandCol];
+                                delete expandObj[thisExpandCol];
+                            }
+                        );
+                        $.extend(true, row, expandObj);
+                        delete row[thisExpand];
+                    }
+                });
+            };
+
+            // Build a de-duped list of all column names
+            var allCols = {};
+            core.map(function(thisCore) {
+                allCols[thisCore] = 1;
+            });
+
+            // Strip the expand prefix if it exists, we do this for display
+            var stripPrefix = function(value) {
+                expand.forEach(function(thisExpand) {
+                    var regex = new RegExp(thisExpand + '_', 'g');
+                    value = value.replace(regex, '');
+                });
+                return value;
+            };
+
+            // Our 'render' function for borrowerlink
+            var createPatronLink = function(data, type, row) {
+                return '<a title="' + _("View patron details") + '" ' +
+                    'href="/cgi-bin/koha/members/moremember.pl?' +
+                    'borrowernumber='+row.borrowernumber+'">' +
+                    row.patron_firstname + ' ' + row.patron_surname +
+                    '</a>';
+            };
+
+            // Our 'render' function for biblio_id
+            var createBiblioLink = function(data, type, row) {
+                return (row.biblio_id) ?
+                    '<a title="' + _("View record details") + '" ' +
+                    'href="/cgi-bin/koha/catalogue/detail.pl?biblionumber=' +
+                    row.biblio_id + '">' +
+                    row.biblio_id +
+                    '</a>' : '';
+            };
+
+            // Our 'render' function for the library name
+            var createLibrary = function(data, type, row) {
+                return row.library.branchname;
+            };
+
+            // Render function for request ID
+            var createRequestId = function(data, type, row) {
+                return row.id_prefix + row.illrequest_id;
+            };
+
+            // Render function for request status
+            var createStatus = function(data, type, row, meta) {
+                var origData = meta.settings.oInit.originalData;
+                if (origData.length > 0) {
+                    var status_name = meta.settings.oInit.originalData[0].capabilities[
+                        row.status
+                    ].name;
+                    switch( status_name ) {
+                        case "New request":
+                            return _("New request");
+                        case "Requested":
+                            return _("Requested");
+                        case "Requested from partners":
+                            return _("Requested from partners");
+                        case "Request reverted":
+                            return _("Request reverted");
+                        case "Queued request":
+                            return _("Queued request");
+                        case "Cancellation requested":
+                            return _("Cancellation requested");
+                        case "Completed":
+                            return _("Completed");
+                        case "Delete request":
+                            return _("Delete request");
+                        default:
+                            return status_name;
+                    }
+                } else {
+                    return '';
+                }
+            };
+
+            // Render function for creating a row's action link
+            var createActionLink = function(data, type, row) {
+                return '<a class="btn btn-default btn-xs" ' +
+                    'href="/cgi-bin/koha/ill/ill-requests.pl?' +
+                    'method=illview&amp;illrequest_id=' +
+                    row.illrequest_id +
+                    '">' + _("Manage request") + '</a>';
+            };
+
+            // Columns that require special treatment
+            var specialCols = {
+                action: {
+                    name: '',
+                    func: createActionLink
+                },
+                borrowername: {
+                    name: _("Patron"),
+                    func: createPatronLink
+                },
+                illrequest_id: {
+                    name: _("Request number"),
+                    func: createRequestId
+                },
+                status: {
+                    name: _("Status"),
+                    func: createStatus
+                },
+                biblio_id: {
+                    name: _("Bibliograpic record ID"),
+                    func: createBiblioLink
+                },
+                library: {
+                    name: _("Library"),
+                    func: createLibrary
+                }
+            };
+
+            // Filter partner list
+            $('#partner_filter').keyup(function() {
+                var needle = $('#partner_filter').val();
+                $('#partners > option').each(function() {
+                    var regex = new RegExp(needle, 'i');
+                    if (
+                        needle.length == 0 ||
+                        $(this).is(':selected') ||
+                        $(this).text().match(regex)
+                    ) {
+                        $(this).show();
+                    } else {
+                        $(this).hide();
+                    }
+                });
+            });
+
+            // Display the modal containing request supplier metadata
+            $('#ill-request-display-metadata').on('click', function(e) {
+                e.preventDefault();
+                $('#dataPreview').modal({show:true});
+            });
+
+            // Get our data from the API and process it prior to passing
+            // it to datatables
+            var ajax = $.ajax(
+                '/api/v1/illrequests?embed=metadata,patron,capabilities,library'
+                ).done(function() {
+                    var data = JSON.parse(ajax.responseText);
+                    // Make a copy, we'll be removing columns next and need
+                    // to be able to refer to data that has been removed
+                    var dataCopy = $.extend(true, [], data);
+                    // Remove all columns we're not interested in
+                    removeIgnore(dataCopy);
+                    // Expand columns that need it and create an array
+                    // of all column names
+                    $.each(dataCopy, function(k, row) {
+                        expandExpand(row);
+                    });
+
+                    // Assemble an array of column definitions for passing
+                    // to datatables
+                    var colData = [];
+                    Object.keys(allCols).forEach(function(thisCol) {
+                        // Create the base column object
+                        var colObj = {
+                            name: thisCol,
+                            className: thisCol
+                        };
+                        // We may need to process the data going in this
+                        // column, so do it if necessary
+                        if (
+                            specialCols.hasOwnProperty(thisCol) &&
+                            specialCols[thisCol].hasOwnProperty('func')
+                        ) {
+                            colObj.render = specialCols[thisCol].func;
+                        } else {
+                            colObj.data = thisCol;
+                        }
+                        colData.push(colObj);
+                    });
+
+                    // Initialise the datatable
+                    $('#ill-requests').DataTable($.extend(true, {}, dataTablesDefaults, {
+                        'aoColumnDefs': [  // Last column shouldn't be sortable or searchable
+                            {
+                                'aTargets': [ 'actions' ],
+                                'bSortable': false,
+                                'bSearchable': false
+                            },
+                        ],
+                        'aaSorting': [[ 6, 'desc' ]], // Default sort, updated descending
+                        'processing': true, // Display a message when manipulating
+                        'sPaginationType': "full_numbers", // Pagination display
+                        'deferRender': true, // Improve performance on big datasets
+                        'data': dataCopy,
+                        'columns': colData,
+                        'originalData': data // Enable render functions to access
+                                           // our original data
+                    }));
+                }
+            );
+
+        });
+    </script>
+[% END %]
+
 [% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/koha-news.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/koha-news.tt
index 8ca8a11..7ce942e 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/koha-news.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/koha-news.tt
@@ -23,16 +23,17 @@ Edit news item[% ELSE %]Add news item[% END %][% ELSE %]News[% END %]</div>
         <div class="row">
             <div class="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
 [% ELSE %]
-    <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">
 [% END %]
+                <main>
 
 [% UNLESS ( add_form ) %]
     [% IF error_message == 'title_missing' %]
         <div class="dialog alert">Error: Required news title missing!</div>
     [% END %]
+<h2>News</h2>
 <div id="toolbar" class="btn-toolbar">
     <a class="btn btn-default btn-sm" id="newentry" href="/cgi-bin/koha/tools/koha-news.pl?op=add_form&amp;lang=[% lang | html %]"><i class="fa fa-plus"></i> New entry</a>
 </div>
@@ -216,21 +217,25 @@ Edit news item[% ELSE %]Add news item[% END %][% ELSE %]News[% END %]</div>
             <div class="dialog message">There are no news items.</div>
         [% END %]
     [% END %]
-</div>
-</div>
-[% UNLESS ( add_form ) %]
-    <div class="yui-b noprint">
-        [% INCLUDE 'tools-menu.inc' %]
-    </div>
-[% END %]
-</div>
+
+                </main>
+            [% UNLESS ( add_form ) %]
+                </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 -->
+            [% END %]
+        </div> <!-- /.row -->
 
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'calendar.inc' %]
     [% Asset.js("js/tools-menu.js") | $raw %]
     [% IF ( opac_news_count ) %]
         [% INCLUDE 'datatables.inc' %]
-        <script type="text/javascript">
+        <script>
             $(document).ready(function() {
                 $("#newst").dataTable($.extend(true, {}, dataTablesDefaults, {
                     "aoColumnDefs": [
@@ -268,7 +273,7 @@ Edit news item[% ELSE %]Add news item[% END %][% ELSE %]News[% END %]</div>
         </script>
     [% END %]
     [% Asset.js("lib/tiny_mce/tiny_mce.js") | $raw %]
-    <script type="text/javascript">
+    <script>
         tinyMCE.baseURL = "[% interface | html %]/lib/tiny_mce";
         tinyMCE.init({
             mode : "textareas",
-- 
2.1.4