[#939] Moved filter menu on the side. W.I.P

akvo · Jan 9, 2015 · a3ee4c3 · a3ee4c3
1 parent 5ccb79d
commit a3ee4c3
Show file tree

Hide file tree

Showing 3 changed files with 255 additions and 132 deletions.
diff --git a/akvo/rsr/static/rsr/v3/css/src/main.css b/akvo/rsr/static/rsr/v3/css/src/main.css
@@ -253,7 +253,73 @@ h4.detailedInfo {
 /* LISTINGS */
 #map {
   height: 400px;
-  background: #428bca; }
+  background: #428bca;
+  padding-top: 9px; }
+  @media only screen and (max-width: 768px) {
+    #map {
+      height: 450px;
+      padding-top: 0px; } }
+
+@media only screen and (max-width: 768px) {
+  #search-filter {
+    padding-bottom: 0; } }
+@media only screen and (max-width: 768px) {
+  #search-filter #search {
+    padding-bottom: 0; } }
+
+.searchContainer {
+  position: relative; }
+  .searchContainer .showFilters {
+    background: #00a79d;
+    border: 1px solid rgba(0, 167, 157, 0);
+    color: white;
+    transition: all 0.4s ease-in; }
+    .searchContainer .showFilters:hover {
+      background: rgba(0, 167, 157, 0.5);
+      border: 1px solid rgba(0, 167, 157, 0.7);
+      color: white; }
+    @media only screen and (max-width: 768px) {
+      .searchContainer .showFilters {
+        display: table;
+        top: inherit;
+        left: inherit;
+        margin: 10px auto 0; } }
+  .searchContainer aside#sidebar-wrapper .showFilters {
+    position: relative; }
+
+#sidebar-wrapper {
+  z-index: 1000;
+  position: absolute;
+  left: 200px;
+  width: 0;
+  margin-left: -200px;
+  overflow-y: auto;
+  background: #00a79d;
+  -moz-border-radius: 0 0 5px 0;
+  -o-border-radius: 0 0 5px 0;
+  -webkit-border-radius: 0 0 5px 0;
+  border-radius: 0 0 5px 0;
+  -moz-transition: all 0.5s ease;
+  -o-transition: all 0.5s ease;
+  -webkit-transition: all 0.5s ease;
+  transition: all 0.5s ease;
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); }
+  #sidebar-wrapper div#filter {
+    padding: 5px 15px 15px 15px; }
+    #sidebar-wrapper div#filter label {
+      color: white; }
+
+#page-content-wrapper {
+  width: 100%;
+  padding: 15px; }
+
+#wrapper.toggled {
+  padding-left: 200px; }
+  #wrapper.toggled #sidebar-wrapper {
+    width: 200px; }
+  #wrapper.toggled #page-content-wrapper {
+    position: absolute;
+    margin-right: -200px; }
 
 #search-filter {
   background-color: #241F20; }
@@ -262,16 +328,6 @@ h4.detailedInfo {
   #search-filter div#search {
     color: #fff;
     text-align: center; }
-    #search-filter div#search .showFilters {
-      margin-left: 15px;
-      background: rgba(0, 167, 157, 0);
-      border: 1px solid rgba(0, 167, 157, 0);
-      color: #4ab1cf;
-      transition: all 0.4s ease-in; }
-      #search-filter div#search .showFilters:hover {
-        background: rgba(0, 167, 157, 0.5);
-        border: 1px solid rgba(0, 167, 157, 0.7);
-        color: white; }
   #search-filter div#filter {
     background: #383334;
     text-align: center; }

diff --git a/akvo/rsr/static/rsr/v3/css/src/main.scss b/akvo/rsr/static/rsr/v3/css/src/main.scss
@@ -267,31 +267,93 @@ h4.detailedInfo {
 #map {
 	height: 400px;
 	background: #428bca;
-	@include responsive(sm) {
+	padding-top:9px;
+	@include responsive(small-max-screens) {
 		height: 450px;
-		}
+		padding-top:0px;
+	}
 }
-
 #search-filter {
-	background-color: #241F20;
-	p {
-		color: rgba($rsrGreen,0.5);
+	@include responsive (small-max-screens) {
+		padding-bottom: 0;
 	}
-	div#search {
-		color: #fff;
-		text-align: center;
+	#search {
+		@include responsive (small-max-screens) {
+			padding-bottom: 0;
+		}
+	}
+}
+.searchContainer {
+	position:relative;
 		.showFilters {
-			margin-left:15px;
-			background:rgba($rsrGreen,0);
+			background:rgba($rsrGreen,1);
 			border:1px solid rgba($rsrGreen,0);							
-			color:$anchorLink;
+			color: white;
 			transition: all 0.4s ease-in;
 			&:hover {
 				background:rgba($rsrGreen,0.5);
 				border:1px solid rgba($rsrGreen,0.7);							
 				color:white;				
 			}
+			@include responsive (small-max-screens) {
+				display: table;
+				top: inherit;
+				left: inherit;
+				margin:10px auto 0;
+			 }
 		}
+		aside#sidebar-wrapper {
+			.showFilters {
+				position:relative;
+			}
+		} 
+}
+
+
+
+#sidebar-wrapper {
+    z-index: 1000;
+    position: absolute;
+    left: 200px;
+    width: 0;
+    margin-left: -200px;
+    overflow-y: auto;
+    background:rgba($rsrGreen,1);
+    @include border-radius (0 0 5px 0);
+    @include transition (all 0.5s ease);
+    box-shadow:2px 2px 5px rgba(0,0,0,0.5);
+    div#filter {
+    	padding:5px 15px 15px 15px;
+    	label {
+    		color:white;
+    	}
+    }
+}
+
+#page-content-wrapper {
+    width: 100%;
+    padding: 15px;
+}
+
+#wrapper.toggled {
+    padding-left: 200px;
+    #sidebar-wrapper {
+	    width: 200px;
+	}
+	#page-content-wrapper {
+	    position: absolute;
+	    margin-right: -200px;
+	}
+}
+
+#search-filter {
+	background-color: #241F20;
+	p {
+		color: rgba($rsrGreen,0.5);
+	}
+	div#search {
+		color: #fff;
+		text-align: center;
 	}
 	div#filter {
 		background: darken(rgba(#383334,1), 0% );