Commits

Scott Nixon committed dd256c8

Trying to integrate jquery mobile.

  • Participants
  • Parent commits 6765fac

Comments (0)

Files changed (2)

     <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="style/screen.css" media="screen, projection">
-    <link rel="stylesheet" href="style/fancypants.css" media="screen, projection">
+
+    <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'>
       </div>
     </script>
 
-    <script type="text/template" id="recipedetail1-template">
-      <h1>Recipe Name</h1>
-      <p>description: Some here.</p>
+    <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="recipedetail-template">
-	<h1><%= recipe_name %></h1>
-	<p>description: <%= recipe_description %></p>
-    </script>
-    <!--
-      <ul class="ingredients">
-        <% _.each(ingredients, function(ingredient) { %>
-          <li><%= ingredient.title %></li>
-        <% }); %>
-      </ul>
-      -->
 
 
     <script type="text/template" id="recipelist-template">
-      <h1>Recipe List</h1>
-      <ul class="recipes">
-      </ul>
+      <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">
     </script>
 
     <style>
-      .detail-panel {
-          float:right;
+      .container {
+          width: 30%;
+          
+      }
+      #details-pane {
+          top:0;
+          right:0;
+          position:fixed;
+          width: 70%
       }
     </style>
 
   </head>
 
   <body>
-    <div id="container">
+    <div data-role="page">
+
+      <div data-role="header">
+	<h1>Happy Herbivore Mobile</h1>
+      </div><!-- /header -->
+
+      <div data-role="content">	
+	<div id="container">
       
-    </div>
+	</div>
 
-    <div id="right-pane">
+	<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>
+      </div><!-- /content -->
+
+    </div><!-- /page -->
 
   </body>
 </html>
 		var $details,
 		collection = this.collection;
 
-		//console.log(this.el);
-                //$("#container").append(this.template({}));	
-
-		//$details = this.$("#scott");
 		var view = new RecipePaneView({
 		    model: this.model,
 		    collection: collection
             },
 
             render: function() {
-		console.log(this.el);
-		$("#right-pane").empty();
-                $("#right-pane").html(this.template(this.model.toJSON()));
+		$("#details-pane").empty();
+                $("#details-pane").html(this.template(this.model.toJSON()));
                 return this;
             }
 	});
 
 
-/* LIBRARY VIEW */
-
-
-/*
-	window.RecipeView = Backbone.View.extend({
-	    className: 'recipe-detail',
-	    template: _.template($('#recipe-template').html()),
-
-            events: {
-		'click .recipe-title': 'showRecipe'
-	    },
-
-	    initialize: function() {
-		_.bindAll(this, 'showRecipe', 'render');
-	    },
-
-	    showRecipe: function() {
-		$(".library").empty();
-		$(".library").append(this.template.render().el);
-		console.log('showRecipe');
-		return this;
-	    },
-
-	    render: function () {
-		console.log('rendered RecipeView');
-		
-		return this;
-	    }
-
-	});
-*/
-
-
 /***** ROUTER ******/
 
         window.BackboneRecipes = Backbone.Router.extend({