diff --git a/app/views/posts/show.html.haml b/app/views/posts/show.html.haml
index d230c583c..a376bc2d5 100644
--- a/app/views/posts/show.html.haml
+++ b/app/views/posts/show.html.haml
@@ -5,13 +5,12 @@
- content_for :page_title do
= post_page_title @post
-.span-20.append-2.prepend-2.last
- #main_stream.stream.status_message_show
- /- if @post.is_a?(Photo)
- / = render 'posts/photo', :post => @post
- /- else
- / = render 'shared/stream_element', :post => @post, :commenting_disabled => commenting_disabled?(@post)
- %br
- %br
- %br
+#main_stream
+%br
+%br
+%br
+
+#post-nav
+ = link_to 'prev', post_path(@post.id-1)
+ = link_to 'next', post_path(@post.id+1)
diff --git a/config/assets.yml b/config/assets.yml
index 8bb1ea56b..3b759d883 100644
--- a/config/assets.yml
+++ b/config/assets.yml
@@ -106,6 +106,7 @@ stylesheets:
default:
- public/stylesheets/application.css
- public/stylesheets/loader.css
+ - public/stylesheets/new-templates.css
- public/stylesheets/ui.css
- public/stylesheets/lightbox.css
- public/stylesheets/autocomplete.css
diff --git a/public/javascripts/app/router.js b/public/javascripts/app/router.js
index eba879f3e..450d4d9bc 100644
--- a/public/javascripts/app/router.js
+++ b/public/javascripts/app/router.js
@@ -40,9 +40,11 @@ app.Router = Backbone.Router.extend({
singlePost : function(id) {
new app.models.Post({id : id}).fetch({success : function(resp){
var postAttrs = resp.get("post");
+ var templateName = resp.get("templateName");
- var view = new app.views.Post({
- model : new app.models.Post(postAttrs)
+ var view = new app.views.SinglePost({
+ model : new app.models.Post(postAttrs),
+ templateName : templateName
}).render();
$("#main_stream").html(view.el);
diff --git a/public/javascripts/app/templates/multi-photo.handlebars b/public/javascripts/app/templates/multi-photo.handlebars
new file mode 100644
index 000000000..adcda6a20
--- /dev/null
+++ b/public/javascripts/app/templates/multi-photo.handlebars
@@ -0,0 +1,11 @@
+
+
+ {{text}}
+
+
+ {{#each photos}}
+
+
+
+ {{/each}}
+
+ {{text}}
+
diff --git a/public/javascripts/app/templates/photo-backdrop.handlebars b/public/javascripts/app/templates/photo-backdrop.handlebars
new file mode 100644
index 000000000..e52f14735
--- /dev/null
+++ b/public/javascripts/app/templates/photo-backdrop.handlebars
@@ -0,0 +1,4 @@
+{{#each photos}}
+
+
+{{/each}}
diff --git a/public/javascripts/app/templates/rich-media.handlebars b/public/javascripts/app/templates/rich-media.handlebars
new file mode 100644
index 000000000..a85c8b956
--- /dev/null
+++ b/public/javascripts/app/templates/rich-media.handlebars
@@ -0,0 +1,11 @@
+
+
+ {{{o_embed_cache.data.html}}}
+
+
+
+
+
+ {{text}}
+
+
diff --git a/public/javascripts/app/templates/status-with-photo-backdrop.handlebars b/public/javascripts/app/templates/status-with-photo-backdrop.handlebars
new file mode 100644
index 000000000..6343ce3ca
--- /dev/null
+++ b/public/javascripts/app/templates/status-with-photo-backdrop.handlebars
@@ -0,0 +1,7 @@
+{{#each photos}}
+
+
+ {{../text}}
+
+
+{{/each}}
diff --git a/public/javascripts/app/templates/status.handlebars b/public/javascripts/app/templates/status.handlebars
new file mode 100644
index 000000000..fe764ec26
--- /dev/null
+++ b/public/javascripts/app/templates/status.handlebars
@@ -0,0 +1,5 @@
+
+
+ {{text}}
+
+
diff --git a/public/javascripts/app/views/post_view.js b/public/javascripts/app/views/post_view.js
index be6330683..0c5f26005 100644
--- a/public/javascripts/app/views/post_view.js
+++ b/public/javascripts/app/views/post_view.js
@@ -23,8 +23,9 @@ app.views.Post = app.views.StreamObject.extend({
tooltipSelector : ".delete, .block_user, .post_scope",
- initialize : function() {
- $(this.el).attr("id", this.model.get("guid"));
+ initialize : function(options) {
+ // allow for a custom template name to be passed in via the options hash
+ this.templateName = options.templateName || this.templateName
this.model.bind('remove', this.remove, this);
this.model.bind('destroy', this.destroy, this);
diff --git a/public/javascripts/app/views/single_post_view.js b/public/javascripts/app/views/single_post_view.js
new file mode 100644
index 000000000..a6eca8ba7
--- /dev/null
+++ b/public/javascripts/app/views/single_post_view.js
@@ -0,0 +1,5 @@
+app.views.SinglePost = app.views.Post.extend({
+
+ className : "loaded"
+
+});
diff --git a/public/stylesheets/sass/new-templates.scss b/public/stylesheets/sass/new-templates.scss
new file mode 100644
index 000000000..0f62267b0
--- /dev/null
+++ b/public/stylesheets/sass/new-templates.scss
@@ -0,0 +1,96 @@
+/* variables */
+
+
+/* mixins */
+@mixin pushdown() {
+ /* temp hack... should use box model here */
+ padding-top: 10%;
+}
+
+/* styles */
+
+.multi-photo {
+ .img-bounding-box {
+ display: inline-block;
+ margin-left: 10px;
+ height: 500px;
+ width: 300px;
+ }
+
+ img {
+ max-width: 100%;
+ max-height: 100%;
+ }
+}
+
+.note {
+ width: 500px;
+}
+
+.status {
+ @include pushdown();
+
+ text-align: center;
+
+ h1 {
+ font-weight: bold;
+ font-size: 60px;
+ }
+}
+
+.backdrop,
+.photo-backdrop {
+ position: fixed;
+
+ top: 0;
+ left: 0;
+
+ background: no-repeat center center fixed;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+
+ width: 100%;
+ height: 100%;
+}
+
+.photo-backdrop {
+ h1 {
+ color: #fff;
+ z-index: 100;
+ }
+}
+
+.rich-media {
+ @include pushdown();
+
+ text-align: center;
+
+ background-color: #333;
+
+ h3 {
+ color: #999;
+ }
+
+ iframe {
+ box-shadow: 0 3px 15px #000;
+
+ width: 857px;
+ height: 480px;
+ }
+}
+
+/* temp */
+#post-nav {
+ position: fixed;
+ bottom: 10px;
+ height: 50px;
+
+ z-index: 100;
+ background: rgba(255,255,255,0.8);
+
+ a {
+ padding: 30px;
+ }
+}
diff --git a/status-with-photo-backdrop.handlebars b/status-with-photo-backdrop.handlebars
new file mode 100644
index 000000000..985606c4b
--- /dev/null
+++ b/status-with-photo-backdrop.handlebars
@@ -0,0 +1,9 @@
+
+
+ {{text}}
+
+
+ {{#each photos}}
+
+ {{/each}}
+