Merge pull request #248 from huridocs/fix-sidebar-mobile

LGTM
huridocs · Aug 8, 2016 · 389e170 · 389e170
2 parents 59169a1 + ba5e06e
commit 389e170
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/app/react/App/scss/layout/_aside.scss b/app/react/App/scss/layout/_aside.scss
@@ -15,17 +15,6 @@ aside {
 			}
 		}
 	}
-	.fa-close {
-		position: absolute;
-		top: 15px;
-		right: 30px;
-		font-size: 18px;
-		color: $c-grey;
-		cursor: pointer;
-		&:hover {
-			color: $c-grey-dark;
-		}
-	}
 	h2 {
 		font-size: $f-size-sm;
 		padding-left: 20px;

diff --git a/app/react/Layout/scss/sidepanel.scss b/app/react/Layout/scss/sidepanel.scss
@@ -6,16 +6,19 @@
   $c-sidebar: darken($c-background, 0%);
   position: fixed;
   right: 0;
-  top: 54px + 15px;
-  bottom: 15px;
-  padding: 15px 30px;
+  top: 54px;
+  bottom: 0;
+  padding: 30px;
   overflow-y: scroll;
   border-left: 1px solid $c-grey;
   background-color: $c-sidebar;
   max-width: 320px;
   width: 90%;
   transition: transform 500ms;
   @media(min-width: 1024px) {
+    top: 54px + 15px;
+    bottom: 15px;
+    padding: 15px 30px;
     width: 25%;
     max-width: 9999px;
   }
@@ -37,6 +40,21 @@
     font-size: $f-size-lg;
   }
 
+  .fa-close {
+		position: absolute;
+		top: 30px;
+		right: 30px;
+		font-size: 18px;
+		color: $c-grey;
+		cursor: pointer;
+    @media(min-width: 1024px) {
+      top: 15px;
+    }
+		&:hover {
+			color: $c-grey-dark;
+		}
+	}
+
   .item-group {
     padding: 15px 0px;
     margin: 0 -5px;