Updating Ui for posts

web/react/components/post_list.jsx

@@ -123,7 +123,7 @@ module.exports = React.createClass({
         $('.post-list__content div .post').removeClass('post--last');
         $('.post-list__content div:last-child .post').addClass('post--last');
 
-        $('body').on('mouseenter mouseleave', '.post:not(.post--comment.same--root)', function(ev){
+        $('body').on('mouseenter mouseleave', '.post', function(ev){
             if(ev.type === 'mouseenter'){
                 $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--after');
                 $(this).parent('div').next('.date-separator, .new-separator').addClass('hovered--before');
@@ -134,6 +134,17 @@ module.exports = React.createClass({
             }
         });
 
+        $('body').on('mouseenter mouseleave', '.post.post--comment.same--root', function(ev){
+            if(ev.type === 'mouseenter'){
+                $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--comment');
+                $(this).parent('div').next('.date-separator, .new-separator').addClass('hovered--comment');
+            }
+            else {
+                $(this).parent('div').prev('.date-separator, .new-separator').removeClass('hovered--comment');
+                $(this).parent('div').next('.date-separator, .new-separator').removeClass('hovered--comment');
+            }
+        });
+
     },
     componentDidUpdate: function() {
         this.resize();

web/sass-files/sass/partials/_post.scss

@@ -41,67 +41,68 @@ body.ios {
 	min-height:37px;
 }
 
-#post-list {
+.date-separator, .new-separator {
-	.date-separator, .new-separator {
+	text-align: center;
-		text-align: center;
+	height: 2em;
-		height: 2em;
+	margin: 0;
+	position: relative;
+	&:before, &:after {
+		content: "";
+		height: 1em;
+		position: absolute;
+		left: 0;
+		width: 100%;
+		display: none;
+	}
+	&:before {
+		bottom: 0;
+	}
+	&:after {
+		top: 0;
+	}
+	&.hovered--after {
+		&:before {
+			background: #f5f5f5;
+			display: block;
+		}
+	}
+	&.hovered--before {
+		&:after {
+			background: #f5f5f5;
+			display: block;
+		}
+	}
+	.separator__hr {
+		border-color: #ccc;
 		margin: 0;
 		position: relative;
-		&:before, &:after {
+		z-index: 5;
-			content: "";
+		top: 1em;
-			height: 1em;
-			position: absolute;
-			left: 0;
-			width: 100%;
-			display: none;
-		}
-		&:before {
-			bottom: 0;
-		}
-		&:after {
-			top: 0;
-		}
-		&.hovered--after {
-			&:before {
-				background: #f5f5f5;
-				display: block;
-			}
-		}
-		&.hovered--before {
-			&:after {
-				background: #f5f5f5;
-				display: block;
-			}
-		}
-		.separator__hr {
-			border-color: #ccc;
-			margin: 0;
-			position: relative;
-			z-index: 5;
-			top: 1em;
-		}
-		.separator__text {
-			line-height: 2em;
-			color: #555;
-			background: #FFF;
-			display: inline-block;
-			padding: 0 1em;
-			font-weight: 700;
-			@include border-radius(50px);
-			position: relative;
-			z-index: 5;
-			font-size: 13px;
-		}
 	}
-	.new-separator {
+	.separator__text {
-		.separator__hr {
+		line-height: 2em;
-			border-color: #FFAF53;
+		color: #555;
-		}
+		background: #FFF;
-		.separator__text {
+		display: inline-block;
-			color: #F80;
+		padding: 0 1em;
-			font-weight: normal;
+		font-weight: 700;
-		}
+		@include border-radius(50px);
+		position: relative;
+		z-index: 5;
+		font-size: 13px;
 	}
+}
+.new-separator {
+	.separator__hr {
+		border-color: #FFAF53;
+	}
+	.separator__text {
+		color: #F80;
+		font-weight: normal;
+	}
+}
+
+#post-list {
 	.post-list-holder-by-time {
 		background: #fff;
 		overflow-y: scroll;
@@ -135,6 +136,7 @@ body.ios {
 		color: grey;
 	}
 }
+
 .post-create__container {
 	form {
 		width: 100%;
@@ -347,7 +349,7 @@ body.ios {
 		}
 		&.post-info {
 			.post-profile-time {
-				width: 100px;
+				width: 150px;
 				display: inline-block;
 				margin-left: 50px;
 			}

web/sass-files/sass/partials/_responsive.scss

@@ -1,6 +1,13 @@
 @media screen and (max-width: 1800px) {
     .inner__wrap {
         &.move--left {
+            .date-separator, .new-separator {
+                &.hovered--comment {
+                    &:before, &:after {
+                        background: none;
+                    }
+                }
+            }
             .post {
                 &.same--root {
                     margin-left: 60px;
@@ -82,6 +89,13 @@
             max-width: 810px;
         }
     }
+    .date-separator, .new-separator {
+        &.hovered--comment {
+            &:before, &:after {
+                background: none;
+            }
+        }
+    }
     .post {
         &.same--root {
             margin-left: 60px;
@@ -207,17 +221,15 @@
 }
 
 @media screen and (max-width: 768px) {
-    #post-list {
+    .date-separator, .new-separator {
-        .date-seperator, .new-separator {
+        &.hovered--after {
-            &.hovered--after {
+            &:before {
-                &:before {
+                background: none;
-                    background: none;
-                }
             }
-            &.hovered--before {
+        }
-                &:after {
+        &.hovered--before {
-                    background: none;
+            &:after {
-                }
+                background: none;
             }
         }
     }