DG MS; added photos and more styling to the canvas view.

app/assets/javascripts/app/pages/profile.js

@@ -2,6 +2,8 @@
 
 app.pages.Profile = app.views.Base.extend({
 
+  className : "container",
+
   templateName : "profile",
 
   subviews : {

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

@@ -8,12 +8,12 @@ app.views.Canvas = app.views.Base.extend(_.extend(app.views.infiniteScrollMixin,
 
   renderTemplate : function() {
     this.postRenderTemplate();
-//   setTimeout(_.bind(this.mason, this), 1000)
+   setTimeout(_.bind(this.mason, this), 1000)
   },
-//
-//  mason : function() {
-//    this.$el.isotope({
-//      itemSelector : '.canvas-frame'
-//    })
-//  }
+
+  mason : function() {
+    this.$el.isotope({
+      itemSelector : '.canvas-frame'
+    })
+  }
 }))

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

@@ -1,5 +1,42 @@
 app.views.SmallFrame = app.views.Base.extend({
 
-  templateName: "small-frame"
+  className : "canvas-frame",
+
+  templateName : "small-frame",
+
+  postRenderTemplate : function() {
+    this.$el.addClass(this.photoClass() + ' ' + this.textClass())
+  },
+
+  textClass : function(){
+    var textLength = this.model.get("text").length
+      , baseClass = "text ";
+
+    if(textLength <= 20){
+      return baseClass + "extra-small"
+    } else if(textLength <= 140) {
+      return baseClass + "small"
+    } else if(textLength <= 500) {
+      return baseClass + "medium"
+    } else {
+      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'
+    }
+  }
+
 
 });

app/assets/stylesheets/new_styles/_canvas.scss

@@ -1,5 +1,16 @@
-body {
+@mixin tall() {
+  height : 405px;
+  max-height : 405px;
+  min-height : 405px;
+}
 
+@mixin wide() {
+  //width : 560px;
+  //min-width : 560px;
+  //max-width : 560px;
+}
+
+body {
   background-color : #F6F6F6;
 }
 
@@ -12,24 +23,125 @@ body {
   margin: 10px;
   width: 270px;
 
+  //clear : both; // here for testing!
+
   .content {
     @include box-shadow(0,1px,3px,rgba(0,0,0,0.2));
+
+    position : relative;
+
     background-color : #fff;
-    min-height : 180px;
-    max-height : 180px;
+    min-height : 140px;
+    max-height : 140px;
 
     overflow : hidden;
-    padding : 10px;
+    padding : 20px;
     margin-bottom : 5px;
+
+    /* used in masking photos with overflow: hidden; */
+    .image-container {
+      float : left;
+      overflow : hidden;
+
+      img {
+        max-height : 100%;
+        max-width : 100%;
+      }
+    }
+
+    .image-set {
+      float : left;
+      width : 100%;
+    }
   }
 
   /* larger declarations */
-  &.x2.width {
-    width : 560px;
+  &.x2.width  .content { @include wide(); }
+  &.x2.height .content { @include tall(); }
+
+  &.text {
+    &.extra-small .content {
+      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() }
   }
 
-  &.x2.height .content {
-    min-height : 429px;
-    max-height : 429px;
+  &.photo {
+    &.one  .content {
+      padding : 0;
+      min-height : 180px;
+      max-height : 180px;
+
+
+      .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/assets/templates/small-frame.jst.hbs

@@ -1,8 +1,18 @@
-<div class="canvas-frame">
-    <div class="content">
+<div class="content">
+
+    {{#if photos}}
+        <div class="image-set">
+            {{#each photos}}
+                <div class="image-container">
+                    <img src="{{sizes.large}}" />
+                </div>
+            {{/each}}
+        </div>
+    {{/if}}
+
+    <div class="text-content">
         {{text}}
     </div>
-    <div class="info">
-        {{author.name}}
-    </div>
-</div>
+</div>
+<div class="info">
+</div>

spec/javascripts/app/views/small_frame_view_spec.js

@@ -0,0 +1,47 @@
+describe("app.views.SmallFrame", function(){
+  beforeEach(function(){
+    this.model = factory.post({
+      photos : [
+        factory.photoAttrs({sizes : {large : "http://tieguy.org/me.jpg"}}),
+        factory.photoAttrs({sizes : {large : "http://whatthefuckiselizabethstarkupto.com/none_knows.gif"}}) //SIC
+      ]
+    })
+    this.view = new app.views.SmallFrame({model : this.model})
+  })
+
+  describe("rendering", function(){
+    beforeEach(function(){
+      this.view.render()
+    });
+
+    it("should have an image for each photoAttr on the model", function(){
+
+    })
+  })
+
+  describe("textClass", function(){
+    it("returns and empty string with a post with text longer than 140 characters", function(){
+      expect(this.view.textClass()).toBe("")
+    });
+
+    it("returns 'x2 height' 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("x2 height")
+    });
+
+    it("returns 'x2 width' 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("x2 width")
+    })
+  })
+})