diff --git a/app/javascript/flavours/glitch/components/column.jsx b/app/javascript/flavours/glitch/components/column.jsx index 116d852168..e42a539052 100644 --- a/app/javascript/flavours/glitch/components/column.jsx +++ b/app/javascript/flavours/glitch/components/column.jsx @@ -24,12 +24,6 @@ export default class Column extends PureComponent { scrollable = document.scrollingElement; } else { 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) { diff --git a/app/javascript/flavours/glitch/features/explore/index.jsx b/app/javascript/flavours/glitch/features/explore/index.jsx index 6eeba46ce7..f5baeb4b49 100644 --- a/app/javascript/flavours/glitch/features/explore/index.jsx +++ b/app/javascript/flavours/glitch/features/explore/index.jsx @@ -68,47 +68,45 @@ class Explore extends PureComponent { <Search /> </div> - <div className='scrollable scrollable--flex' data-nosnippet> - {isSearching ? ( - <SearchResults /> - ) : ( - <> - <div className='account__section-headline'> - <NavLink exact to='/explore'> - <FormattedMessage tagName='div' id='explore.trending_statuses' defaultMessage='Posts' /> + {isSearching ? ( + <SearchResults /> + ) : ( + <> + <div className='account__section-headline'> + <NavLink exact to='/explore'> + <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 exact to='/explore/tags'> - <FormattedMessage tagName='div' id='explore.trending_tags' defaultMessage='Hashtags' /> - </NavLink> + <NavLink exact to='/explore/links'> + <FormattedMessage tagName='div' id='explore.trending_links' defaultMessage='News' /> + </NavLink> + </div> - {signedIn && ( - <NavLink exact to='/explore/suggestions'> - <FormattedMessage tagName='div' id='explore.suggested_follows' defaultMessage='People' /> - </NavLink> - )} + <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> - <NavLink exact to='/explore/links'> - <FormattedMessage tagName='div' id='explore.trending_links' defaultMessage='News' /> - </NavLink> - </div> - - <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> + <Helmet> + <title>{intl.formatMessage(messages.title)}</title> + <meta name='robots' content={isSearching ? 'noindex' : 'all'} /> + </Helmet> + </> + )} </Column> ); } diff --git a/app/javascript/flavours/glitch/features/explore/links.jsx b/app/javascript/flavours/glitch/features/explore/links.jsx index 5f1ca9360c..5dee66d183 100644 --- a/app/javascript/flavours/glitch/features/explore/links.jsx +++ b/app/javascript/flavours/glitch/features/explore/links.jsx @@ -62,7 +62,7 @@ class Links extends PureComponent { } return ( - <div className='explore__links'> + <div className='explore__links scrollable' data-nosnippet> {banner} {isLoading ? (<LoadingIndicator />) : links.map((link, i) => ( diff --git a/app/javascript/flavours/glitch/features/explore/results.jsx b/app/javascript/flavours/glitch/features/explore/results.jsx index b7e9d22ee7..ccdd50c1e9 100644 --- a/app/javascript/flavours/glitch/features/explore/results.jsx +++ b/app/javascript/flavours/glitch/features/explore/results.jsx @@ -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> </div> - <div className='explore__search-results'> + <div className='explore__search-results' data-nosnippet> <ScrollableList scrollKey='search-results' isLoading={isLoading} diff --git a/app/javascript/flavours/glitch/features/explore/suggestions.jsx b/app/javascript/flavours/glitch/features/explore/suggestions.jsx index ddde344cc4..1590e19aba 100644 --- a/app/javascript/flavours/glitch/features/explore/suggestions.jsx +++ b/app/javascript/flavours/glitch/features/explore/suggestions.jsx @@ -57,7 +57,7 @@ class Suggestions extends PureComponent { } return ( - <div className='explore__suggestions'> + <div className='explore__suggestions scrollable' data-nosnippet> {isLoading ? <LoadingIndicator /> : suggestions.map(suggestion => ( <AccountCard key={suggestion.get('account')} id={suggestion.get('account')} onDismiss={suggestion.get('source') === 'past_interactions' ? this.handleDismiss : null} /> ))} diff --git a/app/javascript/flavours/glitch/features/explore/tags.jsx b/app/javascript/flavours/glitch/features/explore/tags.jsx index 38fa5f7fbb..bebc9bbb53 100644 --- a/app/javascript/flavours/glitch/features/explore/tags.jsx +++ b/app/javascript/flavours/glitch/features/explore/tags.jsx @@ -63,7 +63,7 @@ class Tags extends PureComponent { } return ( - <div className='explore__links'> + <div className='scrollable explore__links' data-nosnippet> {banner} {isLoading ? (<LoadingIndicator />) : hashtags.map(hashtag => ( diff --git a/app/javascript/flavours/glitch/features/firehose/index.jsx b/app/javascript/flavours/glitch/features/firehose/index.jsx index 3cdeda97c1..c01c767b86 100644 --- a/app/javascript/flavours/glitch/features/firehose/index.jsx +++ b/app/javascript/flavours/glitch/features/firehose/index.jsx @@ -188,33 +188,31 @@ const Firehose = ({ feedType, multiColumn }) => { <ColumnSettings /> </ColumnHeader> - <div className='scrollable scrollable--flex'> - <div className='account__section-headline'> - <NavLink exact to='/public/local'> - <FormattedMessage tagName='div' id='firehose.local' defaultMessage='This server' /> - </NavLink> + <div className='account__section-headline'> + <NavLink exact to='/public/local'> + <FormattedMessage tagName='div' id='firehose.local' defaultMessage='This server' /> + </NavLink> - <NavLink exact to='/public/remote'> - <FormattedMessage tagName='div' id='firehose.remote' defaultMessage='Other servers' /> - </NavLink> + <NavLink exact to='/public/remote'> + <FormattedMessage tagName='div' id='firehose.remote' defaultMessage='Other servers' /> + </NavLink> - <NavLink exact to='/public'> - <FormattedMessage tagName='div' id='firehose.all' defaultMessage='All' /> - </NavLink> - </div> - - <StatusListContainer - prepend={prependBanner} - timelineId={`${feedType}${feedType === 'public' && allowLocalOnly ? ':allow_local_only' : ''}${onlyMedia ? ':media' : ''}`} - onLoadMore={handleLoadMore} - trackScroll - scrollKey='firehose' - emptyMessage={emptyMessage} - bindToDocument={!multiColumn} - regex={regex} - /> + <NavLink exact to='/public'> + <FormattedMessage tagName='div' id='firehose.all' defaultMessage='All' /> + </NavLink> </div> + <StatusListContainer + prepend={prependBanner} + timelineId={`${feedType}${feedType === 'public' && allowLocalOnly ? ':allow_local_only' : ''}${onlyMedia ? ':media' : ''}`} + onLoadMore={handleLoadMore} + trackScroll + scrollKey='firehose' + emptyMessage={emptyMessage} + bindToDocument={!multiColumn} + regex={regex} + /> + <Helmet> <title>{intl.formatMessage(messages.title)}</title> <meta name='robots' content='noindex' /> diff --git a/app/javascript/flavours/glitch/styles/components/explore.scss b/app/javascript/flavours/glitch/styles/components/explore.scss index 78826e6331..79da9f2166 100644 --- a/app/javascript/flavours/glitch/styles/components/explore.scss +++ b/app/javascript/flavours/glitch/styles/components/explore.scss @@ -37,6 +37,9 @@ flex: 1 1 auto; display: flex; flex-direction: column; + background: $ui-base-color; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; } .story {