about summary refs log tree commit diff
path: root/app
diff options
context:
space:
mode:
authorJakub Mendyk <jakubmendyk.szkola+git@gmail.com>2018-08-29 01:19:58 +0200
committerEugen Rochko <eugen@zeonfederated.com>2018-08-29 01:19:58 +0200
commitceed1ebe5b308a95f9c167c93d3bc0976937fb58 (patch)
tree4c8410889ff06bcf5920f9645fb0024133b1b2f8 /app
parent648d6d72471f6dbf42af78c0da2bb36b55010847 (diff)
Fix followers/follows layout issues from #8418 (#8505)
* Add alwaysShowScrollbar prop to ScrollableList

* Fix followers/follows layout issues from #8418
Diffstat (limited to 'app')
-rw-r--r--app/javascript/mastodon/components/scrollable_list.js9
-rw-r--r--app/javascript/mastodon/features/followers/index.js5
-rw-r--r--app/javascript/mastodon/features/following/index.js5
3 files changed, 12 insertions, 7 deletions
diff --git a/app/javascript/mastodon/components/scrollable_list.js b/app/javascript/mastodon/components/scrollable_list.js
index 4b433f32c..5c888650c 100644
--- a/app/javascript/mastodon/components/scrollable_list.js
+++ b/app/javascript/mastodon/components/scrollable_list.js
@@ -26,6 +26,7 @@ export default class ScrollableList extends PureComponent {
     hasMore: PropTypes.bool,
     prepend: PropTypes.node,
     alwaysPrepend: PropTypes.bool,
+    alwaysShowScrollbar: PropTypes.bool,
     emptyMessage: PropTypes.node,
     children: PropTypes.node,
   };
@@ -141,7 +142,7 @@ export default class ScrollableList extends PureComponent {
   }
 
   render () {
-    const { children, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, alwaysPrepend, emptyMessage, onLoadMore } = this.props;
+    const { children, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, alwaysPrepend, alwaysShowScrollbar, emptyMessage, onLoadMore } = this.props;
     const { fullscreen } = this.state;
     const childrenCount = React.Children.count(children);
 
@@ -172,11 +173,13 @@ export default class ScrollableList extends PureComponent {
         </div>
       );
     } else {
+      const scrollable = alwaysShowScrollbar;
+
       scrollableArea = (
-        <div style={{ flex: '1 1 auto', display: 'flex', flexDirection: 'column' }}>
+        <div className={classNames({ scrollable, fullscreen })} ref={this.setRef} style={{ flex: '1 1 auto', display: 'flex', flexDirection: 'column' }}>
           {alwaysPrepend && prepend}
 
-          <div className='empty-column-indicator' ref={this.setRef}>
+          <div className='empty-column-indicator'>
             {emptyMessage}
           </div>
         </div>
diff --git a/app/javascript/mastodon/features/followers/index.js b/app/javascript/mastodon/features/followers/index.js
index 5eb05367e..97d59cc4a 100644
--- a/app/javascript/mastodon/features/followers/index.js
+++ b/app/javascript/mastodon/features/followers/index.js
@@ -66,13 +66,14 @@ export default class Followers extends ImmutablePureComponent {
       <Column>
         <ColumnBackButton />
 
-        <HeaderContainer accountId={this.props.params.accountId} hideTabs />
-
         <ScrollableList
           scrollKey='followers'
           hasMore={hasMore}
           onLoadMore={this.handleLoadMore}
           shouldUpdateScroll={shouldUpdateScroll}
+          prepend={<HeaderContainer accountId={this.props.params.accountId} hideTabs />}
+          alwaysPrepend
+          alwaysShowScrollbar
           emptyMessage={emptyMessage}
         >
           {accountIds.map(id =>
diff --git a/app/javascript/mastodon/features/following/index.js b/app/javascript/mastodon/features/following/index.js
index 95e786882..17bc7ec6e 100644
--- a/app/javascript/mastodon/features/following/index.js
+++ b/app/javascript/mastodon/features/following/index.js
@@ -66,13 +66,14 @@ export default class Following extends ImmutablePureComponent {
       <Column>
         <ColumnBackButton />
 
-        <HeaderContainer accountId={this.props.params.accountId} hideTabs />
-
         <ScrollableList
           scrollKey='following'
           hasMore={hasMore}
           onLoadMore={this.handleLoadMore}
           shouldUpdateScroll={shouldUpdateScroll}
+          prepend={<HeaderContainer accountId={this.props.params.accountId} hideTabs />}
+          alwaysPrepend
+          alwaysShowScrollbar
           emptyMessage={emptyMessage}
         >
           {accountIds.map(id =>