feat(search): Add layout to filter sidebar #287

* create scss component _filters.scss and move filter styles from search.scss to it
HistoryAtState · Nov 16, 2017 · c373eaa · c373eaa
1 parent c6bfcb9
commit c373eaa
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 45 deletions.
diff --git a/app/scss/_customized-bootstrap.scss b/app/scss/_customized-bootstrap.scss
@@ -229,7 +229,7 @@ dd {
     cursor: pointer;
     display: table;
     > input {
-      margin: 4px 20px 0 0;
+      margin: 4px 15px 0 0;
       line-height: $base-line-height;
       height: 14px;
       display: table-cell;

diff --git a/app/scss/_filters.scss b/app/scss/_filters.scss
@@ -0,0 +1,46 @@
+/* Filters -------------- */
+
+.hsg-search-inputs-vertical {
+  @extend .c-inputs-stacked;
+  margin: 1rem 0;
+  .hsg-search-input-label {
+    @extend .c-input;
+  }
+}
+
+.hsg-search-inputs-horizontal {
+  margin-bottom: 1em;
+
+  .hsg-search-input {
+    cursor: pointer;
+    display: inline-block;
+    margin-right: $margin-horizontal-base;
+  }
+
+  input[type="checkbox"] {
+    cursor: pointer;
+    margin: 0;
+    width: 12px;
+    height: 14px;
+    position: relative;
+    left: 0;
+    vertical-align: middle;
+  }
+
+  label{
+    width: auto;
+    margin: 0 0 0 5px;
+    position: relative;
+    left: 0;
+    display: inline-block;
+    vertical-align: middle;
+  }
+}
+
+// Elements in sidebar on search result page
+.filter {
+  &-sidebar {
+    border-bottom: $default-border-style;
+    margin-bottom: 2rem;
+  }
+}
diff --git a/app/scss/_search.scss b/app/scss/_search.scss
@@ -68,54 +68,12 @@ input[type=search] {
   }
 }
 
-.hsg-search-inputs-vertical {
-  @extend .c-inputs-stacked;
-  margin: 2rem 0;
-  .hsg-search-input-label {
-    @extend .c-input;
-  }
-}
-
-.hsg-search-inputs-horizontal {
-  margin-bottom: 1em;
-
-  .hsg-search-input {
-    cursor: pointer;
-    display: inline-block;
-    margin-right: $margin-horizontal-base;
-  }
-
-  input[type="checkbox"] {
-    cursor: pointer;
-    margin: 0;
-    width: 12px;
-    height: 14px;
-    position: relative;
-    left: 0;
-    vertical-align: middle;
-  }
-
-  label{
-    width: auto;
-    margin: 0 0 0 5px;
-    position: relative;
-    left: 0;
-    display: inline-block;
-    vertical-align: middle;
-  }
-}
-
 .hsg-search-help {
   margin: 0 0 2rem 0;
 }
 
-.hsg-search-result-message {
-  margin-top: 4rem;
-  font-size: $h2-font-size;
-  margin-bottom: 0.5rem;
-  .hsg-search-query {
-    color: $color-primary;
-  }
+.hsg-search-query {
+  color: $color-primary;
 }
 
 .hsg-search-result {
@@ -148,6 +106,17 @@ input[type=search] {
   border-left: none;
 }
 
+// Reset button in sidebar
+
+.hsg-sidebar-reset-btn {
+  @extend .btn;
+  @extend .btn-default;
+  background-color: $color-gray-lightest;
+  > span {
+    top: 2px;
+  }
+}
+
 // Text in searchbar button
 .hsg-search-submit-text {
   position: absolute;

diff --git a/app/scss/main.scss b/app/scss/main.scss
@@ -30,5 +30,6 @@
 
 @import "tei-overrides";
 @import "toc";
+@import "filters";
 @import "tei";
 @import "miscellaneous";