DG MS; new templates for post show pages.

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
+#main_stream
-    /- if @post.is_a?(Photo)
+%br
-    /  = render 'posts/photo', :post => @post
+%br
-    /- else
+%br
-    /  = render 'shared/stream_element', :post => @post, :commenting_disabled => commenting_disabled?(@post)
+
-  %br
+#post-nav
-  %br
+  = link_to 'prev', post_path(@post.id-1)
-  %br
+  = link_to 'next', post_path(@post.id+1)

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

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({
+      var view = new app.views.SinglePost({
-        model : new app.models.Post(postAttrs)
+        model : new app.models.Post(postAttrs),
+        templateName : templateName
       }).render();
 
       $("#main_stream").html(view.el);

public/javascripts/app/templates/multi-photo.handlebars

@@ -0,0 +1,11 @@
+<div class="multi-photo">
+  <h3>
+    {{text}}
+  </h3>
+
+  {{#each photos}}
+    <div class="img-bounding-box">
+      <img src="{{sizes.large}}" />
+    </div>
+  {{/each}}
+</div>

public/javascripts/app/templates/note.handlebars

@@ -0,0 +1,3 @@
+<div class="note">
+  {{text}}
+</div>

public/javascripts/app/templates/photo-backdrop.handlebars

@@ -0,0 +1,4 @@
+{{#each photos}}
+  <div class="status photo-backdrop" style="background-image: url({{sizes.large}})">
+  </div>
+{{/each}}

public/javascripts/app/templates/rich-media.handlebars

@@ -0,0 +1,11 @@
+<div class="backdrop rich-media">
+
+  {{{o_embed_cache.data.html}}}
+
+  <br>
+  <br>
+
+  <h3>
+    {{text}}
+  </h3>
+</div>

public/javascripts/app/templates/status-with-photo-backdrop.handlebars

@@ -0,0 +1,7 @@
+{{#each photos}}
+  <div class="status photo-backdrop" style="background-image: url({{sizes.large}})">
+    <h1>
+      {{../text}}
+    </h1>
+  </div>
+{{/each}}

public/javascripts/app/templates/status.handlebars

@@ -0,0 +1,5 @@
+<div class="status">
+  <h1>
+    {{text}}
+  </h1>
+</div>

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() {
+  initialize : function(options) {
-    $(this.el).attr("id", this.model.get("guid"));
+    // 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);

public/javascripts/app/views/single_post_view.js

@@ -0,0 +1,5 @@
+app.views.SinglePost = app.views.Post.extend({
+
+  className : "loaded"
+
+});

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;
+  }
+}

status-with-photo-backdrop.handlebars

@@ -0,0 +1,9 @@
+<div class="status-withmulti-photo">
+  <h1>
+    {{text}}
+  </h1>
+
+  {{#each photos}}
+    <img src="{{sizes.large}}" />
+  {{/each}}
+</div>