Fix double scroll bars in some columns in advanced interface (#27187)
This commit is contained in:
		
							parent
							
								
									0619ec1592
								
							
						
					
					
						commit
						3e21780cf1
					
				@ -22,12 +22,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) {
 | 
			
		||||
 | 
			
		||||
@ -67,47 +67,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>
 | 
			
		||||
    );
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
@ -52,7 +52,7 @@ class Links extends PureComponent {
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    return (
 | 
			
		||||
      <div className='explore__links'>
 | 
			
		||||
      <div className='explore__links scrollable' data-nosnippet>
 | 
			
		||||
        {banner}
 | 
			
		||||
 | 
			
		||||
        {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>
 | 
			
		||||
        </div>
 | 
			
		||||
 | 
			
		||||
        <div className='explore__search-results'>
 | 
			
		||||
        <div className='explore__search-results' data-nosnippet>
 | 
			
		||||
          <ScrollableList
 | 
			
		||||
            scrollKey='search-results'
 | 
			
		||||
            isLoading={isLoading}
 | 
			
		||||
 | 
			
		||||
@ -42,7 +42,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')} />
 | 
			
		||||
        ))}
 | 
			
		||||
 | 
			
		||||
@ -51,7 +51,7 @@ class Tags extends PureComponent {
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    return (
 | 
			
		||||
      <div className='explore__links'>
 | 
			
		||||
      <div className='scrollable explore__links' data-nosnippet>
 | 
			
		||||
        {banner}
 | 
			
		||||
 | 
			
		||||
        {isLoading ? (<LoadingIndicator />) : hashtags.map(hashtag => (
 | 
			
		||||
 | 
			
		||||
@ -169,32 +169,30 @@ 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}${onlyMedia ? ':media' : ''}`}
 | 
			
		||||
          onLoadMore={handleLoadMore}
 | 
			
		||||
          trackScroll
 | 
			
		||||
          scrollKey='firehose'
 | 
			
		||||
          emptyMessage={emptyMessage}
 | 
			
		||||
          bindToDocument={!multiColumn}
 | 
			
		||||
        />
 | 
			
		||||
        <NavLink exact to='/public'>
 | 
			
		||||
          <FormattedMessage tagName='div' id='firehose.all' defaultMessage='All' />
 | 
			
		||||
        </NavLink>
 | 
			
		||||
      </div>
 | 
			
		||||
 | 
			
		||||
      <StatusListContainer
 | 
			
		||||
        prepend={prependBanner}
 | 
			
		||||
        timelineId={`${feedType}${onlyMedia ? ':media' : ''}`}
 | 
			
		||||
        onLoadMore={handleLoadMore}
 | 
			
		||||
        trackScroll
 | 
			
		||||
        scrollKey='firehose'
 | 
			
		||||
        emptyMessage={emptyMessage}
 | 
			
		||||
        bindToDocument={!multiColumn}
 | 
			
		||||
      />
 | 
			
		||||
 | 
			
		||||
      <Helmet>
 | 
			
		||||
        <title>{intl.formatMessage(messages.title)}</title>
 | 
			
		||||
        <meta name='robots' content='noindex' />
 | 
			
		||||
 | 
			
		||||
@ -8278,6 +8278,9 @@ noscript {
 | 
			
		||||
  flex: 1 1 auto;
 | 
			
		||||
  display: flex;
 | 
			
		||||
  flex-direction: column;
 | 
			
		||||
  background: $ui-base-color;
 | 
			
		||||
  border-bottom-left-radius: 4px;
 | 
			
		||||
  border-bottom-right-radius: 4px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.story {
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user