From 8eac4abebedcbff6d3f1ea4070a76595e434769a Mon Sep 17 00:00:00 2001 From: Luke Barratt Date: Thu, 10 Apr 2014 00:43:20 +0100 Subject: [PATCH] Improved forms and error styling Revert colour changes --- app/assets/stylesheets/_variables.scss | 2 + .../stylesheets/components/_flashes.scss | 31 ++++++++++ app/assets/stylesheets/components/_forms.scss | 41 ++++++++----- app/assets/stylesheets/layout/_body.scss | 4 +- app/controllers/users_controller.rb | 2 +- app/views/articles/_article.html.erb | 2 +- app/views/shared/_errors.html.erb | 11 ++++ app/views/users/new.html.erb | 59 +++++++++++-------- 8 files changed, 106 insertions(+), 46 deletions(-) create mode 100644 app/views/shared/_errors.html.erb diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss index 168778d..9291d45 100644 --- a/app/assets/stylesheets/_variables.scss +++ b/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; diff --git a/app/assets/stylesheets/components/_flashes.scss b/app/assets/stylesheets/components/_flashes.scss index b01d9c7..bb5d9d1 100644 --- a/app/assets/stylesheets/components/_flashes.scss +++ b/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; + } + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_forms.scss b/app/assets/stylesheets/components/_forms.scss index fd8e7bb..c67c203 100644 --- a/app/assets/stylesheets/components/_forms.scss +++ b/app/assets/stylesheets/components/_forms.scss @@ -101,26 +101,35 @@ form.dark { form.square { @include span-columns(12); + margin: em(20) 0; - &.small { - @include span-columns(6); - } - - &.medium { - @include span-columns(9); - } - - &.large { + .horizontal { @include span-columns(12); - } + margin-bottom: em(20); - > .field_with_errors:first-child, - > label { - @include span-columns(3); - } + &.small { + @include span-columns(6); + } - input { - @include span-columns(9); + &.medium { + @include span-columns(9); + } + + &.large { + @include span-columns(12); + } + + > .field_with_errors:first-child, + > label, + > .label { + @include span-columns(3); + padding: em(11) 0; + line-height: em(16); + } + + input { + @include span-columns(9); + } } .controls { diff --git a/app/assets/stylesheets/layout/_body.scss b/app/assets/stylesheets/layout/_body.scss index ea835c7..3acbb97 100644 --- a/app/assets/stylesheets/layout/_body.scss +++ b/app/assets/stylesheets/layout/_body.scss @@ -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 { diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb index 9879035..38a4b65 100644 --- a/app/controllers/users_controller.rb +++ b/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 diff --git a/app/views/articles/_article.html.erb b/app/views/articles/_article.html.erb index 41cc1dc..62c2346 100644 --- a/app/views/articles/_article.html.erb +++ b/app/views/articles/_article.html.erb @@ -10,7 +10,7 @@
- <%= flag(article.user.country) %> <%= namelink(article.user) %> on <%= longtime article.created_at %> + <%= namelink(article.user) %> on <%= longtime article.created_at %>
diff --git a/app/views/shared/_errors.html.erb b/app/views/shared/_errors.html.erb new file mode 100644 index 0000000..9677a19 --- /dev/null +++ b/app/views/shared/_errors.html.erb @@ -0,0 +1,11 @@ +<% if messages.size > 0 %> +
+ <%= t('errors.template.header') %> + +
    + <% messages.each do |msg| %> +
  • <%= msg %>
    • + <% end %> +
+
+<% end %> diff --git a/app/views/users/new.html.erb b/app/views/users/new.html.erb index f2ae66b..5725834 100644 --- a/app/views/users/new.html.erb +++ b/app/views/users/new.html.erb @@ -1,28 +1,35 @@ -
-

Registration

- <%= form_for @user do |f| %> - <%= f.error_messages %> -

- <%= f.label :username %>
- <%= f.text_field :username %> -

-

- <%= f.label :raw_password, "Password" %>
- <%= f.password_field :raw_password %> -

-

- <%= f.label :email %>
- <%= f.text_field :email %> -

-

- <%= f.label :steamid %> (e.g. 0:1:23456789)
- <%= f.text_field :steamid %>
- <%= link_to "You can use this tool to find out", "/files/client/steamid_finder.exe" %> -

-

- <%= f.label :birthdate %>
- <%= date_select :user, :birthdate, :order => [:year, :month, :day], :start_year => 1950 %> -

- <%= f.submit "Register" %> +
+

Registration

+ + <%= 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 %> + +
+
+ <%= f.label :username %> + <%= f.text_field :username %> +
+
+ <%= f.label :raw_password, "Password" %> + <%= f.password_field :raw_password %> +
+
+ <%= f.label :email %> + <%= f.text_field :email %> +
+
+ <%= f.label :steamid %> + <%= f.text_field :steamid, placeholder: "0:1:23456789" %> +
+
+ <%= f.label :birthdate %> + <%= date_select :user, :birthdate, order: [:year, :month, :day], start_year: 1950 %> +
+
+
+ <%= f.submit "Register" %> +
<% end %>