asonix/mastodon
1
1
Fork 1
Code Issues Pull requests Projects Releases Wiki Activity

Fix double scroll bars in some columns in advanced interface (#27187)

Browse source
This commit is contained in:
Claire 2023-10-03 13:12:39 +02:00
parent 0619ec1592
commit 3e21780cf1
8 changed files with 62 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/javascript/mastodon/components/column.jsx
View file

@ -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) {

72
app/javascript/mastodon/features/explore/index.jsx
View file

@ -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>
); );
} }

2
app/javascript/mastodon/features/explore/links.jsx
View file

@ -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) => (

2
app/javascript/mastodon/features/explore/results.jsx
View file

@ -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}

2
app/javascript/mastodon/features/explore/suggestions.jsx
View file

@ -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')} />
))} ))}

2
app/javascript/mastodon/features/explore/tags.jsx
View file

@ -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 => (

42
app/javascript/mastodon/features/firehose/index.jsx
View file

@ -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' />

3
app/javascript/styles/mastodon/components.scss
View file

@ -8278,6 +8278,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 {