Reduce code duplication, add touch scrolling behaviour for webkit browsers

on scrollable areas

diff --git a/app/assets/javascripts/components/components/status_list.jsx b/app/assets/javascripts/components/components/status_list.jsx
index 49d4bef646937d2a7e8ddfe96ebccbb418da2f68..488d42dbab50bc1464d9c5e49255cba202036a16 100644 (file)
--- 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 feb849b9be516e498ec8d8666b354a0d625e0d88..ff3f97b09378d52aec2466a7bbfd74e38ab7fcf9 100644 (file)
--- 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 538e1aa331a53fde11d47081f29665d8745bb4cd..bd3c3bd450e8d22f2d4ddbfd5cc40feb1b3370a9 100644 (file)
--- 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 bec08f1eeee3d35bbc951ae7def9e67a96b2606e..2b62d3a270c91f4b7158fa3ef9ff79fdc342f57e 100644 (file)
--- 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 78498039c7197d5ad269f9c7f4189b1fa166fedf..553baf8630d067968083891ce36c1b17f9612581 100644 (file)
--- 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 704462dc1a70ab82ab69c641cb444d6ff8672712..80e6cb5a86ece0266c5e0df3409abad899c40ac3 100644 (file)
--- 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;
+}