Update form styles

Jared Pace
1 parent 9b2ed19b
Showing 14 changed files with 60 additions and 43 deletions Show diff stats
app/controllers/users_controller.rb
app/helpers/form_helper.rb
app/views/apps/_fields.html.haml
app/views/apps/edit.html.haml
app/views/apps/new.html.haml
app/views/devise/passwords/edit.html.haml
app/views/devise/passwords/new.html.haml
app/views/devise/sessions/new.html.haml
app/views/users/_fields.html.haml
app/views/users/edit.html.haml
app/views/users/new.html.haml
public/javascripts/form.js
public/stylesheets/application.css
public/stylesheets/images/icons/required.png
@@ -51,7 +51,7 @@ class UsersController &lt; 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
@@ -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
+= errors_for @app
+
 %div.required
   = f.label :name
   = f.text_field :name
@@ -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
@@ -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
 - 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
 - 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
@@ -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
+= errors_for @user
+
 .required
   = f.label :name
   = f.text_field :name
@@ -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
@@ -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
@@ -20,7 +20,7 @@ function makeNestedItemsDestroyable(wrapper) {
     var nestedItem = $(this);
     var destroyLink = $('<a/>').text('remove').addClass('remove-nested');
     destroyLink.css('float','right');
-    nestedItem.find('label').first().prepend(destroyLink);
+    nestedItem.find('label').first().before(destroyLink);
   })
 }
@@ -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%;
	@@ -51,7 +51,7 @@ class UsersController < ApplicationController		@@ -51,7 +51,7 @@ class UsersController < ApplicationController
51	@user = User.find(params[:id])	51	@user = User.find(params[:id])
52	@user.destroy	52	@user.destroy
53		53
54	- flash[:success[ = "That's sad. #{@user.name} is no longer part of your team."	54	+ flash[:success] = "That's sad. #{@user.name} is no longer part of your team."
55	redirect_to users_path	55	redirect_to users_path
56	end	56	end
57		57
	@@ -0,0 +1,14 @@		@@ -0,0 +1,14 @@
		1	+module FormHelper
		2	+
		3	+ def errors_for(document)
		4	+ return unless document.errors.any?
		5	+
		6	+ content_tag(:div, :class => 'error-messages') do
		7	+ body = content_tag(:h2, 'Dang. The following errors are keeping this from being a success.')
		8	+ body += content_tag(:ul) do
		9	+ document.errors.full_messages.inject('') {\|errs, msg\| errs += content_tag(:li, msg) }
		10	+ end
		11	+ end
		12	+ end
		13	+
		14	+end
0	\ No newline at end of file	15	\ No newline at end of file
		1	+= errors_for @app
		2	+
1	%div.required	3	%div.required
2	= f.label :name	4	= f.label :name
3	= f.text_field :name	5	= f.text_field :name
	@@ -5,4 +5,4 @@		@@ -5,4 +5,4 @@
5		5
6	= render 'fields', :f => f	6	= render 'fields', :f => f
7		7
8	- %div= f.submit 'Update'
9	\ No newline at end of file	8	\ No newline at end of file
		9	+ %div.buttons= f.submit 'Update App'
10	\ No newline at end of file	10	\ No newline at end of file
		1	+= errors_for @user
		2	+
1	.required	3	.required
2	= f.label :name	4	= f.label :name
3	= f.text_field :name	5	= f.text_field :name
	@@ -4,4 +4,4 @@		@@ -4,4 +4,4 @@
4	= @user.errors.full_messages.to_sentence	4	= @user.errors.full_messages.to_sentence
5	= render 'fields', :f => f	5	= render 'fields', :f => f
6		6
7	- %div= f.submit 'Update'
8	\ No newline at end of file	7	\ No newline at end of file
		8	+ %div.buttons= f.submit 'Update User'
9	\ No newline at end of file	9	\ No newline at end of file
	@@ -20,7 +20,7 @@ function makeNestedItemsDestroyable(wrapper) {		@@ -20,7 +20,7 @@ function makeNestedItemsDestroyable(wrapper) {
20	var nestedItem = $(this);	20	var nestedItem = $(this);
21	var destroyLink = $('<a/>').text('remove').addClass('remove-nested');	21	var destroyLink = $('<a/>').text('remove').addClass('remove-nested');
22	destroyLink.css('float','right');	22	destroyLink.css('float','right');
23	- nestedItem.find('label').first().prepend(destroyLink);	23	+ nestedItem.find('label').first().before(destroyLink);
24	})	24	})
25	}	25	}
26		26