Fix feed styling + open post detail by clicking on post

src/app/styles/feed.less

@@ -4,56 +4,15 @@
     -webkit-mask: url(../svg/oval.svg);
     background-color: #87CDD3;
     margin-bottom: 50px;
+    margin-left: 23px;
 }
 
-.feed {
-}
-
-/*
-.compose {
-    box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.1);
-    background-color: @foreground-color;
-    padding: 20px;
-    color: #605e58;
-    margin-top: 30px;
-    font-family: 'Open Sans', sans-serif;
-
-
-    .replying-to {
-        font-size: 14px;
-        font-style: italic;
-        color: #BDBDBD;
-    }
-    
-
-    div.info {
-        margin-top: 5px;
-        display: none;
-        span {
-            font-size: 13px;
-            color: #AEA89F;
-            line-height: 30px;
-        }
-        button {
-            float: right;
-            background-color: #80A8CC;
-            border: 0;
-            color: #fff;
-            padding: 0 11px;
-            font-size: 15px;
-            line-height: 30px;
-            right: 0;
-        }
-    }
-}
-*/
-
 .feed {
     max-width: 800px;
     margin: 0 auto;
     margin-top: 40px;
     .days-ago {
-        padding: 20px 7px;
+        padding: 20px 30px;
         font-size: 20px;
         color: #888;
     }

src/app/styles/post-detail.less

@@ -1,13 +1,11 @@
 .post-detail > .posts > .post {
-    margin-bottom: 30px;
+
 }
 .post-detail .posts .replies {
     padding-bottom: 0;
     & > .post {
-        margin-bottom: 30px;
         &:last-child {
             margin-bottom: 0;
         }
     }
 }
-

src/app/styles/posts.less

@@ -7,7 +7,7 @@
         height: 100%;
         width: 4px;
         position: absolute;
-        left: 32px;
+        left: 55px;
         top: 0;
         background-color: #c9e9ec;
         border-radius: 4px 4px 0 0;
@@ -17,11 +17,14 @@
         color: #605e58;
         position: relative;
         display: flex;
-        margin-bottom: 40px;
         font-size: 20px;
         line-height: 26px;
+        padding: 15px 20px;
+        border-radius: 5px;
+        cursor: pointer;
 
         &:hover {
+            background-color: rgba(201, 233, 236, 0.5);
             .content {
                 .top {
                     .lovers.empty { display: inline-block }
@@ -88,13 +91,19 @@
             background-color: #7e50bd;
             background-image: url(../img/icon-reply.png);
         }
+        &.compose_reply:hover {
+            background-color: transparent;
+        }
         &.retwist .icon {
             background-color: #4fb547;
             background-image: url(../img/icon-retwist.png);
         }
-        &.compose .icon {
-            background-color: #BABABA;
-            background-image: url(../img/icon-compose.png);
+        &.compose {
+            &:hover { background-color: transparent; }
+            .icon {
+                background-color: #BABABA;
+                background-image: url(../img/icon-compose.png);
+            }
         }
         .avatar {
             flex: 0 0 75px;
@@ -167,9 +176,9 @@
                 position: absolute;
                 font-weight: lighter;
                 right: 20px;
-                top: 0;
+                top: 8px;
                 float: right;
-                color: #BEBEBE;
+                color: #8C8C8C;
                 font-family: 'Open Sans';
                 &.characters {
                     top: -20px;
@@ -206,14 +215,17 @@
     }
 
     .replies.posts {
-        margin-left: 88px;
+        margin-left: 40px;
+        margin-top: -10px;
         &.line::before {
-            left: 26px;
+            left: 41px;
+            height: calc(~"100% - 41px");
+            border-radius: 0;
         }
         .post {
             font-size: 18px;
             line-height: 24px;
-            margin-bottom: 30px;
+            padding: 10px 15px;
             .avatar {
                 flex: 0 0 56px;
                 height: 56px;

src/app/styles/user-detail.less

@@ -1,4 +1,5 @@
 .user-detail {
+    padding-left: 80px;
     .top {
         display: flex;
         .avatar {

src/app/views/Feed.js

@@ -35,6 +35,7 @@ module.exports = Backbone.View.extend({
         "click .post.new": "onNewPost",
         "click .retwisters span:nth-child(1)": "retwist",
         "click .post .avatar .icon": "openPost",
+        "click .post": "openPost"
     },
 
     initialize: function(options) {
@@ -96,7 +97,7 @@ module.exports = Backbone.View.extend({
     },
 
     setNewPost: function (n) {
-        this.$newpost.children(".icon").children("span").text(n);
+        this.$newpost.children(".avatar").children("span").text(n);
         this.$newpost.show();
     },
 
@@ -106,7 +107,17 @@ module.exports = Backbone.View.extend({
     },
 
     openPost: function (e) {
-        var $post = $(e.currentTarget).parents('.post');
+        // Don't do anything if a link is clicked
+        if ($(e.target).is('a') || $(e.target).is('img')) {
+            return;
+        }
+
+        var $post;
+        if ($(e.currentTarget).hasClass('post')) {
+            $post = $(e.currentTarget);
+        } else {
+            $post = $(e.currentTarget).parents('.post');
+        }
         var id = $post.attr('data-id');
         var post = this.feed.get('posts').get(id);
 

src/app/views/Mentions.js

@@ -24,7 +24,8 @@ module.exports = Backbone.View.extend({
     $loader: null,
 
     events: {
-        "click .post .icon": "openPost"
+        "click .post .icon": "openPost",
+        "click .post": "openPost"
     },
 
     initialize: function(options) {
@@ -74,7 +75,17 @@ module.exports = Backbone.View.extend({
     },
 
     openPost: function (e) {
-        var $post = $(e.currentTarget).parents('.post');
+        // Don't do anything if a link is clicked
+        if ($(e.target).is('a') || $(e.target).is('img')) {
+            return;
+        }
+
+        var $post;
+        if ($(e.currentTarget).hasClass('post')) {
+            $post = $(e.currentTarget);
+        } else {
+            $post = $(e.currentTarget).parents('.post');
+        }
         var id = $post.attr('data-id');
         var post = this.feed.get('posts').get(id);
 

src/app/views/User.js

@@ -19,7 +19,8 @@ module.exports = Backbone.View.extend({
         "scroll": "scroll",
         "click .avatar .follow": "toggleFollow",
         "click .avatar .following": "toggleFollow",
-        "click .avatar .icon": "openPost"
+        "click .post .avatar .icon": "openPost",
+        "click .post": "openPost"
     },
 
     initialize: function(options) {
@@ -118,7 +119,17 @@ module.exports = Backbone.View.extend({
     },
 
     openPost: function (e) {
-        var $post = $(e.currentTarget).parents('.post');
+        // Don't do anything if a link is clicked
+        if ($(e.target).is('a') || $(e.target).is('img')) {
+            return;
+        }
+
+        var $post;
+        if ($(e.currentTarget).hasClass('post')) {
+            $post = $(e.currentTarget);
+        } else {
+            $post = $(e.currentTarget).parents('.post');
+        }
         var id = $post.attr('data-id');
         var post = this.feed.get('posts').get(id);