parsley/app/views/recipes/show.html.erb

<div class="recipe-view">

  <div class="row">
    <div class="col-xs-12">
      <div class="page-header">
        <h1>
          <%= @recipe.name %>
          <% if @scale %>
            <span class="label label-default"><%= @scale %> X</span>
          <% end %>
        </h1>
      </div>
      <p class="lead">
        <%= @recipe.description %>
      </p>
    </div>
  </div>

  <div class="row">
    <% if @recipe.total_time.present? || @recipe.active_time.present? %>
      <div class="col-xs-3">
        <p><%= recipe_time(@recipe) %></p>
      </div>
    <% end %>

    <% if @recipe.yields.present? %>
      <div class="col-xs-3">
        <p>Yields</p><p><%= @recipe.yields  %></p>
      </div>
    <% end %>

    <% if @recipe.source.present? %>
      <div class="source">
        <p>Source</p><p><%= @recipe.source  %></p>
      </div>
    <% end %>

  </div>

  <div class="row">
    <div class="col-xs-12 col-sm-5 col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">

          <div class="row">
            <h3 class="panel-title col-xs-7">Ingredients</h3>
            <div class="dropdown col-xs-5">
              <button id="scaleLabel" type="button" class="pull-right btn btn-xs btn-default" data-toggle="modal" data-target="#translate_modal">
                Translate
              </button>
            </div>
          </div>


        </div>
        <div class="panel-body">
          <ul class="ingredients">
            <% @recipe.recipe_ingredients.each do |i| %>
              <li><div><%= i.display_name %></div></li>
            <% end %>
          </ul>
        </div>
      </div>

    </div>

    <div class="col-xs-12 col-sm-7 col-md-8">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Directions</h3>
        </div>
        <div class="panel-body">
          <ol class="steps">
            <% @recipe.recipe_steps.each do |s| %>
              <li><div><%= "#{s.step}" %></div></li>
            <% end %>
          </ol>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Nutrition Data</h3>
        </div>
        <div class="panel-body">
          <table class="table">
            <thread>
              <tr>
                <th>Item</th>
                <th>Total</th>
              </tr>
            </thread>
            <tr>
              <td>Calories</td>
              <td><%= @recipe.nutrition_data.kcal %></td>
            </tr>
            <tr>
              <td>Grams Protein</td>
              <td><%= @recipe.nutrition_data.protein %></td>
            </tr>
            <tr>
              <td>Grams Fat</td>
              <td><%= @recipe.nutrition_data.lipids %></td>
            </tr>
            <tr>
              <td>Grams Carbohydrates</td>
              <td><%= @recipe.nutrition_data.carbohydrates %></td>
            </tr>
            <tr>
              <td>Grams Sugar</td>
              <td><%= @recipe.nutrition_data.sugar %></td>
            </tr>
            <tr>
              <td>Grams Fiber</td>
              <td><%= @recipe.nutrition_data.fiber %></td>
            </tr>
          </table>

          <h3>Nutrition Calculation Warnings</h3>

          <ul>
            <% @recipe.nutrition_data.errors.each do |err| %>
              <li><%= err %></li>
            <% end %>
          </ul>
        </div>
      </div>
    </div>
  </div>

</div>

<div class="row">
  <div class="col-xs-12">

    <%= link_to 'Edit', edit_recipe_path(@recipe), class: 'btn btn-default' %>
    <%= link_to 'Back', recipes_path, class: 'btn btn-default' %>

  </div>
</div>

<div class="modal fade" id="translate_modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Recipe Translation</h4>
      </div>
      <div class="modal-body">
        <%= form_tag(recipe_path(@recipe), method: :get, authenticity_token: false, enforce_utf8: false, id: 'translate_form') do %>
          <div class="row">
            <div class="col-xs-12">

              <div class="form-group form-group">
                <%= label_tag :scale, 'Scale', class: "control-label" %>
                <%= select_tag :scale, options_for_select(['1/4', '1/3', '1/2', '2/3', '3/4', '1', '1 1/2', '2', '3', '4'], '1'), class: 'form-control' %>
              </div>

              <div class="well">
                <div class="radio">
                  <label>
                    <input type="radio" name="system" id="system_none" value="" checked>
                    No System Translation
                  </label>
                </div>
                <div class="radio">
                  <label>
                    <input type="radio" name="system" id="system_standard" value="standard">
                    Convert to Standard Units
                  </label>
                </div>
                <div class="radio">
                  <label>
                    <input type="radio" name="system" id="system_metric" value="metric">
                    Convert to Metric Units
                  </label>
                </div>
              </div>

              <div class="well">
                <div class="radio">
                  <label>
                    <input type="radio" name="unit" id="unit_none" value="" checked>
                    No Unit Translation
                  </label>
                </div>
                <div class="radio">
                  <label>
                    <input type="radio" name="unit" id="unit_mass" value="mass">
                    Convert to Mass Units
                  </label>
                </div>
                <div class="radio">
                  <label>
                    <input type="radio" name="unit" id="unit_volume" value="volume">
                    Convert to Volume Units
                  </label>
                </div>
              </div>

            </div>
          </div>
        <% end %>
      </div>


      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary" form="translate_form">Convert</button>
      </div>


    </div>
  </div>
</div>