Improved forms and error styling

Revert colour changes
This commit is contained in:
Luke Barratt 2014-04-10 00:43:20 +01:00
parent 63ec5d86fa
commit 8eac4abebe
8 changed files with 106 additions and 46 deletions

View file

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

View file

@ -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;
}
}
}
}

View file

@ -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);

View file

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

View file

@ -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

View file

@ -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">

View file

@ -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 %>

View file

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