Improve inline checkbox spacing.

Reduce the space between checkbox and label, so the text isn't lost if
the page is zoomed in. Fixes #2411.

Replace the creator_fixed question with segmented control to match the
full questionnaire, and the admin verified checkboxes with inline-text
as they need no padding. Having done that, all uses of .inline are now
on their own lines, so no post-padding is needed any longer, but we’ll
leave some in case of future use.

5 files changed, 11 insertions, 25 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index abe507e60..f2cc00dae 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,7 @@
         - Fix issue with Open311 codes starting with ‘_’. #2391
         - Add parameter to URL when “Show older” clicked. #2397
         - Don't ask for email on alert signup if logged in. #2402
+        - Improve inline checkbox spacing. #2411
     - Development improvements:
         - Make front page cache time configurable.
         - Better working of /fakemapit/ under https.
diff --git a/templates/web/base/admin/users/form.html b/templates/web/base/admin/users/form.html
index 7bc291419..ca3fd99fb 100644
--- a/templates/web/base/admin/users/form.html
+++ b/templates/web/base/admin/users/form.html
@@ -22,11 +22,11 @@
             <input class="btn" type="submit" name="send_login_email" value="[% loc('Send login email') %]">
         [% END %]
         </li>
-        <li><label class="inline" for="email_verified">[% loc('Email verified:') %]</label>
+        <li><label class="inline-text" for="email_verified">[% loc('Email verified:') %]</label>
         <input type="checkbox" id="email_verified" name="email_verified" value="1" [% user.email_verified ? ' checked' : '' %]>
         <li><label for="phone">[% loc('Phone:') %]</label>
         <input type='text' class="form-control" id='phone' name='phone' value='[% user.phone | html %]'></li>
-        <li><label class="inline" for="phone_verified">[% loc('Phone verified:') %]</label>
+        <li><label class="inline-text" for="phone_verified">[% loc('Phone verified:') %]</label>
         <input type="checkbox" id="phone_verified" name="phone_verified" value="1" [% user.phone_verified ? ' checked' : '' %]>
 
       [% IF username_in_abuse %]
diff --git a/templates/web/base/questionnaire/creator_fixed.html b/templates/web/base/questionnaire/creator_fixed.html
index 83037ee3d..754800bab 100644
--- a/templates/web/base/questionnaire/creator_fixed.html
+++ b/templates/web/base/questionnaire/creator_fixed.html
@@ -1,4 +1,4 @@
-[% INCLUDE 'header.html', bodyclass = 'fullwidthpage', title = loc('Confirmation') %]
+[% INCLUDE 'header.html', bodyclass = 'authpage', title = loc('Confirmation') %]
 
 <form method="post" action="/questionnaire/submit" id="questionnaire">
 <input type="hidden" name="problem" value="[% problem_id | html %]">
@@ -9,14 +9,14 @@
 [% loc("Thanks, glad to hear it's been fixed! Could we just ask if you have ever reported a problem to a council before?") %]
 </p>
 
-<p align="center">
-<input type="radio" name="reported" id="reported_yes" value="Yes"[% ' checked' IF reported == 'Yes' %]>
-<label class="inline" for="reported_yes">[% loc('Yes') %]</label>
-<input type="radio" name="reported" id="reported_no" value="No"[% ' checked' IF reported == 'No' %]>
-<label class="inline" for="reported_no">[% loc('No') %]</label>
+<p class="segmented-control segmented-control--radio">
+    <input type="radio" name="reported" id="reported_yes" value="Yes"[% ' checked' IF reported == 'Yes' %]>
+    <label class="btn" for="reported_yes">[% loc('Reported before') %]</label>
+    <input type="radio" name="reported" id="reported_no" value="No"[% ' checked' IF reported == 'No' %]>
+    <label class="btn" for="reported_no">[% loc('First time') %]</label>
 </p>
 
-<p><input type="submit" class="btn" name="submit" value="[% loc('Submit') %]"></p>
+<p><input type="submit" class="btn btn--primary" name="submit" value="[% loc('Submit') %]"></p>
 
 </form>
 
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index ba4ecb732..2491c4c21 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -281,7 +281,7 @@ label{
 
   &.inline {
     display: inline;
-    padding: flip(0 2em 0 1em, 0 1em 0 2em);
+    padding: flip(0 1em 0 5px, 0 5px 0 1em);
     font-weight: normal;
   }
 
diff --git a/web/cobrands/zurich/base.scss b/web/cobrands/zurich/base.scss
index e7d7cc7c1..741539e9d 100644
--- a/web/cobrands/zurich/base.scss
+++ b/web/cobrands/zurich/base.scss
@@ -200,25 +200,10 @@ h4.static-with-rule {
     }
 }
 
-.admin {
-  label.inline {
-    padding: 0;
-  }
-
-  input[type="checkbox"] + label.inline {
-    margin-right: 0.2em;
-  }
-
-}
 table#admin_bodies tr.is-deleted {
   background-color: transparent;
 }
 
-.admin-label--inline {
-  display: inline; // rather than block
-  margin-right: 0.333em; // bit of space between this and the following input
-}
-
 .ui-spinner input {
     // stop jQuery UI spinner inputs from inheriting FMS input styles
     padding: 1px;