Source

recipes-app / index.html

Full commit
<!doctype html>

<!--[if lt IE 7]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">

    <title>Happy Herbivore Recipes</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style/hh-jqmobile.css" />
    <link rel="stylesheet" href="style/jquery.mobile.structure-1.0.min.css" /> 

<!--
    <link rel="stylesheet" href="astyle/screen.css" media="screen, projection">
    <link rel="stylesheet" href="astyle/fancypants.css" media="screen, projection">
-->

    <script src="js/vendor/modernizr-1.6.min.js"></script>
    <script src="js/vendor/jquery-1.5.1.min.js"></script>
    <script src="js/vendor/underscore.js"></script>
    <script src="js/vendor/backbone.js"></script>
    <script src="js/recipe_app.js"></script>
    <script src="js/vendor/jquery.mobile-1.0.min.js"></script> 

    <script type="text/template" id="recipepane-template">
      <div id="scott" class='detail-box'>
	<h1>Recipe Details</h1>
      </div>
    </script>

    <script type="text/template" id="recipedetail-template">
	<article class="recipe hrecipe">			
	  <h1 class="fn"><%= recipe_name %></h1>

	  <div>
	    <ul class="recipe-actions">
	      <li><a href="#" id="<%= id %>" class="add-to-list" title="Save this Recipe to your Shopping List">Save to List</a></li>
	      <li>
		<a href="/mylist/" title="View your Shopping List">
		  <span id="viewlist-icon" class="floatleft"></span>
		  View List</a>
	      </li>
	      <li>
		<a href="#" class="styleswitch fullscr" rel="print" title="Open Full-Screen">Full Screen view</a>
	      </li>
	    </ul>
	  </div>

	
	<div id="recipephotos">
	  
	  <img class="photo" alt="Picture of Baked Vegan Corndogs" src="http://photos.happyherbivore.com/2011/07/IMG_0501.jpg">
	  

	</div>
	

	<h2>Servings: <span class="yield"><%= recipe_servings %></span></h2>
	<div class="descriptarea">
	<h2>Description:</h2>
	<div class="description summary">
	  <%= recipe_description %>
	</div>
	</div>
	<section class="ingredarea">		  
	  <h2 class="clearboth bordertop">Ingredients:</h2>
	  
	  <ul class="ingredients">
	    <!--
		<ul class="ingredients">
		  < _.each(ingredients, function(ingredient) { >
		  <li><= ingredient.title ></li>
		  < }); >
		</ul>
	    -->
	    <li class="ingredient">
	      <span class="value"><strong>6</strong> whole</span>
	      <span class="name">tofu dogs</span> 
	    </li>
	  </ul>

	  
	  <aside class="recipe-time">
	    <div class="prep-cook-box">
	      <p>Prep time:
		<time itemprop="prepTime" datetime="PT15M">
		  <%= prep_time %> mins
		  <span class="value-title" title="PT15M"></span>
	      </time></p>
	      
	      
	      <p>Cook time:
		<time itemprop="cookTime" datetime="PT15M">
		  <%= cook_time %> mins
		  <span class="value-title" title="PT15M"></span>
		</time>
	      </p>
	    </div>
	    

	    
	    <div class="total-time-box"><p>Total time:</p>
	      <time itemprop="totalTime" datetime="PT30M">
		TBD min
		<span class="value-title" title="PT30M"></span>
	    </time></div>
	  </aside>
	  
	  

	</section>

	<section class="instructarea">
	  <h2 class="bordertop">Instructions:</h2>
	  <div class="instructions">
	    <%= recipe_instructions %>
	  </div>


	  <aside>
	    <!-- start Nutritional Information -->


	    <table class="nutrition" summary="This table summarizes 
					      nutritional information">
	      <caption>Nutritional information</caption>
	      <tbody><tr>
		<th colspan="2">Nutrition Facts</th>
	      </tr>
	      <tr id="servings">
		<td colspan="2">Serving Size 1<br>
		  Servings Per Batch <%= recipe_servings %>
		</td>
	      </tr>
	      <tr>
		<td colspan="2">Amount Per Serving</td>
	      </tr>
	      <tr id="calories">
		<td><strong>Calories</strong> 
		  <%= calories %>
		</td>
		<td></td>
	      </tr>
	      <tr>
		<td><strong>Fat</strong> 
		  <%= fat %>g
		</td>
		<td class="dv"></td>
	      </tr>
	      <tr>
		<td><strong>Carbohydrate</strong> 
		  <%= carbohydrates %>g
		</td>
		<td class="dv"></td>
	      </tr>
	      <tr>
		<td class="sub">Dietary Fiber 
		  <%= fiber %>g
		</td>
		<td class="dv"></td>
	      </tr>
	      <tr>
		<td class="sub">Sugars 
		  <%= sugar %>g
		</td>
		<td></td>
	      </tr>
	      <tr>
		<td><strong>Protein</strong> 
		  <%= protein %>g
		</td>
		<td class="dv"></td>
	      </tr>
	    </tbody></table>
	  </aside>
	  <!-- end Nutritional Information -->

	
	</section>

	<footer class="headline disqus_margin clearboth">
	  Recipe added on  
	  <span class="published">
	    <span class="value-title" title="2010-02-16"> 
	    </span>
	    <%= published_on %>
	  </span> 
	  by <span class="author">
	    <a rel="author" href="http://happyherbivore.com/about/">Lindsay S. Nixon</a></span>
	</footer>
      </article>
    </script>



    <script type="text/template" id="recipelist-template">
      <div data-role="collapsible" data-collapsed="true" data-theme="b" 
	   data-content-theme="d">
	<h1>Recipe List</h1>
	<ul class="recipes" data-role="listview" data-inset="true" data-filter="true">
	</ul>
      </div>
    </script>

    <script type="text/template" id="recipeitem-template">
      <li class="recipe-title"><%= recipe_name %></li>
    </script>


    <script type="text/template" id="album-template">
      <button class="queue add"><img src="images/add.png"></button>
      <button class="queue remove"><img src="images/remove.png"></button>
      <span class="album-title"><%= recipe_name %></span>&nbsp;&nbsp;
      <span class="artist-name"><%= recipe_description %></span>
      <ol class="ingredients">
        <% _.each(ingredients, function(ingredient) { %>
          <li><%= ingredient.title %></li>
        <% }); %>
      </ol>
    </script>

    <script type="text/template" id="list-template">
      <button class="queue add"><img src="images/add.png"></button>
      <button class="queue remove"><img src="images/remove.png"></button>
      <span class="album-title"><%= recipe_name %></span>&nbsp;&nbsp;
    </script>

    <script type="text/template" id="recipedetail-template">
      <h2><%= recipe_name %></h2>
      <p><%= recipe_description %></p>
    </script>


    <script type="application/javascript">
      jQuery(function() {
        window.library.fetch();

        // Needed for static-served app
        //window.App.static();
      });
    </script>

    <style>
      #container {
          width: 30%;
          
      }
      #details-pane {
          top:0;
          right:0;
          position:fixed;
          width: 70%
      }
    </style>

  </head>

  <body>
    <div data-role="page">

      <div data-role="header">
	<h1>Happy Herbivore Mobile</h1>
      </div><!-- /header -->

      <div data-role="content">	
	<div id="container">
      
	</div>

	<div id="details-pane">
	  <h1>Welcome to Happy Herbivore's Recipes!</h1>
	  <p>Join us on <a href="https://www.facebook.com/HappyHerbivoreBlog">Facebook</a></p>
	  <p>Follow <a href="">Lindsay</a> on Twitter</p>
	  <p>Ask Questions on <a href="https://www.facebook.com/HappyHerbivoreBlog">Facebook</a></p>
	</div>

      </div><!-- /content -->

    </div><!-- /page -->

  </body>
</html>