diff options
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/channel_loader.jsx | 10 | ||||
-rw-r--r-- | web/react/components/search_results_item.jsx | 118 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_headers.scss | 1 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_post.scss | 2 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_search.scss | 24 |
5 files changed, 90 insertions, 65 deletions
diff --git a/web/react/components/channel_loader.jsx b/web/react/components/channel_loader.jsx index 712d6885f..cb1da90de 100644 --- a/web/react/components/channel_loader.jsx +++ b/web/react/components/channel_loader.jsx @@ -84,6 +84,16 @@ export default 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 { |