change font to webfont, add ingredient captions

app/assets/stylesheets/orders.css.scss

@@ -11,8 +11,8 @@ body {
   color: #333;
 
   //font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif;
-  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
-  font-size: 14px;
+  font-family: "Lato", "Helvetica Neue", helvetica, arial, sans-serif;
+  font-size: 17px;
 }
 
 #wrap{
@@ -33,6 +33,7 @@ body {
 	cursor: default;
 	height: 26px;
 	border-bottom: 2px solid #d6b28c;
+	line-height:10px;
 	span {
 		&.active{
       border-bottom: 2px solid #000;
@@ -52,7 +53,7 @@ body {
   color: #000;
 }
 
-$content-height: 350px;
+$content-height: 300px;
 
 #bread-image{
 	height: $content-height;
@@ -62,9 +63,10 @@ $content-height: 350px;
 	background-image: url('http://2.bp.blogspot.com/_gLGOsirSkHc/TMi5OkI98RI/AAAAAAAANmQ/b20iE_IH3Yk/s1600/sliced%20banana%20bread.jpg');
 }
 
+$component-image-width: 80px;
 .component-image{
-	max-height: 100px;
-	max-width: 100px;
+	height: $component-image-width;
+	width: $component-image-width;
 	opacity: 0.4;
 	cursor: pointer;
 
@@ -73,6 +75,12 @@ $content-height: 350px;
 	}
 }
 
+.component-title{
+  display:inline-block;
+	width: $component-image-width;
+	text-align:center;
+}
+
 .selected-component{
 	font-weight: bold;
 }
@@ -121,6 +129,7 @@ $content-height: 350px;
 }
 
 p{
+  font-family: "Lato", "Helvetica Neue", helvetica, arial, sans-serif;
   label{
     display: inline;
     font-size: 20px;
@@ -168,4 +177,8 @@ margin-bottom: 5px;
 
 [class^="icon-"], [class*=" icon-"] {
   vertical-align: middle;
+}
+
+#filler{
+  height:110px;
 }

app/helpers/application_helper.rb

@@ -1,2 +1,29 @@
 module ApplicationHelper
+
+  def get_components_str_from_order(order)
+    selected_components = order.get_selected_components
+    componentText = ''
+    if selected_components.any?
+      txt = componentName(selected_components[selected_components.length-1]);
+
+      #b and c
+      #a, b and c
+      second_last_component = selected_components.length-2;
+      second_last_component.downto(0) {|i|
+        if i == second_last_component
+          componentText = componentName(selected_components[i]) + " and " + txt
+        else
+          componentText = componentName(selected_components[i]) + ", " + txt
+        end
+      }
+      componentText = " with " + componentText
+    end
+    return componentText
+  end
+
+  def componentName(comp_name)
+    return "<span class='selected-component'>" + comp_name + "</span>"
+  end
+
+
 end

app/helpers/orders_helper.rb

@@ -1,29 +1,5 @@
 module OrdersHelper
 
-  def get_components_str_from_order(order)
-    selected_components = order.get_selected_components
 
-    if selected_components.any?
-      txt = componentName(selected_components[selected_components.length-1]);
-
-      #b and c
-      #a, b and c
-      second_last_component = selected_components.length-2;
-      second_last_component.downto(0) {|i|
-        if i == second_last_component
-          componentText = componentName(selected_components[i]) + " and " + txt
-        else
-          componentText = componentName(selected_components[i]) + ", " + txt
-        end
-      }
-      componentText = " with " + componentText
-    end
-    return componentText
-  end
-
-  def componentName(comp_name)
-    return "<span class='selected-component'>" + comp_name + "</span>"
-  end
-
 
 end

app/mailers/order_mailer.rb

@@ -1,4 +1,6 @@
 class OrderMailer < ActionMailer::Base
+  add_template_helper(ApplicationHelper)
+
   MY_EMAIL = "masha.ku@gmail.com"
   default from: MY_EMAIL
 

app/models/order.rb

@@ -40,7 +40,7 @@ def encrypt_paypal(return_url, notify_url)
        :item_name => 'Banana bread',
        :quantity => self.quantity,
        :amount => BREAD_PRICE, #APP_CONFIG[:price] * quantity,
-       :currency_code => 'CAD',
+       :currency_code => 'US',
        :invoice => self.id,
        :rm => 0,
        #:button_subtype => 'services',
@@ -60,10 +60,12 @@ def encrypt_for_paypal(values)
   end
 
   def get_selected_components
+    components = []
     components.push('raisins') && self.raisins
     components.push('chocolate chips') && self.chocolate_chips
     components.push('walnuts') && self.walnuts
     components.push('flax seeds') && self.flax_seeds
     components.push('cinnamon') && self.cinnamon
+    return components
   end
 end

app/views/layouts/application.html.erb

@@ -1,12 +1,13 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Bread</title>
+  <title>Banana Bread</title>
   <%= stylesheet_link_tag    "application", :media => "all" %>
   <%= javascript_include_tag "application" %>
 	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDhRPSh3X2b3goMp4DcBLd855DGDv1iO48&sensor=false">
 			</script>
   <%= csrf_meta_tags %>
+  <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
 </head>
 <body>
 

app/views/order_mailer/email_order.html.erb

@@ -9,7 +9,7 @@
     <p>
 		Thank you for placing an order with us!
 
-		You ordered Banana Bread <%= get_components_str_from_order(@order) %>.
+		You ordered Banana Bread <%= get_components_str_from_order(@order).html_safe %>.
 		Your order # <%= @order.id %> is going to be delivered soon.		
     </p>
   </body>

app/views/orders/_select_template.html

@@ -26,6 +26,10 @@
                     <%% _.each(availableComponents, function(url, name) { %>
                         <img alt="<%%= name %>" src="<%%= url %>" class="component-image<%%= components[name] ? ' selected' : '' %>"/>
                     <%% }); %>
+                    <br/>
+                    <%% _.each(availableComponents, function(url, name) { %>
+                        <span class="component-title"><%%=name%></span>
+                    <%% }); %>
                 </div>
                 <div class="span1">
                     <div id="quantity-plus" class="btn btn-primary plus-minus <%%= quantity == 3 ? 'disabled' : '' %> ">+</div>
@@ -37,7 +41,7 @@
 
         <div class="span4">
             <div class="sidebar">
-                <p id="order-text" class="lead">You are about to order <span id="order-quantity"><%%= quantity %></span> Banana bread <span id="order-loaf"><%%= loaf %></span><span id="order-components"><%%= order_text %></span>.</p>
+                <p id="order-text" class="lead">You are ordering <span id="order-quantity"><%%= quantity %></span> Banana bread <span id="order-loaf"><%%= loaf %></span><span id="order-components"><%%= order_text %></span>.</p>
         		<div class="well">
         		    $<%%= loaf_price %> * <%%= quantity%> = $<%%= loaf_price * quantity %>
         		</div>
@@ -123,7 +127,7 @@
             </div>
         </form>
         <div class="span4">
-            <p id="order-text" class="lead">You are about to order <span id="order-quantity"><%%= quantity %></span> Banana bread <span id="order-loaf"><%%= loaf %></span><span id="order-components"><%%= order_text %></span>.</p>
+            <p id="order-text" class="lead">You are ordering <span id="order-quantity"><%%= quantity %></span> Banana bread <span id="order-loaf"><%%= loaf %></span><span id="order-components"><%%= order_text %></span>.</p>
     		<div class="well">
     		    $<%%= loaf_price %> * <%%= quantity%> = $<%%= loaf_price * quantity %>
     		</div>
@@ -146,11 +150,11 @@ <h2>Dear <%%=user_name%>,</h2>
 
         </div>
         <div class="span4">
-            <p id="order-text" class="lead">You are about to order <span id="order-quantity"><%%= quantity %></span> Banana bread <span id="order-loaf"><%%= loaf %></span><span id="order-components"><%%= order_text %></span>.</p>
+            <p id="order-text" class="lead">You are ordering <span id="order-quantity"><%%= quantity %></span> Banana bread <span id="order-loaf"><%%= loaf %></span><span id="order-components"><%%= order_text %></span>.</p>
     		<div class="well">
     		    $<%%= loaf_price %> * <%%= quantity%> = $<%%= loaf_price * quantity %>
     		</div>
-
+            <div id="filler"></div>
     		<div id="order-step">
     			<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
     				<div id="payment">

app/views/static_pages/thank_you.html.erb

@@ -1,5 +1,11 @@
 <div style="text-align: center;">
+    <p class="lead">
 	THANK YOU!
+	</p>
+
+	<p class="lead">
+	We will send you a reminder about your pickup or delivery time.
+	</p>
 
 	<p>
 		<a href=<%= root_url %>> Home </a>