Use bootstrap grid for signup page
authorAndy Allan <git@gravitystorm.co.uk>
Wed, 8 Jan 2020 16:22:01 +0000 (17:22 +0100)
committerAndy Allan <git@gravitystorm.co.uk>
Wed, 8 Jan 2020 16:26:11 +0000 (17:26 +0100)
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
app/assets/stylesheets/small.scss
app/views/users/new.html.erb

index 607ea4bf6e47ea5ed2f7856c160a3d2e17852b38..197e678a20942140ea4701d2096eb626ba5f59e0 100644 (file)
@@ -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,
index 12e21c7d8b8e9f52b007d4b0655820604d94f426..f6126391a2b98695b00cacbb94835fea831d41c6 100644 (file)
@@ -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;
   }
index f4ff164081212d5079487bdc1b295866bf873b75..5acaa4e958e2819b1b521d66435dfc79504239eb 100644 (file)
@@ -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>