Twitter Bootstrap upgraded

rklubenspies · May 20, 2012 · fb29f8f · fb29f8f
1 parent f62f9bb
commit fb29f8f
Show file tree

Hide file tree

Showing 9 changed files with 126 additions and 103 deletions.
diff --git a/Gemfile b/Gemfile
@@ -22,7 +22,7 @@ gem 'yajl-ruby', '~> 1.1.0'
 gem 'haml', '>= 3.0.0'
 gem 'haml-rails'
 gem 'jquery-rails'
-gem 'bootstrap-sass'
+gem 'anjlab-bootstrap-rails', '>= 2.0', :require => 'bootstrap-rails'
 gem 'gritter', '1.0.0'
 
 # Gems used only for assets and not required

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -29,15 +29,16 @@ GEM
       activesupport (= 3.1.3)
     activesupport (3.1.3)
       multi_json (~> 1.0)
+    anjlab-bootstrap-rails (2.0.3.2)
+      railties (>= 3.0)
+      sass
     ansi (1.4.1)
     arel (2.2.1)
     aws-sdk (1.2.6)
       httparty (~> 0.7)
       json (~> 1.4)
       nokogiri (>= 1.4.4)
       uuidtools (~> 2.1)
-    bootstrap-sass (1.4.3)
-      sass-rails (~> 3.1)
     bson (1.5.2)
     bson_ext (1.5.2)
       bson (= 1.5.2)
@@ -146,8 +147,8 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  anjlab-bootstrap-rails (>= 2.0)
   aws-sdk
-  bootstrap-sass
   bson_ext
   coffee-rails (~> 3.1.1)
   execjs

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -14,10 +14,5 @@
 $(function() {
 	jQuery("time#timeago").timeago();
 
-	$("a[rel=twipsy]")
-		.twipsy({
-			live: true,
-			placement: "above",
-			offset: 5
-		})
+	$("a[rel=tooltip]").tooltip()
 })
diff --git a/app/assets/stylesheets/app.css.scss b/app/assets/stylesheets/app.css.scss
@@ -16,8 +16,14 @@ section, header {
   > .row {
     margin-bottom: 10px; } }
 
+@media (min-width: 768px) {
+	.container-fluid {
+		width: 620px;
+	}
+}
+
 #logo {
-		text-align: center; }
+	text-align: center; }
 
 #posted {
 	display: none; }
@@ -38,7 +44,10 @@ section, header {
 			.info {
 				color: #8d8d8d;
 				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-				font-size: 11px; } }
+				font-size: 11px;
+				margin-top: 5px;
+				i {
+					opacity: 0.5; } } }
 
 		.prayed-for {
 			width: 48px;
@@ -55,18 +64,24 @@ section, header {
 
 #home-show {
 	h2 {
-		font-size: 20px;
-		line-height: 24px;
-		font-weight: 500; }
-	small {
+		font-family: "Lucida Bright", Georgia, serif;
+		font-size: 24px;
+		line-height: 30px;
+		font-weight: 300; }
+	.info {
 		color: #8d8d8d;
-		font-size: 11px; }
-	img {
-		margin-top: 5px; }
+		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+		font-size: 11px;
+		margin-top: 5px;
+		i {
+			opacity: 0.5; } }
 	.prayed_for {
 		font-size: 14px;
 		font-style: italic; } }
 
+form p.help-block {
+	color: #9c9c9c; }
+
 /* CSS3 Text Selection Color */	
 ::selection {
 	background: #65BDFC; }
@@ -80,19 +95,18 @@ $gridColumnWidth: 60px;
 $gridGutterWidth: 20px;
 
 /* Custom Tabs */
-.tabs {
+ul.nav-tabs {
   > li {
-    > a {
-      &:hover {
-        text-decoration: none;
-        background-color: #eee;
-        border-color: #eee #eee #ddd; } } }
-  .active > a, .active > a:hover {
+    > a:hover {
+			text-decoration: none;
+      background-color: #eee;
+      border-color: #eee #eee #ddd; } }
+	li.active > a, a:hover {
 		background: url(/assets/body_bg.png);
-    background-color: #f6f6f6 !important; } }
+		background-color: #f6f6f6 !important; } }
 
 /* Custom Form Actions */
-.actions {
+.form-actions {
   background: url(/assets/body_bg.png) !important;
   background-color: #f6f6f6 !important; }
 

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -3,6 +3,8 @@
  * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
  * the top of the compiled file, but it's generally better to create a new file per style scope.
  *= require_self
+ *= require bootstrap
+ *= require responsive
  *= require gritter
  *= require_tree . 
 */
diff --git a/app/views/prayers/_prayer.html.haml b/app/views/prayers/_prayer.html.haml
@@ -9,19 +9,19 @@
 				.info
 					%small
 						%i.icon-user
-						\-#{prayer.name.split(" ")[0]}
+						=prayer.name.split(" ")[0]
 
 						%i.icon-time
 						=timeago prayer.created_at
 
 						-if prayer.location
 							%i.icon-map-marker
-							from #{prayer.location}
+							=prayer.location
 
 			-# Prayed for button
 			.prayed-for
 				-# If the prayer request was already prayed for show disabled version, otherwise show enabled one
 				-if already_prayed_for? prayer.id
-					=link_to image_tag("prayed_for_icon.png"), "#", :class => "btn disabled", :"data-prayed-for-id" => prayer.id, :rel => "twipsy", :title => prayed_for_number(true, prayer.times_prayed_for)
+					=link_to image_tag("prayed_for_icon.png"), "#", :class => "btn disabled", :"data-prayed-for-id" => prayer.id, :rel => "tooltip", :title => prayed_for_number(true, prayer.times_prayed_for)
 				-else
-					=link_to image_tag("prayed_for_icon.png"), prayed_for_prayer_path(prayer), :remote => true, :class => "btn", :"data-prayed-for-id" => prayer.id, :rel => "twipsy", :title => prayed_for_number(false, prayer.times_prayed_for) + " Click here to pray for this."
+					=link_to image_tag("prayed_for_icon.png"), prayed_for_prayer_path(prayer), :remote => true, :class => "btn", :"data-prayed-for-id" => prayer.id, :rel => "tooltip", :title => prayed_for_number(false, prayer.times_prayed_for) + " Click here to pray for this."
diff --git a/app/views/prayers/index.html.haml b/app/views/prayers/index.html.haml
@@ -1,92 +1,84 @@
 %section#home-index.animated.fadeInDown
 	.row
 		.span8
-			%ul.tabs{:data => {:tabs => "tabs"}}
+			%ul.nav.nav-tabs
 				%li.active
-					%a{:href => "#prayers"} Prayer Requests
+					%a{:href => "#prayers", :"data-toggle" => "tab"} Prayer Requests
 				%li
-					%a{:href => "#new-prayer"} Submit a Prayer Request
+					%a{:href => "#new-prayer", :"data-toggle" => "tab"} Submit a Prayer Request
 				%li
-					%a{:href => "#about"} About Share a Prayer
+					%a{:href => "#about", :"data-toggle" => "tab"} About Share a Prayer
 
 			.tab-content
 				.tab-pane.active#prayers
 					.prayers{:"data-last" => "#{@prayers.last.created_at.utc}"}
 						-unless @prayers.blank?
 							=render @prayers
 
-					#no-more-prayers.alert-message.warning.hide
-						%p
-							%strong Uh-oh!
-							We don't have any more prayer requests to show you right now.
-
+					#no-more-prayers.alert.hide
+						%button.close{:"data-dismiss" => "alert"} ×
+						<strong>Uh-oh!</strong> We don't have any more prayer requests to show you right now.
+				
 				.tab-pane#new-prayer
 					#new-prayer-result
-						#posted-email.alert-message.success.hide{:data => {:alert => "alert"}}
-							%a.close{:href => "#"} &times;
-							%p
-								%strong Request Posted!
-								We'll be sure to email you a link to it so that you can share it and comment on it with your friends!
+						#posted-email.alert.alert-success.hide
+							%button.close{:"data-dismiss" => "alert"} ×
+							<strong>Request Posted!</strong> We'll be sure to email you a link to it so that you can share it and comment on it with your friends!
 								
-						#posted-no-email.alert-message.success.hide{:data => {:alert => "alert"}}
-							%a.close{:href => "#"} &times;
-							%p
-								%strong Request Posted!
-								Per your request, we have not emailed you a link to your prayer request.
+						#posted-no-email.alert.alert-success.hide
+							%button.close{:"data-dismiss" => "alert"} ×
+							<strong>Request Posted!</strong> Per your request, we have not emailed you a link to your prayer request.
 						
-						#post-error.alert-message.error.hide{:data => {:alert => "alert"}}
-							%a.close{:href => "#"} &times;
-							%p
-								%strong We encountered an error!
-								Please try submitting your prayer request again later. If the problem persists, please email dev@shareaprayer.org.
+						#post-error.alert.alert-error.hide
+							%button.close{:"data-dismiss" => "alert"} ×
+							<strong>We encountered an error!</strong> Please try submitting your prayer request again later. If the problem persists, please email dev@shareaprayer.org.
 
 					#new-prayer-assembly
-						#spam-for-jerks.alert-message.info{:data => {:alert => "alert"}}
-							%a.close{:href => "#"} &times;
-							%p
-								%strong Spamming is not tolerated at Share a Prayer!
-								We're all about creating a community and bringing people together. We believe that spam destroys community and trust. We will never share your email address or spam you. See our #{link_to "privacy policy", privacy_path} for more details.
+						#spam-not-tolerated.alert.alert-info
+							%button.close{:"data-dismiss" => "alert"} ×
+							%h4.alert-heading Spamming is not tolerated at Share a Prayer!
+							We're all about creating a community and bringing people together. We believe that spam destroys community and trust. We will never share your email address or spam you. See our #{link_to "privacy policy", privacy_path} for more details.
 						
 						%p Want to share a prayer request with the world? Fill out the following form and we'll be sure to put your request online right away.
 						
 						%br
-						=form_for :prayer, :url => { :controller => "prayers", :action => "create" }, :html => { :id => "prayer-form" }, :remote => true do |f|
-							.clearfix
-								=f.label :name, "First Name"
-								.input
-									=f.text_field :name, :class => "span2", :placeholder => "Joe", :id => "prayer_name", :required => "required"
-									%input.btn#anonymous_name{:type => "button", :value => "I'd prefer to be anonymous"}
-									%span.help-block We'll display your first name below your prayer request.
+						
+						=form_for :prayer, :url => { :controller => "prayers", :action => "create" }, :html => { :id => "prayer-form", :class => "form-horizontal" }, :remote => true do |f|
+							%fieldset
+								.control-group
+									=f.label :name, "First Name", :class => "control-label"
+									.controls
+										=f.text_field :name, :class => "span2", :placeholder => "Joe", :id => "prayer_name", :required => "required"
+										%input.btn#anonymous_name{:type => "button", :value => "I'd prefer to be anonymous"}
+										%p.help-block We'll display your first name below your prayer request.
 
-							.clearfix
-								=f.label :email, "Your Email"
-								.input
-									=f.email_field :email, :class => "span5", :placeholder => "john@example.com", :id => "prayer_email", :required => "required"
-									%span.help-block We will never share your email address or spam you.
+								.control-group
+									=f.label :email, "Your Email", :class => "control-label"
+									.controls
+										=f.email_field :email, :class => "span4", :placeholder => "john@example.com", :id => "prayer_email", :required => "required"
+										%p.help-block We will never share your email address or spam you.
 
-							.clearfix
-								=f.label :location, "Where are you?"
-								.input
-									=f.text_field :location, :value => request.location.city != "" && request.location.state_code != "" ? "#{request.location.city}, #{request.location.state_code}" : "", :class => "span2", :placeholder => "City, State", :id => "prayer_location", :required => "required"
-									%input.btn#no_location{:type => "button", :value => "I do not want to share my location"}
-									%span.help-block We'll display your city and state with your prayer request.
+								.control-group
+									=f.label :location, "Where are you?", :class => "control-label"
+									.controls
+										=f.text_field :location, :value => request.location.city != "" && request.location.state_code != "" ? "#{request.location.city}, #{request.location.state_code}" : "", :class => "span2", :placeholder => "City, State", :id => "prayer_location", :required => "required"
+										%input.btn#no_location{:type => "button", :value => "I do not want to share my location"}
+										%p.help-block We'll display your city and state with your prayer request.
 
-							.clearfix
-								=f.label :request, "Prayer Request"
-								.input
-									=f.text_area :request, :class => "span5", :placeholder => "Mauris iaculis porttitor posuere. Praesent id metus massa.", :id => "prayer_request", :rows => "5", :required => "required", :maxlength => "160"
-									%span.help-block Please keep it within 160 characters
+								.control-group
+									=f.label :request, "Prayer Request", :class => "control-label"
+									.controls
+										=f.text_area :request, :class => "span5", :placeholder => "Mauris iaculis porttitor posuere. Praesent id metus massa.", :id => "prayer_request", :rows => "5", :required => "required", :maxlength => "160"
+										%p.help-block Please keep it within 160 characters
 
-							.clearfix
-								.input
-									%ul.inputs-list
-										%li
-											%label
-												=f.check_box :email_me, {:checked => true}
-												%span Yes, please email me a link to my prayer request's page
+								.control-group
+									.controls
+										%label.checkbox
+											=f.check_box :email_me, {:checked => true}
+											Yes, please email me a link to my prayer request's page
 
-							.actions
-								%input.btn.primary{:name => "commit", :type => "submit", :value => "Post Request"}
+							.form-actions
+								%input.btn.btn-primary{:name => "commit", :type => "submit", :value => "Post Request"}
 								%input.btn{:name => "reset", :type => "reset", :value => "Cancel"}
 
 				.tab-pane#about
@@ -171,9 +163,9 @@
 	$('#prayer-form').validate({
 	    errorClass:'error',
 	    validClass:'success',
-	    errorElement:'span',
+	    errorElement:'p',
 	    highlight: function (element, errorClass, validClass) { 
-				$(element).parents("div[class='clearfix']").addClass(errorClass).removeClass(validClass); 
+				$(element).parents("div[class='control-group']").addClass(errorClass).removeClass(validClass); 
 	    }, 
 	    unhighlight: function (element, errorClass, validClass) { 
 				$(element).parents(".error").removeClass(errorClass).addClass(validClass); 

diff --git a/app/views/prayers/index.js.erb b/app/views/prayers/index.js.erb
@@ -2,6 +2,7 @@
 <% unless @prayers.blank? %>
 	$(".prayers").append("<%= escape_javascript(render(@prayers)) %>");
 	$(".prayers").data('last', '<%=@prayers.last.created_at%>')
+	jQuery("time#timeago").timeago();
 <% else %>
 	// Show the no more prayers notice
 	$("#no-more-prayers").show();

diff --git a/app/views/prayers/show.html.haml b/app/views/prayers/show.html.haml
@@ -4,9 +4,17 @@
 	.row
 		-# Show the prayer request using the CSS grid
 		.span8
-			%h2 "#{@prayer.request}"
-			%p
-				%small Posted by #{@prayer.name.split(" ")[0]} #{timeago(@prayer.created_at)} #{@prayer.location ? "from #{@prayer.location}" : ""}
+			%h2 &#8220;#{@prayer.request}&#8221;
+			.info
+				%i.icon-user
+				=@prayer.name.split(" ")[0]
+
+				%i.icon-time
+				=timeago @prayer.created_at
+
+				-if @prayer.location
+					%i.icon-map-marker
+					=@prayer.location
 
 	-# Create a new row for the buttons
 	.row
@@ -17,19 +25,29 @@
 			-# Buttons
 			%p
 				-# Back button
-				=link_to "More Prayer Requests", prayers_path, :class => "btn"
+				%a.btn{:href => url_for(prayers_path)}
+					%i.icon-home
+					More Prayer Requests
 
 				-# If the prayer request was already prayed for display the disabled button, otherwise show the enabled one
 				-if @already_prayed_for
-					=link_to "You already prayed for this", "#", :class => "btn success disabled", :id => "home-show-prayed-for"
+					%a.btn.btn-success.disabled#home-show-prayed-for{:href => "#"}
+						%i.icon-ok.icon-white
+						You already prayed for this
 				-else
-					=link_to "I prayed for this", prayed_for_prayer_path(@prayer), :remote => true, :class => "btn success", :id => "home-show-prayed-for"
+					%a.btn.btn-success#home-show-prayed-for{:href => url_for(prayed_for_prayer_path(@prayer)), :"data-remote" => "true"}
+						%i.icon-ok.icon-white
+						I prayed for this
 
 				-# If the prayer request was already reported display the disabled button, otherwise show the enabled one
 				-if @already_reported
-					=link_to "You already reported this content", "#", :class => "btn danger disabled", :id => "home-show-report"
+					%a.btn.btn-danger.disabled#home-show-report{:href => "#"}
+						%i.icon-ban-circle.icon-white
+						You already reported this content
 				-else
-					=link_to "Report Inappropriate Content", report_prayer_path(@prayer), :remote => true, :class => "btn danger", :id => "home-show-report"
+					%a.btn.btn-danger#home-show-report{:href => url_for(report_prayer_path(@prayer)), :"data-remote" => "true"}
+						%i.icon-ban-circle.icon-white
+						Report Inappropriate Content
 
 	-# Create a new row for comments
 	.row