From d7056c65093a35e7a7892abddc2830535d9d6aef Mon Sep 17 00:00:00 2001
From: Alain Horner <alain.horner@liip.ch>
Date: Mon, 21 May 2012 22:33:21 +0200
Subject: [PATCH] adapted styling

---
 css/main.css              | 33 +++++++++++++++++++++++++++++++++
 index.html                | 25 ++++---------------------
 js/main.js                |  5 +----
 js/model/CheeseList.js    |  1 -
 js/model/CheeseModel.js   |  1 -
 js/view/CheeseListView.js |  5 ++---
 js/view/CheeseView.js     |  3 +--
 7 files changed, 41 insertions(+), 32 deletions(-)

diff --git a/css/main.css b/css/main.css
index 6a5a496..388f37d 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,4 +1,37 @@
 body {
     padding-top: 60px;
     padding-bottom: 40px;
+    overflow-y: scroll;
+}
+
+#content ul {
+    margin: 0;
+}
+
+#content li {
+    list-style: none;
+    border-bottom: 1px solid #EEE;
+    padding: 10px 0;
+}
+
+#content li span {
+    padding-left: 10px;
+    font-size: 1.2em;
+}
+
+#content a.imgwrapper,
+#content a.imgwrapper img {
+    display: inline-block;
+}
+
+.icon-heart {
+    padding-right: 4px;
+}
+
+.mini {
+    width: 100px;
+}
+
+.maxi {
+    margin: 4px 0 10px;
 }
diff --git a/index.html b/index.html
index dad7b01..2144c1e 100755
--- a/index.html
+++ b/index.html
@@ -25,7 +25,7 @@
                 <div class="nav-collapse">
                     <ul class="nav">
                         <li><a href="/">Home</a></li>
-                        <li><a href="/cheese">Cheese List</a></li>
+                        <li><a href="/cheese"><i class="icon-heart"></i>Cheese List</a></li>
                     </ul>
                 </div><!--/.nav-collapse -->
             </div>
@@ -34,29 +34,12 @@
 
     <div class="container">
         <div class="page-header">
-            <h1>Cheese App - Cheesy can be a good thing</h1>
+            <h1>Cheese App <small>We love it cheesy</small></h1>
         </div>
-        <h2 id="subheading"></h2>
-        <div id="content"></div>
+        <div id="content">homecontent</div>
     </div> <!-- /container -->
 
-    <!-- Le javascript
-    ================================================== -->
-    <!-- Placed at the end of the document so the pages load faster -->
-    <!--<script src="../assets/js/jquery.js"></script>-->
-    <!--<script src="../assets/js/bootstrap-transition.js"></script>-->
-    <!--<script src="../assets/js/bootstrap-alert.js"></script>-->
-    <!--<script src="../assets/js/bootstrap-modal.js"></script>-->
-    <!--<script src="../assets/js/bootstrap-dropdown.js"></script>-->
-    <!--<script src="../assets/js/bootstrap-scrollspy.js"></script>-->
-    <!--<script src="../assets/js/bootstrap-tab.js"></script>-->
-    <!--<script src="../assets/js/bootstrap-tooltip.js"></script>-->
-    <!--<script src="../assets/js/bootstrap-popover.js"></script>-->
-    <!--<script src="../assets/js/bootstrap-button.js"></script>-->
-    <!--<script src="../assets/js/bootstrap-collapse.js"></script>-->
-    <!--<script src="../assets/js/bootstrap-carousel.js"></script>-->
-    <!--<script src="../assets/js/bootstrap-typeahead.js"></script>-->
-
+    <!--Le javascript-->
     <script src="vendors/yui-3.5.1/build/yui/yui-min.js"></script>
     <script src="js/main.js" type="text/javascript"></script>
 
diff --git a/js/main.js b/js/main.js
index 43ac2f6..f3fefd9 100755
--- a/js/main.js
+++ b/js/main.js
@@ -1,4 +1,3 @@
-/*global YUI */
 YUI({
     modules: {
         'cheese-model': {
@@ -50,7 +49,6 @@ YUI({
                 this.showView('cheeseList', {
                     model: myCheeseList
                 });
-                Y.one('#subheading').set('text', 'Mmmmmmh, cheese');
             }
         }, {
             path: '/cheese/:id',
@@ -61,7 +59,6 @@ YUI({
                     this.showView('cheese', {
                         model: cheeseModel
                     });
-                    Y.one('#subheading').set('text', cheeseModel.get('type'));
                 } else {
                     this.fire('error', {
                         type : 'cheese not found',
@@ -73,6 +70,6 @@ YUI({
     });
 
     app.render();
-    //app.navigate('/cheese');
+//    app.navigate('/cheese');
 
 });
diff --git a/js/model/CheeseList.js b/js/model/CheeseList.js
index a273bbf..9a33611 100644
--- a/js/model/CheeseList.js
+++ b/js/model/CheeseList.js
@@ -1,4 +1,3 @@
-/*global YUI */
 YUI.add('cheese-list', function (Y) {
 
     'use strict';
diff --git a/js/model/CheeseModel.js b/js/model/CheeseModel.js
index 1725e44..7bf873c 100644
--- a/js/model/CheeseModel.js
+++ b/js/model/CheeseModel.js
@@ -1,4 +1,3 @@
-/*global YUI */
 YUI.add('cheese-model', function (Y) {
 
     'use strict';
diff --git a/js/view/CheeseListView.js b/js/view/CheeseListView.js
index 9f95b41..ac78286 100644
--- a/js/view/CheeseListView.js
+++ b/js/view/CheeseListView.js
@@ -1,12 +1,11 @@
-/*global YUI */
 YUI.add('cheese-list-view', function (Y) {
 
     'use strict';
 
     Y.CheeseListView = Y.Base.create('cheeseListView', Y.View, [], {
 
-        _template: '<p>There are ({pieces} pieces remaining)</p><ul>{itemList}</ul>',
-        _itemTemplate: '<li>Delicious <a href="/cheese/{type}">{type}</a> ({pieces} pieces remaining)</li>',
+        _template: '<h2>Mmmmmmh, cheese</h2><p>There are <b>{pieces} pieces</b> remaining in total</p><ul>{itemList}</ul>',
+        _itemTemplate: '<li><a href="/cheese/{type}" class="thumbnail mini imgwrapper"><img src="/img/{image}" alt="{type} image"></a><span>Delicious <a href="/cheese/{type}">{type}</a> ({pieces} piece(s) remaining)</span></li>',
 
         render: function () {
             var container = this.get('container'),
diff --git a/js/view/CheeseView.js b/js/view/CheeseView.js
index 9da14f2..95d6da6 100644
--- a/js/view/CheeseView.js
+++ b/js/view/CheeseView.js
@@ -1,11 +1,10 @@
-/*global YUI */
 YUI.add('cheese-view', function (Y) {
 
     'use strict';
 
     Y.CheeseView = Y.Base.create('cheeseView', Y.View, [], {
 
-        _template: '{pieces} piece(s) of delicious {type} remaining.<button class="btn btn-large btn-primary eat">Eat a Piece!</button>',
+        _template: '<h2>{type}</h2><img src="/img/{image}" alt="{type} image" class="thumbnail maxi"><p>There are <b>{pieces} piece(s)</b> of delicious {type} remaining.</p><button class="btn btn-large btn-primary eat">Eat a Piece!</button>',
 
         events: {
             '.eat': {click: 'eatPiece'}