Merge pull request #1822 from asaadmahmoodspin/ui-improvements

Multiple UI Improvements

5 files changed, 13 insertions, 5 deletions

diff --git a/web/react/components/file_attachment.jsx b/web/react/components/file_attachment.jsx
index c10269680..eeb218bfe 100644
--- a/web/react/components/file_attachment.jsx
+++ b/web/react/components/file_attachment.jsx
@@ -266,7 +266,7 @@ export default class FileAttachment extends React.Component {
                         href={fileUrl}
                         download={filenameString}
                         data-toggle='tooltip'
-                        title={'Download ' + filenameString}
+                        title={'Download \"' + filenameString + '\"'}
                         className='post-image__name'
                     >
                         {trimmedFilename}
diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx
index 21683bb01..26bd6adde 100644
--- a/web/react/components/post_info.jsx
+++ b/web/react/components/post_info.jsx
@@ -223,13 +223,13 @@ export default class PostInfo extends React.Component {
                     />
                 </li>
                 <li className='col col__reply'>
-                    {comments}
                     <div
                         className='dropdown'
                         ref='dotMenu'
                     >
                         {dropdown}
                     </div>
+                    {comments}
                     <Overlay
                         show={this.state.show}
                         target={() => ReactDOM.findDOMNode(this.refs.dotMenu)}
diff --git a/web/react/components/posts_view.jsx b/web/react/components/posts_view.jsx
index a28efbd04..7d8c7e265 100644
--- a/web/react/components/posts_view.jsx
+++ b/web/react/components/posts_view.jsx
@@ -24,6 +24,7 @@ export default class PostsView extends React.Component {
         this.updateScrolling = this.updateScrolling.bind(this);
         this.handleResize = this.handleResize.bind(this);
         this.scrollToBottom = this.scrollToBottom.bind(this);
+        this.scrollToBottomAnimated = this.scrollToBottomAnimated.bind(this);
 
         this.jumpToPostNode = null;
         this.wasAtBottom = true;
@@ -339,6 +340,10 @@ export default class PostsView extends React.Component {
             this.refs.postlist.scrollTop = this.refs.postlist.scrollHeight;
         });
     }
+    scrollToBottomAnimated() {
+        var postList = $(this.refs.postlist);
+        postList.animate({scrollTop: this.refs.postlist.scrollHeight}, '500');
+    }
     componentDidMount() {
         if (this.props.postList != null) {
             this.updateScrolling();
@@ -458,7 +463,7 @@ export default class PostsView extends React.Component {
                 <ScrollToBottomArrows
                     isScrolling={this.state.isScrolling}
                     atBottom={this.wasAtBottom}
-                    onClick={this.scrollToBottom}
+                    onClick={this.scrollToBottomAnimated}
                 />
                 <div
                     ref='postlist'
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 31ad586ba..7b7c2d73a 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -286,8 +286,10 @@ body.ios {
 	z-index: 50;
 	@include opacity(0);
 	@include single-transition(all, 0.3s);
+	display: none;
 
 	&.scrolling {
+		display: block;
 		@include opacity(1);
 	}
 }
@@ -595,6 +597,7 @@ body.ios {
 			right: 0;
 			top: 30px;
 			width: 65px;
+			white-space: nowrap;
 		}
 
 		.permalink-popover {
@@ -628,8 +631,7 @@ body.ios {
 	.dropdown {
 		display: inline-block;
 		visibility: hidden;
-		position: absolute;
-		right: 0;
+		margin-right: 5px;
 		top: -1px;
 
 		.dropdown-menu {
diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss
index d820447f5..bd3d60622 100644
--- a/web/sass-files/sass/partials/_post_right.scss
+++ b/web/sass-files/sass/partials/_post_right.scss
@@ -25,6 +25,7 @@
 
 			.col__reply  {
 				top: 0;
+				text-align: right;
 			}
 
 		}