UI Improvements for centre channel due to preview

5 files changed, 33 insertions, 24 deletions

diff --git a/web/react/components/textbox.jsx b/web/react/components/textbox.jsx
index 82f830038..7d80eec08 100644
--- a/web/react/components/textbox.jsx
+++ b/web/react/components/textbox.jsx
@@ -252,7 +252,7 @@ export default class Textbox extends React.Component {
 
         if (e.scrollHeight - mod < 167) {
             $(e).css({height: 'auto', 'overflow-y': 'hidden'}).height(e.scrollHeight - mod);
-            $(w).css({height: 'auto'}).height(e.scrollHeight + 2 + previewLinkHeightMod);
+            $(w).css({height: 'auto'}).height(e.scrollHeight + 2);
             $(w).closest('.post-body__cell').removeClass('scroll');
             if (this.state.preview) {
                 $(ReactDOM.findDOMNode(this.refs.preview)).css({height: 'auto', 'overflow-y': 'auto'}).height(e.scrollHeight - mod);
diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss
index d3ab3b9f8..49fb8e847 100644
--- a/web/sass-files/sass/partials/_files.scss
+++ b/web/sass-files/sass/partials/_files.scss
@@ -1,5 +1,6 @@
 .preview-container {
   position: relative;
+  margin-top: 10px;
   width: 100%;
   max-height: 110px;
   height: 110px;
diff --git a/web/sass-files/sass/partials/_navbar.scss b/web/sass-files/sass/partials/_navbar.scss
index 2e78a8728..c06feffcf 100644
--- a/web/sass-files/sass/partials/_navbar.scss
+++ b/web/sass-files/sass/partials/_navbar.scss
@@ -96,9 +96,9 @@
 }
 
 .badge-notify {
-	background:red;
+	background: red;
 	position: absolute;
-	right: -5px;
-	top: -5px;
+	left: 4px;
+	top: 3px;
 	z-index: 100;
 }
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 3e2d6f045..d5aeaabad 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -46,21 +46,22 @@ body.ios {
 
 .textarea-wrapper {
 	position:relative;
-	min-height:57px;
-    .textbox-preview-area {
-        position: absolute;
-        z-index: 2;
-        top: 0;
-        left: 0;
-        box-shadow: none;
-    }
-    .textbox-preview-link {
-        position: absolute;
-        z-index: 3;
-        bottom: 0;
-        right: 10px;
-        cursor: pointer;
-    }
+	min-height: 36px;
+	.textbox-preview-area {
+		position: absolute;
+		z-index: 2;
+		top: 0;
+		left: 0;
+		box-shadow: none;
+	}
+	.textbox-preview-link {
+		position: absolute;
+		z-index: 3;
+		bottom: -23px;
+		right: 0;
+		font-size: 13px;
+		cursor: pointer;
+	}
 }
 
 .date-separator, .new-separator {
@@ -339,7 +340,7 @@ body.ios {
 		}
 		.msg-typing {
 			min-height: 20px;
-			line-height: 18px;
+			line-height: 25px;
 			display: inline-block;
 			font-size: 13px;
 			@include opacity(0.7);
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index 339412b45..cb140dce6 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -507,8 +507,16 @@
         form {
             padding: 0;
         }
+        .post-create-footer {
+            .msg-typing {
+                margin-left: 45px;
+                width: 55%;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+        }
         .post-create-body {
-            padding-bottom: 10px;
             display: table;
             width: 100%;
             .post-body__cell {
@@ -532,11 +540,10 @@
                 display: table-cell;
             }
         }
-        .post-create-footer .msg-typing {
-            display: none;
-        }
     }
     .preview-container {
+        padding: 0px 10px;
+        margin-top: 20px;
         .preview-div {
             margin-top: 0;
         }