only focus on photos for now with ratios. one thing at a time, yo.

i've temporarily removed all the arbitrary text switching for now (which is still in version control // which we will get to later)
also moved photo dimensions into a dimensions hash in photo.rb.

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

@@ -15,38 +15,62 @@ app.views.SmallFrame = app.views.Base.extend({
   },
 
   postRenderTemplate : function() {
-    this.$el.addClass(this.photoClass() + ' ' + this.textClass())
+    this.$el.addClass(this.dimensionsClass())
   },
 
-  textClass : function(){
+  dimensionsClass : function() {
-    var textLength = this.model.get("text").length
+    var firstPhoto = this.model.get("photos")[0]
-      , baseClass = "text ";
+      , className = "photo ";
 
-    if(textLength <= 20){
+    if(!firstPhoto ||
-      return baseClass + "extra-small"
+      (firstPhoto && !firstPhoto.dimensions.height || !firstPhoto.dimensions.width)) { return className }
-    } else if(textLength <= 140) {
+
-      return baseClass + "small"
+    return(className + ratio(firstPhoto.dimensions))
-    } else if(textLength <= 500) {
+
-      return baseClass + "medium"
+    function ratio(dimensions) {
-    } else {
+      var ratio = (dimensions.width / dimensions.height)
-      return baseClass + "large"
+
+      console.log(ratio, dimensions)
+
+      if(ratio > 1.5) {
+        return "x2 width"
+      } else if(ratio < 0.75) {
+        return "x2 height"
+      } else {
+        return ""
+      }
     }
   },
 
-  photoClass : function(){
+//  textClass : function(){
-    var photoCount = this.model.get('photos').length
+//    var textLength = this.model.get("text").length
-      , baseClass  = "photo ";
+//      , baseClass = "text ";
-
+//
-    if(photoCount == 0 ) {
+//    if(textLength <= 20){
-      return ""
+//      return baseClass + "extra-small"
-    } else if(photoCount == 1){
+//    } else if(textLength <= 140) {
-      return baseClass + 'one'
+//      return baseClass + "small"
-    } else if(photoCount == 2 ) {
+//    } else if(textLength <= 500) {
-      return baseClass + 'two'
+//      return baseClass + "medium"
-    } else {
+//    } else {
-      return baseClass + 'many'
+//      return baseClass + "large"
-    }
+//    }
-  },
+//  },
+//
+//  photoClass : function(){
+//    var photoCount = this.model.get('photos').length
+//      , baseClass  = "photo ";
+//
+//    if(photoCount == 0 ) {
+//      return ""
+//    } else if(photoCount == 1){
+//      return baseClass + 'one'
+//    } else if(photoCount == 2 ) {
+//      return baseClass + 'two'
+//    } else {
+//      return baseClass + 'many'
+//    }
+//  },
 
   goToPost : function() {
     app.router.navigate(this.model.url(), true)

app/assets/stylesheets/new_styles/_canvas.scss

@@ -1,10 +1,9 @@
 $container-width : 1170;
 
-$margin-between-columns : 20;
+$margin-between-columns : 30;
 $column-width : 255 - $margin-between-columns;
 $two-column-width : ($column-width * 2) + ($margin-between-columns * 2);
 
-
 $margin-between-rows : 20;
 
 $row-height : $column-width;
@@ -24,6 +23,7 @@ $two-row-height : $two-column-width;
 
 body {
   background-color : #F6F6F6;
+  background-image : image_url('pattern.jpg')
 }
 
 #canvas {
@@ -34,14 +34,12 @@ body {
   float : left;
   margin : 10px;
 
-  //clear : both; // here for testing!
-
   .content {
     @include transition(box-shadow);
     @include box-shadow(0,1px,3px,rgba(0,0,0,0.2));
 
     &:hover {
-      @include box-shadow(0,1px,3px,rgba(0,0,0,0.5));
+      @include box-shadow(0,1px,5px,rgba(0,0,0,0.5));
       cursor : pointer;
     }
 
@@ -66,7 +64,7 @@ body {
     max-width : $column-width + px;
 
     overflow : hidden;
-    padding : 10px;
+    padding : 20px;
 
     /* used in masking photos with overflow: hidden; */
     .image-container {
@@ -80,8 +78,10 @@ body {
     }
 
     .image-set {
-      float : left;
+      position : absolute;
-      width : 100%;
+      top : 0;
+      left : 0;
+      clear : all;
     }
   }
 
@@ -89,92 +89,7 @@ body {
   &.x2.width  .content { @include wide(); }
   &.x2.height .content { @include tall(); }
 
-  &.text {
+  &.x2.width .content img  { max-height: none; max-width: none; min-width: 100%; }
-    &.extra-small .content {
+  &.x2.height .content img { max-width: none; max-height: none; min-height: 100%; }
-      font-weight : bold;
-      font-size: 2.5em;
-      line-height: 1em;
-    }
-
-    &.content {
-      display: table;
-    }
-
-    &.small  .content {
-      font-size: 1.4em;
-      line-height: 1.25em;
-
-      text-decoration: bold;
-    }
-    &.medium .content {
-      @include tall();
-      font-size: 1.6em;
-    }
-    &.large  .content { @include wide() }
-  }
-
-  &.photo {
-    &.one  .content {
-      //padding : 0;
-      //
-      //min-height : $column-width + 10 + px;
-      //max-height : $column-width + 10 +  px;
-      //
-      //min-width : $column-width + 10 + px;
-      //max-width : $column-width + 10 +  px;
-
-      .text-content {
-        position : absolute;
-        padding : 10px;
-        bottom : 0;
-        color : #eee;
-      }
-    }
-
-    &.two .content {
-    //  @include tall();
-    //  .image-container {
-    //    width : 50%;
-    //  }
-    }
-    &.many .content { @include tall(); @include wide(); }
-  }
-
-  &.text.small + .photo.one  .content {
-
-  }
-  &.text.small + .photo.two  .content { @include wide() }
-  &.text.small + .photo.many .content { @include tall(); @include wide(); }
-
-  &.text.medium + .photo.one  .content {}
-  &.text.medium + .photo.two  .content {}
-  &.text.medium + .photo.many .content {}
-
-  &.text.large.photo.one .content {
-    @include tall(); @include wide();
-    .text-content {
-      max-height: 26%;
-      padding : 20px;
-      color : #333;
-    }
-
-    .image-set {
-      height: 65%;
-      width: 100%;
-    }
-
-    .image-container {
-      width : 100%;
-      height : 100%;
-
-      img {
-        width : 100%;
-        max-height : none;
-      }
-    }
-
-  }
-  &.text.large + .photo.two  .content {}
-  &.text.large + .photo.many .content {}
 
 }

app/models/photo.rb

@@ -21,8 +21,10 @@ class Photo < ActiveRecord::Base
         :medium => photo.url(:thumb_medium),
         :large => photo.url(:scaled_full) }
     }, :as => :sizes
-    t.add :height
+    t.add lambda { |photo|
-    t.add :width
+      { :height => photo.height,
+        :width => photo.width }
+    }, :as => :dimensions
   end
 
   mount_uploader :processed_image, ProcessedImage

spec/javascripts/app/views/small_frame_view_spec.js

@@ -13,35 +13,9 @@ describe("app.views.SmallFrame", function(){
     beforeEach(function(){
       this.view.render()
     });
-
-    it("should have an image for each photoAttr on the model", function(){
-
-    })
   })
 
-  describe("textClass", function(){
+  describe("photos", function() {
-    it("returns and 'text extra-small' with a post with text longer than 140 characters", function(){
+    // ratio pending...
-      expect(this.view.textClass()).toBe("text extra-small")
-    });
-
-    it("returns 'text medium' if if it is less than 500 characters", function(){
-      this.view.model.set({text: "ldfkdfdkfkdfjdkjfdkfjdkjfkdfjdkjfkdjfkdjfdkjdfkjdkfjkdjfkdjfkdfkdjf" +
-        "dfkjdkfjkdjfkdjfkdjfdkfjdkfjkd;fklas;dfkjsad;kljf ;laskjf;lkajsdf;kljasd;flkjasd;flkjasdf;l" +
-        "jasd;fkjasd;lfkja;sdlkjf;alsdkf;lasdjf;alskdfj;alsdkjf;alsdkfja;sdlkj "})
-      expect(this.view.textClass()).toBe("text medium")
-    });
-
-    it("returns 'text large' if if it is more than 500 characters", function(){
-      this.view.model.set({text: "ldfkdfdkfkdfjdkjfdkfjdkjfkdfjdkjfkdjfkdjfdkjdfkjdkfjkdjfkdjfkdfkdjf" +
-        "dfkjdkfjkdjfkdjfkdjfdkfjdkfjkd;fklas;dfkjsad;kljf ;laskjf;lkajsdf;kljasd;flkjasd;flkjasdf;l" +
-        "jasd;fkjasd;lfkja;sdlkjf;alsdkf;lasdjf;alskdfj;alsdkjf;alsdkfja;sdlkj f;lkajs;dflkjasd;lfkja;sldkjf;alskdjfs" +
-        "as;lkdfj;asldfkj;alsdkjf;laksdjf;lasdkjf;lasdkj;lafkja;sldkjf;alsdkjf;laskjf;laskdjf;laksjdf;laksjdf;lk;" +
-        "a;dslkf;laskjdf;lakjsdf;lkasd;lfkja;sldkfj;o sdfsdfsdf" +
-        "sdfsdfsdfsdfsdfdsdsfsdfsfsdsfdsf;lgkjs;dlkfj;alsdkjf;laksdjf;lkasjdf;lkajsdf;lkjasd;flkjasd;lfkjas;dlkfj;alsdkjf" +
-        "as;dlfk;alsdkjf;lkasdf;lkjasd;flkjasd;lfkjasdkl;" +
-        "asl;dkfj;asldkfj;alsdkfj;alsdfjk" +
-        "askdjf;laksdf;lkdflkjhasldfhoiawufjkhasugfoiwaufaw "})
-      expect(this.view.textClass()).toBe("text large")
-    })
   })
-})
+});