~cytrogen/masto-fe

37bbd3c1064380a756b4e821655d7697105f99f5 — Claire 2 years ago ceb365c
Fix double scroll bars in some columns in advanced interface (#27187)

M app/javascript/mastodon/components/column.jsx => app/javascript/mastodon/components/column.jsx +0 -6
@@ 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) {

M app/javascript/mastodon/features/explore/index.jsx => app/javascript/mastodon/features/explore/index.jsx +38 -40
@@ 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>

                {signedIn && (
                  <NavLink exact to='/explore/suggestions'>
                    <FormattedMessage tagName='div' id='explore.suggested_follows' defaultMessage='People' />
                  </NavLink>
                )}

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

              <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>
          </>
        )}
      </Column>
    );
  }

M app/javascript/mastodon/features/explore/links.jsx => app/javascript/mastodon/features/explore/links.jsx +1 -1
@@ 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) => (

M app/javascript/mastodon/features/explore/results.jsx => app/javascript/mastodon/features/explore/results.jsx +1 -1
@@ 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}

M app/javascript/mastodon/features/explore/suggestions.jsx => app/javascript/mastodon/features/explore/suggestions.jsx +1 -1
@@ 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')} />
        ))}

M app/javascript/mastodon/features/explore/tags.jsx => app/javascript/mastodon/features/explore/tags.jsx +1 -1
@@ 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 => (

M app/javascript/mastodon/features/firehose/index.jsx => app/javascript/mastodon/features/firehose/index.jsx +22 -24
@@ 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>

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

M app/javascript/styles/mastodon/components.scss => app/javascript/styles/mastodon/components.scss +3 -0
@@ 8279,6 8279,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 {