commiting template files

iszak · Apr 28, 2013 · 17d03d0 · 17d03d0
1 parent 043b311
commit 17d03d0
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 38 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 .project
 .sass-cache
 .DS_Store
+/nbproject
diff --git a/index.html b/index.html
@@ -5,15 +5,12 @@
         <link rel="stylesheet" type="text/css" href="stylesheets/vendor/yui/base.css">
         <link rel="stylesheet" type="text/css" href="stylesheets/vendor/yui/grid.css">
         <link rel="stylesheet" type="text/css" href="stylesheets/vendor/yui/fonts.css">
+        <link rel="stylesheet" type="text/css" href="stylesheets/application/main.css">
 
         <title>Go Explore</title>
     </head>
-    <body>
-
-
-
-
 
+    <body class="yui3-skin-sam"> <!-- You need this skin class -->
         <script src="javascripts/vendor/yui.js"></script>
 
         <script src="javascripts/application/services/flickr.js"></script>
@@ -31,7 +28,35 @@
 
 
         <script id="index-template" type="text/template">
-			<% console.log(data) %>
+            <div class="header">
+                <div class="title">My App</div>
+            </div>
+
+            <div class="content">
+                <div id="big-message">This is a big message</div>
+                <div id="small-message">This is a small message</div>
+
+                <a href="#/explore"><div id="main-button-container">
+                    Discover
+                </div></a>
+
+            </div>
+        </script>
+
+        <script id="explore-template" type="text/template">
+            <div class="header">
+                <div class="title">My Phone</div>
+            </div>
+
+            <div class="content">
+                <div id="big-message">This is a big message</div>
+                <div id="small-message">This is a small message</div>
+
+                <a href="#/explore"><div id="main-button-container">
+                    Discover
+                </div></a>
+
+            </div>
         </script>
     </body>
 </html>
diff --git a/javascripts/application/application.js b/javascripts/application/application.js
@@ -1,4 +1,5 @@
-YUI().use('app', 'index-view', 'item-model', 'item-list', 'location-service', function (Y) {
+YUI().use('app', 'index-view', 'explore-view','item-model', 'item-list', 'location-service', function (Y) {
+
     var app = new Y.App({
         serverRouting: false,
 
@@ -12,6 +13,11 @@ YUI().use('app', 'index-view', 'item-model', 'item-list', 'location-service', fu
 
 
     app.route('/', function (req) {
+        this.showView('index');
+    });
+
+
+    app.route('/explore', function (req) {
         var modelList = new Y.ItemList();
 
         var location = new Y.LocationService({
@@ -28,26 +34,8 @@ YUI().use('app', 'index-view', 'item-model', 'item-list', 'location-service', fu
             maximumAge: 0,
             enableHighAccuracy: true
         });
-
-
-        // setTimeout(function(){
-            // modelList.add({
-                // id: 1,
-                // latitude: -31.953004,
-                // longitude: 115.857469
-            // });
-        // }, 1000);
-
-
-        this.showView('index', {
-            modelList: modelList
-        });
-    });
-
-
-
-    app.route('/explore', function (req) {
-        this.showView('explore');
+
+        this.showView('explore' , {modelList: modelList});
     });
 
 

diff --git a/javascripts/application/views/explore.js b/javascripts/application/views/explore.js
@@ -1,6 +1,28 @@
 YUI.add('explore-view', function (Y) {
-    Y.IndexView = Y.Base.create('exploreView', Y.View, [], {
+    Y.ExploreView = Y.Base.create('exploreView', Y.View, [], {
+        template: Y.one('#explore-template').getHTML(),
+
+        initializer: function () {
+            var list = this.get('modelList');
 
+            list.after(['add', 'remove', 'reset'], this.render, this);
+            list.after('*:change', this.render, this);
+        },
+
+        render: function () {
+            var container = this.get('container');
+
+            var template = new Y.Template(),
+                html  = template.render(this.template, this.get('modelList').toJSON());
+
+            container.setHTML(html);
+
+            if (!container.inDoc()) {
+                Y.one('body').append(container);
+            }
+
+            return this;
+        }
     });
 }, '0.0.1', {
     requires: ['view']

diff --git a/javascripts/application/views/index.js b/javascripts/application/views/index.js
@@ -2,19 +2,11 @@ YUI.add('index-view', function (Y) {
     Y.IndexView = Y.Base.create('indexView', Y.View, [], {
         template: Y.one('#index-template').getHTML(),
 
-        initializer: function () {
-            var list = this.get('modelList');
-
-            list.after(['add', 'remove', 'reset'], this.render, this);
-            list.after('*:change', this.render, this);
-        },
-
-
         render: function () {
             var container = this.get('container');
-
+            
             var template = new Y.Template(),
-                html  = template.render(this.template, this.get('modelList').toJSON());
+                html  = template.render(this.template);
 
             container.setHTML(html);
 

diff --git a/stylesheets/application/main.css b/stylesheets/application/main.css
@@ -0,0 +1,56 @@
+/* 
+    Document   : main
+    Created on : Apr 27, 2013, 5:14:19 PM
+    Author     : Matthew
+    Description:
+        Purpose of the stylesheet follows.
+*/
+
+root { 
+    display: block;
+
+}
+
+body{
+    font-family: verdana;
+    text-decoration: none !important;
+}
+
+a, u {
+    text-decoration: none;
+}
+
+.header{
+    background-color: activeborder;
+    padding: 10px;
+}
+
+.content{
+    padding: 10px;
+    margin: 40px 0 ;
+}
+
+#big-message{
+    text-align: center;
+    margin-bottom: 40px;
+    font-weight: bold;
+    font-size: 20px;
+}
+
+#small-message{
+    text-align: center;
+    margin-bottom: 80px;
+}
+
+#main-button-container{
+    width: 100px;
+    margin: 0 auto;
+    background-color: burlywood;
+    padding: 10px;
+    text-align: center;
+    cursor: pointer;
+    font-weight: bold;
+    color: white;
+}
+
+