From 8e608a61d491b858ac891ea622c46b0c7d6440ea Mon Sep 17 00:00:00 2001
From: Dan Barber <danbee@gmail.com>
Date: Mon, 3 Jun 2013 09:06:44 +0100
Subject: [PATCH] Tweak error display. Move flash outside of form.

---
 app/assets/stylesheets/photos.css.sass | 16 +++++++------
 app/views/contacts/new.html.erb        | 32 +++++++++++++-------------
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/app/assets/stylesheets/photos.css.sass b/app/assets/stylesheets/photos.css.sass
index 71b4a3b..e3e9846 100644
--- a/app/assets/stylesheets/photos.css.sass
+++ b/app/assets/stylesheets/photos.css.sass
@@ -229,7 +229,7 @@ form
     margin-top: 4px
     &.error
       float: none
-      display: inline
+      display: none !important
       color: #990000
       margin-left: 10px
   textarea
@@ -259,28 +259,30 @@ form
 #alert
   background: #fffeef
   color: #664400
-  border-width: 2px 0
+  border-width: 0 0 1px
   border-style: solid
   border-color: #996600
-  padding: 0 10px 2px
-  margin-top: 15px
+  padding: 0 25px 2px
+  border-radius: 2px
 
 #notice
   background: #efffef
   color: #446600
-  border-width: 2px 0
+  border-width: 0 0 1px
   border-style: solid
   border-color: #669900
-  padding: 0 10px 2px
-  margin-top: 15px
+  padding: 0 25px 2px
+  border-radius: 2px
 
 .field_with_errors
   input, textarea
     background: #ffefef
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 2px rgba(255, 0, 0, 0.8) !important
     border-color: #cc3333 !important
 
 input.error, textarea.error
   background: #ffefef
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 2px rgba(255, 0, 0, 0.8) !important
   border-color: #cc3333 !important
 
 form input[type='submit']
diff --git a/app/views/contacts/new.html.erb b/app/views/contacts/new.html.erb
index 28e5dd3..2de1240 100644
--- a/app/views/contacts/new.html.erb
+++ b/app/views/contacts/new.html.erb
@@ -3,33 +3,33 @@
 <% end %>
 
 <div class="sg-17 contact-form">
+  <% if flash[:notice] -%>
+    <div id="notice"><%= flash[:notice] %></div>
+  <% end -%>
+  <% if flash[:alert] -%>
+    <div id="alert"><%= flash[:alert] %></div>
+  <% end -%>
   <%= form_for :contact, :url => { :action => 'create' }, :html => { :id => 'contact_form' } do |f| %>
-    <% if flash[:notice] -%>
-      <div id="notice"><%= flash[:notice] %></div>
-    <% end -%>
-    <% if flash[:alert] -%>
-      <div id="alert"><%= flash[:alert] %></div>
-    <% end -%>
     <p>Please use the form below to contact me.</p>
     <p>
-    <%= f.label :name %>
-    <%= f.text_field :name %>
+      <%= f.label :name %>
+      <%= f.text_field :name %>
     </p>
     <p>
-    <%= f.label :email %>
-    <%= f.text_field :email %>
+      <%= f.label :email %>
+      <%= f.text_field :email %>
     </p>
     <p>
-    <%= f.label :subject %>
-    <%= f.text_field :subject %>
+      <%= f.label :subject %>
+      <%= f.text_field :subject %>
     </p>
     <p>
-    <%= f.label :message %>
-    <%= f.text_area :message %>
+      <%= f.label :message %>
+      <%= f.text_area :message %>
     </p>
     <p>
-    <%= f.label "-", :style => "opacity: 0;" %>
-    <%= f.submit 'Send Message' %>
+      <%= f.label "-", :style => "opacity: 0;" %>
+      <%= f.submit 'Send Message' %>
     </p>
   <% end %>
 </div>