mirror of
https://git.kescher.at/CatCatNya/catstodon.git
synced 2024-11-25 20:11:37 +01:00
Fix double scroll bars in some columns in advanced interface (#27187)
This commit is contained in:
parent
ceb365c419
commit
37bbd3c106
8 changed files with 62 additions and 69 deletions
|
@ -22,12 +22,6 @@ export default class Column extends PureComponent {
|
||||||
scrollable = document.scrollingElement;
|
scrollable = document.scrollingElement;
|
||||||
} else {
|
} else {
|
||||||
scrollable = this.node.querySelector('.scrollable');
|
scrollable = this.node.querySelector('.scrollable');
|
||||||
|
|
||||||
// Some columns have nested `.scrollable` containers, with the outer one
|
|
||||||
// being a wrapper while the actual scrollable content is deeper.
|
|
||||||
if (scrollable.classList.contains('scrollable--flex')) {
|
|
||||||
scrollable = scrollable?.querySelector('.scrollable') || scrollable;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!scrollable) {
|
if (!scrollable) {
|
||||||
|
|
|
@ -67,47 +67,45 @@ class Explore extends PureComponent {
|
||||||
<Search />
|
<Search />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='scrollable scrollable--flex' data-nosnippet>
|
{isSearching ? (
|
||||||
{isSearching ? (
|
<SearchResults />
|
||||||
<SearchResults />
|
) : (
|
||||||
) : (
|
<>
|
||||||
<>
|
<div className='account__section-headline'>
|
||||||
<div className='account__section-headline'>
|
<NavLink exact to='/explore'>
|
||||||
<NavLink exact to='/explore'>
|
<FormattedMessage tagName='div' id='explore.trending_statuses' defaultMessage='Posts' />
|
||||||
<FormattedMessage tagName='div' id='explore.trending_statuses' defaultMessage='Posts' />
|
</NavLink>
|
||||||
|
|
||||||
|
<NavLink exact to='/explore/tags'>
|
||||||
|
<FormattedMessage tagName='div' id='explore.trending_tags' defaultMessage='Hashtags' />
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
{signedIn && (
|
||||||
|
<NavLink exact to='/explore/suggestions'>
|
||||||
|
<FormattedMessage tagName='div' id='explore.suggested_follows' defaultMessage='People' />
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
)}
|
||||||
|
|
||||||
<NavLink exact to='/explore/tags'>
|
<NavLink exact to='/explore/links'>
|
||||||
<FormattedMessage tagName='div' id='explore.trending_tags' defaultMessage='Hashtags' />
|
<FormattedMessage tagName='div' id='explore.trending_links' defaultMessage='News' />
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
</div>
|
||||||
|
|
||||||
{signedIn && (
|
<Switch>
|
||||||
<NavLink exact to='/explore/suggestions'>
|
<Route path='/explore/tags' component={Tags} />
|
||||||
<FormattedMessage tagName='div' id='explore.suggested_follows' defaultMessage='People' />
|
<Route path='/explore/links' component={Links} />
|
||||||
</NavLink>
|
<Route path='/explore/suggestions' component={Suggestions} />
|
||||||
)}
|
<Route exact path={['/explore', '/explore/posts', '/search']}>
|
||||||
|
<Statuses multiColumn={multiColumn} />
|
||||||
|
</Route>
|
||||||
|
</Switch>
|
||||||
|
|
||||||
<NavLink exact to='/explore/links'>
|
<Helmet>
|
||||||
<FormattedMessage tagName='div' id='explore.trending_links' defaultMessage='News' />
|
<title>{intl.formatMessage(messages.title)}</title>
|
||||||
</NavLink>
|
<meta name='robots' content={isSearching ? 'noindex' : 'all'} />
|
||||||
</div>
|
</Helmet>
|
||||||
|
</>
|
||||||
<Switch>
|
)}
|
||||||
<Route path='/explore/tags' component={Tags} />
|
|
||||||
<Route path='/explore/links' component={Links} />
|
|
||||||
<Route path='/explore/suggestions' component={Suggestions} />
|
|
||||||
<Route exact path={['/explore', '/explore/posts', '/search']}>
|
|
||||||
<Statuses multiColumn={multiColumn} />
|
|
||||||
</Route>
|
|
||||||
</Switch>
|
|
||||||
|
|
||||||
<Helmet>
|
|
||||||
<title>{intl.formatMessage(messages.title)}</title>
|
|
||||||
<meta name='robots' content={isSearching ? 'noindex' : 'all'} />
|
|
||||||
</Helmet>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -52,7 +52,7 @@ class Links extends PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='explore__links'>
|
<div className='explore__links scrollable' data-nosnippet>
|
||||||
{banner}
|
{banner}
|
||||||
|
|
||||||
{isLoading ? (<LoadingIndicator />) : links.map((link, i) => (
|
{isLoading ? (<LoadingIndicator />) : links.map((link, i) => (
|
||||||
|
|
|
@ -204,7 +204,7 @@ class Results extends PureComponent {
|
||||||
<button onClick={this.handleSelectStatuses} className={type === 'statuses' ? 'active' : undefined}><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></button>
|
<button onClick={this.handleSelectStatuses} className={type === 'statuses' ? 'active' : undefined}><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='explore__search-results'>
|
<div className='explore__search-results' data-nosnippet>
|
||||||
<ScrollableList
|
<ScrollableList
|
||||||
scrollKey='search-results'
|
scrollKey='search-results'
|
||||||
isLoading={isLoading}
|
isLoading={isLoading}
|
||||||
|
|
|
@ -42,7 +42,7 @@ class Suggestions extends PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='explore__suggestions'>
|
<div className='explore__suggestions scrollable' data-nosnippet>
|
||||||
{isLoading ? <LoadingIndicator /> : suggestions.map(suggestion => (
|
{isLoading ? <LoadingIndicator /> : suggestions.map(suggestion => (
|
||||||
<AccountCard key={suggestion.get('account')} id={suggestion.get('account')} />
|
<AccountCard key={suggestion.get('account')} id={suggestion.get('account')} />
|
||||||
))}
|
))}
|
||||||
|
|
|
@ -51,7 +51,7 @@ class Tags extends PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='explore__links'>
|
<div className='scrollable explore__links' data-nosnippet>
|
||||||
{banner}
|
{banner}
|
||||||
|
|
||||||
{isLoading ? (<LoadingIndicator />) : hashtags.map(hashtag => (
|
{isLoading ? (<LoadingIndicator />) : hashtags.map(hashtag => (
|
||||||
|
|
|
@ -169,32 +169,30 @@ const Firehose = ({ feedType, multiColumn }) => {
|
||||||
<ColumnSettings />
|
<ColumnSettings />
|
||||||
</ColumnHeader>
|
</ColumnHeader>
|
||||||
|
|
||||||
<div className='scrollable scrollable--flex'>
|
<div className='account__section-headline'>
|
||||||
<div className='account__section-headline'>
|
<NavLink exact to='/public/local'>
|
||||||
<NavLink exact to='/public/local'>
|
<FormattedMessage tagName='div' id='firehose.local' defaultMessage='This server' />
|
||||||
<FormattedMessage tagName='div' id='firehose.local' defaultMessage='This server' />
|
</NavLink>
|
||||||
</NavLink>
|
|
||||||
|
|
||||||
<NavLink exact to='/public/remote'>
|
<NavLink exact to='/public/remote'>
|
||||||
<FormattedMessage tagName='div' id='firehose.remote' defaultMessage='Other servers' />
|
<FormattedMessage tagName='div' id='firehose.remote' defaultMessage='Other servers' />
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
|
||||||
<NavLink exact to='/public'>
|
<NavLink exact to='/public'>
|
||||||
<FormattedMessage tagName='div' id='firehose.all' defaultMessage='All' />
|
<FormattedMessage tagName='div' id='firehose.all' defaultMessage='All' />
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</div>
|
|
||||||
|
|
||||||
<StatusListContainer
|
|
||||||
prepend={prependBanner}
|
|
||||||
timelineId={`${feedType}${onlyMedia ? ':media' : ''}`}
|
|
||||||
onLoadMore={handleLoadMore}
|
|
||||||
trackScroll
|
|
||||||
scrollKey='firehose'
|
|
||||||
emptyMessage={emptyMessage}
|
|
||||||
bindToDocument={!multiColumn}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<StatusListContainer
|
||||||
|
prepend={prependBanner}
|
||||||
|
timelineId={`${feedType}${onlyMedia ? ':media' : ''}`}
|
||||||
|
onLoadMore={handleLoadMore}
|
||||||
|
trackScroll
|
||||||
|
scrollKey='firehose'
|
||||||
|
emptyMessage={emptyMessage}
|
||||||
|
bindToDocument={!multiColumn}
|
||||||
|
/>
|
||||||
|
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<title>{intl.formatMessage(messages.title)}</title>
|
<title>{intl.formatMessage(messages.title)}</title>
|
||||||
<meta name='robots' content='noindex' />
|
<meta name='robots' content='noindex' />
|
||||||
|
|
|
@ -8279,6 +8279,9 @@ noscript {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
background: $ui-base-color;
|
||||||
|
border-bottom-left-radius: 4px;
|
||||||
|
border-bottom-right-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.story {
|
.story {
|
||||||
|
|
Loading…
Reference in a new issue