From 26d2bb9dddb0f9e10267ec47dbcb4a1571021a8b Mon Sep 17 00:00:00 2001
From: Zarino Zappia <mail@zarino.co.uk>
Date: Wed, 1 May 2019 20:07:11 +0100
Subject: Custom layout for admin user permission checkboxes

---
 CHANGELOG.md                             |  1 +
 templates/web/base/admin/users/form.html |  2 +-
 web/cobrands/sass/_admin.scss            | 23 +++++++++++++++++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3967b8d92..ebcf7c1dc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@
         - Allow searching for <email> in admin.
         - Make staff JavaScript more self-contained.
         - Alow staff user to be associated with multiple areas.
+        - Improvements to admin checkbox display.
     - Bugfixes:
         - Check cached reports do still have photos before being shown. #2374
         - Delete cache photos upon photo moderation. #2374
diff --git a/templates/web/base/admin/users/form.html b/templates/web/base/admin/users/form.html
index 6facd5c8a..8f0f9ad6e 100644
--- a/templates/web/base/admin/users/form.html
+++ b/templates/web/base/admin/users/form.html
@@ -164,7 +164,7 @@
                 </div>
                 [% loc('Permissions:') %]
               </legend>
-              <ul>
+              <ul class="permissions-checkboxes">
                 [% FOREACH group IN available_permissions.pairs %]
                   <li>
                     [% group.key %]
diff --git a/web/cobrands/sass/_admin.scss b/web/cobrands/sass/_admin.scss
index 8b701cfc6..1f55c62df 100644
--- a/web/cobrands/sass/_admin.scss
+++ b/web/cobrands/sass/_admin.scss
@@ -217,3 +217,26 @@ $button_bg_col: #a1a1a1;  // also search bar (tables)
 .danger-zone {
     text-align: #{$right};
 }
+
+.permissions-checkboxes {
+    margin: 0;
+
+    & > li {
+        border-top: 1px solid $table_border_color;
+        list-style: none;
+        padding: 0;
+        margin: 1em 0;
+        padding-top: 1em;
+        font-weight: bold;
+
+        @media (min-width: 48em) {
+            display: grid;
+            grid-template-columns: 10em auto;
+            grid-column-gap: 1em;
+        }
+    }
+
+    ul {
+        font-weight: normal;
+    }
+}
-- 
cgit v1.2.3