mastofe

commit: 6d5ef89356e234b5208b5308fa00cf08459de831
parent: 98c3a5e9c38b3bc653002dafab0504fdee3d2c44
Author: Eugen Rochko <eugen@zeonfederated.com>
Date:   Fri,  4 Nov 2016 13:32:14 +0100

Reduce code duplication, add touch scrolling behaviour for webkit browsers
on scrollable areas

Diffstat:
M
app/assets/javascripts/components/components/status_list.jsx
2
+-
M
app/assets/javascripts/components/features/followers/index.jsx
2
+-
M
app/assets/javascripts/components/features/following/index.jsx
2
+-
M
app/assets/javascripts/components/features/reblogs/index.jsx
2
+-
M
app/assets/javascripts/components/features/status/index.jsx
2
+-
M
app/assets/stylesheets/components.scss
7
+++++++

6 files changed, 12 insertions(+), 5 deletions(-)
diff --git a/app/assets/javascripts/components/components/status_list.jsx b/app/assets/javascripts/components/components/status_list.jsx
@@ -47,7 +47,7 @@ const StatusList = React.createClass({
     const { statusIds, onScrollToBottom, trackScroll } = this.props;
 
     const scrollableArea = (
-      <div style={{ overflowY: 'scroll', flex: '1 1 auto', overflowX: 'hidden' }} className='scrollable' onScroll={this.handleScroll}>
+      <div className='scrollable' onScroll={this.handleScroll}>
         <div>
           {statusIds.map((statusId) => {
             return <StatusContainer key={statusId} id={statusId} now={this.state.now} />;
diff --git a/app/assets/javascripts/components/features/followers/index.jsx b/app/assets/javascripts/components/features/followers/index.jsx
@@ -39,7 +39,7 @@ const Followers = React.createClass({
 
     return (
       <ScrollContainer scrollKey='followers'>
-        <div style={{ overflowY: 'scroll', flex: '1 1 auto', overflowX: 'hidden' }} className='scrollable'>
+        <div className='scrollable'>
           {accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
         </div>
       </ScrollContainer>
diff --git a/app/assets/javascripts/components/features/following/index.jsx b/app/assets/javascripts/components/features/following/index.jsx
@@ -39,7 +39,7 @@ const Following = React.createClass({
 
     return (
       <ScrollContainer scrollKey='following'>
-        <div style={{ overflowY: 'scroll', flex: '1 1 auto', overflowX: 'hidden' }} className='scrollable'>
+        <div className='scrollable'>
           {accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
         </div>
       </ScrollContainer>
diff --git a/app/assets/javascripts/components/features/reblogs/index.jsx b/app/assets/javascripts/components/features/reblogs/index.jsx
@@ -48,7 +48,7 @@ const Reblogs = React.createClass({
         <ColumnBackButton />
 
         <ScrollContainer scrollKey='reblogs'>
-          <div style={{ overflowY: 'scroll', flex: '1 1 auto', overflowX: 'hidden' }} className='scrollable'>
+          <div className='scrollable'>
             {accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
           </div>
         </ScrollContainer>
diff --git a/app/assets/javascripts/components/features/status/index.jsx b/app/assets/javascripts/components/features/status/index.jsx
@@ -114,7 +114,7 @@ const Status = React.createClass({
         <ColumnBackButton />
 
         <ScrollContainer scrollKey='thread'>
-          <div style={{ overflowY: 'scroll', flex: '1 1 auto' }} className='scrollable'>
+          <div className='scrollable'>
             {ancestors}
 
             <DetailedStatus status={status} me={me} onOpenMedia={this.handleOpenMedia} />
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
@@ -295,3 +295,10 @@
   background: #2b90d9;
   color: #fff;
 }
+
+.scrollable {
+  overflow-y: scroll;
+  overflow-x: hidden;
+  flex: 1 1 auto;
+  -webkit-overflow-scrolling: touch;
+}