Isolate search forms for visual design changes

Why these changes are being introduced:

GeoData and USE UI currently share search form input and submit fields.
These fields should be isolated for UXWS to easily make tweaks to the
form for USE UI that won't affect GeoData.

Relevant ticket(s):

* [USE-127](https://mitlibraries.atlassian.net/browse/USE-127)

How this addresses that need:

This creates separate form partials for USE and GeoData to faciliate
changes to the USE form without affecting GeoData. It also moves the
USE search form to the header, which is where UXWS' designs have it.

Side effects of this change:

It's possible we may want to move the GeoData form to the header as
well, but given the tight timeline for USE UI beta, it makes sense to
focus on the USE side of things for now.

Author: jazairi

app/assets/stylesheets/partials/_search.scss

@@ -3,7 +3,7 @@
 // ------------------------
 
 /* basic search bar */
-.basic-search {
+.search-form {
   background-color: #989898;
   margin-bottom: 0rem;
   padding: 2.4rem 2rem 1.6rem 2rem;
@@ -114,7 +114,7 @@
     }
   }
 
-  .basic-search-submit {
+  .geo-search-submit {
     width: 150px;
     margin-top: 0.8rem;
     .btn {

app/views/basic_search/index.html.erb

@@ -2,6 +2,6 @@
 
 <main class="space-wrap">
   <%= render partial: "shared/site_title" %>
-  <%= render partial: "search/form" %>
+  <%= render partial: "search/form_geo" if Flipflop.enabled?(:gdt) %>
   <%= render partial: "static/about" if ENV.fetch('ABOUT_APP', nil) %>
 </main>

app/views/layouts/_site_header.html.erb

@@ -29,5 +29,6 @@
           <% end %>
       </nav>
     </header>
+    <%= render partial: 'search/form' unless Flipflop.enabled?(:gdt) %>
   </div>  
 </div>

app/views/search/_form.html.erb

@@ -1,185 +1,13 @@
-<%
-# Initial form setup is determined by the advanced parameter. Thereafter it is altered by javascript.
-advanced_label = "Search by title, author, etc."
-search_required = true
-if params[:advanced] == "true"
-  search_required = false
-end
-
-geobox_label = "Geospatial bounding box search"
-if params[:geobox] == "true"
-  geobox_required = true
-  search_required = false
-end
-
-geodistance_label = "Geospatial distance search"
-if params[:geodistance] == "true"
-  geodistance_required = true
-  search_required = false
-end
-
-# Placeholder text for the keyword input changes if any of the search panels are open.
-keyword_placeholder = search_required ? "Enter your search" : "Keyword anywhere"
-%>
-
-<form id="basic-search" class="form-horizontal basic-search" action="<%= results_path %>" method="get" role="search">
+<form id="search-form" class="form-horizontal search-form" action="<%= results_path %>" method="get" role="search">
   <div class="form-group">
     <input id="basic-search-main" type="search"
-           class="field field-text basic-search-input <%= "required" if search_required %>" name="q"
-           title="Keyword anywhere" placeholder="<%= keyword_placeholder %>"
-           value="<%= params[:q] %>" <%= 'required' if search_required %>
-           <%= 'aria-describedby=site-desc' if Flipflop.enabled?(:gdt) %>>
-
-    <% if Flipflop.enabled?(:gdt) %>
-    <details id="geobox-search-panel" class="form-panel" <%= "open" if params[:geobox] == "true" %>>
-      <summary class="btn button-secondary" id="geobox-summary">
-        <span id="geobox-search-label"><%= geobox_label %></span>
-      </summary>
-      <input id="geobox-search-field" class="fieldset-toggle" type="hidden" name="geobox"
-              value="<%= params[:geobox] %>">
-      <fieldset>
-        <legend>Search within a geospatial bounding box</legend>
-        <p>* All fields in this section are required</p>
-        <div class="gridband layout-2c">
-          <div class="field-wrap grid-item">
-            <label class="geo-label" for="geobox-minLongitude">Minimum longitude</label>
-            <input type="number" step="0.000001" min="-180.0" max="180.0"
-                    class="field field-text <%= "required" if geobox_required %>" 
-                    id="geobox-minLongitude" name="geoboxMinLongitude" value="<%= params[:geoboxMinLongitude] %>"
-                    <%= 'required' if geobox_required %>
-                    aria-describedby="minLong-desc">
-            <span class="geo-desc" id="minLong-desc">
-              A decimal between -180.0 and 180.0 (Ex: -73.507239)
-              <span class="hint">Western Hemisphere is negative</span>
-            </span>
-          </div>
-          <div class="field-wrap grid-item">
-            <label class="geo-label" for="geobox-minLatitude">Minimum latitude</label>
-            <input type="number" step="0.000001" min="-90.0" max="90.0"
-                    class="field field-text <%= "required" if geobox_required %>" 
-                    id="geobox-minLatitude" name="geoboxMinLatitude" value="<%= params[:geoboxMinLatitude] %>"
-                    <%= 'required' if geobox_required %>
-                    aria-describedby="minLat-desc">
-            <span class="geo-desc" id="minLat-desc">
-              A decimal between -90.0 and 90.0 (Ex: 41.239083)
-              <span class="hint">Southern Hemisphere is negative</span>
-            </span>
-          </div>
-          <div class="field-wrap grid-item">
-            <label class="geo-label" for="geobox-maxLongitude">Maximum longitude</label>
-            <input type="number" step="0.000001" min="-180.0" max="180.0"
-                    class="field field-text <%= "required" if geobox_required %>" 
-                    id="geobox-maxLongitude" name="geoboxMaxLongitude" value="<%= params[:geoboxMaxLongitude] %>"
-                    <%= 'required' if geobox_required %>
-                    aria-describedby="maxLong-desc">
-              <span class="geo-desc" id="maxLong-desc">
-                A decimal between -180.0 and 180.0 (Ex: -69.928713)
-                <span class="hint">Western Hemisphere is negative</span>
-              </span>
-          </div>
-          <div class="field-wrap grid-item">
-            <label class="geo-label" for="geobox-maxLatitude">Maximum latitude</label>
-            <input type="number" step="0.000001" min="-90.0" max="90.0"
-                    class="field field-text <%= "required" if geobox_required %>" 
-                    id="geobox-maxLatitude" name="geoboxMaxLatitude" value="<%= params[:geoboxMaxLatitude] %>"
-                    <%= 'required' if geobox_required %>
-                    aria-describedby="maxLat-desc">
-              <span class="geo-desc" id="maxLat-desc">
-              A decimal between -90.0 and 90.0 (Ex: 42.886759)
-              <span class="hint">Southern Hemisphere is negative</span>
-            </span>
-          </div>
-        </div>
-      </fieldset>
-    </details>
-    <details id="geodistance-search-panel" class="form-panel" <%= "open" if params[:geodistance] == "true" %>>
-      <summary class="btn button-secondary" id="geodistance-summary">
-        <span id="geodistance-search-label"><%= geodistance_label %></span>
-      </summary>
-      <input id="geodistance-search-field" class="fieldset-toggle" type="hidden" name="geodistance"
-              value="<%= params[:geodistance] %>">
-      <fieldset>
-        <legend>Search within a distance of a geographic point</legend>
-        <p>* All fields in this section are required</p>
-        <div class="gridband layout-2c">
-          <div class="field-wrap grid-item">
-            <label class="geo-label" for="geodistance-latitude">Latitude</label>
-            <input type="number" step="0.000001" min="-90.0" max="90.0"
-                    class="field field-text <%= "required" if geodistance_required %>" 
-                    id="geodistance-latitude" name="geodistanceLatitude"
-                    value="<%= params[:geodistanceLatitude] %>" aria-describedby="lat-desc"
-                    <%= 'required' if geodistance_required %>
-                    aria-describedby="lat-desc">
-            <span class="geo-desc" id="lat-desc">
-              A decimal between -90.0 and 90.0 (Ex: 42.279594)
-              <span class="hint">Southern Hemisphere is negative</span>
-            </span>
-          </div>
-          <div class="field-wrap grid-item">
-            <label class="geo-label" for="geodistance-longitude">Longitude</label>
-              <input type="number" step="0.000001" min="-180.0" max="180.0"
-                      class="field field-text <%= "required" if geodistance_required %>" 
-                      id="geodistance-longitude" name="geodistanceLongitude"
-                      value="<%= params[:geodistanceLongitude] %>" aria-describedby="long-desc"
-                      <%= 'required' if geodistance_required %>
-                      aria-describedby="long-desc">
-            <span class="geo-desc" id="long-desc">
-              A decimal between -180.0 and 180.0 (Ex: -83.732124)
-              <span class="hint">Western Hemisphere is negative</span>
-            </span>
-          </div>
-          <div class="field-wrap grid-item">
-            <label class="geo-label" for="geodistance-distance">Distance from the location</label>
-            <input type="text" class="field field-text <%= "required" if geodistance_required %>"
-                    id="geodistance-distance" name="geodistanceDistance"
-                    value="<%= params[:geodistanceDistance] %>" aria-describedby="distance-desc"
-                    <%= 'required' if geodistance_required %>
-                    aria-describedby="distance-desc">
-            <span class="geo-desc" id="distance-desc">
-              Distance is in meters by default; add other units if preferred (Ex: '100km' or '50mi')
-            </span>
-          </div>
-        </div>
-      </fieldset>
-    </details>
-
-    <details id="advanced-search-panel" class="form-panel" <%= "open" if params[:advanced] == "true" %>>
-      <summary class="btn button-secondary" id="advanced-summary">
-        <span id="advanced-search-label"><%= advanced_label %></span>
-      </summary>
-      <input id="advanced-search-field" class="fieldset-toggle" type="hidden" name="advanced"
-             value="<%= params[:advanced] %>">
-      <div class="field-container">
-        <div class="field-wrap">
-          <label for="advanced-title" class="field-label">Title</label>
-          <input type="text" class="field field-text wide" id="advanced-title" name="title"
-                 value="<%= params[:title] %>">
-        </div>
+           class="field field-text basic-search-input" name="q"
+           title="Keyword anywhere" placeholder="Enter your search"
+           value="<%= params[:q] %>" required>
 
-        <div class="field-wrap">
-          <label for="advanced-contributors" class="field-label">Authors</label>
-          <input type="text" class="field field-text wide" id="advanced-contributors" name="contributors"
-                 value="<%= params[:contributors] %>">
-        </div>
-
-        <div class="field-wrap">
-          <label for="advanced-subjects" class="field-label">Subjects</label>
-          <input type="text" class="field field-text wide" id="advanced-subjects" name="subjects"
-                 value="<%= params[:subjects] %>">
-        </div>
-
-        <div class="field-wrap">
-          <label for="advanced-locations" class="field-label">Locations</label>
-          <input type="text" class="field field-text wide" id="advanced-locations" name="locations"
-                 value="<%= params[:locations] %>">
-        </div>
-      </div>
-    </details>
-    <% end %>
-  </div>
-
-  <div class="basic-search-submit">
-    <button type="submit" class="btn button-primary">Search</button>
+    <div class="basic-search-submit">
+      <button type="submit" class="btn button-primary">Search</button>
+    </div>
   </div>
 </form>