Improved forms and error styling

Revert colour changes

app/assets/stylesheets/_variables.scss

@@ -47,7 +47,9 @@ $blue: #5a9aa8;
 $purple: #6a5a8c;
 $gold: #FFD700;
 
+$dark-blue: #046;
 $dark-gray: #232323;
+
 $medium-gray: #2e2e2e;
 
 $light-blue: #F3F3FB;

app/assets/stylesheets/components/_flashes.scss

@@ -32,3 +32,34 @@
     }
   }
 }
+
+/*
+  Error Messages
+*/
+
+div#errors {
+  @extend .flash.error;
+  @include span-columns(12);
+  margin-bottom: em(20);
+
+  &:before {
+    height: 100%;
+  }
+
+  strong {
+    @include span-columns(12);
+    margin-bottom: em(10);
+  }
+
+  ul.errors {
+    @include span-columns(12);
+
+    li {
+      margin-bottom: .5em;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}

app/assets/stylesheets/components/_forms.scss

@@ -101,6 +101,11 @@ form.dark {
 
 form.square {
   @include span-columns(12);
+  margin: em(20) 0;
+
+  .horizontal {
+    @include span-columns(12);
+    margin-bottom: em(20);
 
     &.small {
       @include span-columns(6);
@@ -115,13 +120,17 @@ form.square {
     }
 
     > .field_with_errors:first-child,
-  > label {
+    > label,
+    > .label {
       @include span-columns(3);
+      padding: em(11) 0;
+      line-height: em(16);
     }
 
     input {
       @include span-columns(9);
     }
+  }
 
   .controls {
     @include span-columns(9);

app/assets/stylesheets/layout/_body.scss

@@ -1,8 +1,8 @@
 body {
   margin: 0;
   padding: 0;
-  background: lighten($blue, 10);
+  background: $dark-blue;
-  @include background-image(linear-gradient(lighten($blue, 10), $medium-gray));
+  @include background-image(linear-gradient($dark-blue, $medium-gray));
 }
 
 %container-padded {

app/controllers/users_controller.rb

@@ -53,7 +53,7 @@ class UsersController < ApplicationController
     if @user.valid? and @user.save
       @user.profile = Profile.new
       @user.profile.user = @user
-      @user.profile.save()
+      @user.profile.save
       redirect_to action: :show, id: @user.id
       save_session @user
     else

app/views/articles/_article.html.erb

@@ -10,7 +10,7 @@
   </div>
 
   <div class="author">
-    <%= flag(article.user.country) %> <%= namelink(article.user) %> on <%= longtime article.created_at %>
+    <%= namelink(article.user) %> on <%= longtime article.created_at %>
   </div>
 
   <div class="actions">

app/views/shared/_errors.html.erb

@@ -0,0 +1,11 @@
+<% if messages.size > 0 %>
+  <div id="errors">
+    <strong><%= t('errors.template.header') %></strong>
+
+    <ul class="errors">
+      <% messages.each do |msg| %>
+        <li><%= msg %></li>
+      <% end %>
+    </ul>
+  </div>
+<% end %>

app/views/users/new.html.erb

@@ -1,28 +1,35 @@
-<div class="wide box">
+<div id="registration">
-  <h2>Registration</h2>
+  <h1>Registration</h1>
-  <%= form_for @user do |f| %>
+
-    <%= f.error_messages %>
+  <%= link_to "You can use this tool to find your SteamID.", "/files/client/steamid_finder.exe" %>
-    <p>
+
-      <%= f.label :username %><br />
+  <%= form_for @user, html: { class: "square" } do |f| %>
+    <%= render 'shared/errors', messages: @user.errors.full_messages %>
+
+    <div class="fields">
+      <div class="horizontal text-field">
+        <%= f.label :username %>
         <%= f.text_field :username %>
-    </p>
+      </div>
-    <p>
+      <div class="horizontal text-field">
-      <%= f.label :raw_password, "Password" %><br />
+        <%= f.label :raw_password, "Password" %>
         <%= f.password_field :raw_password %>
-    </p>
+      </div>
-    <p>
+      <div class="horizontal text-field">
-      <%= f.label :email %><br />
+        <%= f.label :email %>
         <%= f.text_field :email %>
-    </p>
+      </div>
-    <p>
+      <div class="horizontal text-field">
-      <%= f.label :steamid %> <em>(e.g. 0:1:23456789)</em><br>
+        <%= f.label :steamid %>
-      <%= f.text_field :steamid %><br />
+        <%= f.text_field :steamid, placeholder: "0:1:23456789" %>
-      <%= link_to "You can use this tool to find out", "/files/client/steamid_finder.exe" %>
+      </div>
-    </p>
+      <div class="horizontal">
-    <p>
+        <%= f.label :birthdate %>
-      <%= f.label :birthdate %><br />
+        <%= date_select :user, :birthdate, order: [:year, :month, :day], start_year: 1950 %>
-      <%= date_select :user, :birthdate, :order => [:year, :month, :day], :start_year => 1950 %>
+      </div>
-    </p>
+    </div>
+    <div class="controls submit-field">
       <%= f.submit "Register" %>  
+    </div>
   <% end %>
 </div>