From 523565fb21ba5fbbae50a1d1274ce3d00e164d36 Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 8 Jan 2020 17:22:01 +0100
Subject: [PATCH] Use bootstrap grid for signup page

This allows us to have the two sections one above the other on small screens,
with the call to action text first, and then side-by-side above the sm
breakpoint with the cta on the right.
---
 app/assets/stylesheets/common.scss |  12 ---
 app/assets/stylesheets/small.scss  |  13 ---
 app/views/users/new.html.erb       | 132 +++++++++++++++--------------
 3 files changed, 68 insertions(+), 89 deletions(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 607ea4bf6..197e678a2 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -1404,18 +1404,6 @@ tr.turn:hover {
 
 /* Overrides for pages that use new layout conventions */
 
-.users-new,
-.users-create {
-  .content-body .content-inner {
-    padding: 0;
-
-    .message {
-      margin-top: 80px;
-      padding: 20px;
-    }
-  }
-}
-
 .users-new,
 .users-create,
 .users-terms,
diff --git a/app/assets/stylesheets/small.scss b/app/assets/stylesheets/small.scss
index 12e21c7d8..f6126391a 100644
--- a/app/assets/stylesheets/small.scss
+++ b/app/assets/stylesheets/small.scss
@@ -182,19 +182,6 @@ body.small {
     top: auto;
   }
 
-  /* Rules for the sign-up page */
-
-  &.user-new,
-  &.user-create {
-    .col6 {
-      width: 100%;
-    }
-
-    .aside {
-      display: none;
-    }
-  }
-
   &.site-about #content .attr h1 {
     font-size: 28px;
   }
diff --git a/app/views/users/new.html.erb b/app/views/users/new.html.erb
index f4ff16408..5acaa4e95 100644
--- a/app/views/users/new.html.erb
+++ b/app/views/users/new.html.erb
@@ -8,75 +8,79 @@
   <div class='header-illustration new-user-arm'></div>
 <% end %>
 
-<%= form_for current_user, :url => { :action => "create" }, :html => { :class => "standard-form fillL col6 inner22" } do |f| %>
-  <%= hidden_field_tag("referer", h(@referer)) unless @referer.nil? %>
+<div class="row">
+  <div class='text-muted col-sm order-sm-2'>
+    <h4><%= t ".about.header" %></h4>
+    <%= t ".about.html" %>
+  </div>
 
-  <fieldset>
-    <div class="form-row">
-      <label for="email" class="standard-label">
-        <%= t ".email address" %>
-      </label>
-      <%= f.email_field(:email, :tabindex => 1) %>
-      <%= f.error_message_on(:email) %>
-    </div>
-    <div class="form-row">
-      <label for="email_confirmation" class="standard-label">
-        <%= t ".confirm email address" %>
-      </label>
-      <%= f.email_field(:email_confirmation, :tabindex => 2) %>
-      <%= f.error_message_on(:email_confirmation) %>
-    </div>
-    <span class="form-help deemphasize"><%= t(".not_displayed_publicly_html") %></span>
-  </fieldset>
+  <div class="col-sm">
+    <%= form_for current_user, :url => { :action => "create" }, :html => { :class => "standard-form" } do |f| %>
+      <%= hidden_field_tag("referer", h(@referer)) unless @referer.nil? %>
 
-  <fieldset>
-    <div class="form-row">
-      <label for="display_name" class="standard-label">
-        <%= t ".display name" %>
-      </label>
-      <%= f.text_field(:display_name, :tabindex => 3) %>
-      <%= f.error_message_on(:display_name) %>
-    </div>
-    <span class="form-help deemphasize"><%= t ".display name description" %></span>
-  </fieldset>
+      <fieldset>
+        <div class="form-row">
+          <label for="email" class="standard-label">
+            <%= t ".email address" %>
+          </label>
+          <%= f.email_field(:email, :tabindex => 1) %>
+          <%= f.error_message_on(:email) %>
+        </div>
+        <div class="form-row">
+          <label for="email_confirmation" class="standard-label">
+            <%= t ".confirm email address" %>
+          </label>
+          <%= f.email_field(:email_confirmation, :tabindex => 2) %>
+          <%= f.error_message_on(:email_confirmation) %>
+        </div>
+        <span class="form-help deemphasize"><%= t(".not_displayed_publicly_html") %></span>
+      </fieldset>
 
-  <fieldset class="form-divider" id="auth_field">
-    <div class="form-row">
-      <label for="openid_url" class="standard-label">
-        <%= t ".external auth" %>
-      </label>
-      <%= f.select(:auth_provider, Auth::PROVIDERS, :default => "", :tabindex => 4) %>
-      <%= f.text_field(:auth_uid, :tabindex => 5) %>
-      <%= f.error_message_on(:auth_uid) %>
-    </div>
-    <span class="form-help deemphasize"><%= t ".auth no password" %></span>
-  </fieldset>
+      <fieldset>
+        <div class="form-row">
+          <label for="display_name" class="standard-label">
+            <%= t ".display name" %>
+          </label>
+          <%= f.text_field(:display_name, :tabindex => 3) %>
+          <%= f.error_message_on(:display_name) %>
+        </div>
+        <span class="form-help deemphasize"><%= t ".display name description" %></span>
+      </fieldset>
 
-  <fieldset>
-    <div class="form-row">
-      <label for='user[pass_crypt]' class="standard-label">
-        <%= t ".password" %>
-      </label>
-      <%= f.password_field(:pass_crypt, :tabindex => 6) %>
-      <%= f.error_message_on(:pass_crypt) %>
-    </div>
-    <div class="form-row">
-      <label class="standard-label">
-        <%= t ".confirm password" %>
-      </label>
-      <%= f.password_field(:pass_crypt_confirmation, :tabindex => 7) %>
-      <%= f.error_message_on(:pass_crypt_confirmation) %>
-    </div>
-  </fieldset>
+      <fieldset class="form-divider" id="auth_field">
+        <div class="form-row">
+          <label for="openid_url" class="standard-label">
+            <%= t ".external auth" %>
+          </label>
+          <%= f.select(:auth_provider, Auth::PROVIDERS, :default => "", :tabindex => 4) %>
+          <%= f.text_field(:auth_uid, :tabindex => 5) %>
+          <%= f.error_message_on(:auth_uid) %>
+        </div>
+        <span class="form-help deemphasize"><%= t ".auth no password" %></span>
+      </fieldset>
 
-  <div id="auth_prompt" class="form-row">
-    <%= link_to t(".use external auth"), "#", :id => "auth_enable" %>
-  </div>
+      <fieldset>
+        <div class="form-row">
+          <label for='user[pass_crypt]' class="standard-label">
+            <%= t ".password" %>
+          </label>
+          <%= f.password_field(:pass_crypt, :tabindex => 6) %>
+          <%= f.error_message_on(:pass_crypt) %>
+        </div>
+        <div class="form-row">
+          <label class="standard-label">
+            <%= t ".confirm password" %>
+          </label>
+          <%= f.password_field(:pass_crypt_confirmation, :tabindex => 7) %>
+          <%= f.error_message_on(:pass_crypt_confirmation) %>
+        </div>
+      </fieldset>
 
-  <%= submit_tag t(".continue"), :tabindex => 8 %>
-<% end %>
+      <div id="auth_prompt" class="form-row">
+        <%= link_to t(".use external auth"), "#", :id => "auth_enable" %>
+      </div>
 
-<div class='aside col6 deemphasize inner22'>
-  <h4><%= t ".about.header" %></h4>
-  <%= t ".about.html" %>
+      <%= submit_tag t(".continue"), :tabindex => 8 %>
+    <% end %>
+  </div>
 </div>
-- 
2.43.2