feat(search): Create component "refine search" #289

* refactor class hsg-search-inputs for vertical and horizontal alignment * extract checkboxes for refining search as include „filter-querystring-include.html“ * add css to component
HistoryAtState · Nov 14, 2017 · 8e50b55 · 8e50b55
1 parent 99adbc1
commit 8e50b55
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 6 deletions.
diff --git a/app/scss/_search.scss b/app/scss/_search.scss
@@ -63,20 +63,48 @@ input[type=search] {
 // Search results page
 
 .hsg-search-section {
-  margin-bottom: 4rem;
   .pagination {
     margin: 0;
   }
 }
 
-.hsg-search-inputs {
+.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;
 }

diff --git a/pages/search/filter-querystring-include.html b/pages/search/filter-querystring-include.html
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<div class="row">
+    <div class="hsg-width-one-whole" data-template="app:fix-links">
+        <div class="hsg-search-inputs-horizontal">
+            <div class="hsg-search-input">
+                <input id="exactPhrase" type="checkbox" name="" />
+                <label for="exactPhrase" class="c-indicator">Exact Phrase</label>
+            </div>
+            <div class="hsg-search-input">
+                <input id="caseSensitive" type="checkbox" name="" />
+                <label for="caseSensitive" class="c-indicator">Case Sensitive</label>
+            </div>
+            <div class="hsg-search-input">
+                <input id="punctuationSensitive" type="checkbox" name="" />
+                <label for="punctuationSensitive" class="c-indicator">Punctuation Sensitive</label>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/pages/search/search-bar-include.html b/pages/search/search-bar-include.html
@@ -17,9 +17,11 @@ <h1>Search</h1>
                     </button>
                 </p>
 
+<!--
                 <button class="hsg-link-button" type="submit" value="Search">
                     <span class="glyphicon glyphicon-search" aria-hidden="true"/>Search
                 </button>
+-->
             </form>
         </section>
     </div>

diff --git a/pages/search/search-landing.html b/pages/search/search-landing.html
@@ -17,6 +17,8 @@
 
     <div data-template="templates:include" data-template-path="pages/search/search-bar-include.html"/>
 
+    <div data-template="templates:include" data-template-path="pages/search/filter-querystring-include.html"/>
+
     <div class="row">
         <div class="hsg-width-one-whole">
             <div id="content-inner" data-template="app:fix-links">
@@ -25,7 +27,7 @@
                         <div data-template="search:load-sections">
                             <p>To limit your results to certain parts of the website, check the
                                 appropriate box(es), and then click “Search”:</p>
-                            <div class="hsg-search-inputs">
+                            <div class="hsg-search-inputs-vertical">
                                 <label class="hsg-search-input-label" data-template="templates:each"
                                     data-template-from="sections" data-template-to="section">
                                     <input type="checkbox" name="within" data-template="search:section-checkbox-value-attribute-and-title"/>
@@ -37,7 +39,7 @@
                                 data-template-param="volume-id">
                                 <p>Restrict search to the following <em>Foreign Relations</em>
                                     volume(s):</p>
-                                <div class="hsg-search-inputs" data-template="templates:each"
+                                <div class="hsg-search-inputs-vertical" data-template="templates:each"
                                     data-template-from="volumes" data-template-to="volume">
                                     <label class="hsg-search-input-label">
                                         <input type="checkbox" name="volume-id" checked="checked" data-template="search:volume-checkbox-value-attribute-and-title"/>

diff --git a/pages/search/search-result.html b/pages/search/search-result.html
@@ -18,7 +18,7 @@
 
     <div class="row">
         <nav class="hsg-width-one-third">
-            <div class="hsg-search-inputs">
+            <div class="hsg-search-inputs-vertical">
                 <label class="hsg-search-input-label" data-template="templates:each"
                     data-template-from="sections" data-template-to="section">
                     <input type="checkbox" name="within" data-template="search:section-checkbox-value-attribute-and-title"/>

diff --git a/pages/search/select-volumes.html b/pages/search/select-volumes.html
@@ -37,7 +37,7 @@
                     <section class="hsg-search-section">
                         <p class="hsg-search-help">Select <em>Foreign Relations</em> volumes for
                             full text search:</p>
-                        <div class="hsg-search-inputs" data-template="search:select-volumes"/>
+                        <div class="hsg-search-inputs-vertical" data-template="search:select-volumes"/>
                         <button class="hsg-link-button" type="submit" value="Search">
                             <span class="glyphicon glyphicon-search" aria-hidden="true"/>Search
                         </button>