Multiple UI Improvements

10 files changed, 88 insertions, 49 deletions

diff --git a/web/sass-files/sass/partials/_content.scss b/web/sass-files/sass/partials/_content.scss
index 6228cc45e..44a959a9b 100644
--- a/web/sass-files/sass/partials/_content.scss
+++ b/web/sass-files/sass/partials/_content.scss
@@ -20,7 +20,6 @@
 	background: #fff;
     @include display-flex;
     @include flex-direction(column);
-    flex-direction: column;
 	.channel__wrap & {
 		padding-top: 0;
 	}
diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss
index 49fb8e847..168634b5e 100644
--- a/web/sass-files/sass/partials/_files.scss
+++ b/web/sass-files/sass/partials/_files.scss
@@ -1,9 +1,9 @@
 .preview-container {
   position: relative;
-  margin-top: 10px;
+  margin-top: 25px;
   width: 100%;
-  max-height: 110px;
-  height: 110px;
+  max-height: 100px;
+  height: 100px;
   white-space: nowrap;
   overflow-x: auto;
   overflow-y: hidden;
@@ -11,7 +11,7 @@
     display: inline-block;
     width: 120px;
     height: 100px;
-    margin: 7px 0 0 5px;
+    margin: 0 0 0 5px;
     vertical-align: top;
     position: relative;
     border: 1px solid #DDD;
diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss
index 67c938b8c..69bc56841 100644
--- a/web/sass-files/sass/partials/_headers.scss
+++ b/web/sass-files/sass/partials/_headers.scss
@@ -1,8 +1,5 @@
 #channel-header {
-    padding: 3px 0;
-    height: 58px;
-    flex: 0 0 58px;
-    @include flex(0 0 50px);
+	@include flex(0 0 56px);
 }
 .row {
 	&.header {
@@ -45,9 +42,9 @@
 			text-overflow: ellipsis;
 			margin-top: 2px;
 			max-height: 45px;
-            .markdown-inline-img {
-                max-height: 45px
-            }
+			.markdown-inline-img {
+				max-height: 45px
+			}
 		}
 		&.popover {
 			white-space: normal;
@@ -97,7 +94,7 @@
 .sidebar--left, .sidebar--menu {
 	.team__header {
 		position: relative;
-		padding: 10px;
+		padding: 9px 10px;
 		@include legacy-pie-clearfix;
 		&:before {
 			@include single-transition(all, 0.05s, linear);
@@ -125,7 +122,7 @@
 		.navbar-right {
 			font-size: 0.85em;
 			position: absolute;
-			top: 11px;
+			top: 10px;
 			right: 22px;
 			z-index: 5;
 			.dropdown-toggle {
@@ -217,7 +214,7 @@
 	width:100%;
 	border-left: none;
 	font-size: 14px;
-	line-height: 50px;
+	line-height: 56px;
 	#member_popover {
 		margin-right: 5px;
 		width: 45px;
@@ -296,17 +293,19 @@
 
 .channel-header__links {
 	height: 32px;
-	vertical-align: top;
-	display: inline-block;
-	width: 15px;
-	margin: 9px 6px 3px 0;
-	a {
+	width: 32px;
+	@include border-radius(50px);
+	border: 1px solid #ccc;
+	margin-right: 10px;
+	> a {
+		@include border-radius(50px);
 		height: 100%;
 		display: block;
+		@include single-transition(all, 0.1s, ease-in);
 	}
 	svg {
 		vertical-align: top;
-		margin-top: 8px;
+	    margin: 7px 0 0 0px;
 		fill: inherit;
 	}
 }
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 45b7b7f23..a08ebfaf1 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -332,18 +332,19 @@ body.ios {
 	}
 	.post-create-footer {
 		@include clearfix;
-		padding: 0;
+		padding: 3px 0 0 0;
+		font-size: 13px;
 		.has-error {
 			.control-label {
+				height: 0;
+				display: block;
 				font-weight: normal;
 				margin-bottom: 0;
 			}
 		}
 		.msg-typing {
 			min-height: 25px;
-			line-height: 25px;
 			display: block;
-			font-size: 13px;
 			@include opacity(0.7);
 		}
 	}
@@ -417,9 +418,6 @@ body.ios {
 			}
 		}
 	}
-	.post-create-footer {
-		padding: 0;
-	}
 	p {
 		margin: 0 0 1em;
 		line-height: 1.6em;
@@ -552,6 +550,7 @@ body.ios {
 				display: block;
 				white-space: nowrap;
 				text-overflow: ellipsis;
+				margin: 0 20px 0 50px;
 			}
 		}
 		.post-header-col {
diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss
index ba41d3b95..58ede5c65 100644
--- a/web/sass-files/sass/partials/_post_right.scss
+++ b/web/sass-files/sass/partials/_post_right.scss
@@ -1,4 +1,7 @@
 .post-right__container {
+    @include display-flex;
+    @include flex-direction(column);
+    height: 100%;
 
 	.post-right-root-message {
 		padding: 1em 1em 0;
@@ -44,7 +47,7 @@
 		}
 		.post-create-footer {
 			width: 100%;
-			padding-top: 5px;
+			padding: 5px 0 10px;
 		}
 		.post-right-comments-upload-in-progress {
 			padding: 6px 0;
@@ -103,8 +106,9 @@
 
 .post-right__scroll {
 	position: relative;
-	overflow: scroll;
+	overflow: auto;
 	-webkit-overflow-scrolling: touch;
+	@include flex(1 1 auto);
 }
 
 .post-right-comment-time {
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index cb140dce6..966ae5cd1 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -275,6 +275,11 @@
     }
 }
 @media screen and (max-width: 768px) {
+    .textarea-wrapper {
+        .textbox-preview-link {
+            display: none;
+        }
+    }
     .form-control {
         &.min-height {
             min-height: 100px;
@@ -503,17 +508,22 @@
     .post-create__container {
         .post-right__container & {
             padding: 0 1em;
+            .msg-typing {
+                display: none;
+            }
         }
         form {
-            padding: 0;
+            padding: 0.5em 0;
         }
         .post-create-footer {
+            padding: 0 1em;
             .msg-typing {
-                margin-left: 45px;
-                width: 55%;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                overflow: hidden;
+                display: none;
+            }
+            .has-error {
+                .control-label {
+                    height: auto;
+                }
             }
         }
         .post-create-body {
@@ -542,8 +552,8 @@
         }
     }
     .preview-container {
-        padding: 0px 10px;
-        margin-top: 20px;
+        padding: 0px;
+        margin-top: 5px;
         .preview-div {
             margin-top: 0;
         }
@@ -616,7 +626,7 @@
     }
     .search-bar__container {
         padding: 0;
-        height: 45px;
+        @include flex(0 0 44px);
         background: $primary-color;
         color: #fff;
         &.focused {
@@ -745,6 +755,12 @@
         .sidebar--right__close {
             display: none;
         }
+        .sidebar-right__body {
+            height: calc(100% - 44px);
+        }
+    }
+    .search-items-container {
+        height: calc(100% - 44px);
     }
     .inner__wrap {
         &.move--right {
diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss
index 73b69c866..bedf35376 100644
--- a/web/sass-files/sass/partials/_search.scss
+++ b/web/sass-files/sass/partials/_search.scss
@@ -1,8 +1,9 @@
 #channel-header .search-bar__container {
-    padding: 8px 8px 8px 0;
+    padding: 0 8px 0 0;
 }
 .search-bar__container {
-	padding: 12px 8px 12px 0;
+	padding: 12px 8px 0 0;
+    @include flex(0 0 56px);
 }
 .search__clear {
 	display: none;
@@ -71,8 +72,10 @@
 
 .search-items-container {
 	position: relative;
-	overflow: scroll;
+	overflow: auto;
 	-webkit-overflow-scrolling: touch;
+	@include flex(1 1 auto);
+	height: calc(100% - 56px);
 }
 
 .search-results-header {
@@ -92,9 +95,11 @@
 	padding: 10px 1em;
 	margin: 0;
 	cursor: pointer;
+
 	&:first-child {
 		border: none;
 	}
+
 	.search-channel__name {
 		font-weight: 600;
 		margin: 0 0 10px 0;
diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss
index ab13d1b42..eb7c1b83f 100644
--- a/web/sass-files/sass/partials/_sidebar--left.scss
+++ b/web/sass-files/sass/partials/_sidebar--left.scss
@@ -47,7 +47,7 @@
     .nav-pills__container {
         height: 100%;
         position: relative;
-        overflow: scroll;
+        overflow: auto;
         -webkit-overflow-scrolling: touch;
     }
 
diff --git a/web/sass-files/sass/partials/_sidebar--menu.scss b/web/sass-files/sass/partials/_sidebar--menu.scss
index 6f4a0cc38..e34cd72c1 100644
--- a/web/sass-files/sass/partials/_sidebar--menu.scss
+++ b/web/sass-files/sass/partials/_sidebar--menu.scss
@@ -57,8 +57,11 @@
                 color: inherit;
                 line-height: 40px;
                 padding: 0 15px;
-                .glyphicon {
+                .fa ,.glyphicon {
                     width: 25px;
+                    text-align: center;
+                    left: -5px;
+                    position: relative;
                 }
             }
         }
diff --git a/web/sass-files/sass/partials/_sidebar--right.scss b/web/sass-files/sass/partials/_sidebar--right.scss
index a4267294c..2527eef28 100644
--- a/web/sass-files/sass/partials/_sidebar--right.scss
+++ b/web/sass-files/sass/partials/_sidebar--right.scss
@@ -3,24 +3,38 @@
     width: 400px;
     height: 100%;
     right: 0px;
-    padding: 0 0 2em 0;
+    padding: 0;
     background: #fff;
     @include single-transition(transform, 0.5s, ease);
     right: -320px;
+
     &.move--left {
         right: 0;
     }
+
+    .sidebar--right__content {
+        height: 100%;
+        @include display-flex;
+        @include flex-direction(column);
+    }
+
     .sidebar--right__back {
-        color: #666;
-        width: 20px;
+        color: inherit;
+        @include opacity(0.8);
+        width: 30px;
         text-align: center;
-        margin: 0 0 0 -6px;
-        font-size: 12px;
+        margin: 0 0 0 -14px;
+        font-size: 13px;
         display: inline-block;
     }
     .sidebar-right__body {
+        @include flex(1 1 auto);
         border-left: $border-gray;
         border-top: $border-gray;
+        @include display-flex;
+        @include flex-direction(column);
+        height: calc(100% - 56px);
+        @include border-radius(2px 0 0 0);
     }
     .post {
         .post-header {
@@ -75,7 +89,7 @@
         height: 44px;
         padding: 0 1em;
         line-height: 44px;
-        background: #F5F5F5;
+        @include flex(0 0 44px);
         border-bottom: $border-gray;
     }
     .sidebar--right__subheader {