Merge pull request #324 from scouttyg/bootstrap-design-tweaks

Design fixes for base Kandan app
kandanapp · Apr 10, 2014 · 5d9e4b8 · 5d9e4b8
2 parents 52a8e38 + 18bbeea
commit 5d9e4b8
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 34 deletions.
diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass
@@ -10,6 +10,8 @@
 @import bootstrap/forms
 @import bootstrap/type
 @import bootstrap/scaffolding
+@import bootstrap/alerts
+@import bootstrap/close
 @import bourbon
 
 @import shared/content_block

diff --git a/app/assets/stylesheets/shared/_forms.sass b/app/assets/stylesheets/shared/_forms.sass
@@ -15,4 +15,4 @@ input[type="search"],
 input[type="tel"],
 input[type="color"],
 .uneditable-input
-  +box-sizing(content-box)
+  +box-sizing(border-box)
diff --git a/app/helpers/devise_helper.rb b/app/helpers/devise_helper.rb
@@ -0,0 +1,12 @@
+module DeviseHelper
+ def devise_error_messages!
+    return "" if resource.errors.empty?
+    messages = resource.errors.full_messages.map { |msg| content_tag(:li, msg) }.join
+    html = <<-HTML
+      <div class="alert alert-danger alert-block">
+        #{messages}
+      </div>
+      HTML
+    html.html_safe
+  end
+end
diff --git a/app/views/devise/passwords/new.html.erb b/app/views/devise/passwords/new.html.erb
@@ -2,8 +2,11 @@
   <h3 class="heading">Forgot Password?</h3>
   <%= form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => { :method => :post }) do |f| %>
     <%= devise_error_messages! %>
-    <%= f.email_field :email,  :placeholder => 'Email Address' %>
-	  <p><%= f.submit "Submit",   :class => "btn  btn-primary" %></p>
-	<% end %>
-	<p><%= render :partial => "devise/shared/links" %></p>
+    <div class="form-group">
+      <%= label_tag :email, "Email", :class => "control-label" %>
+      <%= f.text_field :email,  :autofocus => true, :placeholder => 'jsmith@example.com', :class => "form-control" %>
+    </div>
+    <p><%= f.submit "Submit",   :class => "btn  btn-primary" %></p>
+  <% end %>
+  <p><%= render :partial => "devise/shared/links" %></p>
 </div>
diff --git a/app/views/devise/registrations/edit.html.erb b/app/views/devise/registrations/edit.html.erb
@@ -2,23 +2,48 @@
   <%= link_to content_tag(:i, nil, class: 'icon-angle-left'), root_path, class: 'button left' %>
 <% end %>
 
-<div class="devise">
-  <h3 class="heading">Edit <%= resource_name.to_s.humanize %></h3>
-  <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :put }) do |f| %>
+<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :put , :role => "form"}) do |f| %>
+  <div class="devise">
+    <h3 class="heading">Edit <%= resource_name.to_s.humanize %></h3>    
     <%= devise_error_messages! %>
-    <%= f.text_field :first_name %>
-    <%= f.text_field :last_name %>
-    <%= f.email_field :email %>
-    <div class="note"><i>(leave blank if you don't want to change it)</i>
-    <%= f.password_field :password ,  :placeholder => 'New Password' %>
-    <%= f.password_field :password_confirmation,  :placeholder => 'New Password Confirm'  %>
+    <div class="form-group">
+      <%= label_tag :first_name, "First Name", :class => "control-label" %>
+      <%= f.text_field :first_name, :class => "form-control", :placeholder => "John" %>
     </div>
-    <div class="note"><i>(Avatar URL replaces your gravatar image)</i>
-    <%= f.url_field :avatar_url,  :placeholder => 'Avatar URL' %>
+    <div class="form-group">
+      <%= label_tag :last_name, "Last Name", :class => "control-label" %>
+      <%= f.text_field :last_name, :class => "form-control", :placeholder => "Smith" %>
     </div>
-    <div class="note"><i>(Enter your current password to confirm your changes)</i>
-    <%= f.password_field :current_password,   :placeholder => 'Current  Password' %>
+    <div class="form-group">
+      <%= label_tag :email, "Email", :class => "control-label" %>
+      <%= f.email_field :email, :class => "form-control", :placeholder => "jsmith@example.com" %>
     </div>
-    <p><%= f.submit "Update" ,   :class => "btn  btn-primary"  %>&nbsp;<%= link_to "Cancel my account", registration_path(resource_name),   :class => "btn  btn-danger", :confirm => "Are you sure you want to delete your account?", :method => :delete %></p>
-  <% end %>
-</div>
+    <div class="form-group">
+        <%= label_tag :password, "Password", :class => "control-label" %>
+        <%= f.password_field :password ,  :placeholder => 'New Password', :class => "form-control" %>
+        <div class="note"><i>(leave blank if you don't want to change it)</i></div>
+    </div>
+    <div class="form-group">
+        <%= label_tag :password_confirmation, "Password Confirmation", :class => "control-label" %>
+        <%= f.password_field :password_confirmation, :class => "form-control", :placeholder => 'New Password Confirmation'  %>
+    </div>
+    <div class="form-group">
+      <%= label_tag :avatar_url, "Avatar URL", :class => "control-label" %>
+      <%= f.url_field :avatar_url, :class => "form-control", :placeholder => 'http://www.gravatar.com/avatar/XXXXXXXXX' %>
+      <div class="note"><i>(Avatar URL replaces your gravatar image)</i></div>
+    </div>
+    <div class="form-group">
+      <%= label_tag :current_password, "Current Password", :class => "control-label" %>
+      <%= f.password_field :current_password, :class => "form-control", :placeholder => 'Current Password' %>
+      <div class="note"><i>(Enter your current password to confirm your changes)</i></div>
+    </div>
+    <p><%= link_to "Back", :back, :class => "btn  btn-info"  %>&nbsp;<%= f.submit "Update" ,   :class => "btn  btn-primary"  %></p>
+  </div>
+  <div class="devise">
+    <h3 class="heading">Cancel My Account.</h3>
+    <p>Unhappy with your service? We hate to see you go!<p>
+    <p><%= link_to "Cancel my account", registration_path(resource_name),   :class => "btn  btn-danger", :confirm => "Are you sure you want to delete your account?", :method => :delete %></p>
+<% end %>
+
+
+
diff --git a/app/views/devise/registrations/new.html.erb b/app/views/devise/registrations/new.html.erb
@@ -2,12 +2,30 @@
   <h3 class="heading">Register an Account</h3>
   <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
     <%= devise_error_messages! %>
-    <%= f.text_field :first_name,  :placeholder => 'First Name' %>
-    <%= f.text_field :last_name,  :placeholder => 'Last Name' %>
-    <%= f.email_field :email,  :placeholder => 'Email Address' %>
-    <%= f.text_field :username,  :placeholder => 'Username' %>
-    <%= f.password_field :password,  :placeholder => 'Password' %>
-    <%= f.password_field :password_confirmation,  :placeholder => 'Password Confirmation' %>
+    <div class="form-group">
+      <%= label_tag :first_name, "First Name", :class => "control-label" %>
+      <%= f.text_field :first_name, :class => "form-control", :placeholder => 'John' %>
+    </div>
+    <div class="form-group">
+      <%= label_tag :last_name, "Last Name", :class => "control-label" %>
+      <%= f.text_field :last_name, :class => "form-control", :placeholder => 'Smith' %>
+    </div>
+    <div class="form-group">
+      <%= label_tag :email, "Email", :class => "control-label" %>
+      <%= f.email_field :email, :class => "form-control", :placeholder => 'jsmith@example.com' %>
+    </div>
+    <div class="form-group">
+      <%= label_tag :password, "Username", :class => "control-label" %>
+      <%= f.text_field :username, :class => "form-control", :placeholder => 'jsmith' %>
+    </div>
+    <div class="form-group">
+      <%= label_tag :password, "Password", :class => "control-label" %>
+      <%= f.password_field :password, :class => "form-control", :placeholder => 'Something Memorable!' %>
+    </div>
+    <div class="form-group">
+      <%= label_tag :password, "Password Confirmation", :class => "control-label" %>
+      <%= f.password_field :password_confirmation, :class => "form-control", :placeholder => 'Something Memorable!' %>
+    </div>
     <p><%= f.submit "Register",   :class => "btn  btn-primary" %></p>
   <% end %>
   <p><%= render :partial => "devise/shared/links" %></p>

diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb
@@ -1,12 +1,18 @@
 <div class="devise">
   <h3 class="heading">Sign In</h3>
-  <%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
-  <%= f.text_field :username,  :autofocus => true, :placeholder => 'Username' %>
-  <%= f.password_field :password,  :placeholder => 'Password' %>
-  <label class="checkbox">
-    <input type="checkbox" value="remember-me"> Remember me
-  </label>
-  <%= f.submit "Sign in",  :class => "btn  btn-primary" %>
+  <%= form_for(resource, :as => resource_name, :url => session_path(resource_name), :role => :form) do |f| %>
+    <div class="form-group">
+      <%= label_tag :username, "Username", :class => "control-label" %>
+      <%= f.text_field :username,  :autofocus => true, :placeholder => 'jsmith', :class => "form-control" %>
+    </div>
+    <div class="form-group">
+      <%= label_tag :password, "Password", :class => "control-label" %>
+      <%= f.password_field :password, :class => "form-control"%>
+    </div>
+    <label class="checkbox">
+      <input type="checkbox" value="remember-me"> Remember me
+    </label>
+    <%= f.submit "Sign in",  :class => "btn  btn-primary" %>
   <% end %>
   <%= render :partial => "devise/shared/links" %>
 </div>