Merge pull request #496 from MoeRichert-USDA/update-navigation

add search page

_includes/components/search.html

@@ -1,10 +1,19 @@
-<form accept-charset="UTF-8" action="https://search.usa.gov/search" id="search_form" method="get"
+{%- if include.queryid %}
+{%- assign queryid = include.queryid  %}
+{%- assign affid = "affiliate_2" %}
+{%- assign formid = "search_form_2" %}
+{%- else %}
+{%- assign queryid = "query" %}
+{%- assign affid = "affiliate" %}
+{%- assign formid = "search_form" %}
+{%- endif %}
+<form accept-charset="UTF-8" action="https://search.usa.gov/search" id="{{ formid }}" method="get"
 class="usa-search usa-search--small js-search-form">
 <input name="utf8" type="hidden" value="&#x2713;" />
-<input type="hidden" name="affiliate" id="affiliate" value="{{ site.search_site_handle }}" />
+<input type="hidden" name="affiliate" id="{{ affid }}" value="{{ site.search_site_handle }}" />
 <div role="search">
-  <label for="query" class="usa-sr-only">Enter search terms</label>
-  <input autocomplete="off" class="usa-input usagov-search-autocomplete" id="query" name="query"
+  <label for="{{ queryid }}" class="usa-sr-only">Enter search terms</label>
+  <input autocomplete="off" class="usa-input usagov-search-autocomplete" id="{{ queryid }}" name="query"
     type="search" />
   <button class="usa-button" type="submit" name="commit">
     <img src="{{ site.baseurl }}/assets/uswds/img/usa-icons-bg/search--white.svg"

_layouts/nav.html

@@ -108,8 +108,8 @@
         {% include sidenav.html links=sidenav %}
     </div>
 
-    <div class="usa-layout-docs__main desktop:grid-col-9">
-        {% include breadcrumb.html %}
+    <div class="usa-layout-docs__main desktop:grid-col-9{% if page.nobreadcrumb %} padding-top-8{% endif %}">
+        {% unless page.nobreadcrumb %}{% include breadcrumb.html %}{% endunless %}
         <main class="{{ layout.main.class }}" id="main-content">
 
         {{ content }}

_layouts/search.html

@@ -0,0 +1,13 @@
+---
+layout: page
+main:
+class: usa-layout-docs usa-layout-docs__main usa-prose
+---
+
+
+            <div class="grid-row usa-section--light margin-2 padding-2">
+            <div class="width-full display-flex flex-column flex-align-center"><div class="maxw-mobile">{% include components/search.html queryid='searchpage' %}</div></div>
+        </div>
+            {{ content }}
+
+            <br>

_uswds/sass/custom/nav.scss

@@ -8,4 +8,24 @@
 .guide-nav.usa-current{
     @include u-border-top(0);
     @include u-border-bottom(2px);
+}
+
+// Map for high contrast search icon
+$search-icon2: (
+  "name": "search",
+  "color": currentColor,
+  "svg-height": 20,
+  "svg-width": 20,
+  "position-x": center,
+  "position-y": center,
+  "height": units(2.5),
+);
+
+.sidenav-search{
+    @include u-bg('primary-lighter');
+    @include u-text('center');
+    @include place-icon($search-icon2, "before");
+    &:before{
+        margin-right: 6px;
+    }
 }

_uswds/sass/custom/overrides.scss

@@ -16,4 +16,8 @@
 
  @mixin pad-05 {
    padding: .5em !important;
+}
+
+.page-contents .usa-search__submit-icon{ 
+    padding: 0 !important;
 }

pages/search.md

@@ -0,0 +1,9 @@
+---
+title: Search SCINet
+layout: search
+permalink: /search
+nobreadcrumb: true
+
+sidenav_link: /guides/
+
+---