Merge pull request #2062 from asaadmahmoodspin/ui-improvements

Multiple UI Improvements

5 files changed, 90 insertions, 65 deletions

diff --git a/web/react/components/channel_loader.jsx b/web/react/components/channel_loader.jsx
index 15571ad93..174c8c4e1 100644
--- a/web/react/components/channel_loader.jsx
+++ b/web/react/components/channel_loader.jsx
@@ -128,6 +128,16 @@ class ChannelLoader extends React.Component {
             }
         });
 
+        $('body').on('mouseenter mouseleave', '.search-item__container .post', function mouseOver(ev) {
+            if (ev.type === 'mouseenter') {
+                $(this).closest('.search-item__container').find('.date-separator').addClass('hovered--after');
+                $(this).closest('.search-item__container').next('div').find('.date-separator').addClass('hovered--before');
+            } else {
+                $(this).closest('.search-item__container').find('.date-separator').removeClass('hovered--after');
+                $(this).closest('.search-item__container').next('div').find('.date-separator').removeClass('hovered--before');
+            }
+        });
+
         $('body').on('mouseenter mouseleave', '.post.post--comment.same--root', function mouseOver(ev) {
             if (ev.type === 'mouseenter') {
                 $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--comment');
diff --git a/web/react/components/search_results_item.jsx b/web/react/components/search_results_item.jsx
index 0ad091d5b..544ba920a 100644
--- a/web/react/components/search_results_item.jsx
+++ b/web/react/components/search_results_item.jsx
@@ -59,64 +59,74 @@ export default class SearchResultsItem extends React.Component {
         };
 
         return (
-            <div
-                className='search-item-container post'
-            >
-                <div className='search-channel__name'>{channelName}</div>
-                <div className='post__content'>
-                    <div className='post__img'>
-                        <img
-                            src={'/api/v1/users/' + this.props.post.user_id + '/image?time=' + timestamp + '&' + utils.getSessionIndex()}
-                            height='36'
-                            width='36'
+            <div className='search-item__container'>
+                <div className='date-separator'>
+                    <hr className='separator__hr' />
+                    <div className='separator__text'>
+                        <FormattedDate
+                            value={this.props.post.create_at}
+                            day='numeric'
+                            month='long'
+                            year='numeric'
                         />
                     </div>
-                    <div>
-                        <ul className='post__header'>
-                            <li className='col__name'><strong><UserProfile userId={this.props.post.user_id} /></strong></li>
-                            <li className='col'>
-                                <time className='search-item-time'>
-                                    <FormattedDate
-                                        value={this.props.post.create_at}
-                                        day='numeric'
-                                        month='long'
-                                        year='numeric'
-                                        hour12={true}
-                                        hour='2-digit'
-                                        minute='2-digit'
-                                    />
-                                </time>
-                            </li>
-                            <li>
-                                <a
-                                    href='#'
-                                    className='search-item__jump'
-                                    onClick={this.handleClick}
-                                >
-                                    <FormattedMessage
-                                        id='search_item.jump'
-                                        defaultMessage='Jump'
-                                    />
-                                </a>
-                            </li>
-                            <li>
-                                <a
-                                    href='#'
-                                    className='comment-icon__container search-item__comment'
-                                    onClick={this.handleFocusRHSClick}
-                                >
-                                    <span
-                                        className='comment-icon'
-                                        dangerouslySetInnerHTML={{__html: Constants.REPLY_ICON}}
-                                    />
-                                </a>
-                            </li>
-                        </ul>
-                        <div className='search-item-snippet'>
-                            <span
-                                dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.props.post.message, formattingOptions)}}
+                </div>
+                <div
+                    className='post'
+                >
+                    <div className='search-channel__name'>{channelName}</div>
+                    <div className='post__content'>
+                        <div className='post__img'>
+                            <img
+                                src={'/api/v1/users/' + this.props.post.user_id + '/image?time=' + timestamp + '&' + utils.getSessionIndex()}
+                                height='36'
+                                width='36'
                             />
                         </div>
+                        <div>
+                            <ul className='post__header'>
+                                <li className='col__name'><strong><UserProfile userId={this.props.post.user_id} /></strong></li>
+                                <li className='col'>
+                                    <time className='search-item-time'>
+                                        <FormattedDate
+                                            value={this.props.post.create_at}
+                                            hour12={true}
+                                            hour='2-digit'
+                                            minute='2-digit'
+                                        />
+                                    </time>
+                                </li>
+                                <li>
+                                    <a
+                                        href='#'
+                                        className='search-item__jump'
+                                        onClick={this.handleClick}
+                                    >
+                                        <FormattedMessage
+                                            id='search_item.jump'
+                                            defaultMessage='Jump'
+                                        />
+                                    </a>
+                                </li>
+                                <li>
+                                    <a
+                                        href='#'
+                                        className='comment-icon__container search-item__comment'
+                                        onClick={this.handleFocusRHSClick}
+                                    >
+                                        <span
+                                            className='comment-icon'
+                                            dangerouslySetInnerHTML={{__html: Constants.REPLY_ICON}}
+                                        />
+                                    </a>
+                                </li>
+                            </ul>
+                            <div className='search-item-snippet'>
+                                <span
+                                    dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.props.post.message, formattingOptions)}}
+                                />
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss
index e73680b38..4a4de5c3b 100644
--- a/web/sass-files/sass/partials/_headers.scss
+++ b/web/sass-files/sass/partials/_headers.scss
@@ -173,6 +173,7 @@
 		.team__name {
 			line-height: 22px;
 			margin-top: -2px;
+			float: left;
 		}
 		.user__name {
 			@include single-transition(all, 0.1s, linear);
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 73c7bd9cb..3f80e6664 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -769,7 +769,7 @@ body.ios {
 
 		.comment-icon {
 			display: inline-block;
-			top: 3px;
+			top: 2px;
 			position: relative;
 			margin-right: 3px;
 			fill: inherit;
diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss
index cb125bff0..693c59a31 100644
--- a/web/sass-files/sass/partials/_search.scss
+++ b/web/sass-files/sass/partials/_search.scss
@@ -90,6 +90,7 @@
 	-webkit-overflow-scrolling: touch;
 	@include flex(1 1 auto);
 	height: calc(100% - 56px);
+	padding-top: 10px;
 }
 
 .search-results-header {
@@ -104,19 +105,22 @@
 	border-bottom: $border-gray;
 }
 
-.search-item-container {
-	border-top: $border-gray;
-	padding: 10px 1em;
-	margin: 0;
+.search-item__container {
 
-	&:first-child {
-		border: none;
-	}
+	.post {
+		padding: 0 1em 1em;
+		margin: 0;
 
-	.search-channel__name {
-		font-weight: 600;
-		margin: 0 0 10px 0;
+		&:first-child {
+			border: none;
+		}
+
+		.search-channel__name {
+			font-weight: 600;
+			margin: 0 0 10px 0;
+		}
 	}
+
 }
 
 .search-item__jump {