Added scroll to bottom arrows for mobile

3 files changed, 42 insertions, 3 deletions

diff --git a/web/react/components/posts_view.jsx b/web/react/components/posts_view.jsx
index a4dd51e19..aedf431af 100644
--- a/web/react/components/posts_view.jsx
+++ b/web/react/components/posts_view.jsx
@@ -23,6 +23,7 @@ export default class PostsView extends React.Component {
         this.createPosts = this.createPosts.bind(this);
         this.updateScrolling = this.updateScrolling.bind(this);
         this.handleResize = this.handleResize.bind(this);
+        this.scrollToBottom = this.scrollToBottom.bind(this);
 
         this.jumpToPostNode = null;
         this.wasAtBottom = true;
@@ -283,9 +284,7 @@ export default class PostsView extends React.Component {
     }
     updateScrolling() {
         if (this.props.scrollType === PostsView.SCROLL_TYPE_BOTTOM) {
-            window.requestAnimationFrame(() => {
-                this.refs.postlist.scrollTop = this.refs.postlist.scrollHeight;
-            });
+            this.scrollToBottom();
         } else if (this.props.scrollType === PostsView.SCROLL_TYPE_NEW_MESSAGE) {
             window.requestAnimationFrame(() => {
                 // If separator exists scroll to it. Otherwise scroll to bottom.
@@ -335,6 +334,11 @@ export default class PostsView extends React.Component {
     handleResize() {
         this.updateScrolling();
     }
+    scrollToBottom() {
+        window.requestAnimationFrame(() => {
+            this.refs.postlist.scrollTop = this.refs.postlist.scrollHeight;
+        });
+    }
     componentDidMount() {
         if (this.props.postList != null) {
             this.updateScrolling();
@@ -460,9 +464,26 @@ export default class PostsView extends React.Component {
             );
         }
 
+        let scrollToBottomArrows = null;
+        if ($(window).width() <= 768) {
+            let scrollToBottomArrowsClass = 'post-list__arrows';
+            if (this.state.isScrolling && !this.wasAtBottom) {
+                scrollToBottomArrowsClass += ' scrolling';
+            }
+
+            scrollToBottomArrows = (
+                <div
+                    ref='postArrows'
+                    className={scrollToBottomArrowsClass}
+                    onClick={this.scrollToBottom}
+                />
+            );
+        }
+
         return (
             <div className={activeClass}>
                 {floatingTimestamp}
+                {scrollToBottomArrows}
                 <div
                     ref='postlist'
                     className='post-list-holder-by-time'
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 88842c973..2f6540a4e 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -274,6 +274,24 @@ body.ios {
 	}
 }
 
+.post-list__arrows {
+	background: url('../images/postArrows.png') center;
+	@include background-size(28px 28px);
+	background-repeat: no-repeat;
+	width: 40px;
+	height: 40px;
+	position: absolute;
+	bottom: 50px;
+	right: 5px;
+	z-index: 50;
+	@include opacity(0);
+	@include single-transition(all, 0.3s);
+
+	&.scrolling {
+		@include opacity(1);
+	}
+}
+
 .post-create__container {
 	form {
 		width: 100%;
diff --git a/web/static/images/postArrows.png b/web/static/images/postArrows.png
new file mode 100644
index 000000000..7b5919fc3
--- /dev/null
+++ b/web/static/images/postArrows.png