DC MS reworking newprofile grid WHOA

app/assets/javascripts/app/views/canvas_view.js

@@ -4,7 +4,7 @@ app.views.Canvas = app.views.Base.extend(_.extend({}, app.views.infiniteScrollMi
     this.collection = this.stream.items
     this.postClass = app.views.SmallFrame
     this.setupInfiniteScroll()
-    this.stream.bind("reLayout", this.reRender, this)
+    this.stream.bind("reLayout", this.reLayout, this)
   },
 
   renderTemplate : function() {
@@ -13,12 +13,24 @@ app.views.Canvas = app.views.Base.extend(_.extend({}, app.views.infiniteScrollMi
     }, this))
     //needs to be defered so it happens after html rendering finishes
     _.defer(_.bind(this.mason, this))
+
+    // Images load slowly, which setting the height of the dom elements, use these hax for the momment to reLayout the page
+    // ever little bit for a while after loading
+    // gross hax, bro ;-p
+    _.delay(_.bind(this.reLayout, this), 200)
+    _.delay(_.bind(this.reLayout, this), 500)
+    _.delay(_.bind(this.reLayout, this), 1000)
+    _.delay(_.bind(this.reLayout, this), 2000)
+    _.delay(_.bind(this.reLayout, this), 3000)
+    _.delay(_.bind(this.reLayout, this), 4000)
+    _.delay(_.bind(this.reLayout, this), 5000)
   },
 
   addPostView : function(post) {
     _.defer(_.bind(function(){ this.$el.isotope("insert", this.createPostView(post).render().$el) }, this))
   },
 
+
   mason : function() {
     this.$el.isotope({
       itemSelector : '.canvas-frame',
@@ -28,7 +40,7 @@ app.views.Canvas = app.views.Base.extend(_.extend({}, app.views.infiniteScrollMi
     })
   },
 
-  reRender : function(){
+  reLayout : function(){
     this.$el.isotope("reLayout")
   }
 }));

app/assets/javascripts/app/views/small_frame.js

@@ -23,6 +23,7 @@ app.views.SmallFrame = app.views.Base.extend({
     var text = this.model.get("text");
     if(text == "" || this.model.get("photos").length > 0) { return "" }
     var randomColor = _.first(_.shuffle(['cyan', 'green', 'yellow', 'purple', 'lime-green', 'orange', 'red', 'turquoise', 'sand']));
+    randomColor += " sticky-note"
     
     if(text.length > 240) {
       return "blog-text x2 width"
@@ -49,7 +50,7 @@ app.views.SmallFrame = app.views.Base.extend({
     if(this.model.get("o_embed_cache")) {
       return("x2 width")
     }
-
+    return ''
     return(className + ratio(firstPhoto.dimensions))
 
     function ratio(dimensions) {

app/assets/stylesheets/new_styles/_canvas.scss

@@ -1,9 +1,9 @@
 $container-width : 1170;
 
 $margin-between-columns : 30;
-$column-width : 255 - $margin-between-columns;
+$column-width : 295 - $margin-between-columns;
 $raw-two-column-width : ($column-width * 2) + ($margin-between-columns * 2) ;
-$two-column-width : $raw-two-column-width + 7;  //why do we need these extra 7?
+$two-column-width : $raw-two-column-width - 30;  //simply subtract an arbitrary ammount :)
 
 $margin-between-rows : 20;
 
@@ -67,27 +67,21 @@ body {
 
     background-color : #fff;
     min-height : $column-width + px;
-    max-height : $column-width + px;
 
     width : $column-width + px;
     min-width : $column-width + px;
     max-width : $column-width + px;
 
     overflow : hidden;
-    padding : 20px;
+    //padding : 20px;
 
     /* used in masking photos with overflow: hidden; */
     .image-container {
-      position : absolute;
       overflow : hidden;
-
+      width : 100%;
-      top : 0;
-      left : 0;
-
-      min-width : 100%;
 
       img {
-        max-height : 100%;
+        width: 100%;
         max-width : 100%;
       }
     }
@@ -184,16 +178,9 @@ body {
 
   /* larger declarations */
   &.x2.width  .content { @include wide(); }
-  &.x2.height .content { @include tall(); }
-
-  &.x2.width .content img  { max-height: none; max-width: none; min-width: 100%; }
-  &.x2.height .content img { max-width: none; max-height: none; min-height: 100%; }
-
-  &.scale-vertical .content img,
-  &.scale-vertical .content .image-container {height : 100%; max-width : none; }
 
   &.scale-horizontal .content img,
-  &.scale-horizontal .content .image-container {width : 100%; max-height : none; }
+  &.scale-horizontal .content .image-container {width : 100%;  }
 
 
 }