Multiple Ui improvements (#3678)

* Adding permalink back to mobile

* Improving reply flow and fixing colorpicker on mobile

* Hiding colorpicker on click only for mobile size screens

8 files changed, 76 insertions, 54 deletions

diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx
index 9cb1e751d..ba6a9a982 100644
--- a/webapp/components/post_view/components/post_info.jsx
+++ b/webapp/components/post_view/components/post_info.jsx
@@ -74,24 +74,22 @@ export default class PostInfo extends React.Component {
              );
         }
 
-        if (!Utils.isMobile()) {
-            dropdownContents.push(
-                <li
-                    key='copyLink'
-                    role='presentation'
+        dropdownContents.push(
+            <li
+                key='copyLink'
+                role='presentation'
+            >
+                <a
+                    href='#'
+                    onClick={this.handlePermalink}
                 >
-                    <a
-                        href='#'
-                        onClick={this.handlePermalink}
-                    >
-                        <FormattedMessage
-                            id='post_info.permalink'
-                            defaultMessage='Permalink'
-                        />
-                    </a>
-                </li>
-            );
-        }
+                    <FormattedMessage
+                        id='post_info.permalink'
+                        defaultMessage='Permalink'
+                    />
+                </a>
+            </li>
+        );
 
         if (isOwner || isAdmin) {
             dropdownContents.push(
diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx
index 758642cae..ed1f71b1e 100644
--- a/webapp/components/rhs_comment.jsx
+++ b/webapp/components/rhs_comment.jsx
@@ -66,24 +66,22 @@ export default class RhsComment extends React.Component {
 
         var dropdownContents = [];
 
-        if (!Utils.isMobile()) {
-            dropdownContents.push(
-                <li
-                    key='rhs-root-permalink'
-                    role='presentation'
+        dropdownContents.push(
+            <li
+                key='rhs-root-permalink'
+                role='presentation'
+            >
+                <a
+                    href='#'
+                    onClick={this.handlePermalink}
                 >
-                    <a
-                        href='#'
-                        onClick={this.handlePermalink}
-                    >
-                        <FormattedMessage
-                            id='rhs_comment.permalink'
-                            defaultMessage='Permalink'
-                        />
-                    </a>
-                </li>
-            );
-        }
+                    <FormattedMessage
+                        id='rhs_comment.permalink'
+                        defaultMessage='Permalink'
+                    />
+                </a>
+            </li>
+        );
 
         if (isOwner && !isSystemMessage) {
             dropdownContents.push(
diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx
index 1aee008e7..cf8c3201a 100644
--- a/webapp/components/rhs_root_post.jsx
+++ b/webapp/components/rhs_root_post.jsx
@@ -91,24 +91,22 @@ export default class RhsRootPost extends React.Component {
 
         var dropdownContents = [];
 
-        if (!Utils.isMobile()) {
-            dropdownContents.push(
-                <li
-                    key='rhs-root-permalink'
-                    role='presentation'
+        dropdownContents.push(
+            <li
+                key='rhs-root-permalink'
+                role='presentation'
+            >
+                <a
+                    href='#'
+                    onClick={this.handlePermalink}
                 >
-                    <a
-                        href='#'
-                        onClick={this.handlePermalink}
-                    >
-                        <FormattedMessage
-                            id='rhs_root.permalink'
-                            defaultMessage='Permalink'
-                        />
-                    </a>
-                </li>
-            );
-        }
+                    <FormattedMessage
+                        id='rhs_root.permalink'
+                        defaultMessage='Permalink'
+                    />
+                </a>
+            </li>
+        );
 
         if (isOwner && !isSystemMessage) {
             dropdownContents.push(
diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx
index c92adcd9b..970da7925 100644
--- a/webapp/components/search_bar.jsx
+++ b/webapp/components/search_bar.jsx
@@ -141,6 +141,8 @@ export default class SearchBar extends React.Component {
     handleSubmit(e) {
         e.preventDefault();
         this.performSearch(this.state.searchTerm.trim());
+        $(ReactDOM.findDOMNode(this.refs.search)).find('input').blur();
+        this.clearFocus();
     }
 
     render() {
diff --git a/webapp/components/user_settings/custom_theme_chooser.jsx b/webapp/components/user_settings/custom_theme_chooser.jsx
index b080c879d..016751faa 100644
--- a/webapp/components/user_settings/custom_theme_chooser.jsx
+++ b/webapp/components/user_settings/custom_theme_chooser.jsx
@@ -119,11 +119,13 @@ class CustomThemeChooser extends React.Component {
         });
         $('.color-picker').on('changeColor', this.onPickerChange);
         $('.group--code').on('change', this.onCodeThemeChange);
+        document.addEventListener('click', this.closeColorpicker);
     }
 
     componentWillUnmount() {
         $('.color-picker').off('changeColor', this.onPickerChange);
         $('.group--code').off('change', this.onCodeThemeChange);
+        document.removeEventListener('click', this.closeColorpicker);
     }
 
     componentDidUpdate() {
@@ -136,6 +138,12 @@ class CustomThemeChooser extends React.Component {
         });
     }
 
+    closeColorpicker(e) {
+        if (!$(e.target).closest('.color-picker').length && Utils.isMobile()) {
+            $('.color-picker').colorpicker('hide');
+        }
+    }
+
     onPickerChange(e) {
         const inputBox = e.target.childNodes[0];
         if (document.activeElement === inputBox && inputBox.value.length !== HEX_CODE_LENGTH) {
diff --git a/webapp/sass/components/_dropdown.scss b/webapp/sass/components/_dropdown.scss
index eaa5c463f..91d325002 100644
--- a/webapp/sass/components/_dropdown.scss
+++ b/webapp/sass/components/_dropdown.scss
@@ -4,6 +4,7 @@
     border-radius: $border-rad;
 
     &.colorpicker {
+        min-width: 125px;
         z-index: 2500;
     }
 
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index fcbf23b1c..53a9f6c7d 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -1,6 +1,10 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 768px) {
+    .scrollbar--view {
+        margin-right: 0 !important;
+    }
+
     #post-list {
         .post-list-holder-by-time {
             .modal-open & {
@@ -64,11 +68,11 @@
     .post {
         .post__dropdown {
             display: inline-block;
-            height: 20px;
-            line-height: 9px;
+            height: 28px;
+            line-height: 21px;
             text-align: center;
             text-decoration: none;
-            width: 20px;
+            width: 28px;
 
             &:after {
                 content: '...';
@@ -393,6 +397,18 @@
                         display: block;
 
                         .settings-content {
+                            .appearance-section {
+                                .theme-elements {
+                                    .element {
+                                        margin-right: 10px;
+
+                                        &:nth-child(2n) {
+                                            margin-right: 10px;
+                                        }
+                                    }
+                                }
+                            }
+
                             &.minimize-settings {
                                 display: block;
                             }
diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss
index 38a765d22..4776810df 100644
--- a/webapp/sass/routes/_admin-console.scss
+++ b/webapp/sass/routes/_admin-console.scss
@@ -266,6 +266,7 @@
     z-index: 5;
 
     .dropdown-menu {
+        max-width: 200px;
         min-width: 200px;
     }