a bit more pleasing to the eye this way I think - less white space

5 files changed, 56 insertions, 15 deletions

diff --git a/examples/modular-backbone/css/style.css b/examples/modular-backbone/css/style.css
index 9469c2a..9af288d 100644
--- a/examples/modular-backbone/css/style.css
+++ b/examples/modular-backbone/css/style.css
@@ -150,15 +150,14 @@ h1{
   display: block;
   position: relative;
   float: left;
-  width: 320px;
 }
 
 #page #contributors-list .podium .base {
   display: block;
   position: relative;
   float: left;
-  width: 320px;
   background-color: rgba(214, 214, 214, 0.38);
+  width: 100%;
 }
 
 #page #contributors-list .podium .base p {
diff --git a/examples/modular-backbone/js/router.js b/examples/modular-backbone/js/router.js
index 9239cb2..3c3973f 100644
--- a/examples/modular-backbone/js/router.js
+++ b/examples/modular-backbone/js/router.js
@@ -8,6 +8,9 @@ define([
   'views/contributors/ContributorsView',
   'views/footer/FooterView'
 ], function($, _, Backbone, HomeView, ProjectsView, ContributorsView, FooterView) {
+  
+  var contributorsView;
+
   var AppRouter = Backbone.Router.extend({
     routes: {
       // Define some URL routes
@@ -18,7 +21,9 @@ define([
       '*actions': 'defaultAction'
     }
   });
+  
   var initialize = function(){
+
     var app_router = new AppRouter;
     
     app_router.on('route:showProjects', function(){
@@ -31,12 +36,15 @@ define([
 
     app_router.on('route:showContributors', function () {
     
+        // there is a problem here -- when it draws the first everything is fine
+        // but when it returns to this view, it adds the items to the list again
+        // even though the collection has the same number of models
+        // why won't it empty the divs?! I can do it in the console... 
+        if ( String(contributorsView) !== "undefined" ) contributorsView.clearListView();
+
         // Like above, call render but know that this view has nested sub views which 
         // handle loading and displaying data from the GitHub API  
-        var contributorsView = new ContributorsView();
-        //contributorsView.initialize();
-        //contributorsView.render();
-
+        contributorsView = new ContributorsView();
     });
 
     app_router.on('route:defaultAction', function (actions) {
diff --git a/examples/modular-backbone/js/views/contributors/ContributorsListView.js b/examples/modular-backbone/js/views/contributors/ContributorsListView.js
index 2976896..f4afd5b 100644
--- a/examples/modular-backbone/js/views/contributors/ContributorsListView.js
+++ b/examples/modular-backbone/js/views/contributors/ContributorsListView.js
@@ -14,11 +14,34 @@ define([
 
     el : $("#contributors-list"),
     tagName:"ul",
-    render : function() {
+    
+    initialize : function() {
+     
+      var that = this;
+      that.bind("reset", that.clearView);
+    },
 
-        var that = this; 
+    clearListView : function(){
+
+      console.log("clearing sub sub view");
+
+      $("#gold-podium").empty();
+      $("#silver-podium").empty();
+      $("#bronze-podium").empty();
+      
+    }, 
+
+    render : function() {
+   
+        // when it returns to this view, why does it redraw without clearing the lists?!
+        $("#gold-podium").empty();
+        $("#silver-podium").empty();
+        $("#bronze-podium").empty();
 
         var that = this;
+
+        that.clearListView(); 
+       
         that.awardMedals(this.collection.models); 
 
         // hide the container list while adding contributors
@@ -29,16 +52,19 @@ define([
 
         var goldPodium = {
             baseHeight: '80px',
+            baseWidth: '120px',
             achievement: 'Over 50 Contributions'
         }; 
 
         var silverPodium = {
            baseHeight: '60px',
+           baseWidth: '160px',
            achievement: '5 - 50 Contributions'
         }
 
          var bronzePodium = {
            baseHeight: '40px',
+           baseWidth: '680px',
            achievement: '1 - 5 Contributions'
         }
 
@@ -91,11 +117,11 @@ define([
 
             if ( contributions >= 50 ) {
               medalHex = goldMedalHex;
-              picWidth = '160px';
+              picWidth = '120px';
               contributors = that.goldContributors; 
             } else if ( contributions < 50 && contributions >= 5) {
               medalHex = silverMedalHex;
-              picWidth = '105px';
+              picWidth = '100px';
               contributors = that.silverContributors; 
             } else {
               medalHex = bronzeMedalHex;
diff --git a/examples/modular-backbone/js/views/contributors/ContributorsView.js b/examples/modular-backbone/js/views/contributors/ContributorsView.js
index d5dc83c..e05e5a5 100644
--- a/examples/modular-backbone/js/views/contributors/ContributorsView.js
+++ b/examples/modular-backbone/js/views/contributors/ContributorsView.js
@@ -7,6 +7,8 @@ define([
   'text!templates/contributors/contributorsTemplate.html'
 ], function($, _, Backbone, ContributorsCollection, ContributorsListView, contributorsTemplate){
 
+  var contributorsListView;
+
   var ContributorsView = Backbone.View.extend({
     
     el: $("#page"),
@@ -21,7 +23,7 @@ define([
 
       this.collection = new ContributorsCollection([]); 
       this.collection.fetch({ success : onDataHandler, dataType: "jsonp" });
-
+  
     },
 
     render: function(){
@@ -39,7 +41,7 @@ define([
       this.$el.html( compiledTemplate ); 
 
       // sub view 
-      var contributorsListView = new ContributorsListView({ collection: this.collection}); 
+      contributorsListView = new ContributorsListView({ collection: this.collection}); 
       contributorsListView.render();
 
     },
@@ -54,9 +56,15 @@ define([
       });
 
       return total; 
+    },
+
+    clearListView: function() {
+      console.log("clearing sub view");
+      contributorsListView.clearListView();
     }
 
 
+
   });
   return ContributorsView;
 });
diff --git a/examples/modular-backbone/templates/contributors/contributorsTemplate.html b/examples/modular-backbone/templates/contributors/contributorsTemplate.html
index e316fdc..10e1652 100644
--- a/examples/modular-backbone/templates/contributors/contributorsTemplate.html
+++ b/examples/modular-backbone/templates/contributors/contributorsTemplate.html
@@ -7,8 +7,8 @@
   </tbody>
 </table>
 <div id="contributors-list">
-	<div id="bronze-podium" class="podium"></div>
-	<div id="gold-podium" class="podium"></div>
-	<div id="silver-podium" class="podium"></div>
+	<div id="bronze-podium" class="podium" style="width:640px"></div>
+	<div id="gold-podium" class="podium" style="width:120px"></div>
+	<div id="silver-podium" class="podium" style="width:200px"></div>
 </div>