diff --git a/app/assets/javascripts/app/models/post.js b/app/assets/javascripts/app/models/post.js
index efe9c9a8c..307158662 100644
--- a/app/assets/javascripts/app/models/post.js
+++ b/app/assets/javascripts/app/models/post.js
@@ -89,11 +89,25 @@ app.models.Post = Backbone.Model.extend({
self.set(resp);
self.trigger('interacted', this)
}});
+ },
+
+ headline : function() {
+ var headline = this.get("text").trim()
+ , newlineIdx = headline.lastIndexOf("\n")
+ return (newlineIdx > 0 ) ? headline.substr(0, newlineIdx) : headline
+ },
+
+ body : function(){
+ var body = this.get("text").trim()
+ , newlineIdx = body.lastIndexOf("\n")
+ return (newlineIdx > 0 ) ? body.substr(newlineIdx+1, body.length) : ""
}
}, {
+ headlineLimit : 118,
frameMoods : [
- "Day"
+ "Day",
+ "Night"
],
legacyTemplateNames : [
diff --git a/app/assets/javascripts/app/views/post/day_view.js b/app/assets/javascripts/app/views/post/day_view.js
deleted file mode 100644
index e9245ebed..000000000
--- a/app/assets/javascripts/app/views/post/day_view.js
+++ /dev/null
@@ -1,17 +0,0 @@
-//= require ../post_view
-app.views.Post.Day = app.views.Post.extend({
- templateName : "day",
- className : "day post loaded",
-
- subviews : { "section.photo_viewer" : "photoViewer" },
-
- photoViewer : function(){
- return new app.views.PhotoViewer({ model : this.model })
- },
-
- postRenderTemplate : function(){
- if(this.model.get("text").length < 140){
- this.$('section.text').addClass('headline');
- }
- }
-});
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/post/mood_view.js b/app/assets/javascripts/app/views/post/mood_view.js
new file mode 100644
index 000000000..53004e83e
--- /dev/null
+++ b/app/assets/javascripts/app/views/post/mood_view.js
@@ -0,0 +1,36 @@
+app.views.Post.Mood = app.views.Post.extend({
+ templateName : "mood",
+ className : "post loaded",
+ tagName : "article",
+ subviews : { "section.photo_viewer" : "photoViewer" },
+
+ initialize : function(){
+ $(this.el).addClass(this.mood)
+ },
+
+ presenter : function(){
+ var model = this.model
+ return _.extend(this.defaultPresenter(), {
+ headline : model.headline(),
+ body : model.body()
+ })
+ },
+
+ photoViewer : function(){
+ return new app.views.PhotoViewer({ model : this.model })
+ },
+
+ postRenderTemplate : function(){
+ if(this.model.body().length < 200){
+ this.$('section.body').addClass('short_body');
+ }
+ }
+});
+
+app.views.Post.Day = app.views.Post.Mood.extend({
+ mood : "day"
+})
+
+app.views.Post.Night = app.views.Post.Mood.extend({
+ mood : "night"
+})
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/template_picker_view.js b/app/assets/javascripts/app/views/template_picker_view.js
index 834bd72e7..be2954ae5 100644
--- a/app/assets/javascripts/app/views/template_picker_view.js
+++ b/app/assets/javascripts/app/views/template_picker_view.js
@@ -2,7 +2,7 @@ app.views.TemplatePicker = app.views.Base.extend({
templateName : "template-picker",
initialize : function(){
- this.model.set({frame_name : 'status'})
+ this.model.set({frame_name : 'Day'})
},
events : {
@@ -19,7 +19,7 @@ app.views.TemplatePicker = app.views.Base.extend({
presenter : function() {
return _.extend(this.defaultPresenter(), {
- templates : _.union(app.models.Post.frameMoods, app.models.Post.legacyTemplateNames)
+ templates : _.union(app.models.Post.frameMoods, _.without(app.models.Post.legacyTemplateNames, ["status"]))
})
}
})
\ No newline at end of file
diff --git a/app/assets/stylesheets/new-templates.css.scss b/app/assets/stylesheets/new-templates.css.scss
index f0c0cbd25..f4f65d305 100644
--- a/app/assets/stylesheets/new-templates.css.scss
+++ b/app/assets/stylesheets/new-templates.css.scss
@@ -3,6 +3,9 @@
$light-grey: #999;
$pane-width: 420px;
+$night-background-color : #333;
+$night-text-color : #999;
+
/* mixins */
@mixin center($orient:vertical) {
@@ -259,7 +262,7 @@ $pane-width: 420px;
left: 0;
text-align: center;
- background-color: #333;
+ background-color: $night-background-color;
p {
@include media-text();
@@ -807,6 +810,27 @@ text-rendering: optimizelegibility;
}
}
-.headline p{
- @include media-text();
+article { //mood posts
+ $big-text-size : 3em;
+ $medium-text-size : 2em;
+ $small-text-size: 1.5em;
+
+ header, header p{
+ //big text
+ @include media-text();
+ font-size: $big-text-size;
+ }
+
+ section.body{
+ font-size: $small-text-size;
+
+ &.short_body{
+ font-size: $medium-text-size;
+ }
+ }
+
+ &.night{
+ background-color : $night-background-color;
+ color : $night-text-color;
+ }
}
\ No newline at end of file
diff --git a/app/assets/templates/day.jst.hbs b/app/assets/templates/day.jst.hbs
deleted file mode 100644
index 7a9acc3fc..000000000
--- a/app/assets/templates/day.jst.hbs
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
diff --git a/app/assets/templates/mood.jst.hbs b/app/assets/templates/mood.jst.hbs
new file mode 100644
index 000000000..4c977ded4
--- /dev/null
+++ b/app/assets/templates/mood.jst.hbs
@@ -0,0 +1,3 @@
+
+
+
diff --git a/spec/javascripts/app/models/post_spec.js b/spec/javascripts/app/models/post_spec.js
index dfe08bc66..6d9f75070 100644
--- a/spec/javascripts/app/models/post_spec.js
+++ b/spec/javascripts/app/models/post_spec.js
@@ -3,15 +3,30 @@ describe("app.models.Post", function() {
this.post = new app.models.Post();
})
- describe("url", function(){
- it("should be /posts when it doesn't have an id", function(){
- expect(new app.models.Post().url()).toBe("/posts")
+ describe("headline and body", function(){
+ describe("headline", function(){
+ beforeEach(function(){
+ this.post.set({text :" yes "})
+ })
+
+ it("the headline is the entirety of the post", function(){
+ expect(this.post.headline()).toBe("yes")
+ })
+
+ it("takes up until the new line", function(){
+ this.post.set({text : "love\nis avery powerful force"})
+ expect(this.post.headline()).toBe("love")
+ })
})
- it("should be /posts/id when it doesn't have an id", function(){
- expect(new app.models.Post({id: 5}).url()).toBe("/posts/5")
+ describe("body", function(){
+ it("takes after the new line", function(){
+ this.post.set({text : "Inflamatory Title\nwith text that substantiates a less absolutist view of the title."})
+ expect(this.post.body()).toBe("with text that substantiates a less absolutist view of the title.")
+ })
})
})
+
describe("createdAt", function() {
it("returns the post's created_at as an integer", function() {
var date = new Date;
@@ -99,6 +114,4 @@ describe("app.models.Post", function() {
expect(app.models.Participation.prototype.destroy).toHaveBeenCalled();
})
})
-
-
});
diff --git a/spec/javascripts/app/views/post/day_view_spec.js b/spec/javascripts/app/views/post/day_view_spec.js
index 397ac4615..cee11e33d 100644
--- a/spec/javascripts/app/views/post/day_view_spec.js
+++ b/spec/javascripts/app/views/post/day_view_spec.js
@@ -9,17 +9,17 @@ describe("app.views.Post.Day", function(){
this.view.render()
})
- describe("when the text is under 140 characters", function(){
- it("has class headline", function(){
- this.post.set({text : "Lol this is a short headline"})
+ describe("when the body is under 200 characters", function(){
+ it("has class shortBody", function(){
+ this.post.set({text : "Headline\nLol this is a short body"})
this.view.render()
- expect(this.view.$("section.text")).toHaveClass("headline")
+ expect(this.view.$("section.body")).toHaveClass("short_body")
})
})
- describe("when the text is over 140 characters", function(){
+ describe("when the body is over 200 characters", function(){
it("has doesn't have headline", function(){
- this.post.set({text :"Vegan bushwick tempor labore. Nulla seitan anim, aesthetic ex gluten-free viral" +
+ this.post.set({text :"HEADLINE\nVegan bushwick tempor labore. Nulla seitan anim, aesthetic ex gluten-free viral" +
"thundercats street art. Occaecat carles deserunt lomo messenger bag wes anderson. Narwhal cray selvage " +
"dolor. Mixtape wes anderson american apparel, mustache readymade cred nulla squid veniam small batch id " +
"cupidatat. Pork belly high life consequat, raw denim sint terry richardson seitan single-origin coffee " +
@@ -27,8 +27,8 @@ describe("app.views.Post.Day", function(){
})
this.view.render()
- expect(this.view.$("section.text")).not.toHaveClass("headline")
+ expect(this.view.$("section.body")).not.toHaveClass("short_body")
})
})
})
-})
\ No newline at end of file
+})
diff --git a/spec/javascripts/app/views/post/night_view_spec.js b/spec/javascripts/app/views/post/night_view_spec.js
new file mode 100644
index 000000000..20303c3c3
--- /dev/null
+++ b/spec/javascripts/app/views/post/night_view_spec.js
@@ -0,0 +1,12 @@
+describe("app.views.Post.Night", function(){
+ beforeEach(function(){
+ this.post = factory.post()
+ this.view = new app.views.Post.Night({model : this.post})
+ })
+
+ describe("rendering", function(){
+ it("is happy", function(){
+ this.view.render()
+ })
+ })
+})
\ No newline at end of file
diff --git a/spec/javascripts/app/views/template_picker_view_spec.js b/spec/javascripts/app/views/template_picker_view_spec.js
index 7b1e8ef19..2e4c322de 100644
--- a/spec/javascripts/app/views/template_picker_view_spec.js
+++ b/spec/javascripts/app/views/template_picker_view_spec.js
@@ -6,7 +6,7 @@ describe("app.views.TemplatePicker", function(){
describe("initialization", function(){
it("sets the frame_name of the model to 'status' by default", function(){
- expect(this.view.model.get("frame_name")).toBe("status")
+ expect(this.view.model.get("frame_name")).toBe("Day")
})
})
@@ -16,13 +16,13 @@ describe("app.views.TemplatePicker", function(){
})
it("selects the model's frame_name from the dropdown", function(){
- expect(this.view.$("select[name=template]").val()).toBe("status")
+ expect(this.view.$("select[name=template]").val()).toBe("Day")
})
it("changes the frame_name on the model when is is selected", function(){
- this.view.$("select[name=template]").val("note")
+ this.view.$("select[name=template]").val("Night")
this.view.$("select[name=template]").trigger("change")
- expect(this.model.get("frame_name")).toBe('note')
+ expect(this.model.get("frame_name")).toBe('Night')
})
})
})
\ No newline at end of file