From 203adbece7eadf5eae968be79e35b7312b2d6678 Mon Sep 17 00:00:00 2001 From: Jared Pace Date: Sat, 14 Aug 2010 14:40:41 -0400 Subject: [PATCH] Update form styles --- app/controllers/users_controller.rb | 2 +- app/helpers/form_helper.rb | 14 ++++++++++++++ app/views/apps/_fields.html.haml | 2 ++ app/views/apps/edit.html.haml | 2 +- app/views/apps/new.html.haml | 2 +- app/views/devise/passwords/edit.html.haml | 4 ++-- app/views/devise/passwords/new.html.haml | 4 ++-- app/views/devise/sessions/new.html.haml | 4 ++-- app/views/users/_fields.html.haml | 2 ++ app/views/users/edit.html.haml | 2 +- app/views/users/new.html.haml | 2 +- public/javascripts/form.js | 2 +- public/stylesheets/application.css | 61 ++++++++++++++++++++++++++++++------------------------------- public/stylesheets/images/icons/required.png | Bin 0 -> 250 bytes 14 files changed, 60 insertions(+), 43 deletions(-) create mode 100644 app/helpers/form_helper.rb create mode 100644 public/stylesheets/images/icons/required.png diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb index 750eece..1eddf02 100644 --- a/app/controllers/users_controller.rb +++ b/app/controllers/users_controller.rb @@ -51,7 +51,7 @@ class UsersController < ApplicationController @user = User.find(params[:id]) @user.destroy - flash[:success[ = "That's sad. #{@user.name} is no longer part of your team." + flash[:success] = "That's sad. #{@user.name} is no longer part of your team." redirect_to users_path end diff --git a/app/helpers/form_helper.rb b/app/helpers/form_helper.rb new file mode 100644 index 0000000..38624c7 --- /dev/null +++ b/app/helpers/form_helper.rb @@ -0,0 +1,14 @@ +module FormHelper + + def errors_for(document) + return unless document.errors.any? + + content_tag(:div, :class => 'error-messages') do + body = content_tag(:h2, 'Dang. The following errors are keeping this from being a success.') + body += content_tag(:ul) do + document.errors.full_messages.inject('') {|errs, msg| errs += content_tag(:li, msg) } + end + end + end + +end \ No newline at end of file diff --git a/app/views/apps/_fields.html.haml b/app/views/apps/_fields.html.haml index be51c57..bef2ab6 100644 --- a/app/views/apps/_fields.html.haml +++ b/app/views/apps/_fields.html.haml @@ -1,3 +1,5 @@ += errors_for @app + %div.required = f.label :name = f.text_field :name diff --git a/app/views/apps/edit.html.haml b/app/views/apps/edit.html.haml index 1639a92..c2e341d 100644 --- a/app/views/apps/edit.html.haml +++ b/app/views/apps/edit.html.haml @@ -5,4 +5,4 @@ = render 'fields', :f => f - %div= f.submit 'Update' \ No newline at end of file + %div.buttons= f.submit 'Update App' \ No newline at end of file diff --git a/app/views/apps/new.html.haml b/app/views/apps/new.html.haml index 3bb731a..0c13d8c 100644 --- a/app/views/apps/new.html.haml +++ b/app/views/apps/new.html.haml @@ -5,4 +5,4 @@ = render 'fields', :f => f - %div.add_app= f.submit 'Add' \ No newline at end of file + %div.buttons= f.submit 'Add App' \ No newline at end of file diff --git a/app/views/devise/passwords/edit.html.haml b/app/views/devise/passwords/edit.html.haml index 557e910..172b516 100644 --- a/app/views/devise/passwords/edit.html.haml +++ b/app/views/devise/passwords/edit.html.haml @@ -1,7 +1,7 @@ - content_for :title, "Change your password" = form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => { :method => :put }) do |f| - = devise_error_messages! + = errors_for resource = f.hidden_field :reset_password_token .required = f.label :password, 'New password' @@ -9,4 +9,4 @@ .required = f.label :password_confirmation, 'One more time' = f.password_field :password_confirmation - %div.change_password= f.submit "Change my password" \ No newline at end of file + %div.buttons= f.submit "Change my password" \ No newline at end of file diff --git a/app/views/devise/passwords/new.html.haml b/app/views/devise/passwords/new.html.haml index 8e22f03..63ba858 100644 --- a/app/views/devise/passwords/new.html.haml +++ b/app/views/devise/passwords/new.html.haml @@ -1,8 +1,8 @@ - content_for :title, "Forget your password?" = form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => { :method => :post }) do |f| - = devise_error_messages! + = errors_for resource .required = f.label :email = f.text_field :email - %div= f.submit "Send me reset password instructions" \ No newline at end of file + %div.buttons= f.submit "Send me reset password instructions" \ No newline at end of file diff --git a/app/views/devise/sessions/new.html.haml b/app/views/devise/sessions/new.html.haml index b644bfc..761b237 100644 --- a/app/views/devise/sessions/new.html.haml +++ b/app/views/devise/sessions/new.html.haml @@ -14,5 +14,5 @@ = f.check_box :remember_me, :tabindex => 3 = f.label :remember_me - %div.sign_in - %button{:type => 'submit'}= "Sign in" \ No newline at end of file + %div.buttons + %button{:type => 'submit', :class => 'sign_in'}= "Sign in" \ No newline at end of file diff --git a/app/views/users/_fields.html.haml b/app/views/users/_fields.html.haml index 9de8c06..4dbbb8c 100644 --- a/app/views/users/_fields.html.haml +++ b/app/views/users/_fields.html.haml @@ -1,3 +1,5 @@ += errors_for @user + .required = f.label :name = f.text_field :name diff --git a/app/views/users/edit.html.haml b/app/views/users/edit.html.haml index 089ff7f..aa597cd 100644 --- a/app/views/users/edit.html.haml +++ b/app/views/users/edit.html.haml @@ -4,4 +4,4 @@ = @user.errors.full_messages.to_sentence = render 'fields', :f => f - %div= f.submit 'Update' \ No newline at end of file + %div.buttons= f.submit 'Update User' \ No newline at end of file diff --git a/app/views/users/new.html.haml b/app/views/users/new.html.haml index d5aa2e9..7a79360 100644 --- a/app/views/users/new.html.haml +++ b/app/views/users/new.html.haml @@ -4,4 +4,4 @@ = render 'fields', :f => f - %div= f.submit 'Add' \ No newline at end of file + %div.buttons= f.submit 'Add User' \ No newline at end of file diff --git a/public/javascripts/form.js b/public/javascripts/form.js index 4df8cda..c63d4b2 100644 --- a/public/javascripts/form.js +++ b/public/javascripts/form.js @@ -20,7 +20,7 @@ function makeNestedItemsDestroyable(wrapper) { var nestedItem = $(this); var destroyLink = $('').text('remove').addClass('remove-nested'); destroyLink.css('float','right'); - nestedItem.find('label').first().prepend(destroyLink); + nestedItem.find('label').first().before(destroyLink); }) } diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index f3be8e0..f8ee44c 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -237,11 +237,12 @@ form fieldset legend { } form label { font-weight: bold; text-transform: uppercase; line-height: 1.6em; - display: block; + display: inline-block; } form label.inline { display: inline; } form .checkbox label { display: inline; } -form .required label { color: #990000;} +form .required label { padding-right: 20px; background: transparent url(images/icons/required.png) right 50% no-repeat; } +form .field_with_errors label { color: #900; } form input[type=text], form input[type=password] { width: 96%; padding: 0.8em; font-size: 1em; @@ -267,24 +268,7 @@ form input[type=submit] { font-size: 1.2em; line-height: 1em; text-transform: uppercase; border: none; color: #FFF; background-color: #387fc1; } -form div.send_password input[type=submit], -form div.change_password input[type=submit], -form div.add_app input[type=submit], -input#user_submit[type=submit] { - color: #666; - display: block; - padding: 0 20px 0 20px; - font-size: 12px; font-weight: bold; line-height: 30px; text-decoration: none; - text-shadow: 1px 1px 0px #FFF; - -webkit-text-shadow: 1px 1px 0px #FFF; - background: transparent no-repeat; - border: none; -} -form div.sign_in, -form div.send_password, -form div.change_password, -form div.add_app, -input#user_submit[type=submit] { +form div.buttons { color: #666; background: #FFF url(images/button-bg.png) 0 bottom repeat-x; border-radius: 50px; @@ -293,26 +277,26 @@ input#user_submit[type=submit] { border: 1px solid #bbb; display: inline-block; } -form div.sign_in:hover, -form div.send_password:hover, -form div.change_password:hover, -form div.add_app:hover, -input#user_submit[type=submit]:hover { +form div.buttons:hover { color: #666; box-shadow: 0 0 3px #69c; -moz-box-shadow: 0 0 3px #69c; -webkit-box-shadow: 0 0 3px #69c; } -form div.sign_in button { +form div.buttons input, form div.buttons button { + padding: 0 20px; color: #666; - display: block; - padding: 0 20px 0 40px; - font-size: 14px; font-weight: bold; line-height: 39px; text-decoration: none; - text-shadow: 1px 1px 0px #FFF; + background: none; + font-size: 14px; font-weight: bold; line-height: 36px; text-decoration: none; + text-shadow: 1px 1px 0px #FFF; + -moz-text-shadow: 1px 1px 0px #FFF; -webkit-text-shadow: 1px 1px 0px #FFF; - background: transparent url(images/icons/right-arrow.png) 5px 5px no-repeat; border: none; } +form div.buttons button.sign_in { + padding-left: 40px; + background: transparent url(images/icons/right-arrow.png) 3px 3px no-repeat; +} form > div > span { display: block; margin-top: 0.5em; font-size: 0.85em; @@ -336,6 +320,21 @@ form legend + .nested { padding-top: 0; } +form .error-messages { + padding: 13px; + background: #fcc; + border: 1px solid #f99; +} + +form .error-messages h2 { + font-size: 1.2em; + border-color: #F99; +} +form .error-messages ul { + margin-left: 2em; + list-style-type: square; +} + /* Tables */ table { width: 100%; diff --git a/public/stylesheets/images/icons/required.png b/public/stylesheets/images/icons/required.png new file mode 100644 index 0000000..5e78ad7 Binary files /dev/null and b/public/stylesheets/images/icons/required.png differ -- libgit2 0.21.2