[Borsetshire] Amend sign in instruction text.

5 files changed, 82 insertions, 29 deletions

diff --git a/templates/web/base/auth/general.html b/templates/web/base/auth/general.html
index 76426f5d8..8fc5578c1 100644
--- a/templates/web/base/auth/general.html
+++ b/templates/web/base/auth/general.html
@@ -50,7 +50,8 @@
       [% ELSIF sign_in_error %]
         <div class="form-error">[% loc('There was a problem with your login information. If you cannot remember your password, or do not have one, please fill in the &lsquo;No&rsquo; section of the form.') %]</div>
       [% END %]
-        <input type="text" class="form-control required" id="username" name="username" value="[% username | html %]" autofocus>
+        <input type="text" class="form-control required" id="username" name="username" value="[% username | html %]"
+        [%~ IF c.cobrand.moniker != 'borsetshire' %] autofocus[% END %]>
 
         <div id="form_sign_in">
             <h3>[% tprintf(loc("Do you have a %s password?", "%s is the site name"), site_name)  %]</h3>
diff --git a/templates/web/borsetshire/auth/_general_top.html b/templates/web/borsetshire/auth/_general_top.html
index 6e65bf90b..0af3737e8 100644
--- a/templates/web/borsetshire/auth/_general_top.html
+++ b/templates/web/borsetshire/auth/_general_top.html
@@ -1,28 +1,23 @@
-<p>The following users exist, all with password <kbd>password</kbd>
-(click them to quickly log in):</p>
-<style>
-#demo-user-list dt {
-    padding: 0 0.5em;
-}
-#demo-user-list dd {
-    color: #666;
-    font-size: 87.5%;
-    padding: 0 0.5em;
-}
-.js #demo-user-list dt:hover {
-    background-color: #faebac;
-    cursor: pointer;
-}
-</style>
+<p>
+Click on one of the buttons below to log in as one of the four
+different types of user we’ve set up on this demo site:
+</p>
 
-<dl id='demo-user-list'>
-    <dt>inspector@example.org</dt>
-        <dd>an inspector, who can shortlist and inspect reports.</dd>
-    <dt>cs@example.org</dt>
-        <dd>a customer service rep, who can create reports as the council or another user, and moderate reports.</dd>
-    <dt>super@example.org</dt>
-        <dd>a council super user, who can do all the above, plus also edit users, templates, priorities, and more.</dd>
-    <dt>user@example.org</dt>
-        <dd>a normal user, who has created the example reports on the site.</dd>
-</dl>
+<ul id='demo-user-list' class="clearfix">
+        <li>
+<button class="btn" data-email="user@example.org">Normal user</button>
+<span>A local resident who has created reports and updates on the site.</span>
+        <li>
+<button class="btn" data-email="cs@example.org">Customer service</button>
+<span>A customer service staff member, who can create and moderate existing reports.</span>
+        <li>
+<button class="btn" data-email="inspector@example.org">Inspector</button>
+<span>An inspector staff member, who can inspect reports and create shortlists.</span>
+        <li>
+<button class="btn" data-email="super@example.org">Super user</button>
+<span>A superuser staff member, who can do all the above, plus also edit users, templates, and priorities in the Admin screen.</span>
+</ul>
 
+<p>
+Or sign in as normal, with an email address and password:
+</p>
diff --git a/web/cobrands/borsetshire/base.scss b/web/cobrands/borsetshire/base.scss
index f5113e0be..ab74f59c7 100644
--- a/web/cobrands/borsetshire/base.scss
+++ b/web/cobrands/borsetshire/base.scss
@@ -63,3 +63,32 @@
         text-decoration: underline;
     }
 }
+
+body.authpage {
+    .content {
+        max-width: 27em;
+        margin-#{$left}: auto;
+        margin-#{$right}: auto;
+    }
+}
+
+#demo-user-list {
+    @include list-reset-soft();
+    border-bottom: 1px solid #eee;
+    margin-bottom: 2em;
+
+    li {
+        margin: 2em 0;
+    }
+
+    button {
+        width: 100%;
+    }
+
+    span {
+        color: #666;
+        font-size: (14em / 16);
+        display: block;
+        margin-top: 0.5em;
+    }
+}
diff --git a/web/cobrands/borsetshire/js.js b/web/cobrands/borsetshire/js.js
index 9fdb3e31b..6799ff5e3 100644
--- a/web/cobrands/borsetshire/js.js
+++ b/web/cobrands/borsetshire/js.js
@@ -11,9 +11,9 @@
         }
     }
 
-    $('#demo-user-list dt').click(function(){
+    $('#demo-user-list button').click(function(){
         var form = document.forms.general_auth;
-        form.username.value = $(this).text();
+        form.username.value = $(this).data('email');
         form.password_sign_in.value = 'password';
         set_redirect(form);
         form.submit();
diff --git a/web/cobrands/borsetshire/layout.scss b/web/cobrands/borsetshire/layout.scss
index 6aa7f5801..3f056a385 100644
--- a/web/cobrands/borsetshire/layout.scss
+++ b/web/cobrands/borsetshire/layout.scss
@@ -54,3 +54,31 @@
         }
     }
 }
+
+body.authpage {
+    .content {
+        width: auto;
+        max-width: 30em;
+    }
+
+    input {
+        max-width: none;
+    }
+}
+
+#demo-user-list {
+    li {
+        @include clearfix();
+    }
+
+    button {
+        float: left;
+        width: 40%;
+    }
+
+    span {
+        float: right;
+        width: 55%;
+        margin-top: 0;
+    }
+}