Merge pull request #113 from dod-ccpo/ui/fix-search-filters

Ui/fix search filters

scss/atat.scss

@@ -27,6 +27,7 @@
 @import 'components/modal';
 @import 'components/footer';
 @import 'components/progress_menu.scss';
+@import 'components/search_bar';
 
 @import 'sections/login';
 @import 'sections/request_approval';

scss/components/_search_bar.scss

@@ -0,0 +1,72 @@
+.search-bar {
+  @include grid-row;
+  @include panel-base;
+  @include panel-theme-default;
+  @include panel-margin;
+  padding: $gap;
+  flex-wrap: wrap;
+
+  .usa-input {
+    margin: 0;
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 100%;
+    height: $search-input-height;
+    position: relative;
+    margin-top: $gap;
+
+    @include media($large-screen) {
+      flex-shrink: 1;
+      flex-basis: auto;
+      margin-top: 0;
+      margin-left: $gap;
+    }
+
+    label {
+      @include hide;
+    }
+
+    &:first-child {
+      margin-left: 0;
+      margin-top: 0;
+    }
+  }
+
+  .search-input {
+    @include media($medium-screen) {
+      flex-basis: 50%;
+    }
+
+    @media (min-width:800px) and (max-width:900px) {
+      flex-basis: auto;
+    }
+
+    input[type='search'] {
+      width: auto;
+      height: $search-input-height;
+      width: calc(100% - #{$search-button-width});
+      max-width: none;
+      font-size: 1.6rem;
+    }
+
+    button {
+      position: absolute;
+      top: 0;
+      right: 0;
+      margin: 0;
+      padding: 0;
+      height: $search-input-height;
+      width: $search-button-width;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      text-align: center;
+
+      &:after {
+        content: url('/static/icons/search.svg');
+        display: inline-block;
+        width: 1.6rem;
+        height: 1.6rem;
+      }
+    }
+  }
+}

scss/core/_variables.scss

@@ -8,6 +8,8 @@ $topbar-height:           4.8rem;
 $icon-bar-width:          4.0rem;
 $icon-size-small:         2.4rem;
 $hover-transition-time:   0.2s;
+$search-input-height:     4.4rem;
+$search-button-width:     5.0rem;
 
 /*
  * USWDS Variables

static/icons/search.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M1 15l5.465-5.465M1 16c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l5.465-5.465c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-5.465 5.465C1.512 15.902 1.256 16 1 16zm9-4c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zm0-10C7.794 2 6 3.794 6 6s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M1 15l5.465-5.465M1 16c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l5.465-5.465c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-5.465 5.465C1.512 15.902 1.256 16 1 16zm9-4c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zm0-10C7.794 2 6 3.794 6 6s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4z" fill="#fff" fill-rule="nonzero"/></svg>

templates/requests.html.to

@@ -38,27 +38,25 @@
 
 <div class="col col--grow">
 
-  <div class='panel panel__actions'>
+  <form class='search-bar'>
-    <div class='row'>
+    <div class='usa-input search-input'>
-      <div class='col col--grow col--pad'>
+      <label for='requests-search'>Search requests by Order ID</label>
-        <form class="usa-search usa-search-small">
+      <input type='search' id='requests-search' name='requests-search' placeholder="Search by Order ID"/>
-          <label class="usa-sr-only" for="search-field-small">Search small</label>
-          <input id="search-field-small" type="search" name="search" placeholder="Search by Order ID">
       <button type="submit">
-            <span class="usa-sr-only">Search</span>
+        <span class="hide">Search</span>
       </button>
-        </form>
     </div>
-      <div class='col col--grow col--pad'>
+
-        <select id="filter_status" name="filter_status" required="">
+    <div class='usa-input'>
+      <label for='filter-status'>Filter requests by status</label>
+      <select id="filter-status" name="filter-status">
         <option value="" selected disabled>Filter by status</option>
         <option value="">Active</option>
         <option value="">Pending</option>
         <option value="">Denied</option>
       </select>
     </div>
-    </div>
+  </form>
-  </div>
 
   <div class='responsive-table-wrapper'>
     <table>

templates/workspace_members.html.to

@@ -3,7 +3,37 @@
 {% block workspace_content %}
 
 
-<div class='panel panel__actions'>
+<form class='search-bar'>
+  <div class='usa-input search-input'>
+    <label for='members-search'>Search members by name</label>
+    <input type='search' id='members-search' name='members-search' placeholder="Search by name"/>
+    <button type="submit">
+      <span class="hide">Search</span>
+    </button>
+  </div>
+
+  <div class='usa-input filter-input'>
+    <label for='filter-status'>Filter members by status</label>
+    <select id="filter-status" name="filter-status">
+      <option value="" selected disabled>Filter by status</option>
+      <option value="">Active</option>
+      <option value="">Pending</option>
+      <option value="">Denied</option>
+    </select>
+  </div>
+
+  <div class='usa-input filter-input'>
+    <label for='filter-role'>Filter members by role</label>
+    <select id="filter-role" name="filter-role">
+      <option value="" selected disabled>Filter by role</option>
+      <option value="">Admin</option>
+      <option value="">CCPO</option>
+      <option value="">Developer</option>
+    </select>
+  </div>
+</form>
+
+{# <div class='panel panel__actions'>
   <div class='row'>
     <div class='col col--grow col--pad'>
       <form class="usa-search usa-search-small">
@@ -31,10 +61,10 @@
       </select>
     </div>
   </div>
-</div>
+</div> #}
 
-<div class="panel">
+
-  <div class='responsive-table-wrapper'>
+<div class='responsive-table-wrapper'>
   <table>
     <thead>
       <tr>
@@ -55,9 +85,9 @@
       {% end %}
     </tbody>
   </table>
-  </div>
 </div>
 
 
+
 {% end %}