From 693dde521d33410f785c67a434421b19956e3bb9 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Sat, 29 Apr 2017 08:40:26 +0000
Subject: [PATCH] Bug 18529 - Template cleanup of patron clubs pages

This patch addresses template issues with the newly-added patron clubs
pages.

- Move Clubs tab out of second position in Circulation page tabs.
- Link patron name in enrollments list to the patron record
- Make page titles on some pages more specific
- Correct label "for" attributes so that it matches input id
- Correst style of buttons: Buttons in tables must be "btn-xs," all
  Bootstrap buttons must have "btn-default."
- Correct "Edit" icons: Should be "fa-pencil"

This patch also revises the club template editing form to make it more
consistent with similar interfaces in Koha and (hopefully) make it more
clear.

To test, apply the patch and test adding clubs and club templates and
enrolling patrons in clubs via the staff client and OPAC. Confirm that
everything looks and work okay.

Signed-off-by: Josef Moravec <josef.moravec@gmail.com>

Signed-off-by: Marcel de Rooy <m.de.rooy@rijksmuseum.nl>

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
---
 .../intranet-tmpl/prog/css/staff-global.css   |  10 +-
 .../prog/en/modules/circ/circulation.tt       |  21 +-
 .../prog/en/modules/clubs/club-enrollments.tt |   9 +-
 .../prog/en/modules/clubs/clubs-add-modify.tt | 201 +++++-----
 .../prog/en/modules/clubs/clubs.tt            |  51 +--
 .../prog/en/modules/clubs/patron-clubs-tab.tt |  25 +-
 .../prog/en/modules/clubs/patron-enroll.tt    |   4 +-
 .../en/modules/clubs/templates-add-modify.tt  | 348 ++++++++++--------
 .../bootstrap/en/modules/clubs/clubs-tab.tt   |  24 +-
 .../bootstrap/en/modules/clubs/enroll.tt      |   2 +-
 10 files changed, 366 insertions(+), 329 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/css/staff-global.css b/koha-tmpl/intranet-tmpl/prog/css/staff-global.css
index 175fce8472..fc5a854d9d 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/staff-global.css
+++ b/koha-tmpl/intranet-tmpl/prog/css/staff-global.css
@@ -585,8 +585,14 @@ fieldset.brief ol, fieldset.brief li {
 	font-size : 95%;
 }
 
-fieldset.brief div.hint, fieldset.rows div.hint, div.yui-u div.hint {
-	margin-bottom : .4em;
+fieldset.brief div.hint,
+fieldset.rows div.hint,
+div.yui-u div.hint {
+    margin-bottom : .4em;
+}
+
+fieldset.rows div.hint {
+    margin-left : 7.5em;
 }
 
 div.yui-b fieldset.brief {
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt
index eed434098f..a0855e8417 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt
@@ -895,16 +895,6 @@ No patron matched <span class="ex">[% message | html %]</span>
         [% END %]
     </li>
 
-    [% SET enrollments = patron.get_club_enrollments(1) %]
-    [% SET enrollable  = patron.get_enrollable_clubs(0,1) %]
-    [% IF CAN_user_clubs && ( enrollable.count || enrollments.count ) %]
-        <li>
-            <a id="clubs-tab-link" href="#clubs-tab">
-                Clubs ([% enrollments.count %]/[% enrollable.count %])
-            </a>
-        </li>
-    [% END %]
-
     [% IF relatives_issues_count %]
         <li><a id="relatives-issues-tab" href="#relatives-issues">Relatives' checkouts</a></li>
     [% END %]
@@ -924,6 +914,17 @@ No patron matched <span class="ex">[% message | html %]</span>
     [% END %]
 
     <li><a id="debarments-tab-link" href="#reldebarments">[% debarments.count %] Restrictions</a></li>
+
+    [% SET enrollments = patron.get_club_enrollments(1) %]
+    [% SET enrollable  = patron.get_enrollable_clubs(0,1) %]
+    [% IF CAN_user_clubs && ( enrollable.count || enrollments.count ) %]
+        <li>
+            <a id="clubs-tab-link" href="#clubs-tab">
+                Clubs ([% enrollments.count %]/[% enrollable.count %])
+            </a>
+        </li>
+    [% END %]
+
 </ul>
 
 <!-- SUMMARY : TODAY & PREVIOUS ISSUES -->
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/club-enrollments.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/club-enrollments.tt
index 738b05fd83..94e7148f6e 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/club-enrollments.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/club-enrollments.tt
@@ -40,7 +40,6 @@
                         <tr>
                             <th>Name</th>
                             <th>Card number</th>
-                            <th>&nbsp;</th>
                         </tr>
                     </thead>
 
@@ -49,17 +48,11 @@
                             [% SET p = e.patron %]
                             <tr>
                                 <td>
-                                    [% p.firstname %] [% p.surname %]
+                                    <a href="/cgi-bin/koha/members/moremember.pl?borrowernumber=[% p.id %]">[% p.surname %], [% p.firstname %]</a>
                                 </td>
                                 <td>
                                     [% p.cardnumber %]
                                 </td>
-                                <td>
-                                    <a class="btn btn-sm" href="/cgi-bin/koha/members/moremember.pl?borrowernumber=[% p.id %]">
-                                        <i class="fa fa-eye"></i>
-                                        View patron
-                                    </a>
-                                </td>
                             </tr>
                         [% END %]
                     </tbody>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/clubs-add-modify.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/clubs-add-modify.tt
index 51f4a59723..ec76ded89b 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/clubs-add-modify.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/clubs-add-modify.tt
@@ -3,7 +3,13 @@
 [% USE AuthorisedValues %]
 [% SET AuthorisedValuesCategories = AuthorisedValues.GetCategories %]
 [% INCLUDE 'doc-head-open.inc' %]
-<title>Koha &rsaquo; Tools &rsaquo; Patron clubs &rsaquo; Club</title>
+<title>Koha &rsaquo; Tools &rsaquo; Patron clubs &rsaquo;
+    [% IF club %]
+        Modify club [% club.name %]
+    [% ELSE %]
+        Create a new [% club_template.name %] club
+    [% END %]
+</title>
 [% INCLUDE 'doc-head-close.inc' %]
 [% INCLUDE 'calendar.inc' %]
 </head>
@@ -11,105 +17,112 @@
 <body id="clubs_add_modify" class="clubs">
 [% 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; <a href="clubs.pl">Patron clubs</a> &rsaquo; Add / modify club</div>
-
-<div class="yui-t7">
-    <div class="yui-main">
-        <form method="post" class="validated">
-            <input type="hidden" name="id" value="[% club.id %]" />
-            <input type="hidden" name="club_template_id" value="[% club_template.id %]" />
-
-            <fieldset class="rows">
-
-                <legend>
-                    [% IF club %]
-                        Modify club <i>[% club.name %]</i>
-                    [% ELSE %]
-                        Create a new <i>[% club_template.name %]</i> club
-                    [% END %]
-                </legend>
-
-                <ol>
-                    <li>
-                        <label class="required" for="name">Name:</label>
-                        <input id="club-name" name="name" type="text" value="[% club.name %]" required="required"/>
-                        <span class="required">Required</span>
-                    </li>
-
-                    <li>
-                        <label for="description">Description:</label>
-                        <input id="club-template-name" name="description" type="text" value="[% club.description %]" />
-                    </li>
-
-                    <li>
-                        <label for="date_start">Start date:</label>
-                        <input name="date_start" id="from" size="10" readonly="readonly" class="datepickerfrom" value="[% club.date_start | $KohaDates %]">
-                    </li>
-
-                    <li>
-                        <label for="date_end">End date:</label>
-                        <input name="date_end" id="to" size="10" readonly="readonly" class="datepickerto" value="[% club.date_end | $KohaDates %]" >
-                    </li>
-
-                    <li>
-                        <label for="name">Library:</label>
-                        <select name="branchcode" id="club-template-branchcode">
-                            <option value="">&nbsp</option>
-                            [% PROCESS options_for_libraries libraries => Branches.all( selected => club.branch.branchcode ) %]
-                        </select>
-                    </li>
-
-                    [% IF club %]
-                        [% FOREACH f IN club.club_fields %]
-                            <li>
-                                <input type="hidden" name="club_template_field_id" value="[% f.club_template_field.id %]" />
-                                <input type="hidden" name="club_field_id" value="[% f.id %]" />
-
-                                <label for="club_field">[% f.club_template_field.name %]</label>
-                                [% IF f.club_template_field.authorised_value_category %]
-                                    <select name="club_field">
-                                        [% FOREACH a IN AuthorisedValues.Get( f.club_template_field.authorised_value_category ) %]
-                                            [% IF a.authorised_value == f.value %]
-                                                <option value="[% a.authorised_value %]" selected="selected">[% a.lib %]</option>
-                                            [% ELSE %]
+<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; <a href="clubs.pl">Patron clubs</a> &rsaquo;
+    [% IF club %]
+        Modify club <i>[% club.name %]</i>
+    [% ELSE %]
+        Create a new <i>[% club_template.name %]</i> club
+    [% END %]
+</div>
+
+<div id="doc" class="yui-t7">
+    <div id="bd">
+        <div class="yui-main">
+            <form method="post" class="validated">
+                <input type="hidden" name="id" value="[% club.id %]" />
+                <input type="hidden" name="club_template_id" value="[% club_template.id %]" />
+
+                <fieldset class="rows">
+
+                    <legend>
+                        [% IF club %]
+                            Modify club <i>[% club.name %]</i>
+                        [% ELSE %]
+                            Create a new <i>[% club_template.name %]</i> club
+                        [% END %]
+                    </legend>
+
+                    <ol>
+                        <li>
+                            <label class="required" for="club-name">Name:</label>
+                            <input id="club-name" name="name" type="text" value="[% club.name %]" required="required"/>
+                            <span class="required">Required</span>
+                        </li>
+
+                        <li>
+                            <label for="club-template-name">Description:</label>
+                            <input id="club-template-name" name="description" type="text" value="[% club.description %]" size="40" />
+                        </li>
+
+                        <li>
+                            <label for="from">Start date:</label>
+                            <input name="date_start" id="from" size="10" readonly="readonly" class="datepickerfrom" value="[% club.date_start | $KohaDates %]">
+                        </li>
+
+                        <li>
+                            <label for="to">End date:</label>
+                            <input name="date_end" id="to" size="10" readonly="readonly" class="datepickerto" value="[% club.date_end | $KohaDates %]" >
+                        </li>
+
+                        <li>
+                            <label for="club-template-branchcode">Library:</label>
+                            <select name="branchcode" id="club-template-branchcode">
+                                <option value=""></option>
+                                [% PROCESS options_for_libraries libraries => Branches.all( selected => club.branch.branchcode ) %]
+                            </select>
+                        </li>
+
+                        [% IF club %]
+                            [% FOREACH f IN club.club_fields %]
+                                <li>
+                                    <input type="hidden" name="club_template_field_id" value="[% f.club_template_field.id %]" />
+                                    <input type="hidden" name="club_field_id" value="[% f.id %]" />
+
+                                    <label for="club_field_[% f.club_template_field_id %]">[% f.club_template_field.name %]</label>
+                                    [% IF f.club_template_field.authorised_value_category %]
+                                        <select name="club_field" id="club_field_[% f.club_template_field_id %]">
+                                            [% FOREACH a IN AuthorisedValues.Get( f.club_template_field.authorised_value_category ) %]
+                                                [% IF a.authorised_value == f.value %]
+                                                    <option value="[% a.authorised_value %]" selected="selected">[% a.lib %]</option>
+                                                [% ELSE %]
+                                                    <option value="[% a.authorised_value %]">[% a.lib %]</option>
+                                                [% END %]
+                                            [% END %]
+                                        </select>
+                                    [% ELSE %]
+                                        <input type="text" name="club_field" id="club_field_[% f.club_template_field_id %]" value="[% f.value %]" size="40" />
+                                    [% END %]
+                                </li>
+                            [% END %]
+                        [% ELSE %]
+                            [% FOREACH f IN club_template.club_template_fields %]
+                                <li>
+                                    <input type="hidden" name="club_template_field_id" value="[% f.id %]" />
+
+                                    <label for="club_template_field_[% f.id %]">[% f.name %]</label>
+                                    [% IF f.authorised_value_category %]
+                                        <select name="club_field" id="club_template_field_[% f.id %]">
+                                            [% FOREACH a IN AuthorisedValues.Get( f.authorised_value_category ) %]
                                                 <option value="[% a.authorised_value %]">[% a.lib %]</option>
                                             [% END %]
-                                        [% END %]
-                                    </select>
-                                [% ELSE %]
-                                    <input type="text" name="club_field" value="[% f.value %]" />
-                                [% END %]
-                            </li>
+                                        </select>
+                                    [% ELSE %]
+                                        <input type="text" name="club_field" id="club_template_field_[% f.id %]" size="40" />
+                                    [% END %]
+                                </li>
+                            [% END %]
                         [% END %]
-                    [% ELSE %]
-                        [% FOREACH f IN club_template.club_template_fields %]
-                            <li>
-                                <input type="hidden" name="club_template_field_id" value="[% f.id %]" />
-
-                                <label for="club_field">[% f.name %]</label>
-                                [% IF f.authorised_value_category %]
-                                    <select name="club_field">
-                                        [% FOREACH a IN AuthorisedValues.Get( f.authorised_value_category ) %]
-                                            <option value="[% a.authorised_value %]">[% a.lib %]</option>
-                                        [% END %]
-                                    </select>
-                                [% ELSE %]
-                                    <input type="text" name="club_field" />
-                                [% END %]
-                            </li>
-                        [% END %]
-                    [% END %]
 
-                </ol>
+                    </ol>
 
-            </fieldset>
+                </fieldset>
 
-            <fieldset class="action">
-                <input type="submit" class="btn btn-default" value="Save" />
-                <a href="clubs.pl" class="cancel">Cancel</a>
-            </fieldset>
-        </form>
+                <fieldset class="action">
+                    <input type="submit" value="Save" />
+                    <a href="clubs.pl" class="cancel">Cancel</a>
+                </fieldset>
+            </form>
+        </div>
     </div>
-</div>
 
 [% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/clubs.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/clubs.tt
index 372742340a..6c90814b2f 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/clubs.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/clubs.tt
@@ -15,7 +15,7 @@
             "sPaginationType": "four_button",
             "sDom": 'C<"top pager"ilpf><"#filter_c">tr<"bottom pager"ip>',
             "aoColumnDefs": [
-                    { "aTargets": [ -1, -2 ], "bSortable": false, "bSearchable": false },
+                { "aTargets": [ -1, -2 ], "bSortable": false, "bSearchable": false },
             ]
         } ));
 
@@ -23,7 +23,7 @@
             "sPaginationType": "four_button",
             "sDom": 'C<"top pager"ilpf><"#filter_c">tr<"bottom pager"ip>',
             "aoColumnDefs": [
-                    { "aTargets": [ -1, -2 ], "bSortable": false, "bSearchable": false },
+                { "aTargets": [ -1, -2, -3 ], "bSortable": false, "bSearchable": false },
             ]
         } ));
     });
@@ -102,7 +102,7 @@
                 [% IF CAN_user_clubs_edit_templates %]
                     <div class="btn-toolbar">
                         <div class="btn-group">
-                            <a class="btn btn-default" href="templates-add-modify.pl"><i class="fa fa-plus"></i> New club template</a>
+                            <a class="btn btn-sm btn-default" href="templates-add-modify.pl"><i class="fa fa-plus"></i> New club template</a>
                         </div>
                     </div>
                 [% END %]
@@ -143,14 +143,14 @@
                                     <td>[% Branches.GetName( t.branchcode ) %]</td>
                                     <td>
                                         [% IF CAN_user_clubs_edit_templates %]
-                                            <a class="btn btn-default" style="white-space:nowrap"  href="templates-add-modify.pl?id=[% t.id %]">
-                                                <i class="fa fa-edit"></i> Edit
+                                            <a class="btn btn-xs btn-default" style="white-space:nowrap"  href="templates-add-modify.pl?id=[% t.id %]">
+                                                <i class="fa fa-pencil"></i> Edit
                                             </a>
                                         [% END %]
                                     </td>
                                     <td>
                                         [% IF CAN_user_clubs_edit_templates %]
-                                            <a class="btn btn-default" href="#" onclick='ConfirmDeleteTemplate([% t.id %], "[% t.name | html %]", $(this) ); return false;'>
+                                            <a class="btn btn-xs btn-default" href="#" onclick='ConfirmDeleteTemplate([% t.id %], "[% t.name | html %]", $(this) ); return false;'>
                                                 <i class="fa fa-trash"></i> Delete
                                             </a>
                                         [% END %]
@@ -173,9 +173,9 @@
                     <div class="btn-toolbar">
                         <div class="btn-group">
                             [% IF club_templates %]
-                                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-plus"></i> New club <span class="caret"></span></button>
+                                <button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-plus"></i> New club <span class="caret"></span></button>
                             [% ELSE %]
-                                <button disabled="disabled" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-plus"></i> New club <span class="caret"></span></button>
+                                <button disabled="disabled" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-plus"></i> New club <span class="caret"></span></button>
                             [% END %]
                             <ul class="dropdown-menu">
                                 [% FOREACH t IN club_templates %]
@@ -200,6 +200,7 @@
                             <th>Enrolled patrons</th>
                             <th>&nbsp;</th>
                             <th>&nbsp;</th>
+                            <th>&nbsp;</th>
                         </tr>
                     </thead>
 
@@ -237,20 +238,26 @@
                                     </td>
                                     <td>
                                         [% c.club_enrollments.count %]
-                                        <a class="btn btn-xs" href="club-enrollments.pl?id=[% c.id %]">
-                                            View enrollments
+                                    </td>
+                                    <td class="actions">
+                                        [% IF ( c.club_enrollments.count ) %]
+                                            <a class="btn btn-xs btn-default" href="club-enrollments.pl?id=[% c.id %]">
+                                        [% ELSE %]
+                                            <a class="btn btn-xs btn-default disabled" href="club-enrollments.pl?id=[% c.id %]">
+                                        [% END %]
+                                            <i class="fa fa-list-ul"></i> Enrollments
                                         </a>
                                     </td>
-                                    <td>
+                                    <td class="actions">
                                         [% IF CAN_user_clubs_edit_clubs %]
-                                            <a class="btn btn-default" style="white-space:nowrap" href="clubs-add-modify.pl?id=[% c.id %]">
-                                                <i class="fa fa-edit"></i> Edit
+                                            <a class="btn btn-xs btn-default" href="clubs-add-modify.pl?id=[% c.id %]">
+                                                <i class="fa fa-pencil"></i> Edit
                                             </a>
                                         [% END %]
                                     </td>
-                                    <td>
+                                    <td class="actions">
                                         [% IF CAN_user_clubs_edit_clubs %]
-                                            <a class="btn btn-default" href="#" onclick='ConfirmDeleteClub([% c.id %], "[% c.name | html %]", $(this) ); return false;'>
+                                            <a class="btn btn-xs btn-default" href="#" onclick='ConfirmDeleteClub([% c.id %], "[% c.name | html %]", $(this) ); return false;'>
                                                 <i class="fa fa-trash"></i> Delete
                                             </a>
                                         [% END %]
@@ -259,18 +266,18 @@
                             [% END %]
                         [% ELSE %]
                             <tr>
-                                <td colspan="8">
+                                <td colspan="11">
                                     No clubs defined.
                                 </td>
-                            </td>
+                            </tr>
                         [% END %]
                     </tbody>
-                </table>
-            </div>
-        </div>
+                </table> <!-- /.clubs-table -->
+            </div> <!-- /.yui-b -->
+        </div> <!-- /.yui-main -->
         <div class="yui-b noprint">
             [% INCLUDE 'tools-menu.inc' %]
         </div>
-    </div>
-</div>
+    </div> <!-- /#bd -->
+
 [% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/patron-clubs-tab.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/patron-clubs-tab.tt
index 30cb710724..af078b4d36 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/patron-clubs-tab.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/patron-clubs-tab.tt
@@ -1,13 +1,10 @@
 [% USE KohaDates %]
 
 [% IF enrollments %]
+    <h4>Clubs currently enrolled in</h4>
+
     <table>
         <thead>
-            <tr>
-                <th colspan="4">
-                    Clubs currently enrolled in
-                </th>
-            </tr>
             <tr>
                 <th>Name</th>
                 <th>Description</th>
@@ -24,9 +21,9 @@
                     <td>[% e.date_enrolled | $KohaDates %]</td>
                     [% IF CAN_user_clubs_enroll %]
                         <td>
-                            <a class="btn btn-xs" onclick="cancelEnrollment( [% e.id %] )">
+                            <button class="btn btn-xs btn-default" onclick="cancelEnrollment( [% e.id %] )">
                                 <i class="fa fa-remove"></i> Cancel
-                            </a>
+                            </button>
                         </td>
                     [% END %]
                 </tr>
@@ -36,13 +33,11 @@
 [% END %]
 
 [% IF clubs %]
+
+    <h4>Clubs not enrolled in</h4>
+
     <table>
         <thead>
-            <tr>
-                <th colspan="3">
-                    Clubs not enrolled in
-                </th>
-            </tr>
             <tr>
                 <th>Name</th>
                 <th>Description</th>
@@ -56,10 +51,10 @@
                     <td>[% c.name %]</td>
                     <td>[% c.description %]</td>
                     [% IF CAN_user_clubs_enroll %]
-                        <td>
-                            <a class="btn btn-xs" onclick="loadEnrollmentForm([% c.id %])">
+                        <td class="action">
+                            <button class="btn btn-xs btn-default" onclick="loadEnrollmentForm([% c.id %])">
                                 <i class="fa fa-plus"></i> Enroll
-                            </a>
+                            </button>
                         </td>
                     [% END %]
                 </tr>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/patron-enroll.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/patron-enroll.tt
index 5b938d8bb0..db3d5442e0 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/patron-enroll.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/patron-enroll.tt
@@ -28,8 +28,8 @@
                 [% END %]
 
                 <li>
-                    <a href="#" class="btn btn-default" onclick="addEnrollment(); return false;"><i class="fa fa-plus"></i> Finish enrollment</a>
-                    <a href="#" onclick="showClubs(); return false;">Cancel</a>
+                    <a href="#" class="btn btn-sm btn-default" onclick="addEnrollment(); return false;">Finish enrollment</a>
+                    <a class="cancel" href="#" onclick="showClubs(); return false;">Cancel</a>
                 </li>
             </ol>
         </fieldset>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/templates-add-modify.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/templates-add-modify.tt
index 16d0106207..e90a5dc192 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/templates-add-modify.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/clubs/templates-add-modify.tt
@@ -1,165 +1,194 @@
 [% USE Branches %]
 [% USE AuthorisedValues %]
 [% INCLUDE 'doc-head-open.inc' %]
-<title>Koha &rsaquo; Tools &rsaquo; Patron clubs &rsaquo; Club template</title>
+<title>Koha &rsaquo; Tools &rsaquo; Patron clubs &rsaquo;
+    [% IF club_template %]
+        Modify club template [% club_template.name %]
+    [% ELSE %]
+        Create a new club template
+    [% END %]
+</title>
 [% INCLUDE 'doc-head-close.inc' %]
+<style type="text/css">
+    .club-field,
+    .enrollment-field {
+        border-top: 1px solid #DDD;
+    }
+</style>
 </head>
 
 <body id="clubs_templates_add_modify" class="clubs">
 [% 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; <a href="clubs.pl">Patron clubs</a> &rsaquo; Add / modify club template</div>
-
-<div class="yui-t7">
-    <div class="yui-main">
-        <form method="post" class="validated">
-            <input type="hidden" name="id" value="[% club_template.id %]" />
+<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; <a href="clubs.pl">Patron clubs</a> &rsaquo;
+    [% IF club_template %]
+        Modify club template <i>[% club_template.name %]</i>
+    [% ELSE %]
+        Create a new club template
+    [% END %]
+</div>
 
-            <fieldset class="rows">
+<div id="doc" class="yui-t7">
+    <div id="bd">
+        <div class="yui-main">
+            <form method="post" class="validated">
+                <input type="hidden" name="id" value="[% club_template.id %]" />
 
-                <legend>
+                <h2>
                     [% IF club_template %]
                         Modify club template <i>[% club_template.name %]</i>
                     [% ELSE %]
                         Create a new club template
                     [% END %]
-                </legend>
-
-                <ol>
-                    <li>
-                        <label class="required" for="name">Name:</label>
-                        <input id="club-template-name" name="name" type="text" value="[% club_template.name %]" required="required"/>
-                        <span class="required">Required</span>
-                    </li>
-
-                    <li>
-                        <label for="description">Description:</label>
-                        <input id="club-template-description" name="description" type="text" value="[% club_template.description %]" />
-                    </li>
-
-                    <li>
-                        <label for="is_enrollable_from_opac">Allow public enrollment:</label>
-                        [% IF club_template.is_enrollable_from_opac %]
-                            <input type="checkbox" id="club-template-is-enrollable-from-opac" name="is_enrollable_from_opac" checked="checked" />
-                        [% ELSE %]
-                            <input type="checkbox" id="club-template-is-enrollable-from-opac" name="is_enrollable_from_opac" />
+                </h2>
+
+
+                <fieldset class="rows">
+                    <ol>
+                        <li>
+                            <label class="required" for="name">Name:</label>
+                            <input id="club-template-name" name="name" type="text" value="[% club_template.name %]" required="required"/>
+                            <span class="required">Required</span>
+                        </li>
+
+                        <li>
+                            <label for="description">Description:</label>
+                            <input id="club-template-description" name="description" type="text" value="[% club_template.description %]" />
+                        </li>
+
+                        <li>
+                            <label for="is_enrollable_from_opac">Allow public enrollment:</label>
+                            [% IF club_template.is_enrollable_from_opac %]
+                                <input type="checkbox" id="club-template-is-enrollable-from-opac" name="is_enrollable_from_opac" checked="checked" />
+                            [% ELSE %]
+                                <input type="checkbox" id="club-template-is-enrollable-from-opac" name="is_enrollable_from_opac" />
+                            [% END %]
+                            <span class="hint">If a template allows public enrollment, patrons can enroll in a club based on this template from the public catalog.</span>
+                        </li>
+
+                        <li>
+                            <label for="is_email_required">Require valid email address:</label>
+                            [% IF club_template.is_email_required %]
+                                <input type="checkbox" id="club-template-is-email-required" name="is_email_required" checked="checked" />
+                            [% ELSE %]
+                                <input type="checkbox" id="club-template-is-email-required" name="is_email_required" />
+                            [% END %]
+                            <span class="hint">If set, a club based on this template can only be enrolled in by patrons with a valid email address.</span>
+                        </li>
+
+                        <li>
+                            <label for="branchcode">Library:</label>
+                            <select name="branchcode" id="club-template-branchcode">
+                                <option value=""></option>
+                                [% PROCESS options_for_libraries libraries => Branches.all( selected => club_template.branchcode ) %]
+                            </select>
+                            <div class="hint">If set, only librarians logged in with this branch will be able to modify this club template.</div>
+                        </li>
+
+                    </ol>
+                </fieldset>
+
+                <fieldset class="rows">
+                    <legend>Club fields:</legend>
+                    <p><span class="hint">These fields will be used in the creation of clubs based on this template</span></p>
+                    <div id="club-template-fields">
+                        [% FOREACH f IN club_template.club_template_fields %]
+                            <div class="club-field">
+                                <ol class="clearfix">
+                                    <input type="hidden" name="club_template_field_id" value="[% f.id %]" />
+                                    <li>
+                                        <label for="field-name-[% f.id %]">Name:</label>
+                                        <input name="club_template_field_name" id="field-name-[% f.id %]" value="[% f.name %]" />
+                                    </li>
+
+                                    <li>
+                                        <label for="field-description-[% f.id %]">Description:</label>
+                                        <input name="club_template_field_description" id="field-description-[% f.id %]" value="[% f.description %]" />
+                                    </li>
+
+                                    <li>
+                                        <label for="field-description-[% f.id %]">Authorised value category:</label>
+                                        <select name="club_template_field_authorised_value_category" id="field-authorised-value-category-[% f.id %]">
+                                            <option value=""></option>
+                                            [% PROCESS options_for_authorised_value_categories authorised_value_categories => AuthorisedValues.GetCategories( selected => f.authorised_value_category) %]
+                                        </select>
+                                    </li>
+
+                                    <li>
+                                        <label for="field-delete-[% f.id %]">Delete field:</label>
+                                        <input type="checkbox" name="club_template_field_delete" id="field-delete-[% f.id %]" value="[% f.id %]" />
+                                    </li>
+                                </ol>
+                            </div>
                         [% END %]
-                        <span class="hint">If a template allows public enrollment, patrons can enroll in a club based on this template from the public catalog.</span>
-                    </li>
-
-                    <li>
-                        <label for="is_email_required">Require valid email address:</label>
-                        [% IF club_template.is_email_required %]
-                            <input type="checkbox" id="club-template-is-email-required" name="is_email_required" checked="checked" />
-                        [% ELSE %]
-                            <input type="checkbox" id="club-template-is-email-required" name="is_email_required" />
+                    </div>
+                    <fieldset class="action">
+                        <a href="#" onclick="$('#new-field-template').clone().attr('id','').show().appendTo('#club-template-fields'); return false;">
+                            <i class="fa fa-plus"></i> Add new field
+                        </a>
+                    </fieldset>
+                </fieldset>
+
+                <fieldset class="rows">
+                    <legend>Enrollment fields</legend>
+                    <p><span class="hint">These fields will be used when enrolling a patron in a club based on this template</span></p>
+                    <div id="club-template-enrollment-fields">
+                        [% FOREACH f IN club_template.club_template_enrollment_fields %]
+                            <div class="enrollment-field">
+                                <ol class="clearfix">
+                                    <li>
+                                        <span class="label">&nbsp;</span>
+                                        <strong>Enrollment field</strong>
+                                    </li>
+                                    <li>
+                                        <input type="hidden" name="club_template_enrollment_field_id" value="[% f.id %]" />
+                                        <label for="enrollment-field-name-[% f.id %]">Name:</label>
+                                        <input name="club_template_enrollment_field_name" id="enrollment-field-name-[% f.id %]" value="[% f.name %]" size="40" />
+                                    </li>
+
+                                    <li>
+                                        <label for="enrollment-field-description-[% f.id %]">Description:</label>
+                                        <input name="club_template_enrollment_field_description" id="enrollment-field-description-[% f.id %]" value="[% f.description %]" size="40" />
+                                    </li>
+
+                                    <li>
+                                        <label for="enrollment-field-description-[% f.id %]">Authorised value category:</label>
+                                        <select name="club_template_enrollment_field_authorised_value_category" id="enrollment-field-authorised-value-category-[% f.id %]">
+                                            <option value=""></option>
+                                            [% PROCESS options_for_authorised_value_categories authorised_value_categories => AuthorisedValues.GetCategories( selected => f.authorised_value_category) %]
+                                        </select>
+                                    </li>
+
+                                    <li>
+                                        <label for="enrollment-field-delete-[% f.id %]">Delete field:</label>
+                                        <input type="checkbox" name="club_template_enrollment_field_delete" id="enrollment-field-delete-[% f.id %]" value="[% f.id %]" />
+                                    </li>
+                                </ol>
+                            </div>
                         [% END %]
-                        <span class="hint">If set, a club based on this template can only be enrolled in by patrons with a valid email address.</span>
-                    </li>
-
-                    <li>
-                        <label for="branchcode">Library:</label>
-                        <select name="branchcode" id="club-template-branchcode">
-                            <option value="">&nbsp</option>
-                            [% PROCESS options_for_libraries libraries => Branches.all( selected => club_template.branchcode ) %]
-                        </select>
-                        <span class="hint">If set, only librarians logged in with this branch will be able to modify this club template.</span>
-                    </li>
-
-                </ol>
-
-                <h2>Club fields:</h2>
-                <p><span class="hint">These fields will be used in the creation of clubs based on this template</span></p>
-                <span id="club-template-fields">
-                    [% FOREACH f IN club_template.club_template_fields %]
-                        <ul>
-                            <input type="hidden" name="club_template_field_id" value="[% f.id %]" />
-                            <li>
-                                <label for="field-name-[% f.id %]">Name:</label>
-                                <input name="club_template_field_name" id="field-name-[% f.id %]" value="[% f.name %]" />
-                            </li>
-
-                            <li>
-                                <label for="field-description-[% f.id %]">Description:</label>
-                                <input name="club_template_field_description" id="field-description-[% f.id %]" value="[% f.description %]" />
-                            </li>
-
-                            <li>
-                                <label for="field-description-[% f.id %]">Authorised value category:</label>
-                                <select name="club_template_field_authorised_value_category" id="field-authorised-value-category-[% f.id %]">
-                                    <option value="">&nbsp;</option>
-                                    [% PROCESS options_for_authorised_value_categories authorised_value_categories => AuthorisedValues.GetCategories( selected => f.authorised_value_category) %]
-                                </select>
-                            </li>
-
-                            <li>
-                                <label for="field-delete-[% f.id %]">Delete field:</label>
-                                <input type="checkbox" name="club_template_field_delete" id="field-delete-[% f.id %]" value="[% f.id %]" />
-                            </li>
-
-                            <hr/>
-                        </ul>
-                    [% END %]
-                </span>
-                <div class="btn-toolbar">
-                    <a href="#" class="btn btn-default" onclick="$('#new-field-template').clone().attr('id','').show().appendTo('#club-template-fields'); return false;">
-                        <i class="fa fa-plus"></i> Add new field
-                    </a>
-                </div>
-
-                <h2>Enrollment fields:</h2>
-                <p><span class="hint">These fields will be used when enrolling a patron in a club based on this template</span></p>
-                <span id="club-template-enrollment-fields">
-                    [% FOREACH f IN club_template.club_template_enrollment_fields %]
-                        <ul>
-                            <input type="hidden" name="club_template_enrollment_field_id" value="[% f.id %]" />
-                            <li>
-                                <label for="enrollment-field-name-[% f.id %]">Name:</label>
-                                <input name="club_template_enrollment_field_name" id="enrollment-field-name-[% f.id %]" value="[% f.name %]" />
-                            </li>
-
-                            <li>
-                                <label for="enrollment-field-description-[% f.id %]">Description:</label>
-                                <input name="club_template_enrollment_field_description" id="enrollment-field-description-[% f.id %]" value="[% f.description %]" />
-                            </li>
-
-                            <li>
-                                <label for="enrollment-field-description-[% f.id %]">Authorised value category:</label>
-                                <select name="club_template_enrollment_field_authorised_value_category" id="enrollment-field-authorised-value-category-[% f.id %]">
-                                    <option value="">&nbsp;</option>
-                                    [% PROCESS options_for_authorised_value_categories authorised_value_categories => AuthorisedValues.GetCategories( selected => f.authorised_value_category) %]
-                                </select>
-                            </li>
-
-                            <li>
-                                <label for="enrollment-field-delete-[% f.id %]">Delete field:</label>
-                                <input type="checkbox" name="club_template_enrollment_field_delete" id="enrollment-field-delete-[% f.id %]" value="[% f.id %]" />
-                            </li>
-
-                            <hr/>
-                        </ul>
-                    [% END %]
-                </span>
-                <div class="btn-toolbar">
-                    <a href="#" class="btn btn-default" onclick="$('#new-enrollment-field-template').clone().attr('id','').show().appendTo('#club-template-enrollment-fields'); return false;">
-                        <i class="fa fa-plus"></i> Add new field
-                    </a>
-                </div>
-
-            </fieldset>
-
-            <fieldset class="action">
-                <input type="hidden" name="id" value="[% club_template.id %]" />
-                <input type="submit" class="btn btn-default" value="Save" />
-                <a href="clubs.pl" class="cancel">Cancel</a>
-            </fieldset>
-        </form>
-    </div>
-</div>
-
-<span id="new-field-template" style="display:none">
-    <ul>
-        <input type="hidden" name="club_template_field_id" value="" />
+                    </div>
+                    <fieldset class="action">
+                        <a href="#" onclick="$('#new-enrollment-field-template').clone().attr('id','').show().appendTo('#club-template-enrollment-fields'); return false;">
+                            <i class="fa fa-plus"></i> Add new field
+                        </a>
+                    </fieldset>
+                </fieldset>
+
+                <fieldset class="action">
+                    <input type="hidden" name="id" value="[% club_template.id %]" />
+                    <input type="submit" value="Save" />
+                    <a href="clubs.pl" class="cancel">Cancel</a>
+                </fieldset>
+            </form>
+
+        </div> <!-- /#yui-main -->
+    </div> <!-- /#bd -->
+
+
+<div id="new-field-template" class="club-field" style="display:none">
+    <h4 style="margin-left:1em;">New club field</h4>
+    <input type="hidden" name="club_template_field_id" value="" />
+    <ol class="clearfix">
 
         <li>
             <label for="club_template_field_name">Name:</label>
@@ -174,20 +203,19 @@
         <li>
             <label for="club_template_field_authorised_value_category">Authorised value category:</label>
             <select name="club_template_field_authorised_value_category">
-                <option value="">&nbsp;</option>
+                <option value=""></option>
                 [% PROCESS options_for_authorised_value_categories authorised_value_categories => AuthorisedValues.GetCategories() %]
             </select>
         </li>
+    </ol>
+    <fieldset class="action"><a href="#" onclick="$(this).parent().parent().remove(); return false;"><i class="fa fa-trash"></i> Delete field</a></fieldset>
+    <hr/>
+</div>
 
-        <a href="#" onclick="$(this).parent().remove(); return false;">Cancel</a>
-
-        <hr/>
-    </ul>
-</span>
-
-<span id="new-enrollment-field-template" style="display:none">
-    <ul>
-        <input type="hidden" name="club_template_enrollment_field_id" value="" />
+<div id="new-enrollment-field-template" class="enrollment-field" style="display:none">
+    <h4 style="margin-left:1em;">New enrollment field</h4>
+    <input type="hidden" name="club_template_enrollment_field_id" value="" />
+    <ol class="clearfix">
 
         <li>
             <label for="club_template_enrollment_field_name">Name:</label>
@@ -202,15 +230,13 @@
         <li>
             <label for="club_template_enrollment_field_authorised_value_category">Authorised value category:</label>
             <select name="club_template_enrollment_field_authorised_value_category">
-                <option value="">&nbsp;</option>
+                <option value=""></option>
                 [% PROCESS options_for_authorised_value_categories authorised_value_categories => AuthorisedValues.GetCategories() %]
             </select>
         </li>
-
-        <a href="#" onclick="$(this).parent().remove(); return false;">Cancel</a>
-
-        <hr/>
-    </ul>
-</span>
+    </ol>
+    <fieldset class="action"><a href="#" onclick="$(this).parent().parent().remove(); return false;"><i class="fa fa-trash"></i> Delete field</a></fieldset>
+    </div>
+</div>
 
 [% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/clubs/clubs-tab.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/clubs/clubs-tab.tt
index cc604b6c2e..1c5580a153 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/clubs/clubs-tab.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/clubs/clubs-tab.tt
@@ -1,13 +1,11 @@
 [% USE KohaDates %]
 
 [% IF enrollments %]
+
+    <h4>Clubs currently enrolled in</h4>
+
     <table id="clubs-table-enrolled" class="table table-bordered table-striped">
         <thead>
-            <tr>
-                <th colspan="4">
-                    Clubs you are currently enrolled in
-                </th>
-            </tr>
             <tr>
                 <th>Name</th>
                 <th>Description</th>
@@ -24,9 +22,9 @@
                     <td>[% e.date_enrolled | $KohaDates %]</td>
                     [% IF e.club.club_template.is_enrollable_from_opac %]
                         <td>
-                            <a class="btn btn-xs" onclick="cancelEnrollment( [% e.id %] )">
+                            <button class="btn btn-xs btn-default" onclick="cancelEnrollment( [% e.id %] )">
                                 <i class="icon-remove"></i> Cancel
-                            </a>
+                            </button>
                         </td>
                     [% END %]
                 </tr>
@@ -36,13 +34,11 @@
 [% END %]
 
 [% IF clubs %]
+
+    <h4>Clubs you can enroll in</h4>
+
     <table id="clubs-table-unenrolled" class="table table-bordered table-striped">
         <thead>
-            <tr>
-                <th colspan="3">
-                    Clubs you can enroll in
-                </th>
-            </tr>
             <tr>
                 <th>Name</th>
                 <th>Description</th>
@@ -57,9 +53,9 @@
                     <td>[% c.description %]</td>
                     <td>
                         [% IF !c.club_template.is_email_required || ( c.club_template.is_email_required && borrower.first_valid_email_address ) %]
-                            <a class="btn btn-xs" onclick="loadEnrollmentForm([% c.id %])">
+                            <button class="btn btn-xs btn-default" onclick="loadEnrollmentForm([% c.id %])">
                                 <i class="icon-plus"></i> Enroll
-                            </a>
+                            </button>
                         [% ELSE %]
                             <span class="hint">You must have an email address to enroll</span>
                         [% END %]
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/clubs/enroll.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/clubs/enroll.tt
index 2c53918257..3d9d684810 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/clubs/enroll.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/clubs/enroll.tt
@@ -28,7 +28,7 @@
                 [% END %]
 
                 <li>
-                    <a href="#" class="btn btn-default" onclick="addEnrollment(); return false;"><i class="fa fa-plus"></i> Finish enrollment</a>
+                    <button class="btn btn-default" onclick="addEnrollment(); return false;">Finish enrollment</button>
                     <a href="#" onclick="showClubs(); return false;">Cancel</a>
                 </li>
             </ol>
-- 
2.39.5