diff options
3 files changed, 41 insertions, 62 deletions
diff --git a/app/javascript/flavours/glitch/features/compose/components/search_results.js b/app/javascript/flavours/glitch/features/compose/components/search_results.js index a0f86a06a..9a76e5418 100644 --- a/app/javascript/flavours/glitch/features/compose/components/search_results.js +++ b/app/javascript/flavours/glitch/features/compose/components/search_results.js @@ -71,7 +71,7 @@ class SearchResults extends ImmutablePureComponent { ); } else if(results.get('statuses') && results.get('statuses').size === 0 && !searchEnabled && !(searchTerm.startsWith('@') || searchTerm.startsWith('#') || searchTerm.includes(' '))) { statuses = ( - <section> + <section className='search-results__section'> <h5><Icon id='quote-right' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Toots' /></h5> <div className='search-results__info'> @@ -87,7 +87,7 @@ class SearchResults extends ImmutablePureComponent { if (results.get('accounts') && results.get('accounts').size > 0) { count += results.get('accounts').size; accounts = ( - <section> + <section className='search-results__section'> <h5><Icon id='users' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='People' /></h5> {results.get('accounts').map(accountId => <AccountContainer id={accountId} key={accountId} />)} @@ -100,7 +100,7 @@ class SearchResults extends ImmutablePureComponent { if (results.get('statuses') && results.get('statuses').size > 0) { count += results.get('statuses').size; statuses = ( - <section> + <section className='search-results__section'> <h5><Icon id='quote-right' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Toots' /></h5> {results.get('statuses').map(statusId => <StatusContainer id={statusId} key={statusId}/>)} @@ -113,7 +113,7 @@ class SearchResults extends ImmutablePureComponent { if (results.get('hashtags') && results.get('hashtags').size > 0) { count += results.get('hashtags').size; hashtags = ( - <section> + <section className='search-results__section'> <h5><Icon id='hashtag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5> {results.get('hashtags').map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)} @@ -131,11 +131,9 @@ class SearchResults extends ImmutablePureComponent { <FormattedMessage id='search_results.total' defaultMessage='{count, number} {count, plural, one {result} other {results}}' values={{ count }} /> </header> - <div className='search-results__contents'> - {accounts} - {statuses} - {hashtags} - </div> + {accounts} + {statuses} + {hashtags} </div> ); }; diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index b6d06f53a..61969abee 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -120,20 +120,22 @@ } .drawer--results { - background: $ui-base-color; - overflow: hidden; - display: flex; - flex-direction: column; - flex: 1 1 auto; + overflow-x: hidden; + overflow-y: scroll; +} - & > header { - color: $dark-text-color; - background: lighten($ui-base-color, 2%); +.search-results__section { + margin-bottom: 5px; + + h5 { + background: darken($ui-base-color, 4%); + border-bottom: 1px solid lighten($ui-base-color, 8%); + cursor: default; + display: flex; padding: 15px; font-weight: 500; font-size: 16px; - cursor: default; - flex: 0 0 auto; + color: $dark-text-color; .fa { display: inline-block; @@ -141,48 +143,22 @@ } } - & > .search-results__contents { - overflow-x: hidden; - overflow-y: scroll; - flex: 1 1 auto; - - & > section { - margin-bottom: 5px; - - h5 { - background: darken($ui-base-color, 4%); - border-bottom: 1px solid lighten($ui-base-color, 8%); - cursor: default; - display: flex; - padding: 15px; - font-weight: 500; - font-size: 16px; - color: $dark-text-color; - - .fa { - display: inline-block; - margin-right: 5px; - } - } + .account:last-child, + & > div:last-child .status { + border-bottom: 0; + } - .account:last-child, - & > div:last-child .status { - border-bottom: 0; - } + & > .hashtag { + display: block; + padding: 10px; + color: $secondary-text-color; + text-decoration: none; - & > .hashtag { - display: block; - padding: 10px; - color: $secondary-text-color; - text-decoration: none; - - &:hover, - &:active, - &:focus { - color: lighten($secondary-text-color, 4%); - text-decoration: underline; - } - } + &:hover, + &:active, + &:focus { + color: lighten($secondary-text-color, 4%); + text-decoration: underline; } } } diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss index eec2e64d6..929769130 100644 --- a/app/javascript/flavours/glitch/styles/components/search.scss +++ b/app/javascript/flavours/glitch/styles/components/search.scss @@ -94,10 +94,15 @@ .search-results__header { color: $dark-text-color; background: lighten($ui-base-color, 2%); - border-bottom: 1px solid darken($ui-base-color, 4%); - padding: 15px 10px; - font-size: 14px; + padding: 15px; font-weight: 500; + font-size: 16px; + cursor: default; + + .fa { + display: inline-block; + margin-right: 5px; + } } .search-results__info { |