From 1a1422783f9ffd10970e4b4439bee32f3ceb8fc7 Mon Sep 17 00:00:00 2001
From: Zarino Zappia <mail@zarino.co.uk>
Date: Wed, 1 May 2019 16:52:04 +0100
Subject: Fieldsets/legends for admin checkbox lists

---
 templates/web/base/admin/category-checkboxes.html  | 13 +++--
 .../web/base/admin/responsepriorities/edit.html    |  7 +--
 templates/web/base/admin/template_edit.html        |  7 +--
 templates/web/base/admin/users/form.html           | 60 +++++++++++-----------
 .../web/bromley/admin/category-checkboxes.html     | 13 +++--
 web/cobrands/sass/_base.scss                       |  3 +-
 6 files changed, 53 insertions(+), 50 deletions(-)

diff --git a/templates/web/base/admin/category-checkboxes.html b/templates/web/base/admin/category-checkboxes.html
index fb5e39695..eacd1a398 100644
--- a/templates/web/base/admin/category-checkboxes.html
+++ b/templates/web/base/admin/category-checkboxes.html
@@ -1,6 +1,12 @@
-  <p>
-    <strong>[% loc('Categories:') %]</strong>
-  </p>
+<fieldset>
+  <legend>
+  [% IF hint %]
+    <div class="admin-hint">
+      <p>[% hint %]</p>
+    </div>
+  [% END %]
+    [% loc('Categories:') %]
+  </legend>
   <ul class="no-bullets no-margin">
     <li>
       [% loc('Select:') %]
@@ -16,3 +22,4 @@
       </li>
     [% END %]
   </ul>
+</fieldset>
diff --git a/templates/web/base/admin/responsepriorities/edit.html b/templates/web/base/admin/responsepriorities/edit.html
index 608f19e74..02661fd14 100644
--- a/templates/web/base/admin/responsepriorities/edit.html
+++ b/templates/web/base/admin/responsepriorities/edit.html
@@ -40,12 +40,7 @@
         </label>
     </p>
 
-    <div class="admin-hint">
-      <p>
-        [% loc('If you only want this priority to be an option for specific categories, pick them here. By default they will show for all categories.') %]
-      </p>
-    </div>
-    [% INCLUDE 'admin/category-checkboxes.html' %]
+    [% INCLUDE 'admin/category-checkboxes.html' hint=loc('If you only want this priority to be an option for specific categories, pick them here. By default they will show for all categories.') %]
 
     <p>
         <label>
diff --git a/templates/web/base/admin/template_edit.html b/templates/web/base/admin/template_edit.html
index 0cfd5406a..2945e36c5 100644
--- a/templates/web/base/admin/template_edit.html
+++ b/templates/web/base/admin/template_edit.html
@@ -34,12 +34,7 @@
         <textarea class="form-control" name="text" class="required">[% rt.text | html %]</textarea>
     </p>
 
-    <div class="admin-hint">
-      <p>
-        [% loc('If you only want this template to be an option for specific categories, pick them here. By default they will show for all categories.') %]
-      </p>
-    </div>
-    [% INCLUDE 'admin/category-checkboxes.html' %]
+    [% INCLUDE 'admin/category-checkboxes.html' hint=loc('If you only want this template to be an option for specific categories, pick them here. By default they will show for all categories.') %]
 
     [% IF errors.state %]
         <div class="form-error">[% errors.state %]</div>
diff --git a/templates/web/base/admin/users/form.html b/templates/web/base/admin/users/form.html
index bc64a79c7..6facd5c8a 100644
--- a/templates/web/base/admin/users/form.html
+++ b/templates/web/base/admin/users/form.html
@@ -93,14 +93,7 @@
 
         [% IF contacts AND c.cobrand.moniker != 'zurich'%]
           <li class="js-user-categories">
-            <div class="admin-hint">
-              <p>
-                [% loc(
-                  "Authorised staff users can be associated with the categories in which they operate.")
-                %]
-              </p>
-            </div>
-            [% INCLUDE 'admin/category-checkboxes.html' %]
+            [% INCLUDE 'admin/category-checkboxes.html' hint=loc("Authorised staff users can be associated with the categories in which they operate.") %]
           </li>
         [% END %]
 
@@ -162,33 +155,38 @@
 
         [% IF available_permissions AND NOT user.is_superuser %]
           <li>
-            <div class="admin-hint">
-              <p>
-                [% loc("Users can perform the following actions within their assigned body or area.") %]
-              </p>
-            </div>
-            <p>[% loc('Permissions:') %]</p>
-            <ul>
-          [% FOREACH group IN available_permissions.pairs %]
-            <li>
-              [% group.key %]
-              <ul class="no-bullets">
-                <li>
-                  (<a href="#" data-select-all>[% loc('all') %]</a> /
-                  <a href="#" data-select-none>[% loc('none') %]</a>)
-                </li>
-                [% FOREACH permission IN group.value %]
+            <fieldset>
+              <legend>
+                <div class="admin-hint">
+                  <p>
+                    [% loc("Users can perform the following actions within their assigned body or area.") %]
+                  </p>
+                </div>
+                [% loc('Permissions:') %]
+              </legend>
+              <ul>
+                [% FOREACH group IN available_permissions.pairs %]
                   <li>
-                    <label class="inline">
-                      <input type="checkbox" id="perms_[% permission.key %]" name="permissions[[% permission.key %]]" [% "checked" IF NOT user.is_superuser AND user.has_body_permission_to(permission.key) %]>
-                      [% permission.value %]
-                    </label>
+                    [% group.key %]
+                    <ul class="no-bullets no-margin">
+                      <li>
+                        (<a href="#" data-select-all>[% loc('all') %]</a> /
+                        <a href="#" data-select-none>[% loc('none') %]</a>)
+                      </li>
+                      [% FOREACH permission IN group.value %]
+                        <li>
+                          <label class="inline">
+                            <input type="checkbox" id="perms_[% permission.key %]" name="permissions[[% permission.key %]]" [% "checked" IF NOT user.is_superuser AND user.has_body_permission_to(permission.key) %]>
+                            [% permission.value %]
+                          </label>
+                        </li>
+                      [% END %]
+                    </ul>
                   </li>
                 [% END %]
               </ul>
-            </li>
-          [% END %]
-            </ul>
+            </fieldset>
+          </li>
         [% END %]
       [% END %]
       [% TRY %][% INCLUDE 'admin/users/form-extra-fields.html' %][% CATCH file %][% END %]
diff --git a/templates/web/bromley/admin/category-checkboxes.html b/templates/web/bromley/admin/category-checkboxes.html
index 295a1db26..756f2d1ff 100644
--- a/templates/web/bromley/admin/category-checkboxes.html
+++ b/templates/web/bromley/admin/category-checkboxes.html
@@ -1,6 +1,12 @@
-  <p>
-    <strong>[% loc('Categories:') %]</strong>
-  </p>
+<fieldset>
+  <legend>
+  [% IF hint %]
+    <div class="admin-hint">
+      <p>[% hint %]</p>
+    </div>
+  [% END %]
+    [% loc('Categories:') %]
+  </legend>
   <ul class="no-bullets no-margin">
     <li>
       [% loc('Select:') %]
@@ -16,3 +22,4 @@
       </li>
     [% END %]
   </ul>
+</fieldset>
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 14d5d2607..5a1cf8fe7 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -273,7 +273,8 @@ textarea {
   min-height: 5em;
 }
 
-label{
+label,
+legend {
   display: block;
   margin-top: 1.25em;
   margin-bottom: 0.5em;
-- 
cgit v1.2.3