new post types. remove old ones. yeah.

app/assets/javascripts/app/models/post.js

@@ -59,9 +59,14 @@ app.models.Post = Backbone.Model.extend(_.extend({}, app.models.formatDateMixin,
   headlineLimit : 118,
 
   frameMoods : [
-    "Day",
-    "Night",
+ //   "Day",
+ //   "Night",
     "Wallpaper",
-    "Newspaper"
+ //   "Newspaper",
+
+    // NEW SHIT
+    "Vanilla",
+    "Typist",
+    "Fridge"
   ]
 });

app/assets/javascripts/app/models/post/template_picker.js

@@ -9,11 +9,11 @@ _.extend(app.models.Post.TemplatePicker.prototype, {
     var frameName
 
     if(this.isNewspaper()){
-      frameName = "Newspaper"
+      frameName = "Typist"
     } else if(this.isWallpaper()) {
       frameName =  "Wallpaper"
     } else {
-      frameName = "Day"
+      frameName = "Vanilla"
     }
 
     return frameName

app/assets/javascripts/app/views/post/mood_view.js

@@ -52,3 +52,15 @@ app.views.Post.Wallpaper = app.views.Post.Mood.extend({
     })
   }
 })
+
+app.views.Post.Typist = app.views.Post.Mood.extend({
+  mood : "typist"
+})
+
+app.views.Post.Vanilla = app.views.Post.Mood.extend({
+  mood : "vanilla"
+})
+
+app.views.Post.Fridge = app.views.Post.Mood.extend({
+  mood : "fridge"
+})

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

@@ -47,24 +47,22 @@ app.views.Post.SmallFrame = app.views.Post.extend({
 
   colorClass : function() {
     var text = this.model.get("text")
-      , baseClass = $.trim(text).length == 0 ? "no-text" : 'has-text';
+      , baseClass = $.trim(text).length == 0 ? "no-text" : "has-text";
+
+    if(this.model.get("photos").length > 0 || this.model.get("o_embed_cache"))
+      baseClass += " has-media";
 
     if(baseClass == "no-text" || this.model.get("photos").length > 0 || this.model.get("o_embed_cache")) { return baseClass }
 
     var randomColor = _.first(_.shuffle(['cyan', 'green', 'yellow', 'purple', 'lime-green', 'orange', 'red', 'turquoise', 'sand']));
 
-    var textClass;
-    if(text.length > 240) {
-      textClass = "blog-text x2 width"
-    } else if(text.length > 140) {
-      textClass = randomColor
-    } else if(text.length > 40) {
-      textClass = randomColor
-    } else {
-      textClass =  "big-text " + randomColor
+    var textClass = randomColor;
+
+    if(text.length < 40) {
+      textClass += " big-text"
     }
 
-    return [baseClass, textClass, "sticky-note"].join(" ")
+    return [baseClass, textClass].join(" ")
   },
 
   dimensionsClass : function() {

app/assets/stylesheets/new_styles/_canvas.scss

@@ -27,6 +27,15 @@
     cursor : -webkit-zoom-in;
   }
 
+  .content {
+    /* default height to be overridden */
+    min-height : $column-width + px;
+  }
+
+  &.has-media .content {
+    min-height : 0;
+  }
+
   .content {
     @include transition(-webkit-transform);
     @include box-shadow(0, 8px, 50px, rgba(0,0,0,0.9));
@@ -190,55 +199,23 @@
     font-size : 1.5em;
     line-height : 1.2em;
 
+    /* I'D DO ANYTHING FOR TEXT, BUT I WON'T DO THAT (see: http://www.youtube.com/watch?v=9GNhdQRbXhc) */
+    max-height : 485.5px;
+
     img {
       max-width: 100%;
       width: 100%;
     }
 
+    p {
+      word-break : break-word;
+    }
+
     p:last-child {
       margin-bottom: 0;
     }
   }
 
-  &.sticky-note {
-    .content{
-      min-height : $column-width + px;
-      .text-content {
-        margin: 30px 20px;
-      }
-    }
-
-    &.big-text {
-      display : table;
-
-      .text-content {
-        display : table-cell;
-        position : absolute;
-
-        margin : 0;
-
-        margin-top : 20%;
-        height : 100%;
-        width : 100%;
-
-        top : 0;
-        left : 0;
-      }
-
-      p {
-        font-family : "Noteworthy", "Marker Felt", "Comic Sans";
-        font-style : italic;
-        text-align : center;
-        font-weight : bold;
-        padding: 0 20px;
-      }
-    }
-  }
-
-  &.sticky-note .text-content {
-    color : #555;
-  }
-
   &.cyan .background-color   { background-color : rgba($cyan, 0.2); }
   &.green .background-color  { background-color : rgba($green, 0.2); }
   &.yellow .background-color { background-color : rgba($yellow, 0.2); }
@@ -272,15 +249,13 @@
     }
   }
 
-  &.day:not(.sticky-note),
-  &.has-text:not(.sticky-note):not(.wallpaper),
-  &.night:not(.sticky-note) {
+  &:not(.wallpaper) {
     img {
       border-bottom : 1px solid #ddd;
     }
 
     .text-content {
-      padding : 10px 20px;
+      padding : 20px;
       font-size : 14px;
       line-height : 18px;
       color : #444;
@@ -289,7 +264,14 @@
 
   &.big-text {
     .text-content {
+      display : table;
+      height : 225px;
+      width : 225px;
+
       p {
+        display : table-cell;
+        vertical-align : middle;
+
         font-size : 2.0em;
         line-height : 1.1em;
         text-align : center;
@@ -297,9 +279,12 @@
     }
   }
 
+  &.x2.big-text .text-content {
+    width : $two-column-width - 40 + px;
+  }
 
   /* larger declarations */
-  &.x2.width  .content { @include wide(); }
+  &.x2.width .content { @include wide(); }
 
   &.sticky-note.x2.height  .content {
     min-height : $two-row-height + px;
@@ -325,8 +310,58 @@
       @include centered-frame();
       font-size: 2em;
       color: white;
-      @include opacity(1);
+
+      p {
+        text-shadow : none;
+        padding : 0 10px;
+      }
+    }
+  }
+
+  /* new styles go! */
+  &.typist {
+    .content {
+      background : {
+        image : image_url("typist_texture.png");
+        color : transparent;
+      }
+    }
+
+    .background-color {
+      display : none;
+    }
+
+    p {
+      font-family : "American Typewriter", "Courier";
+      letter-spacing : 1.5px;
+      font-size : 0.9em;
+      color : #111;
+    }
+  }
+
+  &.fridge {
+    p {
+      font : {
+        family : "Noteworthy", "Marker Felt", "Comic Sans";
+        style : italic;
+      }
+      font-size : 2em;
+      line-height : 1.4em;
+    }
+  }
+
+  &.vanilla {
+    .background-color {
+      display : none;
+    }
+
+    p {
+      color : #111;
       text-shadow : none;
+      font : {
+        weight : normal;
+        family : Roboto-Light;
+      }
     }
   }
 }

features/new_hotness/trumpeter.feature

@@ -54,8 +54,8 @@ Feature: Creating a new post
     Then it should be a wallpaper small frame with the background "button.gif"
     Then I should see "This is hella customized" in the framer preview
 
-    When I select the mood "Newspaper"
-    Then the post's mood should be "Newspaper"
+    When I select the mood "Typist"
+    Then the post's mood should be "Typist"
     And "button.gif" should be in the post's small frame
 
     And I should see "This is hella customized" in the framer preview
@@ -63,7 +63,7 @@ Feature: Creating a new post
     And I go back to the composer
     And I write "It sure is a beautiful Day"
     And I start the framing process
-    Then the post's mood should be "Newspaper"
+    Then the post's mood should be "Typist"
     And I should see "It sure is a beautiful Day" in the framer preview
 
     When I finalize my frame
@@ -72,7 +72,7 @@ Feature: Creating a new post
     When I click into the "It sure is a beautiful Day" post
 
     #on show page
-    And the post's mood should still be "Newspaper"
+    And the post's mood should still be "Typist"
 
   Scenario: The Wallpaper mood
     When I write "This is a pithy status" with body "And this is a long body"

spec/javascripts/app/models/post/template_picker_spec.js

@@ -10,8 +10,8 @@ describe("app.models.Post.TemplatePicker", function(){
         this.post.set({text : window.hipsterIpsumFourParagraphs })
       })
 
-      it("returns Wallpaper", function(){
-        expect(this.templatePicker.getFrameName()).toBe("Newspaper")
+      it("returns Typist", function(){
+        expect(this.templatePicker.getFrameName()).toBe("Typist")
       })
     })
 
@@ -31,13 +31,13 @@ describe("app.models.Post.TemplatePicker", function(){
           this.post.set({photos : [factory.photoAttrs(), factory.photoAttrs()]})
         })
 
-        it("returns Day", function(){
-          expect(this.templatePicker.getFrameName()).toBe("Day")
+        it("returns Vanilla", function(){
+          expect(this.templatePicker.getFrameName()).toBe("Vanilla")
         })
       })
 
-      it("returns 'Day' by default", function(){
-        expect(this.templatePicker.getFrameName()).toBe("Day")
+      it("returns 'Vanilla' by default", function(){
+        expect(this.templatePicker.getFrameName()).toBe("Vanilla")
       })
     })
   })

spec/javascripts/app/pages/framer_spec.js

@@ -30,8 +30,8 @@ describe("app.pages.Framer", function(){
       expect(this.model.setFrameName).toHaveBeenCalled()
     })
 
-    it("sets the frame_name of the model to 'Day' by default", function(){ //jasmine integration test, arguably unnecessary
-      expect(this.model.get("frame_name")).toBe("Day")
+    it("sets the frame_name of the model to 'Vanilla' by default", function(){ //jasmine integration test, arguably unnecessary
+      expect(this.model.get("frame_name")).toBe("Vanilla")
     })
   })
 
@@ -50,9 +50,9 @@ describe("app.pages.Framer", function(){
     describe("setting the model's attributes from the various form fields", function(){
       beforeEach(function(){
         this.page.$("input.mood").attr("checked", false) //radio button hax
-        expect(app.frame.get("frame_name")).not.toBe("Night")
+        expect(app.frame.get("frame_name")).not.toBe("Typist")
         this.page.$("input.aspect_ids").val("public")
-        this.page.$("input[value='Night']").attr("checked", "checked")
+        this.page.$("input[value='Typist']").attr("checked", "checked")
         this.page.$("input.services[value=facebook]").attr("checked", "checked")
         this.page.$("input.services[value=twitter]").attr("checked", "checked")
       })
@@ -60,13 +60,13 @@ describe("app.pages.Framer", function(){
       it("instantiates a post on form submit", function(){
         this.page.$("input").trigger("change") //runs setFormAttrs
         waitsFor(function(){
-          return  this.page.model.get("frame_name") == "Night"
+          return  this.page.model.get("frame_name") == "Typist"
         })
 
         runs(function(){
           expect(this.page.model.get("aspect_ids")).toEqual(["public"])
           expect(this.page.model.get("services")).toEqual(["facebook", "twitter"])
-          expect(this.page.model.get("frame_name")).toBe("Night")
+          expect(this.page.model.get("frame_name")).toBe("Typist")
         })
       })
     });