Adjust the SPV design

app/assets/javascripts/app/views/single-post-viewer/single_post_comment_stream.js

@@ -20,7 +20,7 @@ app.views.SinglePostCommentStream = app.views.CommentStream.extend({
 
   postRenderTemplate: function() {
     app.views.CommentStream.prototype.postRenderTemplate.apply(this);
-    this.$(".new_comment_form_wrapper").removeClass('hidden');
+    this.$(".new-comment-form-wrapper").removeClass("hidden");
     _.defer(this.highlightPermalinkComment);
   },
 

app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js

@@ -7,6 +7,7 @@ app.views.SinglePostContent = app.views.Base.extend({
 
   templateName: "single-post-viewer/single-post-content",
   tooltipSelector: "time, .post_scope",
+  className: "framed-content",
 
   subviews : {
     "#single-post-actions" : "singlePostActionsView",

app/assets/javascripts/app/views/single-post-viewer/single_post_interactions.js

@@ -3,6 +3,7 @@
 app.views.SinglePostInteractions = app.views.Base.extend({
   templateName: "single-post-viewer/single-post-interactions",
   tooltipSelector: ".avatar.micro",
+  className: "framed-content",
 
   subviews: {
     '#comments': 'commentStreamView'

app/assets/javascripts/app/views/stream_post_views.js

@@ -143,7 +143,7 @@ app.views.StreamPost = app.views.Post.extend({
 
   focusCommentTextarea: function(evt){
     evt.preventDefault();
-    this.$(".new_comment_form_wrapper").removeClass("hidden");
+    this.$(".new-comment-form-wrapper").removeClass("hidden");
     this.$(".comment_box").focus();
 
     return this;

app/assets/stylesheets/base.scss

@@ -18,6 +18,7 @@ body {
 .page-people.action-show,
 .page-people.action-contacts,
 .page-photos,
+.page-posts,
 .page-profiles.action-edit,
 .page-services.action-index,
 .page-streams,

app/assets/stylesheets/comments.scss

@@ -8,7 +8,8 @@
     }
     .media { margin-top: 10px; }
   }
-  .comments > .comment, .comment.new_comment_form_wrapper {
+  .comments > .comment,
+  .comment.new-comment-form-wrapper {
     .avatar {
       height: 35px;
       width: 35px;

app/assets/stylesheets/single-post-view.scss

@@ -3,9 +3,9 @@
 }
 
 #single-post-content {
-  border-right: solid 1px #cccccc;
-  #head {
+  .head {
     padding-bottom: 10px;
+    padding-top: 5px;
     border-bottom: 1px solid $border-grey;
     #post-info {
       .author{ color: $grey; }
@@ -26,12 +26,12 @@
     .near-from {
       color: $text-grey;
       font-size: 12px;
-      margin: 10px 20px 0px 15px;
+      margin: 10px 15px 0;
     }
     .mapContainer {
-      margin: 10px 20px 0px 15px;
+      margin: 10px 15px 0;
     }
-    .row.reshare {
+    .reshare {
       border-top: 1px solid lighten($border-grey,5%);
       padding-top: 10px;
       margin-top: 10px;
@@ -99,44 +99,16 @@
     }
   }
 
-  #body {
-    margin-left: 20px;
-    padding-top: 20px;
-    width: auto;
-
-    #real-post-content div.reshare {
-      border-left: 2px solid #DDD;
-      padding-left: 10px;
-    }
+  .body {
+    padding: 20px 15px;
 
     .nsfw-off { display: none; }
     .nsfw-shield { display: none; }
-    .oembed { width: 95%; }
-    .photo_attachments {
-      img.big_stream_photo { max-width: 90%; }
-    }
   }
 }
 
 #single-post-interactions {
-  border-left: 1px solid #cccccc;
-  position: relative;
-  left: -1px;
-  margin-left: 0;
-  padding-left: 15px;
-
-  .comment.media .img {
-    margin-left: 5px;
-  }
-
-  .no_comments {
-    padding-top: 10px;
-    padding-bottom: 10px;
-    background-color: $background-grey;
-    text-align: center;
-    border-radius: 4px;
-    margin-bottom: 30px;
-  }
+  .no-comments { text-align: center; }
 
   a {
     color: $blue;
@@ -161,4 +133,8 @@
     img{ display: inline; }
   }
 
+  .comments > .comment,
+  .comment.new-comment-form-wrapper {
+    padding: 10px;
+  }
 }

app/assets/templates/comment-stream_tpl.jst.hbs

@@ -11,7 +11,7 @@
 <div class="comments"> </div>
 
 {{#if loggedIn}}
-  <div class="comment media new_comment_form_wrapper {{#unless commentsCount}} hidden {{/unless}}">
+  <div class="comment media new-comment-form-wrapper {{#unless commentsCount}} hidden {{/unless}}">
     {{#with current_user}}
       <a href="/people/{{guid}}" class="img">
         {{{personImage this}}}

app/assets/templates/single-post-viewer/single-post-content_tpl.jst.hbs

@@ -1,4 +1,4 @@
-<div id="head" class="row">
+<div id="head" class="head clearfix">
   <div class="col-md-12">
     <div class="row">
       <div id="post-info" class="col-md-8">
@@ -103,7 +103,9 @@
     {{/if}}
   </div>
 </div>
-<div id="body" class="row">
-  <div id="real-post-content" class="post-content col-md-12">
+<div class="row">
+  <div id="body" class="body clearfix">
+    <div id="real-post-content" class="post-content col-md-12">
+    </div>
   </div>
 </div>

app/assets/templates/single-post-viewer/single-post-interactions_tpl.jst.hbs

@@ -36,7 +36,7 @@
     </span>
   </div>
 {{else}}
-  <div class='no_comments'>
+  <div class="no-comments">
     <h4>{{t "comments.no_comments" }}</h4>
   </div>
 {{/if}}

app/assets/templates/single-post-viewer_tpl.jst.hbs

@@ -1,4 +1,4 @@
-<div id='single-post-container' class='container-fluid'>
+<div id="single-post-container">
   <div class='row'>
     <div id='single-post-content' class='col-md-6 single-post-content'>
     </div>