From a468efa0211f3a38226014b5a871fd1d50808dc8 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Wed, 14 Jun 2023 15:49:57 +0000
Subject: [PATCH] Bug 34010: Template corrections to recall pages

This patch makes some corrections to recall pages:
- Update breadcrumbs menu to use wrapper.
- Add <div class="page-section"> where it is missing.
- Use biblio-title include to show links to bibliographic record titles.
- Correct Bootstrap button dropdown markup for consistent style
- Change some submit buttons to <button> elements for consistent style

To test you must have UseRecalls enabled. Having some sample recalls
data will help. Check the following pages to confirm that everything
looks correct:

- Circulation ->
  - Recalls queue
  - Recalls to pull
  - Overdue recalls
  - Recalls awaiting pickup
  - Old recalls
  - Existing recalls: View a bibliographic record with a recall and
    click "Recalls" in the sidebar.

Signed-off-by: Sam Lau <samalau@gmail.com>
---
 .../prog/en/includes/recalls.inc              |  16 +-
 .../en/modules/recalls/recalls_old_queue.tt   |  19 +-
 .../en/modules/recalls/recalls_overdue.tt     |  33 +--
 .../prog/en/modules/recalls/recalls_queue.tt  |  33 +--
 .../en/modules/recalls/recalls_to_pull.tt     | 207 +++++++++---------
 .../en/modules/recalls/recalls_waiting.tt     |  36 +--
 .../prog/en/modules/recalls/request.tt        |  41 ++--
 7 files changed, 210 insertions(+), 175 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/recalls.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/recalls.inc
index fa3a7cedea..426b974836 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/recalls.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/recalls.inc
@@ -31,14 +31,10 @@
                     [% END %]
 
                     <td class="recall-title">
-                        <b><a class="recall-title" href="/cgi-bin/koha/catalogue/detail.pl?biblionumber=[% recall.biblio_id | html %]">
-                            [% recall.biblio.title | html %]
-                            [% FOREACH s IN recall.biblio.subtitle %]
-                                [% s | html %]
-                            [% END %]
-                        </a></b>
-                        [% IF recall.item %][% recall.item.barcode | html %][% END %]
-                        [% recall.biblio.author | html %]
+                        [% INCLUDE 'biblio-title.inc' biblio=recall.biblio link=1 %]
+                        [% IF recall.biblio.author %] by [% recall.biblio.author | html %][% END %]
+                        [% recall.item.enumchron | html %]
+                        [% IF ( recall.item ) %]<br><em>Barcode: [% recall.item.barcode | html %]</em>[% END %]
                     </td>
 
                     [% UNLESS specific_patron %]
@@ -101,7 +97,9 @@
                             &nbsp;
                         [% ELSE %]
                             <div class="btn-group">
-                                <a class="btn btn-sm dropdown-toggle" data-toggle="dropdown" href="#"> Actions <span class="caret"></span></a>
+                                <button type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    Actions <span class="caret"></span>
+                                </button>
                                 <ul class="dropdown-menu pull-right">
                                     [% IF ( recall.requested or recall.overdue ) %]
                                         <li><a class="cancel_recall" data-id="[% recall.id | html %]" data-action="cancel"><i class="fa fa-times"></i> Cancel</a></li>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/recalls/recalls_old_queue.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/recalls/recalls_old_queue.tt
index 76a9141329..73eee5e893 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/recalls/recalls_old_queue.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/recalls/recalls_old_queue.tt
@@ -12,11 +12,16 @@
     [% INCLUDE 'cat-search.inc' %]
 [% END %]
 
-<div id="breadcrumbs">
-    <a href="/cgi-bin/koha/mainpage.pl">Home</a>
-    &rsaquo; <a href="/cgi-bin/koha/circ/circulation-home.pl">Circulation</a>
-    &rsaquo; <a href="/cgi-bin/koha/recalls/recalls_old_queue.pl">Old recalls</a>
-</div>
+[% WRAPPER 'sub-header.inc' %]
+    [% WRAPPER breadcrumbs %]
+        [% WRAPPER breadcrumb_item %]
+            <a href="/cgi-bin/koha/circ/circulation-home.pl">Circulation</a>
+        [% END %]
+        [% WRAPPER breadcrumb_item bc_active= 1 %]
+            <span>Old recalls</span>
+        [% END %]
+    [% END #/ WRAPPER breadcrumbs %]
+[% END #/ WRAPPER sub-header.inc %]
 
 <div class="main container-fluid">
     <div class="row">
@@ -29,7 +34,9 @@
 
         <h1>Old recalls</h1>
         [% IF Koha.Preference('UseRecalls') %]
-            [% INCLUDE 'recalls.inc' %]
+            <div class="page-section">
+                [% INCLUDE 'recalls.inc' %]
+            </div> <!-- /.page-section -->
         [% ELSE %]
             <div class="dialog message">Recalls have not been enabled. Enable the <a href="/cgi-bin/koha/admin/preferences.pl?tab=circulation">UseRecalls</a> system preference to use recalls.</div>
         [% END %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/recalls/recalls_overdue.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/recalls/recalls_overdue.tt
index e2b3a524e8..4c5e49bed4 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/recalls/recalls_overdue.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/recalls/recalls_overdue.tt
@@ -12,11 +12,16 @@
     [% INCLUDE 'cat-search.inc' %]
 [% END %]
 
-<div id="breadcrumbs">
-    <a href="/cgi-bin/koha/mainpage.pl">Home</a>
-    &rsaquo; <a href="/cgi-bin/koha/circ/circulation-home.pl">Circulation</a>
-    &rsaquo; <a href="/cgi-bin/koha/recalls/recalls_overdue.pl">Overdue recalls</a>
-</div>
+[% WRAPPER 'sub-header.inc' %]
+    [% WRAPPER breadcrumbs %]
+        [% WRAPPER breadcrumb_item %]
+            <a href="/cgi-bin/koha/circ/circulation-home.pl">Circulation</a>
+        [% END %]
+        [% WRAPPER breadcrumb_item bc_active= 1 %]
+            <span>Overdue recalls</span>
+        [% END %]
+    [% END #/ WRAPPER breadcrumbs %]
+[% END #/ WRAPPER sub-header.inc %]
 
 <div class="main container-fluid">
     <div class="row">
@@ -30,14 +35,16 @@
         <h1>Overdue recalls</h1>
         [% IF Koha.Preference('UseRecalls') %]
             [% IF recalls.count %]
-                <form method="post" action="/cgi-bin/koha/recalls/recalls_overdue.pl">
-                    <input type="hidden" name="op" value="cancel_multiple_recalls">
-                    <input type="checkbox" id="select_all"> <span id="select_all_text">Select all</span>
-                    [% INCLUDE 'recalls.inc' %]
-                    <fieldset class="action">
-                        <button type="submit" id="cancel_selected" class="btn btn-default btn-sm">Cancel selected recalls</button>
-                    </fieldset>
-                </form>
+                <div class="page-section">
+                    <form method="post" action="/cgi-bin/koha/recalls/recalls_overdue.pl">
+                        <input type="hidden" name="op" value="cancel_multiple_recalls">
+                        <input type="checkbox" id="select_all"> <span id="select_all_text">Select all</span>
+                        [% INCLUDE 'recalls.inc' %]
+                        <fieldset class="action">
+                            <button type="submit" id="cancel_selected" class="btn btn-default btn-sm">Cancel selected recalls</button>
+                        </fieldset>
+                    </form>
+                </div> <!-- /.page-section -->
             [% ELSE %]
                 <div class="dialog message">There are no recalls to show.</div>
             [% END %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/recalls/recalls_queue.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/recalls/recalls_queue.tt
index 5610cc2e85..728ceff73f 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/recalls/recalls_queue.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/recalls/recalls_queue.tt
@@ -12,11 +12,16 @@
     [% INCLUDE 'cat-search.inc' %]
 [% END %]
 
-<div id="breadcrumbs">
-    <a href="/cgi-bin/koha/mainpage.pl">Home</a>
-    &rsaquo; <a href="/cgi-bin/koha/circ/circulation-home.pl">Circulation</a>
-    &rsaquo; <a href="/cgi-bin/koha/recalls/recalls_queue.pl">Recalls queue</a>
-</div>
+[% WRAPPER 'sub-header.inc' %]
+    [% WRAPPER breadcrumbs %]
+        [% WRAPPER breadcrumb_item %]
+            <a href="/cgi-bin/koha/circ/circulation-home.pl">Circulation</a>
+        [% END %]
+        [% WRAPPER breadcrumb_item bc_active= 1 %]
+            <span>Recalls queue</span>
+        [% END %]
+    [% END #/ WRAPPER breadcrumbs %]
+[% END #/ WRAPPER sub-header.inc %]
 
 <div class="main container-fluid">
     <div class="row">
@@ -30,14 +35,16 @@
         <h1>Recalls queue</h1>
         [% IF Koha.Preference('UseRecalls') %]
             [% IF recalls.count %]
-                <form method="post" action="/cgi-bin/koha/recalls/recalls_queue.pl">
-                    <input type="hidden" name="op" value="cancel_multiple_recalls">
-                    <input type="checkbox" id="select_all"> <span id="select_all_text">Select all</span>
-                    [% INCLUDE 'recalls.inc' %]
-                    <fieldset class="action">
-                        <button type="submit" id="cancel_selected" class="btn btn-default btn-sm">Cancel selected recalls</button>
-                    </fieldset>
-                </form>
+                <div class="page-section">
+                    <form method="post" action="/cgi-bin/koha/recalls/recalls_queue.pl">
+                        <input type="hidden" name="op" value="cancel_multiple_recalls">
+                        <input type="checkbox" id="select_all"> <span id="select_all_text">Select all</span>
+                        [% INCLUDE 'recalls.inc' %]
+                        <fieldset class="action">
+                            <button type="submit" id="cancel_selected" class="btn btn-default btn-sm">Cancel selected recalls</button>
+                        </fieldset>
+                    </form>
+                </div> <!-- /.page-section -->
             [% ELSE %]
                 <div class="dialog message">There are no recalls to show.</div>
             [% END %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/recalls/recalls_to_pull.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/recalls/recalls_to_pull.tt
index 2b94c92e82..8ea8f2b0c7 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/recalls/recalls_to_pull.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/recalls/recalls_to_pull.tt
@@ -15,11 +15,16 @@
     [% INCLUDE 'cat-search.inc' %]
 [% END %]
 
-<div id="breadcrumbs">
-    <a href="/cgi-bin/koha/mainpage.pl">Home</a>
-    &rsaquo; <a href="/cgi-bin/koha/circ/circulation-home.pl">Circulation</a>
-    &rsaquo; <a href="/cgi-bin/koha/recalls/recalls_to_pull.pl">Recalls to pull</a>
-</div>
+[% WRAPPER 'sub-header.inc' %]
+    [% WRAPPER breadcrumbs %]
+        [% WRAPPER breadcrumb_item %]
+            <a href="/cgi-bin/koha/circ/circulation-home.pl">Circulation</a>
+        [% END %]
+        [% WRAPPER breadcrumb_item bc_active= 1 %]
+            <span>Recalls to pull</span>
+        [% END %]
+    [% END #/ WRAPPER breadcrumbs %]
+[% END #/ WRAPPER sub-header.inc %]
 
 <div class="main container-fluid">
     <div class="row">
@@ -34,101 +39,103 @@
         The following recalls could be fulfilled by available items.
 
         [% IF Koha.Preference('UseRecalls') %]
-            <div id="recalls">
-                [% IF recalls %]
-                <table id="recalls-table">
-                    <thead>
-                        <tr>
-                            <th class="recall-topull">Pull this many items</th>
-                            <th class="recall-items">Items available</th>
-                            <th class="recall-patrons">Patrons with recalls</th>
-                            <th class="recall-firstpatron">First patron</th>
-                            <th class="recall-title anti-the">Title</th>
-                            <th class="recall-libraries">Libraries</th>
-                            <th class="recall-callnumbers">Available call numbers</th>
-                            <th class="recall-copynumbers">Available copy numbers</th>
-                            <th class="recall-enumeration">Available enumeration</th>
-                            <th class="recall-itemtypes">Available item types</th>
-                            <th class="recall-locations">Available locations</th>
-                            <th class="recall-date title-string">Earliest recall date</th>
-                            <th class="recall-action nosort">&nbsp;</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        [% FOREACH recall IN recalls %]
-                        <tr>
-                            <td class="recall-topull"><b>[% recall.pull_count | html %]</b></td>
-                            <td class="recall-items">[% recall.items_count | html %]</td>
-                            <td class="recall-patrons">[% recall.patrons_count | html %]</td>
-                            <td class="recall-firstpatron"><a href="/cgi-bin/koha/members/moremember.pl?borrowernumber=[% recall.first_recall.patron_id | uri %]">[% recall.first_recall.patron.firstname | html %] [% recall.first_recall.patron.surname | html %]</a></td>
-                            <td class="recall-title">
-                                [% INCLUDE 'biblio-title.inc' biblio=recall.first_recall.biblio link=1 %]
-                                [% IF recall.first_recall.biblio.author %] by [% recall.first_recall.biblio.author | html %][% END %]
-                            </td>
-                            <td class="recall-libraries">
-                                <ul>
-                                    [% FOREACH library IN recall.libraries %]
-                                        <li>[% Branches.GetName( library ) | html %]</li>
-                                    [% END %]
-                                </ul>
-                            </td>
-                            <td class="recall-callnumbers">
-                                <ul>
-                                    [% FOREACH callnumber IN recall.callnumbers %]
-                                        <li>[% callnumber | html %]</li>
-                                    [% END %]
-                                </ul>
-                            </td>
-                            <td class="recall-copynumbers">
-                                <ul>
-                                    [% FOREACH copyno IN recall.copynumbers %]
-                                        <li>[% copyno | html %]</li>
-                                    [% END %]
-                                </ul>
-                            </td>
-                            <td class="recall-enumeration">
-                                <ul>
-                                    [% FOREACH enumchron IN recall.enumchrons %]
-                                        <li>[% enumchron | html %]</li>
-                                    [% END %]
-                                </ul>
-                            </td>
-                            <td class="recall-itemtypes">
-                                <ul>
-                                    [% FOREACH itemtype IN recall.itemtypes %]
-                                        <li>[% ItemTypes.GetDescription( itemtype ) | html %]</li>
-                                    [% END %]
-                                </ul>
-                            </td>
-                            <td class="recall-locations">
-                                <ul>
-                                    [% FOREACH loc IN recall.locations %]
-                                        <li>[% AuthorisedValues.GetByCode('LOC', loc) | html %]</li>
-                                    [% END %]
-                                </ul>
-                            </td>
-                            <td class="recall-date">
-                                <span title="[% recall.first_recall.created_date | html %]">[% recall.first_recall.created_date | $KohaDates %] in [% recall.first_recall.library.branchname | html %]</span>
-                            </td>
-                            <td class="recall-action">
-                                <form action="/cgi-bin/koha/recalls/recalls_to_pull.pl" method="post">
-                                    <input type="hidden" name="recall_id" value="[% recall.first_recall.id | html %]">
-                                    <input type="hidden" name="op" value="cancel">
-                                    [% IF recall.first_recall.in_transit %]
-                                        <button type="submit" class="btn btn-default cancelreturn"><i class="fa fa-times"></i> Cancel recall and return to: [% Branches.GetName(recall.first_recall.item.homebranch) | html %]</button>
-                                    [% ELSE %]
-                                        <button type="submit" class="btn btn-default cancel"><i class="fa fa-times"></i> Cancel recall</button>
-                                    [% END %]
-                                </form>
-                            </td>
-                        </tr>
-                        [% END %]
-                    </tbody>
-                </table>
-                [% ELSE %]
-                    <div class="dialog message">There are no recalls to pull.</div>
-                [% END %]
-            </div>
+            [% IF recalls %]
+                <div id="recalls" class="page-section">
+                    <table id="recalls-table">
+                        <thead>
+                            <tr>
+                                <th class="recall-topull">Pull this many items</th>
+                                <th class="recall-items">Items available</th>
+                                <th class="recall-patrons">Patrons with recalls</th>
+                                <th class="recall-firstpatron">First patron</th>
+                                <th class="recall-title anti-the">Title</th>
+                                <th class="recall-libraries">Libraries</th>
+                                <th class="recall-callnumbers">Available call numbers</th>
+                                <th class="recall-copynumbers">Available copy numbers</th>
+                                <th class="recall-enumeration">Available enumeration</th>
+                                <th class="recall-itemtypes">Available item types</th>
+                                <th class="recall-locations">Available locations</th>
+                                <th class="recall-date title-string">Earliest recall date</th>
+                                <th class="recall-action nosort">&nbsp;</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            [% FOREACH recall IN recalls %]
+                            <tr>
+                                <td class="recall-topull"><b>[% recall.pull_count | html %]</b></td>
+                                <td class="recall-items">[% recall.items_count | html %]</td>
+                                <td class="recall-patrons">[% recall.patrons_count | html %]</td>
+                                <td class="recall-firstpatron"><a href="/cgi-bin/koha/members/moremember.pl?borrowernumber=[% recall.first_recall.patron_id | uri %]">[% recall.first_recall.patron.firstname | html %] [% recall.first_recall.patron.surname | html %]</a></td>
+                                <td class="recall-title">
+                                    [% INCLUDE 'biblio-title.inc' biblio=recall.first_recall.biblio link=1 %]
+                                    [% IF recall.biblio.author %] by [% recall.biblio.author | html %][% END %]
+                                    [% recall.item.enumchron | html %]
+                                    [% IF ( recall.item ) %]<br><em>Barcode: [% recall.item.barcode | html %]</em>[% END %]
+                                </td>
+                                <td class="recall-libraries">
+                                    <ul>
+                                        [% FOREACH library IN recall.libraries %]
+                                            <li>[% Branches.GetName( library ) | html %]</li>
+                                        [% END %]
+                                    </ul>
+                                </td>
+                                <td class="recall-callnumbers">
+                                    <ul>
+                                        [% FOREACH callnumber IN recall.callnumbers %]
+                                            <li>[% callnumber | html %]</li>
+                                        [% END %]
+                                    </ul>
+                                </td>
+                                <td class="recall-copynumbers">
+                                    <ul>
+                                        [% FOREACH copyno IN recall.copynumbers %]
+                                            <li>[% copyno | html %]</li>
+                                        [% END %]
+                                    </ul>
+                                </td>
+                                <td class="recall-enumeration">
+                                    <ul>
+                                        [% FOREACH enumchron IN recall.enumchrons %]
+                                            <li>[% enumchron | html %]</li>
+                                        [% END %]
+                                    </ul>
+                                </td>
+                                <td class="recall-itemtypes">
+                                    <ul>
+                                        [% FOREACH itemtype IN recall.itemtypes %]
+                                            <li>[% ItemTypes.GetDescription( itemtype ) | html %]</li>
+                                        [% END %]
+                                    </ul>
+                                </td>
+                                <td class="recall-locations">
+                                    <ul>
+                                        [% FOREACH loc IN recall.locations %]
+                                            <li>[% AuthorisedValues.GetByCode('LOC', loc) | html %]</li>
+                                        [% END %]
+                                    </ul>
+                                </td>
+                                <td class="recall-date">
+                                    <span title="[% recall.first_recall.created_date | html %]">[% recall.first_recall.created_date | $KohaDates %] in [% recall.first_recall.library.branchname | html %]</span>
+                                </td>
+                                <td class="recall-action">
+                                    <form action="/cgi-bin/koha/recalls/recalls_to_pull.pl" method="post">
+                                        <input type="hidden" name="recall_id" value="[% recall.first_recall.id | html %]">
+                                        <input type="hidden" name="op" value="cancel">
+                                        [% IF recall.first_recall.in_transit %]
+                                            <button type="submit" class="btn btn-default btn-sm cancelreturn"><i class="fa fa-times"></i> Cancel recall and return to: [% Branches.GetName(recall.first_recall.item.homebranch) | html %]</button>
+                                        [% ELSE %]
+                                            <button type="submit" class="btn btn-default btn-sm cancel"><i class="fa fa-times"></i> Cancel recall</button>
+                                        [% END %]
+                                    </form>
+                                </td>
+                            </tr>
+                            [% END %]
+                        </tbody>
+                    </table>
+                </div> <!-- /#recalls.page-section -->
+            [% ELSE %]
+                <div class="dialog message">There are no recalls to pull.</div>
+            [% END %]
         [% ELSE %]
             <div class="dialog message">Recalls have not been enabled. Enable the <a href="/cgi-bin/koha/admin/preferences.pl?tab=circulation">UseRecalls</a> system preference to use recalls.</div>
         [% END %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/recalls/recalls_waiting.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/recalls/recalls_waiting.tt
index a0686c1fa4..7d414fe03b 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/recalls/recalls_waiting.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/recalls/recalls_waiting.tt
@@ -12,11 +12,16 @@
     [% INCLUDE 'cat-search.inc' %]
 [% END %]
 
-<div id="breadcrumbs">
-    <a href="/cgi-bin/koha/mainpage.pl">Home</a>
-    &rsaquo; <a href="/cgi-bin/koha/circ/circulation-home.pl">Circulation</a>
-    &rsaquo; <a href="/cgi-bin/koha/recalls/recalls_waiting.pl">Recalls awaiting pickup</a>
-</div>
+[% WRAPPER 'sub-header.inc' %]
+    [% WRAPPER breadcrumbs %]
+        [% WRAPPER breadcrumb_item %]
+            <a href="/cgi-bin/koha/circ/circulation-home.pl">Circulation</a>
+        [% END %]
+        [% WRAPPER breadcrumb_item bc_active= 1 %]
+            <span>Recalls awaiting pickup</span>
+        [% END %]
+    [% END #/ WRAPPER breadcrumbs %]
+[% END #/ WRAPPER sub-header.inc %]
 
 <div class="main container-fluid">
     <div class="row">
@@ -76,8 +81,8 @@
                                                     <input type="hidden" name="recall_id" value="[% recall.id | html %]">
                                                     <input type="hidden" name="op" value="modify">
                                                     <fieldset class="action">
-                                                        <input type="submit" name="revert" class="revert_recall" value="Revert waiting status">
-                                                        <input type="submit" name="expire" class="expire_recall" value="Expire recall">
+                                                        <button type="submit" name="revert" value="revert" class="btn btn-default btn-sm revert_recall"><i class="fa fa-undo"></i> Revert waiting status</button>
+                                                        <button type="submit" name="expire" value="expire" class="btn btn-default btn-sm expire_recall"><i class="fa fa-undo"></i> Expire recall</button>
                                                     </fieldset>
                                                 </form>
                                             </td>
@@ -104,15 +109,10 @@
                                         [% FOREACH recall IN over %]<tr>
                                             <td class="recall-waitingdate">[% recall.waiting_date | $KohaDates %]</td>
                                             <td class="recall-title">
-                                                <a href="/cgi-bin/koha/catalogue/detail.pl?biblionumber=[% recall.biblio_id | uri %]">
-                                                    [% recall.biblio.title | html %]
-                                                    [% FOREACH s IN recall.biblio.subtitles %]
-                                                        [% s | html %]
-                                                    [% END %]
-                                                    [% recall.item.enumchron | html %]
-                                                </a>
-                                                [% recall.biblio.author | html %]
-                                                <br><i>Barcode: [% recall.item.barcode | html %]</i>
+                                                [% INCLUDE 'biblio-title.inc' biblio=recall.biblio link = 1 %]
+                                                [% IF recall.biblio.author %] by [% recall.biblio.author | html %][% END %]
+                                                [% recall.item.enumchron | html %]
+                                                [% IF ( recall.item.barcode ) %]<br><em>Barcode: [% recall.item.barcode | html %]</em>[% END %]
                                             </td>
                                             <td class="recall-patron">
                                                 <a href="/cgi-bin/koha/members/moremember.pl?borrowernumber=[% recall.patron_id | uri %]">[% recall.patron.firstname | html %] [% recall.patron.surname | html %]</a>
@@ -125,8 +125,8 @@
                                                     <input type="hidden" name="recall_id" value="[% recall.id | html %]">
                                                     <input type="hidden" name="op" value="modify">
                                                     <fieldset class="action">
-                                                        <input type="submit" name="revert" class="revert_recall" value="Revert waiting status">
-                                                        <input type="submit" name="expire" class="expire_recall" value="Expire recall">
+                                                        <button type="submit" name="revert" value="revert" class="btn btn-default btn-sm revert_recall"><i class="fa fa-undo"></i> Revert waiting status</button>
+                                                        <button type="submit" name="expire" value="expire" class="btn btn-default btn-sm expire_recall"><i class="fa fa-undo"></i> Expire recall</button>
                                                     </fieldset>
                                                 </form>
                                             </td>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/recalls/request.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/recalls/request.tt
index eb6b27d38c..e335ba0256 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/recalls/request.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/recalls/request.tt
@@ -4,7 +4,7 @@
 [% USE KohaDates %]
 [% SET footerjs = 1 %]
 [% INCLUDE 'doc-head-open.inc' %]
-<title>Confirm recalls &rsaquo; Recalls &rsaquo; Koha</title>
+<title>Existing recalls &rsaquo; Recalls &rsaquo; Koha</title>
 [% INCLUDE 'doc-head-close.inc' %]
 </head>
 <body id="recalls-request" class="catalog">
@@ -12,12 +12,19 @@
     [% INCLUDE 'circ-search.inc' %]
 [% END %]
 
-<div id="breadcrumbs">
-    <a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo;
-    <a href="/cgi-bin/koha/catalogue/search.pl">Catalog</a> &rsaquo;
-    <a href="/cgi-bin/koha/catalogue/detail.pl?biblionumber=[% biblio.biblionumber | uri %]">[% biblio.title | html %]</a> &rsaquo;
-    Confirm recalls on [% biblio.title | html %]
-</div>
+[% WRAPPER 'sub-header.inc' %]
+    [% WRAPPER breadcrumbs %]
+        [% WRAPPER breadcrumb_item %]
+            <a href="/cgi-bin/koha/catalogue/search.pl">Catalog</a>
+        [% END %]
+        [% WRAPPER breadcrumb_item %]
+            [% INCLUDE 'biblio-title.inc' link = 1 %]
+        [% END %]
+        [% WRAPPER breadcrumb_item bc_active= 1 %]
+            <span>Existing recalls</span>
+        [% END %]
+    [% END #/ WRAPPER breadcrumbs %]
+[% END #/ WRAPPER sub-header.inc %]
 
 <div class="main container-fluid">
 <div class="row">
@@ -28,15 +35,17 @@
 
     [% IF Koha.Preference('UseRecalls') %]
         [% IF recalls.count %]
-            <form method="post" action="/cgi-bin/koha/recalls/request.pl">
-                <input type="hidden" name="op" value="cancel_multiple_recalls">
-                <input type="hidden" name="biblionumber" value="[% biblio.biblionumber | html %]">
-                <input type="checkbox" id="select_all"> <span id="select_all_text">Select all</span>
-                [% INCLUDE 'recalls.inc' %]
-                <fieldset class="action">
-                    <button type="submit" id="cancel_selected" class="btn btn-default btn-sm">Cancel selected recalls</button>
-                </fieldset>
-            </form>
+            <div class="page-section">
+                <form method="post" action="/cgi-bin/koha/recalls/request.pl">
+                    <input type="hidden" name="op" value="cancel_multiple_recalls">
+                    <input type="hidden" name="biblionumber" value="[% biblio.biblionumber | html %]">
+                    <input type="checkbox" id="select_all"> <span id="select_all_text">Select all</span>
+                    [% INCLUDE 'recalls.inc' %]
+                    <fieldset class="action">
+                        <button type="submit" id="cancel_selected" class="btn btn-default btn-sm">Cancel selected recalls</button>
+                    </fieldset>
+                </form>
+            </div> <!-- /.page-section -->
         [% ELSE %]
             <div class="dialog message">No recalls have been made.</div>
         [% END %]
-- 
2.30.2