Merge pull request #4410 from rogerbraun/feature/spv-redesign

New single post view

Conflicts:
	app/assets/stylesheets/application.css.sass

Changelog.md

@@ -60,6 +60,7 @@
 * Add possibility to ask for Bitcoin donations [#4375](https://github.com/diaspora/diaspora/pull/4375)
 * Remove posts, comments and private conversations from the mobile site. [#4408](https://github.com/diaspora/diaspora/pull/4408) [#4409](https://github.com/diaspora/diaspora/pull/4409)
 * Added a link to user photos and thumbnails are shown in the left side bar [#4347](https://github.com/diaspora/diaspora/issues/4347)
+* Rework the single post view
 
 # 0.1.1.0
 

Gemfile

@@ -104,6 +104,9 @@ gem 'will_paginate',           '3.0.4'
 
 group :assets do
 
+  # Icons
+  gem 'entypo-rails'
+
   # CSS
 
   gem 'bootstrap-sass', '2.2.2.0'

Gemfile.lock

@@ -97,6 +97,8 @@ GEM
       railties (>= 3.2.6, < 5)
       warden (~> 1.2.3)
     diff-lcs (1.2.4)
+    entypo-rails (2.0.2)
+      railties (>= 3.1, <= 5)
     erubis (2.7.0)
     ethon (0.5.12)
       ffi (>= 1.3.0)
@@ -441,6 +443,7 @@ DEPENDENCIES
   cucumber-rails (= 1.3.1)
   database_cleaner (= 1.1.0)
   devise (= 3.0.2)
+  entypo-rails
   factory_girl_rails (= 4.2.1)
   faraday (= 0.8.8)
   faraday_middleware (= 0.9.0)

app/assets/javascripts/app/pages/single-post-viewer.js

@@ -0,0 +1,41 @@
+app.pages.SinglePostViewer = app.views.Base.extend({
+  templateName: "single-post-viewer",
+
+  subviews : {
+    "#single-post-content" : "singlePostContentView",
+    '#single-post-interactions' : 'singlePostInteractionsView'
+  },
+
+  initialize : function(options) {
+    this.model = new app.models.Post({ id : options.id });
+    this.model.preloadOrFetch().done(_.bind(this.initViews, this));
+    this.model.interactions.fetch() //async, yo, might want to throttle this later.
+    this.setupLightbox()
+  },
+
+  setupLightbox : function(){
+    this.lightbox = Diaspora.BaseWidget.instantiate("Lightbox");
+    this.lightbox.set({
+      imageParent: '.photo_attachments',
+      imageSelector: 'img.stream-photo'
+    });
+    this.$el.delegate("a.stream-photo-link", "click", this.lightbox.lightboxImageClicked);
+  },
+
+  initViews : function() {
+    this.singlePostContentView = new app.views.SinglePostContent({model: this.model});
+    this.singlePostInteractionsView = new app.views.SinglePostInteractions({model: this.model});
+    this.render();
+  },
+
+  postRenderTemplate : function() {
+    if(this.model.get("title")){
+      // formats title to html...
+      var html_title = app.helpers.textFormatter(this.model.get("title"), this.model);
+      //... and converts html to plain text
+      document.title = $('<div>').html(html_title).text();
+      app.hovercard.deactivate() // No hovercards for now.
+    }
+  },
+
+});

app/assets/javascripts/app/router.js

@@ -25,7 +25,7 @@ app.Router = Backbone.Router.extend({
   },
 
   singlePost : function(id) {
-    this.renderPage(function(){ return new app.pages.PostViewer({ id: id })});
+    this.renderPage(function(){ return new app.pages.SinglePostViewer({ id: id })});
   },
 
   siblingPost : function(){ //next or previous

app/assets/javascripts/app/views/comment_view.js

@@ -33,3 +33,8 @@ app.views.Comment = app.views.Content.extend({
     return app.currentUser.authenticated() && (this.ownComment() || this.postOwner())
   }
 });
+
+app.views.ExpandedComment = app.views.Comment.extend({
+  postRenderTemplate : function(){
+  }
+});

app/assets/javascripts/app/views/content_view.js

@@ -76,6 +76,11 @@ app.views.StatusMessage = app.views.Content.extend({
   templateName : "status-message"
 });
 
+app.views.ExpandedStatusMessage = app.views.StatusMessage.extend({
+  postRenderTemplate : function(){
+  }
+});
+
 app.views.Reshare = app.views.Content.extend({
   templateName : "reshare"
 });

app/assets/javascripts/app/views/hovercard_view.js

@@ -15,6 +15,11 @@ app.views.Hovercard = Backbone.View.extend({
     this.hashtags = this.$('.hashtags');
     this.person_link = this.$('a.person');
     this.person_handle = this.$('p.handle');
+    this.active = true;
+  },
+
+  deactivate: function() {
+    this.active = false;
   },
 
   href: function() {
@@ -22,6 +27,7 @@ app.views.Hovercard = Backbone.View.extend({
   },
 
   _mouseenterHandler: function(event) {
+    if(this.active == false) { return false }
     var el = $(event.target);
     if( !el.is('a') ) {
       el = el.parents('a');
@@ -38,6 +44,7 @@ app.views.Hovercard = Backbone.View.extend({
   },
 
   _mouseleaveHandler: function(event) {
+    if(this.active == false) { return false }
     this.show_me = false;
     if( this.$el.is(':visible') ) {
       this.$el.fadeOut('fast');
@@ -112,4 +119,4 @@ app.views.Hovercard = Backbone.View.extend({
       left: p_pos.left
     });
   }
-});
+});

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

@@ -0,0 +1,22 @@
+app.views.SinglePostActions = app.views.Feedback.extend({
+  templateName: "single-post-viewer/single-post-actions",
+  tooltipSelector: "time",
+
+  events: function() {
+    return _.defaults({
+      "click .focus-comment" : "focusComment"
+    }, app.views.Feedback.prototype.events);
+  },
+
+  renderPluginWidgets : function() {
+    app.views.Base.prototype.renderPluginWidgets.apply(this);
+    this.$('a').tooltip({placement: 'bottom'});
+  },
+
+  focusComment: function() {
+    $('.comment_stream .comment_box').focus();
+    $('html,body').animate({scrollTop: $('.comment_stream .comment_box').offset().top - ($('.comment_stream .comment_box').height() + 20)});
+    return false;
+  }
+
+});

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

@@ -0,0 +1,26 @@
+app.views.SinglePostCommentStream = app.views.CommentStream.extend({
+  tooltipSelector: "time, .controls a",
+
+  postRenderTemplate: function() {
+    app.views.CommentStream.prototype.postRenderTemplate.apply(this)
+    this.$(".new_comment_form_wrapper").removeClass('hidden')
+  },
+
+  appendComment: function(comment) {
+    // Set the post as the comment's parent, so we can check
+    // on post ownership in the Comment view.
+    comment.set({parent : this.model.toJSON()})
+
+    this.$(".comments").append(new app.views.ExpandedComment({
+      model: comment
+    }).render().el);
+  },
+
+  presenter: function(){
+    return _.extend(this.defaultPresenter(), {
+      moreCommentsCount : 0,
+      showExpandCommentsLink : false,
+      commentsCount : this.model.interactions.commentsCount()
+    })
+  },
+})

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

@@ -0,0 +1,38 @@
+app.views.SinglePostContent = app.views.Base.extend({
+  templateName: 'single-post-viewer/single-post-content',
+
+  subviews : {
+    "#single-post-actions" : "singlePostActionsView",
+    '#real-post-content' : 'postContentView',
+    ".oembed" : "oEmbedView",
+    ".opengraph" : "openGraphView",
+    ".status-message-location" : "postLocationStreamView"
+  },
+
+  initialize : function() {
+    this.singlePostActionsView = new app.views.SinglePostActions({model: this.model});
+    this.oEmbedView = new app.views.OEmbed({model : this.model});
+    this.openGraphView = new app.views.OpenGraph({model : this.model});
+    this.postContentView = new app.views.ExpandedStatusMessage({model: this.model});
+  },
+
+  postLocationStreamView : function(){
+    return new app.views.LocationStream({ model : this.model});
+  },
+
+  presenter : function() {
+    return _.extend(this.defaultPresenter(), {
+      authorIsCurrentUser : this.authorIsCurrentUser(),
+      showPost : this.showPost(),
+      text : app.helpers.textFormatter(this.model.get("text"), this.model)
+    })
+  },
+
+  authorIsCurrentUser : function() {
+    return app.currentUser.authenticated() && this.model.get("author").id == app.user().id
+  },
+
+  showPost : function() {
+    return (app.currentUser.get("showNsfw")) || !this.model.get("nsfw")
+  }
+});

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

@@ -0,0 +1,25 @@
+app.views.SinglePostInteractions = app.views.Base.extend({
+  templateName: "single-post-viewer/single-post-interactions",
+  tooltipSelector: ".avatar.micro",
+
+  subviews: {
+    '#comments': 'commentStreamView'
+  },
+
+  initialize : function() {
+    this.model.interactions.on('change', this.render, this);
+    this.commentStreamView = new app.views.SinglePostCommentStream({model: this.model})
+  },
+
+  presenter : function(){
+    var interactions = this.model.interactions
+    return {
+      likes : interactions.likes.toJSON(),
+      comments : interactions.comments.toJSON(),
+      reshares : interactions.reshares.toJSON(),
+      commentsCount : interactions.commentsCount(),
+      likesCount : interactions.likesCount(),
+      resharesCount : interactions.resharesCount(),
+    }
+  },
+});

app/assets/stylesheets/_flash_messages.scss

@@ -11,7 +11,6 @@
   width : 100%;
 
   text-align : center;
-  font-weight: bold;
   color: #666;
 
   &.expose {
@@ -23,13 +22,17 @@
     @include box-shadow(0, 1px, 4px, rgba(0,0,0,0.8));
 
     display : inline-block;
-    padding: 45px 12px 8px;
+    padding: 10px 12px;
     min-width: 400px;
     max-width: 800px;
 
     color : #fff;
     background-color : rgba(0,0,0,0.8);
     border : 1px solid rgba(255,255,255,0.7);
+
+    font-weight: bold;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 13px;
   }
 }
 

app/assets/stylesheets/_mixins.css.scss

@@ -48,9 +48,9 @@ $default-border-radius: 3px;
 
 /* Browser compatability */
 @mixin box-shadow($left, $top, $blur, $color:#000){
-  -webkit-box-shadow: $left $top $blur $color; 
-  -moz-box-shadow: $left $top $blur $color; 
-  box-shadow: $left $top $blur $color; 
+  -webkit-box-shadow: $left $top $blur $color;
+  -moz-box-shadow: $left $top $blur $color;
+  box-shadow: $left $top $blur $color;
 }
 
 @mixin linear-gradient($from, $to, $start:0%, $end:100%){
@@ -58,7 +58,7 @@ $default-border-radius: 3px;
 
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=$from, endColorstr=$to);
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#{$from}, endColorstr=#{$to})";
-  
+
   background-image: -webkit-gradient(linear, 0% $start, 0% $end, from($from), to($to));
   background-image: -moz-linear-gradient(top, $from $start, $to $end);
   background-image: -o-linear-gradient(top, $from $start, $to $end);
@@ -66,7 +66,7 @@ $default-border-radius: 3px;
 
 @mixin horizontal-linear-gradient($from, $to, $start:0%, $end:100%){
   background-image: mix($from,$to);
-  
+
   background-image: -moz-linear-gradient(left, $from $start, $to $end);
   background-image: -o-linear-gradient(left, $from $start, $to $end);
   background-image: -webkit-linear-gradient(left, $from $start, $to $end);
@@ -108,6 +108,9 @@ $default-border-radius: 3px;
 }
 
 @mixin video-overlay(){
+  position: relative;
+  cursor: pointer;
+
   .video-overlay {
     background : {
       color: rgba(0,0,0, .65);
@@ -124,7 +127,7 @@ $default-border-radius: 3px;
     top : 50%;
     left : 10%;
     right : 10%;
-    
+
     height: 60px;
     margin-top: -40px;
     padding: 10px 7px 10px 80px;

app/assets/stylesheets/application.css.sass

@@ -1,20 +1,16 @@
 @import 'compass'
-@import 'ui.css.scss'
-@import '_mixins.css.scss'
-@import '_flash_messages.scss'
+@import 'ui'
+@import '_mixins'
+@import '_flash_messages'
 @import 'new_styles/_spinner'
-@import 'sidebar.css.scss'
-@import 'header.css.scss'
+
+@import 'sidebar'
+@import 'header'
+@import 'footer'
+@import 'sprites'
+@import 'opengraph'
+
 @import 'profile.css.scss'
-
-/* ===== sprites ===== */
-
-@import 'icons/*.png'
-@import 'branding/*.png'
-@import 'social_media_logos/*.png'
-@include all-icons-sprites
-@include all-branding-sprites
-@include all-social_media_logos-sprites
 /* ====== media ====== */
 .media
   :margin 10px
@@ -496,7 +492,7 @@ form p
 
 form#update_profile_form p.checkbox_select
   label
-    :top 0   
+    :top 0
 
 form p.checkbox_select
   label
@@ -1122,47 +1118,6 @@ ul#request_result
         :top 2px
         :right 1em
 
-footer
-  :width 100%
-  :left 0
-  :bottom 0
-  :color #999
-
-  .container
-    :margin
-      :top 4em
-    :padding 0
-      :top 0.5em
-    :border
-      :top 1px solid #ddd
-
-  .branding-powered_by_diaspora
-    :display inline-block
-    :margin-top 3px
-    :height 11px
-    :width 145px
-
-  ul#footer_nav
-    :margin 0
-    :padding 0
-    :display inline-block
-    :float right
-
-    > li
-      :display inline
-      :margin
-        :right 1em
-
-      &.separator
-        :margin-left -.35em
-        :margin-right .65em
-        @include opacity(.6)
-
-      &:last-child
-        :margin 0
-    a
-      :color #777
-
 #signup_field
   :margin
     :top -200px
@@ -1562,32 +1517,11 @@ ul#press_logos
       :width 100%
 
       .thumb
-        :position relative
-        :cursor pointer
         @include video-overlay()
 
       iframe, .thumb img
         :width 100%
 
-    .opengraph
-      :width 100%
-      a
-        :display block
-        :text-decoration none
-        :color #000
-        :margin 10px 0px 10px 0px
-        :border-top solid 1px #DDD
-        :border-bottom solid 1px #DDD
-        :padding 10px 0px 5px 0px
-        :overflow hidden
-
-        img
-          :margin 0px 5px 5px 0px
-          :float left
-          :max-width 155px
-        .og-title
-          :margin-bottom 5px
-
 .conversation_participants
   :background
     :color $background
@@ -1700,7 +1634,7 @@ ul#press_logos
     :clear right
     :float right
     :color #aaa
-    
+
   .icons-users
     :display block
     :width 25px
@@ -2691,11 +2625,11 @@ body
 #fileInfo
   :font-size small
   :text-align right
-  :margin 5px 2px  
-  
+  :margin 5px 2px
+
 .post_preview_button
   :padding 3px 9px 4px
-  
+
 .post_preview
   :padding
     :top 5px
@@ -2744,5 +2678,5 @@ body
   a#hide_location:hover
     @include opacity(0)
     :-khtml-opacity 1
-    :opacity 1 
+    :opacity 1
     :cursor pointer

app/assets/stylesheets/bootstrap-headerfix.sass

@@ -0,0 +1,40 @@
+// A temporary fix for displaying the header in the single post view.
+// Should be removed once everything uses Bootstrap.
+
+header
+  .container
+    width: 950px
+    .header-nav
+      span
+        a
+          font-weight: bold
+          font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
+          font-size: 13px
+    li
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
+      font-size: 13px
+
+  #notification_badge.active
+    @include border-radius(0)
+
+  #global_search
+    form
+      input
+        height: 15px
+        color: black
+
+  #notification_dropdown
+    h4
+      margin: 0
+    .right
+      a
+        font-weight: bold
+    .notification_element
+      font-size: 13px
+      .timeago
+        color: #aaa
+        text-decoration: none
+        border: medium none
+        cursor: text
+      .unread-setter
+        display: none

app/assets/stylesheets/default.css

@@ -10,4 +10,6 @@
 *= require vendor/facebox
 *= require vendor/fileuploader
 *= require vendor/autoSuggest
-*/
+*= require entypo-fonts
+*= require entypo
+*/

app/assets/stylesheets/entypo.css.scss

@@ -0,0 +1,42 @@
+.entypo {
+  font-family: 'entypo';
+  font-style: normal;
+  color: black;
+
+  &.heart:before {
+    content: '\2665';
+  }
+
+  &.heart-empty:before {
+    content: '\2661';
+  }
+
+  &.retweet:before {
+    content: '\e717';
+  }
+
+  &.comment:before {
+    content: '\e718';
+  }
+
+  &.red {
+    color: #A40802;
+  }
+  &.white {
+    color: white;
+  }
+  &.gray {
+    color: #aaa;
+  }
+  &.blue {
+    color: #3f8fba;
+  }
+
+  &.large {
+    font-size: 2.5em;
+  }
+
+  &.middle {
+    font-size: 1.5em;
+  }
+}

app/assets/stylesheets/footer.css.scss

@@ -0,0 +1,46 @@
+footer {
+  width: 100%;
+  left: 0;
+  bottom: 0;
+  color: #999;
+
+  .container {
+    width: 95%;
+    margin: 4em auto 0 auto;
+    padding: 0.5em 0 1em 0;
+    border-top: 1px solid #ddd;
+  }
+
+  .branding-powered_by_diaspora {
+    display: inline-block;
+    margin-top: 3px;
+    height: 11px;
+    width: 145px;
+  }
+
+  ul#footer_nav {
+    margin: 0;
+    padding: 0;
+    display: inline-block;
+    float: right;
+
+    > li {
+      display: inline;
+      margin-right: 1em;
+
+      &.separator {
+        margin-left: -.35em;
+        margin-right: .65em;
+        @include opacity(.6);
+      }
+
+      &:last-child {
+        margin: 0;
+      }
+    }
+
+    a {
+      color: #777;
+    }
+  }
+}

app/assets/stylesheets/header.css.scss

@@ -1,3 +1,5 @@
+body > #container { margin-top: 50px; } /* to avoid being hidden under the header in the SPV */
+
 body > header {
   @include box-shadow(0,1px,3px,rgba(0,0,0,0.9));
   background: url('header-bg.png') rgb(40,35,35);
@@ -7,6 +9,7 @@ body > header {
   height: 26px;
   position: fixed;
   width: 100%;
+  min-width: 620px;
   top: 0;
   left: 0;
   border-bottom: 1px solid #000;

app/assets/stylesheets/new-templates.css.scss

@@ -3,11 +3,10 @@
 @import 'new_styles/variables';
 
 /* core */
-@import 'new_styles/flash_messages';
-@import 'header.css.scss';
+@import 'flash_messages';
+@import 'sprites';
 
 @import 'new_styles/base';
-@import 'new_styles/interactions';
 @import 'new_styles/viewer_nav';
 
 /* font overrides */
@@ -20,5 +19,9 @@
 
 @import 'new_styles/forms';
 
-
-@include video-overlay();
+/* new SPV */
+@import 'header';
+@import 'footer';
+@import 'bootstrap-headerfix';
+@import 'opengraph';
+@import 'single-post-view';

app/assets/stylesheets/new_styles/_animations.scss

@@ -53,28 +53,28 @@
 	100%   { @include opacity(0); -o-transform : scale(1.3); }
 }
 
-/* flash message animations */
+/* flash message animations - header height is about 40px */
 @-webkit-keyframes expose {
         0%   { top : -100px; }
-        15%  { top : 0; }
-        85%  { top : 0; }
+        15%  { top : 34px; }
+        85%  { top : 34px; }
         100% { top : -100px; }
 }
 @-moz-keyframes expose {
         0%   { top : -100px; }
-        15%  { top : 0; }
-        85%  { top : 0; }
+        15%  { top : 34px; }
+        85%  { top : 34px; }
         100% { top : -100px; }
 }
 @-ms-keyframes expose {
         0%   { top : -100px; }
-        15%  { top : 0; }
-        85%  { top : 0; }
+        15%  { top : 34px; }
+        85%  { top : 34px; }
         100% { top : -100px; }
 }
 @-o-keyframes expose {
         0%   { top : -100px; }
-        15%  { top : 0; }
-        85%  { top : 0; }
+        15%  { top : 34px; }
+        85%  { top : 34px; }
         100% { top : -100px; }
 }

app/assets/stylesheets/new_styles/_base.scss

@@ -5,7 +5,6 @@ body {
 }
 
 body {
-  background-image : image_url("texture/light-bg.png");
   padding : none;
 
   &.lock {
@@ -33,6 +32,11 @@ a { color : $link-blue  }
   }
 }
 
+#login {
+  background-image : image_url("texture/light-bg.png");
+  height: 100%;
+}
+
 .author-name {
   font-family : Roboto;
   color: inherit;
@@ -86,7 +90,7 @@ a { color : $link-blue  }
   display: table;
   position: absolute;
 
-  height: 100%;
+  height: 93%;
   width: 100%;
 
   img,

app/assets/stylesheets/opengraph.css.scss

@@ -0,0 +1,24 @@
+.opengraph {
+  width: 100%;
+
+  a {
+    display: block;
+    text-decoration: none;;
+    color: #000;
+    margin: 10px 0px 10px 0px;
+    border-top: solid 1px #DDD;
+    border-bottom: solid 1px #DDD;
+    padding: 10px 0px 5px 0px;
+    overflow: hidden;
+
+    img {
+      margin: 0px 5px 5px 0px;
+      float: left;
+      max-width: 155px;
+    }
+
+    .og-title {
+      margin-bottom: 5px;
+    }
+  }
+}

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

@@ -0,0 +1,190 @@
+#single-post-container {
+  padding-top: 20px;
+}
+
+#single-post-content {
+  #head {
+    color: #aaaaaa;
+    font-size: 12px;
+    #author {
+      .img {
+        max-width: 25%;
+      }
+      .avatar {}
+      .bd {
+        padding-left: 10px;
+        .retweet {
+          i {
+            margin: 0 3px;
+          }
+        }
+      }
+    }
+    #single-post-actions {
+      .buttons {
+        position: relative;
+        top: 6px;
+        clear: right;
+      }
+      .public-info > i {
+        float: left;
+        margin: 2px 4px 0 0;
+      }
+      i.comment:hover {
+        color: #424242;
+      }
+      i.heart.gray:hover {
+        color: #a40802;
+      }
+      i.heart.red:hover {
+        color: #f55f5a;
+      }
+      i.retweet:hover {
+        color: #3f8fba;
+      }
+      time {
+        float: right;
+        margin-left: 3px;
+      }
+      a {
+        margin: 0 0 0 6px;
+        &:hover {
+          text-decoration: none;
+        }
+      }
+    }
+  }
+  border-right: solid 1px #cccccc;
+  padding-right: 10px;
+  #body {
+    margin-left: 20px;
+    padding-top: 20px;
+    width: auto;
+    .photo_attachments {
+      padding-bottom: 10px;
+      img {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        padding-bottom: 5px;
+        max-width: 90%;
+      }
+    }
+    .oembed {
+      background: image-url("ajax-loader2.gif") no-repeat center center;
+      float: left;
+      width: 95%;
+      .thumb {
+        @include video-overlay;
+      }
+      iframe, .thumb img {
+        width: 100%;
+        min-height: 60%;
+      }
+    }
+  }
+}
+
+#single-post-interactions {
+  border-left: 1px solid #cccccc;
+  position: relative;
+  left: -1px;
+  margin-left: 0;
+  padding-left: 2.5%;
+  .comments .comment {
+    border-bottom: solid 1px #cccccc;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    p {
+      margin: 0;
+    }
+  }
+  textarea {
+    width: 95%;
+  }
+  .new_comment_form_wrapper {
+    border-bottom: none;
+  }
+  a {
+    color: #3f8fba;
+  }
+  .timeago {
+    color: #aaaaaa;
+    text-decoration: none;
+    font-size: smaller;
+  }
+  .count {
+    width: 12.8%;
+    text-align: right;
+    i {
+      display: inline-block;
+      text-align: center;
+      width: 25px;
+      vertical-align: middle;
+    }
+  }
+  #reshares .count i { text-align: left; }
+  .persons {
+    margin-left: 5px;
+  }
+}
+
+.comment {
+  &:hover {
+    .controls {
+      @include opacity(0.3);
+    }
+  }
+  .controls {
+    @include transition(opacity);
+    @include opacity(0);
+    z-index: 6;
+    float: right;
+    &:hover {
+      @include opacity(1);
+    }
+    .delete {
+      display: inline-block;
+      .icons-deletelabel {
+        height: 14px;
+        width: 14px;
+      }
+    }
+    a:hover {
+      text-decoration: none;
+    }
+  }
+  .submit_button {
+    input {
+      float: right;
+    }
+    padding-left: 12px;
+    width: 95%;
+  }
+
+  .button.creation {
+    $button-border-color: #aaa;
+    @include border-radius(3px);
+    @include box-shadow(0,1px,1px,#cfcfcf);
+    @include transition(border);
+    @include button-gradient($creation-blue);
+    font: {
+      size: 12px;
+    }
+    color: #fff;
+    padding: 4px 9px;
+    min-width: 90px;
+    min-height: 10px;
+    border: 1px solid darken($button-border-color,20%);
+
+    cursor: pointer;
+    white-space: nowrap;
+
+    &:hover {
+      @include button-gradient-hover($creation-blue);
+      border: 1px solid darken($button-border-color,35%);
+      text-decoration: none;
+    }
+  }
+}
+

app/assets/stylesheets/sprites.css.scss

@@ -0,0 +1,7 @@
+/* ===== sprites ===== */
+@import 'icons/*.png';
+@import 'branding/*.png';
+@import 'social_media_logos/*.png';
+@include all-icons-sprites;
+@include all-branding-sprites;
+@include all-social_media_logos-sprites;

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

@@ -1,16 +1,4 @@
 <div id="author-info"></div>
-
-<div id="top-right-nav">
-    <a href="/" id="home-button">
-        <span class="label label-inverse">
-            <i class="icon-home icon-white"></i>
-            <span>
-                {{t "viewer.home"}}
-            </span>
-        </span>
-    </a>
-</div>
-
-<div id="post-content"> </div>
-<div id="post-nav"> </div>
-<div id="post-interactions"> </div>
+<div id="post-content"></div>
+<div id="post-nav"></div>
+<div id="post-interactions"></div>

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

@@ -0,0 +1,35 @@
+<div class='pull-right'>
+  <span class='public-info'>
+    {{#unless public}}
+      <i class="icon-lock icon-grey"> </i>
+    {{/unless}}
+  </span>
+  <span class="post-time">
+    <time datetime="{{created_at}}" title="{{localTime created_at}}" />
+  </span>
+  <div class="buttons pull-right">
+    <a href="#" rel="auth-required" class="like" title="{{#if userLike}} {{t "viewer.unlike"}} {{else}} {{t "viewer.like"}} {{/if}}">
+        {{#if userLike}}
+            <i class="entypo heart red large"></i>
+        {{else}}
+            <i class="entypo heart gray large"></i>
+        {{/if}}
+    </a>
+
+    <a href="#" rel="auth-required" class="focus-comment" title="{{t "viewer.comment"}}">
+      <i class="entypo comment gray large"></i>
+    </a>
+
+    {{#if userCanReshare}}
+        <a href="#" rel="auth-required" class="reshare" title="{{t "viewer.reshare"}}">
+          <i class="entypo retweet gray large"></i>
+        </a>
+    {{else}}
+        {{#if userReshare}}
+            <a href="#" rel="auth-required" class="reshare-viewonly" title="{{t "viewer.reshared"}}">
+              <i class="entypo retweet blue large"></i>
+            </a>
+        {{/if}}
+    {{/if}}
+  </div>
+</div>

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

@@ -0,0 +1,31 @@
+<div id='head' class='row-fluid'>
+  <div id='author' class='span8'>
+    <div class="img pull-left">
+      {{{personImage author 'medium'}}}
+    </div>
+
+    <div class="bd">
+      {{#linkToPerson author}}
+          {{name}}
+      {{/linkToPerson}}
+
+      {{#if root}}
+      <span class="retweet">
+        <i class="icon-retweet"></i>
+          {{#linkToPerson root.author}}
+            {{name}}
+          {{/linkToPerson}}
+      </span>
+      {{/if}}
+
+      <div class='status-message-location' />
+    </div>
+  </div>
+  <div id='single-post-actions' class='span4'>
+  </div>
+</div>
+<hr />
+<div id='body' class='row-fluid'>
+  <div id='real-post-content' class='span12'>
+  </div>
+</div>

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

@@ -0,0 +1,40 @@
+{{#if resharesCount}}
+  <div class='row' id='reshares'>
+    <div class='span2 count'>
+      {{resharesCount}}
+      <i class='entypo retweet middle gray'></i>
+    </div>
+    <div class='span10 persons'>
+      {{#each reshares}}
+        {{#linkToPerson author}}
+          {{{personImage this 'small' 'micro'}}}
+        {{/linkToPerson}}
+      {{/each}}
+    </div>
+  </div>
+{{/if}}
+{{#if likesCount}}
+  <div class='row' id='likes'>
+    <div class='span2 count'>
+      {{likesCount}}
+      <i class='entypo heart middle gray'></i>
+    </div>
+    <div class='span10 persons'>
+      {{#each likes}}
+        {{#linkToPerson author}}
+          {{{personImage this 'small' 'micro'}}}
+        {{/linkToPerson}}
+      {{/each}}
+    </div>
+  </div>
+{{/if}}
+{{#if commentsCount}}
+  <div class='row' id='comments-meta'>
+    <div class='span2 count'>
+      {{commentsCount}}
+      <i class='entypo comment middle gray'></i>
+    </div>
+  </div>
+{{/if}}
+<div id='comments'>
+</div>

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

@@ -0,0 +1,8 @@
+<div id='single-post-container' class='container-fluid'>
+  <div class='row-fluid'>
+    <div id='single-post-content' class='span6'>
+    </div>
+    <div id='single-post-interactions' class='span6'>
+    </div>
+  </div>
+</div>

app/controllers/posts_controller.rb

@@ -9,7 +9,6 @@ class PostsController < ApplicationController
   before_filter :set_format_if_malformed_from_status_net, :only => :show
   before_filter :find_post, :only => [:show, :next, :previous, :interactions]
 
-  layout 'application'
   before_filter -> { @css_framework = :bootstrap }
 
   respond_to :html,
@@ -27,7 +26,7 @@ class PostsController < ApplicationController
     mark_corresponding_notifications_read if user_signed_in?
 
     respond_to do |format|
-      format.html{ gon.post = PostPresenter.new(@post, current_user); render 'posts/show' }
+      format.html{ gon.post = PostPresenter.new(@post, current_user); render 'posts/show', layout: 'with_header_with_footer' }
       format.xml{ render :xml => @post.to_diaspora_xml }
       format.mobile{render 'posts/show' }
       format.json{ render :json => PostPresenter.new(@post, current_user) }

app/helpers/layout_helper.rb

@@ -56,7 +56,7 @@ module LayoutHelper
 
   def include_base_css_framework(use_bootstrap=false)
     if use_bootstrap || @aspect == :getting_started
-      stylesheet_link_tag 'bootstrap-complete'
+      stylesheet_link_tag('bootstrap-complete')
     else
       stylesheet_link_tag 'blueprint', :media => 'screen'
     end

features/comments.feature

@@ -55,6 +55,6 @@ Feature: commenting
     When I follow "less than a minute ago"
     Then I should see "Look at this dog"
     And I make a show page comment "I think thats a cat"
-    Then I should see "less than a minute ago" within "#post-comments"
+    Then I should see "less than a minute ago" within "#comments"
     When I go to "alice@alice.alice"'s page
     Then I should see "I think thats a cat"

features/support/publishing_cuke_helpers.rb

@@ -80,9 +80,8 @@ module PublishingCukeHelpers
   end
 
   def comment_on_show_page(comment_text)
-    within("#post-interactions") do
-      focus_comment_box(".label.comment")
-      make_comment(comment_text, "new-comment-text")
+    within("#single-post-interactions") do
+      make_comment(comment_text)
     end
   end
 

lib/tasks/tests.rake

@@ -1,13 +1,16 @@
 namespace :ci do
   namespace :travis do
     desc "Run everyhting except cucumber"
-    task :other => [ :prepare_db, "tests:generate_fixtures", :spec, "jasmine:ci" ]
-    
+    task :other => [ :prepare, "tests:generate_fixtures", :spec, "jasmine:ci" ]
+
     desc "Run cucumber"
-    task :cucumber => [ :prepare_db, "assets:precompile", "rake:cucumber" ]
-    
+    task :cucumber => [ :prepare, "rake:cucumber" ]
+
     desc "Prepare db"
     task :prepare_db => [ "db:create", "db:test:load"]
+
+    desc "Prepare"
+    task :prepare => [:prepare_db, "assets:precompile"]
   end
 end