Download as
Browse Code »

Commit 203adbece7eadf5eae968be79e35b7312b2d6678

Authored by Jared Pace
1 parent 9b2ed19b
Exists in master and in 1 other branch production

Update form styles

Showing 14 changed files with 60 additions and 43 deletions   Show diff stats
app/controllers/users_controller.rb
  Diff comments   View file @203adbe
... ... @@ -51,7 +51,7 @@ class UsersController < ApplicationController
51 51 @user = User.find(params[:id])
52 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 55 redirect_to users_path
56 56 end
57 57  
... ...
app/helpers/form_helper.rb 0 → 100644
  Diff comments   View file @203adbe
... ... @@ -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 15 \ No newline at end of file
... ...
app/views/apps/_fields.html.haml
  Diff comments   View file @203adbe
  1 += errors_for @app
  2 +
1 3 %div.required
2 4 = f.label :name
3 5 = f.text_field :name
... ...
app/views/apps/edit.html.haml
  Diff comments   View file @203adbe
... ... @@ -5,4 +5,4 @@
5 5  
6 6 = render 'fields', :f => f
7 7  
8   - %div= f.submit 'Update'
9 8 \ No newline at end of file
  9 + %div.buttons= f.submit 'Update App'
10 10 \ No newline at end of file
... ...
app/views/apps/new.html.haml
  Diff comments   View file @203adbe
... ... @@ -5,4 +5,4 @@
5 5  
6 6 = render 'fields', :f => f
7 7  
8   - %div.add_app= f.submit 'Add'
9 8 \ No newline at end of file
  9 + %div.buttons= f.submit 'Add App'
10 10 \ No newline at end of file
... ...
app/views/devise/passwords/edit.html.haml
  Diff comments   View file @203adbe
1 1 - content_for :title, "Change your password"
2 2  
3 3 = form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => { :method => :put }) do |f|
4   - = devise_error_messages!
  4 + = errors_for resource
5 5 = f.hidden_field :reset_password_token
6 6 .required
7 7 = f.label :password, 'New password'
... ... @@ -9,4 +9,4 @@
9 9 .required
10 10 = f.label :password_confirmation, 'One more time'
11 11 = f.password_field :password_confirmation
12   - %div.change_password= f.submit "Change my password"
13 12 \ No newline at end of file
  13 + %div.buttons= f.submit "Change my password"
14 14 \ No newline at end of file
... ...
app/views/devise/passwords/new.html.haml
  Diff comments   View file @203adbe
1 1 - content_for :title, "Forget your password?"
2 2 = form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => { :method => :post }) do |f|
3   - = devise_error_messages!
  3 + = errors_for resource
4 4 .required
5 5 = f.label :email
6 6 = f.text_field :email
7 7  
8   - %div= f.submit "Send me reset password instructions"
9 8 \ No newline at end of file
  9 + %div.buttons= f.submit "Send me reset password instructions"
10 10 \ No newline at end of file
... ...
app/views/devise/sessions/new.html.haml
  Diff comments   View file @203adbe
... ... @@ -14,5 +14,5 @@
14 14 = f.check_box :remember_me, :tabindex => 3
15 15 = f.label :remember_me
16 16  
17   - %div.sign_in
18   - %button{:type => 'submit'}= "Sign in"
19 17 \ No newline at end of file
  18 + %div.buttons
  19 + %button{:type => 'submit', :class => 'sign_in'}= "Sign in"
20 20 \ No newline at end of file
... ...
app/views/users/_fields.html.haml
  Diff comments   View file @203adbe
  1 += errors_for @user
  2 +
1 3 .required
2 4 = f.label :name
3 5 = f.text_field :name
... ...
app/views/users/edit.html.haml
  Diff comments   View file @203adbe
... ... @@ -4,4 +4,4 @@
4 4 = @user.errors.full_messages.to_sentence
5 5 = render 'fields', :f => f
6 6  
7   - %div= f.submit 'Update'
8 7 \ No newline at end of file
  8 + %div.buttons= f.submit 'Update User'
9 9 \ No newline at end of file
... ...
app/views/users/new.html.haml
  Diff comments   View file @203adbe
... ... @@ -4,4 +4,4 @@
4 4  
5 5 = render 'fields', :f => f
6 6  
7   - %div= f.submit 'Add'
8 7 \ No newline at end of file
  8 + %div.buttons= f.submit 'Add User'
9 9 \ No newline at end of file
... ...
public/javascripts/form.js
  Diff comments   View file @203adbe
... ... @@ -20,7 +20,7 @@ function makeNestedItemsDestroyable(wrapper) {
20 20 var nestedItem = $(this);
21 21 var destroyLink = $('<a/>').text('remove').addClass('remove-nested');
22 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  
... ...
public/stylesheets/application.css
  Diff comments   View file @203adbe
... ... @@ -237,11 +237,12 @@ form fieldset legend {
237 237 }
238 238 form label {
239 239 font-weight: bold; text-transform: uppercase; line-height: 1.6em;
240   - display: block;
  240 + display: inline-block;
241 241 }
242 242 form label.inline { display: inline; }
243 243 form .checkbox label { display: inline; }
244   -form .required label { color: #990000;}
  244 +form .required label { padding-right: 20px; background: transparent url(images/icons/required.png) right 50% no-repeat; }
  245 +form .field_with_errors label { color: #900; }
245 246 form input[type=text], form input[type=password] {
246 247 width: 96%; padding: 0.8em;
247 248 font-size: 1em;
... ... @@ -267,24 +268,7 @@ form input[type=submit] {
267 268 font-size: 1.2em; line-height: 1em; text-transform: uppercase;
268 269 border: none; color: #FFF; background-color: #387fc1;
269 270 }
270   -form div.send_password input[type=submit],
271   -form div.change_password input[type=submit],
272   -form div.add_app input[type=submit],
273   -input#user_submit[type=submit] {
274   - color: #666;
275   - display: block;
276   - padding: 0 20px 0 20px;
277   - font-size: 12px; font-weight: bold; line-height: 30px; text-decoration: none;
278   - text-shadow: 1px 1px 0px #FFF;
279   - -webkit-text-shadow: 1px 1px 0px #FFF;
280   - background: transparent no-repeat;
281   - border: none;
282   -}
283   -form div.sign_in,
284   -form div.send_password,
285   -form div.change_password,
286   -form div.add_app,
287   -input#user_submit[type=submit] {
  271 +form div.buttons {
288 272 color: #666;
289 273 background: #FFF url(images/button-bg.png) 0 bottom repeat-x;
290 274 border-radius: 50px;
... ... @@ -293,26 +277,26 @@ input#user_submit[type=submit] {
293 277 border: 1px solid #bbb;
294 278 display: inline-block;
295 279 }
296   -form div.sign_in:hover,
297   -form div.send_password:hover,
298   -form div.change_password:hover,
299   -form div.add_app:hover,
300   -input#user_submit[type=submit]:hover {
  280 +form div.buttons:hover {
301 281 color: #666;
302 282 box-shadow: 0 0 3px #69c;
303 283 -moz-box-shadow: 0 0 3px #69c;
304 284 -webkit-box-shadow: 0 0 3px #69c;
305 285 }
306   -form div.sign_in button {
  286 +form div.buttons input, form div.buttons button {
  287 + padding: 0 20px;
307 288 color: #666;
308   - display: block;
309   - padding: 0 20px 0 40px;
310   - font-size: 14px; font-weight: bold; line-height: 39px; text-decoration: none;
311   - text-shadow: 1px 1px 0px #FFF;
  289 + background: none;
  290 + font-size: 14px; font-weight: bold; line-height: 36px; text-decoration: none;
  291 + text-shadow: 1px 1px 0px #FFF;
  292 + -moz-text-shadow: 1px 1px 0px #FFF;
312 293 -webkit-text-shadow: 1px 1px 0px #FFF;
313   - background: transparent url(images/icons/right-arrow.png) 5px 5px no-repeat;
314 294 border: none;
315 295 }
  296 +form div.buttons button.sign_in {
  297 + padding-left: 40px;
  298 + background: transparent url(images/icons/right-arrow.png) 3px 3px no-repeat;
  299 +}
316 300 form > div > span {
317 301 display: block; margin-top: 0.5em;
318 302 font-size: 0.85em;
... ... @@ -336,6 +320,21 @@ form legend + .nested {
336 320 padding-top: 0;
337 321 }
338 322  
  323 +form .error-messages {
  324 + padding: 13px;
  325 + background: #fcc;
  326 + border: 1px solid #f99;
  327 +}
  328 +
  329 +form .error-messages h2 {
  330 + font-size: 1.2em;
  331 + border-color: #F99;
  332 +}
  333 +form .error-messages ul {
  334 + margin-left: 2em;
  335 + list-style-type: square;
  336 +}
  337 +
339 338 /* Tables */
340 339 table {
341 340 width: 100%;
... ...
public/stylesheets/images/icons/required.png 0 → 100644
View file @203adbe

250 Bytes