active class on menu

5 files changed, 21 insertions, 12 deletions

diff --git a/db.json b/db.json
index 1fad75a..894538b 100644
--- a/db.json
+++ b/db.json
@@ -76,7 +76,7 @@
         "uri": "https://ltho.s3.amazonaws.com/e12aee73-07a1-41f4-a54f-8b8c09f167f9.png",
         "caption": ""
       },
-      "__index": 2,
+      "__index": "2",
       "dateCreated": "Mon, 28 Mar 2016 17:19:36 GMT",
       "iframe": "http://okfoc.us",
       "video": "",
@@ -84,7 +84,8 @@
       "media": [
         {
           "uri": "https://ltho.s3.amazonaws.com/4f0fb27a-b9c5-40a9-ace8-1c5e12d78d0b.png",
-          "caption": ""
+          "caption": "",
+          "type": "image"
         }
       ],
       "containImage": "false",
diff --git a/public/assets/js/lib/NavView.js b/public/assets/js/lib/NavView.js
index a9fba25..b2fe341 100644
--- a/public/assets/js/lib/NavView.js
+++ b/public/assets/js/lib/NavView.js
@@ -49,7 +49,6 @@ var NavView = View.extend({
       return
     }
 
-    console.log(view.page_number, view.project_id)
     direction = direction || "down"
 
     addClassForPeriod( document.body, direction, app.navigation_delay )
@@ -59,4 +58,9 @@ var NavView = View.extend({
     app.view = view
   },
   
+  setActive: function(id){
+    this.$(".active").removeClass("active")
+    this.$("[data-id=" + id + "]").addClass("active")
+  },
+  
 })
\ No newline at end of file
diff --git a/public/assets/js/lib/ProjectView.js b/public/assets/js/lib/ProjectView.js
index 061dcee..6ae581e 100644
--- a/public/assets/js/lib/ProjectView.js
+++ b/public/assets/js/lib/ProjectView.js
@@ -44,6 +44,8 @@ var ProjectView = View.extend({
     else {
       app.router.pushState("/project/" + this.project_id)
     }
+    
+    app.nav.setActive( this.project_id )
 
     this.showing = true
     addClassForPeriod( this.el, "showing", app.navigation_delay, function(){
diff --git a/public/assets/ok.css b/public/assets/ok.css
index 51184d8..e84e2ad 100644
--- a/public/assets/ok.css
+++ b/public/assets/ok.css
@@ -504,7 +504,7 @@ button.previous {
 }
 
 .resizing .top {
-    background: url(img/tomato20dancing.gif)center;
+    background: url(img/tomato20dancing.gif) center !important;
 }
 
 .bottom {
diff --git a/templates/index.liquid b/templates/index.liquid
index 0973a62..3fd7b0b 100644
--- a/templates/index.liquid
+++ b/templates/index.liquid
@@ -114,14 +114,16 @@
     {% for project in projects %}
     <div class="item" data-id="{{ project.id }}">
         <div class="top {% if project.media[2] %}gallery{% else %}single{% endif %}">
-            {% for media in project.media %} {% if media.type == 'image' %}
-            <div class="cell" style="background-image:url({{ media.uri }}); 
-                {% if media.caption %} background-size:{{ media.caption }}; {% endif %}"></div>
-            {% elsif media.type == 'vimeo' %}
-            <div class="cell video" data-video="{{ media.token }}"></div>
-            {% elsif media.type == 'link' %}
-            <iframe class="cell" src="{{ media.uri }}"></iframe>
-            {% endif %} {% endfor %}
+            {% for media in project.media %}
+              {% if media.type == 'image' %}
+              <div class="cell" style="background-image:url({{ media.uri }}); 
+                  {% if media.caption %} background-size:{{ media.caption }}; {% endif %}"></div>
+              {% elsif media.type == 'vimeo' %}
+              <div class="cell video" data-video="{{ media.token }}"></div>
+              {% elsif media.type == 'link' %}
+              <iframe class="cell" src="{{ media.uri }}"></iframe>
+              {% endif %}
+            {% endfor %}
         </div>
         <div class="bottom {% if project.press.length %}press{% else %}nopress{% endif %}">
             <div class="headings five">