Merge pull request #1592 from asaadmahmoodspin/ui-improvements

Ui improvements for the tablet/small browser view

3 files changed, 41 insertions, 13 deletions

diff --git a/web/sass-files/sass/partials/_content.scss b/web/sass-files/sass/partials/_content.scss
index 44a959a9b..0570daeb7 100644
--- a/web/sass-files/sass/partials/_content.scss
+++ b/web/sass-files/sass/partials/_content.scss
@@ -1,5 +1,5 @@
 .inner__wrap {
-	@include single-transition(transform, 0.5s, ease);
+	@include single-transition(all, 0.5s, ease);
 	&.move--left {
 		margin-right: 400px;
 		.search-bar__container {
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index a56c4bb17..9b316d48e 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -51,23 +51,27 @@
 
 @media screen and (max-width: 960px) {
 
-    .signup-team__container {
-        font-size: 1em;
-    }
+    .sidebar--right {
+        width: 400px;
+        z-index: 5;
+        right: 0;
+        @include translateX(100%);
 
-    .post {
+        &.move--left {
+            @include translateX(0);
+        }
 
-        &.same--root {
+    }
 
-            &.same--user {
+    .inner__wrap {
 
-                .post__time {
-                    display: none;
-                }
+        &.move--left {
+            margin-right: 0;
+        }
 
-            }
+    }
 
-        }
+    .post {
 
         .post-list__content & {
 
@@ -106,6 +110,30 @@
 
         }
 
+    }
+
+}
+
+@media screen and (max-width: 768px) {
+
+    .signup-team__container {
+        font-size: 1em;
+    }
+
+    .post {
+
+        &.same--root {
+
+            &.same--user {
+
+                .post__time {
+                    display: none;
+                }
+
+            }
+
+        }
+
         .post__img {
             width: 40px;
 
diff --git a/web/sass-files/sass/partials/_tutorial.scss b/web/sass-files/sass/partials/_tutorial.scss
index cfbc3454a..8ab29ab10 100644
--- a/web/sass-files/sass/partials/_tutorial.scss
+++ b/web/sass-files/sass/partials/_tutorial.scss
@@ -81,7 +81,7 @@
         color: #fff;
         @include border-radius(3px);
         border: none;
-        margin-bottom: 10px;
+        margin: 10px 0;
 
         &:hover, &:active, &:focus {
             color: #fff;