MM-1253 - Fixing new message and date separator corner case

2 files changed, 52 insertions, 38 deletions

diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx
index 97f9fa943..37e3faef2 100644
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -125,12 +125,12 @@ module.exports = React.createClass({
 
         $('body').on('mouseenter mouseleave', '.post', function(ev){
             if(ev.type === 'mouseenter'){
-                $(this).parent('div').prev('.date-seperator').addClass('hovered--after');
-                $(this).parent('div').next('.date-seperator').addClass('hovered--before');
+                $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--after');
+                $(this).parent('div').next('.date-separator, .new-separator').addClass('hovered--before');
             }
             else {
-                $(this).parent('div').prev('.date-seperator').removeClass('hovered--after');
-                $(this).parent('div').next('.date-seperator').removeClass('hovered--before');
+                $(this).parent('div').prev('.date-separator, .new-separator').removeClass('hovered--after');
+                $(this).parent('div').next('.date-separator, .new-separator').removeClass('hovered--before');
             }
         });
 
@@ -389,7 +389,7 @@ module.exports = React.createClass({
                         <div className="channel-intro">
                             <h4 className="channel-intro-title">Welcome</h4>
                             <p>
-                                { creator_name != "" ? "This is the start of the " + ui_name + " " + ui_type + ", created by " + creator_name + " on " + utils.displayDate(channel.create_at) + "." 
+                                { creator_name != "" ? "This is the start of the " + ui_name + " " + ui_type + ", created by " + creator_name + " on " + utils.displayDate(channel.create_at) + "."
                                 : "This is the start of the " + ui_name + " " + ui_type + ", created on "+ utils.displayDate(channel.create_at) + "." }
                                 { channel.type === 'P' ? " Only invited members can see this private group." : " Any member can join and read this channel." }
                                 <br/>
@@ -434,9 +434,9 @@ module.exports = React.createClass({
             currentPostDay = utils.getDateForUnixTicks(post.create_at);
             if(currentPostDay.getDate() !== previousPostDay.getDate() || currentPostDay.getMonth() !== previousPostDay.getMonth() || currentPostDay.getFullYear() !== previousPostDay.getFullYear()) {
                 postCtls.push(
-                    <div className="date-seperator">
-                        <hr className="date-seperator__hr" />
-                        <div className="date-seperator__text">{currentPostDay.toDateString()}</div>
+                    <div className="date-separator">
+                        <hr className="separator__hr" />
+                        <div className="separator__text">{currentPostDay.toDateString()}</div>
                     </div>
                 );
             }
@@ -444,9 +444,9 @@ module.exports = React.createClass({
             if (post.create_at > last_viewed && !rendered_last_viewed) {
                 rendered_last_viewed = true;
                 postCtls.push(
-                    <div className="new-seperator">
-                        <hr id="new_message" className="new-seperator__hr" />
-                        <div className="new-seperator__text">New Messages</div>
+                    <div className="new-separator">
+                        <hr id="new_message" className="separator__hr" />
+                        <div className="separator__text">New Messages</div>
                     </div>
                 );
             }
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 6da516cf9..745d50173 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -42,49 +42,63 @@ body.ios {
 }
 
 #post-list {
-	.new-seperator {
+	.date-separator, .new-separator {
 		text-align: center;
-		padding: 1em 0;
-		.new-seperator__hr {
-			border-color: #FFAF53;
-			margin: 0;
+		height: 2em;
+		margin: 0;
+		position: relative;
+		&:before, &:after {
+			content: "";
+			height: 1em;
+			position: absolute;
+			left: 0;
+			width: 100%;
+			display: none;
 		}
-		.new-seperator__text {
-			margin-top: -11px;
-			color: #FF8800;
-			background: #FFF;
-			display: inline-block;
-			padding: 0 1em;
-			font-weight: normal;
+		&:before {
+			bottom: 0;
+		}
+		&:after {
+			top: 0;
 		}
-	}
-	.date-seperator {
-		text-align: center;
-		margin: 1em 0;
-		height: 0;
 		&.hovered--after {
-			margin-bottom: 0;
-			padding-bottom: 1em;
-			background: #f6f6f6;
+			&:before {
+				background: #f6f6f6;
+				display: block;
+			}
 		}
 		&.hovered--before {
-			margin-top: 0;
-			padding-top: 1em;
-			background: #f6f6f6;
+			&:after {
+				background: #f6f6f6;
+				display: block;
+			}
 		}
-		.date-seperator__hr {
+		.separator__hr {
 			border-color: #ccc;
 			margin: 0;
+			position: relative;
+			z-index: 5;
+			top: 1em;
 		}
-		.date-seperator__text {
-			margin-top: -13px;
-		  	line-height: 24px;
+		.separator__text {
+			line-height: 2em;
 			color: #555;
 			background: #FFF;
 			display: inline-block;
 			padding: 0 1em;
 			font-weight: 900;
 			@include border-radius(50px);
+			position: relative;
+			z-index: 5;
+		}
+	}
+	.new-separator {
+		.separator__hr {
+			border-color: #FFAF53;
+		}
+		.separator__text {
+			color: #F80;
+			font-weight: normal;
 		}
 	}
 	.post-list-holder-by-time {