Styling

app/assets/javascripts/recipes.js

@@ -12,7 +12,6 @@
     var $editors = $container.find("textarea.step").closest(".step-editor");
 
     $editors.each(function(idx, elem) {
-      console.log('doing stuff!!!');
       var $editor = $(elem);
       var $step = $editor.find("textarea.step");
       autosize($step);
@@ -161,15 +160,15 @@
 
         var $quantity = $editor.find("input.quantity");
         var $units = $editor.find("input.units");
-        var $density = $editor.find("input.custom_density");
+        var $ingredientId = $editor.find("input.ingredient_id");
 
         var $modalQuantity = $modal.find("input.quantity");
         var $modalUnits = $modal.find("input.units");
-        var $modalDensity = $modal.find("input.density");
+        var $modalIngredientId = $modal.find("input.ingredient_id");
 
         $modalQuantity.val($quantity.val());
         $modalUnits.val($units.val());
-        $modalDensity.val($density.val());
+        $modalIngredientId.val($ingredientId.val());
       })
       .on("ajax:success", "form", function(evt, data, status, xhr) {
         var $modal = $("#convert_modal");

app/assets/stylesheets/application.scss

@@ -35,6 +35,7 @@ body {
 
 #main_container {
   background: white;
+  padding-bottom: 15px;
 }
 
 .footer {

app/controllers/ingredients_controller.rb

@@ -89,6 +89,6 @@ class IngredientsController < ApplicationController
     end
 
     def conversion_params
-      params.require(:conversion).permit(:input_quantity, :input_units, :scale, :output_units, :density)
+      params.require(:conversion).permit(:input_quantity, :input_units, :scale, :output_units, :ingredient_id)
     end
 end

app/helpers/application_helper.rb

@@ -1,4 +1,9 @@
 module ApplicationHelper
+
+  def timestamp(time)
+    time ? time.strftime('%D %R') : ''
+  end
+
   def nav_items
     [
         nav_item('Recipes', recipes_path, 'recipes'),

app/helpers/recipes_helper.rb

@@ -1,2 +1,25 @@
 module RecipesHelper
+  def recipe_time(recipe)
+    output = ''.html_safe
+
+    if recipe.total_time.present?
+      output << "#{humanize_seconds(recipe.total_time.to_i.minutes)}"
+      if recipe.active_time.present?
+        output << " (#{humanize_seconds(recipe.active_time.to_i.minutes)} active)"
+      end
+    elsif recipe.active_time.present?
+      output << humanize_seconds(recipe.active_time.to_i.minutes)
+    end
+
+    output
+  end
+
+  def humanize_seconds(secs)
+    [[60, :s], [60, :m], [24, :h], [1000, :d]].map{ |count, name|
+      if secs > 0
+        secs, n = secs.divmod(count)
+        n == 0 ? nil : "#{n.to_i} #{name}"
+      end
+    }.compact.reverse.join(' ')
+  end
 end

app/models/conversion.rb

@@ -3,7 +3,7 @@ class Conversion
   include ActiveModel::Conversion
   extend ActiveModel::Naming
 
-  attr_accessor :input_quantity, :input_units, :scale, :output_units, :density
+  attr_accessor :input_quantity, :input_units, :scale, :output_units, :ingredient_id
   attr_reader :output_quantity
 
   validates :input_quantity, presence: true
@@ -21,8 +21,9 @@ class Conversion
 
   def check_conversion
     begin
+      ingredient = ingredient_id.blank? ? nil : Ingredient.find(ingredient_id)
       scale = self.scale.blank? ? '1' : self.scale
-      density = self.density.blank? ? nil : self.density
+      density = ingredient.nil? ? nil : ingredient.density
       @output_quantity = UnitConversion.convert(input_quantity, scale, input_units, output_units, density)
     rescue UnitConversion::UnparseableUnitError => err
       errors[:base] << "Invalid Data: #{err.message}"

app/models/unit_conversion.rb

@@ -56,9 +56,17 @@ module UnitConversion
       unit.compatible_with? Unitwise(1, 'g')
     end
 
+    # Returns a Unitwise representation of the density.  Raises an exception if the value is anything other than a
+    # valid density
     def get_density(str)
+      raise UnknownUnitError, 'No density provided' if str.blank?
+      begin
         unit = parse(str)
-      raise UnknownUnitError, "#{str} expected to be a density" unless density?(unit)
+      rescue UnparseableUnitError => err
+        raise UnknownUnitError "Invalid density: #{err.message}"
+      end
+
+      raise UnknownUnitError, "Invalid density: #{str} is not a density" unless density?(unit)
       unit
     end
 

app/views/recipes/editor/_conversion_form.erb

@@ -39,7 +39,7 @@
       </div>
     </div>
 
-    <%= f.hidden_field :density, class: 'density' %>
+    <%= f.hidden_field :ingredient_id, class: 'ingredient_id' %>
 
   <% end %>
 

app/views/recipes/editor/_ingredient.html.erb

@@ -6,7 +6,7 @@
 
         <div class="row">
 
-          <div class="col-xs-12 col-md-5">
+          <div class="col-xs-12 col-md-7">
             <div class="form-group form-group-sm typeahead-group">
               <%= f.label :custom_name, "Name", class: "control-label" %>
               <div class="input-group input-group-sm">
@@ -20,26 +20,19 @@
             </div>
           </div>
 
-          <div class="col-xs-6 col-sm-4 col-md-3">
+          <div class="col-xs-6 col-sm-6 col-md-3">
             <div class="form-group form-group-sm">
               <%= f.label :quantity, class: "control-label" %>
               <%= f.text_field :quantity, class: 'form-control quantity' %>
             </div>
           </div>
 
-          <div class="col-xs-6 col-sm-4 col-md-2">
+          <div class="col-xs-6 col-sm-6 col-md-2">
             <div class="form-group form-group-sm">
               <%= f.label :units, class: "control-label" %>
               <%= f.text_field :units, class: 'form-control units' %>
             </div>
           </div>
-
-          <div class="col-xs-12 col-sm-4 col-md-2">
-            <div class="form-group form-group-sm">
-              <%= f.label :custom_density, "Density", class: "control-label" %>
-              <%= f.text_field :custom_density, class: 'form-control custom_density' %>
-            </div>
-          </div>
         </div>
       </div>
 

app/views/recipes/index.html.erb

@@ -9,35 +9,42 @@
       <p>No Recipes</p>
     <% else %>
 
-      <table class="table">
+      <div class="table-responsive">
+        <table class="table table-striped table-hover">
           <thead>
             <tr>
               <th>Name</th>
+              <th colspan="2"></th>
               <th>Yields</th>
-            <th>Total Time</th>
+              <th>Time</th>
-            <th>Active Time</th>
               <th>Created</th>
               <th>Modified</th>
-            <th colspan="3"></th>
             </tr>
           </thead>
 
           <tbody>
             <% @recipes.each do |recipe| %>
               <tr>
-              <td><%= recipe.name %></td>
+                <td><%= link_to recipe.name, recipe %></td>
+                <td>
+                  <%= link_to edit_recipe_path(recipe), class: 'btn btn-sm btn-primary' do %>
+                    <span class="glyphicon glyphicon-pencil"></span>
+                  <% end %>
+                </td>
+                <td>
+                  <%= link_to recipe, method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-sm btn-danger' do %>
+                    <span class="glyphicon glyphicon-remove"></span>
+                  <% end %>
+                </td>
                 <td><%= recipe.yields %></td>
-              <td><%= recipe.total_time %></td>
+                <td><%= recipe_time(recipe) %></td>
-              <td><%= recipe.active_time %></td>
+                <td><%= timestamp(recipe.created_at) %></td>
-              <td><%= recipe.created_at %></td>
+                <td><%= timestamp(recipe.updated_at) %></td>
-              <td><%= recipe.updated_at %></td>
-              <td><%= link_to 'Show', recipe %></td>
-              <td><%= link_to 'Edit', edit_recipe_path(recipe) %></td>
-              <td><%= link_to 'Destroy', recipe, method: :delete, data: { confirm: 'Are you sure?' } %></td>
               </tr>
             <% end %>
           </tbody>
         </table>
+      </div>
 
     <% end %>
 

app/views/recipes/show.html.erb

@@ -1,60 +1,52 @@
-<div class="form-horizontal">
+
-  <div class="form-group">
+<div class="recipe-view">
-    <label class="control-label col-sm-2">Name</label>
+
-    <div class="col-sm-10">
+  <div class="row">
-      <p class="form-control-static"><%= @recipe.name %></p>
+    <div class="col-xs-12">
+      <div class="page-header">
+        <h1>
+          <%= @recipe.name %>
+          <small>
+            <%= @recipe.description %>
+          </small>
+        </h1>
+      </div>
     </div>
   </div>
 
-  <div class="form-group">
+  <div class="row">
-    <label class="control-label col-sm-2">Description</label>
+    <% if @recipe.total_time.present? || @recipe.active_time.present? %>
-    <div class="col-sm-10">
+      <div class="col-xs-4">
-      <p class="form-control-static"><%= @recipe.description %></p>
+        <span><%= recipe_time(@recipe) %></span>
       </div>
+    <% end %>
+
+    <% if @recipe.yields.present? %>
+      <div class="col-xs-4">
+        <span>Yields</span><span><%= @recipe.yields  %></span>
+      </div>
+    <% end %>
+
+    <% if @recipe.source.present? %>
+      <div class="col-xs-4">
+        <span>Source</span><span><%= @recipe.source  %></span>
+      </div>
+    <% end %>
+
   </div>
 
-  <div class="form-group">
+  <div class="row">
-    <label class="control-label col-sm-2">Source</label>
+    <div class="col-xs-12 col-sm-4">
-    <div class="col-sm-10">
+      <h4>Ingredients</h4>
-      <p class="form-control-static"><%= @recipe.source %></p>
-    </div>
-  </div>
-
-  <div class="form-group">
-    <label class="control-label col-sm-2">Yields</label>
-    <div class="col-sm-10">
-      <p class="form-control-static"><%= @recipe.yields %></p>
-    </div>
-  </div>
-
-  <div class="form-group">
-    <label class="control-label col-sm-2">Total Time</label>
-    <div class="col-sm-10">
-      <p class="form-control-static"><%= @recipe.total_time %></p>
-    </div>
-  </div>
-
-  <div class="form-group">
-    <label class="control-label col-sm-2">Active Time</label>
-    <div class="col-sm-10">
-      <p class="form-control-static"><%= @recipe.active_time %></p>
-    </div>
-  </div>
-
-  <div class="form-group">
-    <label class="control-label col-sm-2">Ingredients</label>
-    <div class="col-sm-10">
       <ul>
         <% @recipe.recipe_ingredients.each do |i| %>
           <li><%= "#{i.quantity} #{i.units} of #{i.custom_name}" %></li>
         <% end %>
       </ul>
     </div>
-  </div>
 
-  <div class="form-group">
+    <div class="col-xs-12 col-sm-8">
-    <label class="control-label col-sm-2">Steps</label>
+      <h4>Directions</h4>
-    <div class="col-sm-10">
       <ol>
         <% @recipe.recipe_steps.each do |s| %>
           <li> <%= "#{s.step}" %></li>
@@ -62,13 +54,14 @@
       </ol>
     </div>
   </div>
+
 </div>
 
 <div class="row">
   <div class="col-xs-12">
 
-    <%= link_to 'Edit', edit_recipe_path(@recipe) %> |
+    <%= link_to 'Edit', edit_recipe_path(@recipe), class: 'btn btn-default' %>
-    <%= link_to 'Back', recipes_path %>
+    <%= link_to 'Back', recipes_path, class: 'btn btn-default' %>
 
   </div>
 </div>