Fix follow suggestions scrolling on mobile view
Also simplify the CSS a bit and bring it closer to upstream.
This commit is contained in:
parent
421eb444df
commit
9ed876972a
3 changed files with 41 additions and 62 deletions
|
@ -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(' '))) {
|
} else if(results.get('statuses') && results.get('statuses').size === 0 && !searchEnabled && !(searchTerm.startsWith('@') || searchTerm.startsWith('#') || searchTerm.includes(' '))) {
|
||||||
statuses = (
|
statuses = (
|
||||||
<section>
|
<section className='search-results__section'>
|
||||||
<h5><Icon id='quote-right' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Toots' /></h5>
|
<h5><Icon id='quote-right' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Toots' /></h5>
|
||||||
|
|
||||||
<div className='search-results__info'>
|
<div className='search-results__info'>
|
||||||
|
@ -87,7 +87,7 @@ class SearchResults extends ImmutablePureComponent {
|
||||||
if (results.get('accounts') && results.get('accounts').size > 0) {
|
if (results.get('accounts') && results.get('accounts').size > 0) {
|
||||||
count += results.get('accounts').size;
|
count += results.get('accounts').size;
|
||||||
accounts = (
|
accounts = (
|
||||||
<section>
|
<section className='search-results__section'>
|
||||||
<h5><Icon id='users' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='People' /></h5>
|
<h5><Icon id='users' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='People' /></h5>
|
||||||
|
|
||||||
{results.get('accounts').map(accountId => <AccountContainer id={accountId} key={accountId} />)}
|
{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) {
|
if (results.get('statuses') && results.get('statuses').size > 0) {
|
||||||
count += results.get('statuses').size;
|
count += results.get('statuses').size;
|
||||||
statuses = (
|
statuses = (
|
||||||
<section>
|
<section className='search-results__section'>
|
||||||
<h5><Icon id='quote-right' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Toots' /></h5>
|
<h5><Icon id='quote-right' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Toots' /></h5>
|
||||||
|
|
||||||
{results.get('statuses').map(statusId => <StatusContainer id={statusId} key={statusId}/>)}
|
{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) {
|
if (results.get('hashtags') && results.get('hashtags').size > 0) {
|
||||||
count += results.get('hashtags').size;
|
count += results.get('hashtags').size;
|
||||||
hashtags = (
|
hashtags = (
|
||||||
<section>
|
<section className='search-results__section'>
|
||||||
<h5><Icon id='hashtag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5>
|
<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} />)}
|
{results.get('hashtags').map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
|
||||||
|
@ -131,12 +131,10 @@ class SearchResults extends ImmutablePureComponent {
|
||||||
<FormattedMessage id='search_results.total' defaultMessage='{count, number} {count, plural, one {result} other {results}}' values={{ count }} />
|
<FormattedMessage id='search_results.total' defaultMessage='{count, number} {count, plural, one {result} other {results}}' values={{ count }} />
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div className='search-results__contents'>
|
|
||||||
{accounts}
|
{accounts}
|
||||||
{statuses}
|
{statuses}
|
||||||
{hashtags}
|
{hashtags}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -120,33 +120,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer--results {
|
.drawer--results {
|
||||||
background: $ui-base-color;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
|
|
||||||
& > header {
|
|
||||||
color: $dark-text-color;
|
|
||||||
background: lighten($ui-base-color, 2%);
|
|
||||||
padding: 15px;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 16px;
|
|
||||||
cursor: default;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
|
|
||||||
.fa {
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& > .search-results__contents {
|
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
flex: 1 1 auto;
|
}
|
||||||
|
|
||||||
& > section {
|
.search-results__section {
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
|
@ -183,8 +161,6 @@
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer__pager {
|
.drawer__pager {
|
||||||
|
|
|
@ -94,10 +94,15 @@
|
||||||
.search-results__header {
|
.search-results__header {
|
||||||
color: $dark-text-color;
|
color: $dark-text-color;
|
||||||
background: lighten($ui-base-color, 2%);
|
background: lighten($ui-base-color, 2%);
|
||||||
border-bottom: 1px solid darken($ui-base-color, 4%);
|
padding: 15px;
|
||||||
padding: 15px 10px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: default;
|
||||||
|
|
||||||
|
.fa {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-results__info {
|
.search-results__info {
|
||||||
|
|
Loading…
Reference in a new issue