Reduce code duplication, add touch scrolling behaviour for webkit browsers

on scrollable areas

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
index 49d4bef64..488d42dba 100644
--- 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
index feb849b9b..ff3f97b09 100644
--- 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
index 538e1aa33..bd3c3bd45 100644
--- 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
index bec08f1ee..2b62d3a27 100644
--- 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
index 78498039c..553baf863 100644
--- 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
index 704462dc1..80e6cb5a8 100644
--- 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;
+}