restructure markup so that search bar isn't covering download button

18F · Mar 11, 2016 · 58d8b9b · 58d8b9b
1 parent 4f8207d
commit 58d8b9b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git a/forecast-admin/forecast/opportunities/templates/main.html b/forecast-admin/forecast/opportunities/templates/main.html
@@ -4,31 +4,31 @@
 {% block content %}
 
 <div id="results">
-  <form class="usa-search usa-search-big">
+  <section class="usa-grid-full">
     <div class="button-download_wrapper usa-width-one-fourth">
-
         <a href="api/opportunities/?format=csv">
-          <button class="usa-button-outline button-download">
+          <button class="usa-button usa-button-outline button-download"
+            style="-webkit-appearance: button">
             <icon class="button-download_icon fa fa-download"></icon>
             <span class="button-download_text">Download as spreadsheet</span>
           </button>
         </a>
     </div>
-
-    <div role="search" class="usa-width-three-fourths search-wrapper">
+    <form role="search" class="usa-search usa-search-big usa-width-three-fourths search-wrapper">
       <label for="search" class="usa-sr-only" for="search-field-big">Search opportunities</label>
       <input class="search" id="search-field-big" type="search" name="search" placeholder="Enter keyword">
       <button type="button" id="filter-button" class="usa-search usa-search-submit " data-sort="description naics">
         <span class="usa-search-submit-text">Search</span>
       </button>
 
-    </div>
-  </form>
+    </form>
+  </section>
 
 
   <div class="usa-grid grid-inner">
 
     <drawer class="usa-width-one-fourth drawer" aria-hidden="true">
+
       <button class="fa fa-close" data-drawer-toggle="close"></button>
 
       {% include 'includes/filters.html' %}

diff --git a/forecast-admin/forecast/static/assets/_scss/elements/_buttons.scss b/forecast-admin/forecast/static/assets/_scss/elements/_buttons.scss
@@ -188,6 +188,8 @@ button,
 
 // Custom
 .button-download {
+  @extend button;
+
   border-radius: 0;
   display: table-row;
   margin: 0;

diff --git a/forecast-admin/forecast/static/assets/js/src/pagination.js b/forecast-admin/forecast/static/assets/js/src/pagination.js
@@ -143,7 +143,7 @@ $(document).ready(function() {
       _.each(_.keys(queries), function(key) {
         urlQuery += "&"+key+"="+queries[key];
       });
-      $(".button-download_wrapper>a").attr("href",urlStem+urlQuery);
+      $(".button-download_wrapper a").attr("href",urlStem+urlQuery);
       listObj.filter(function(item) {
         return (filterCheck(item, queries));
       });
@@ -155,7 +155,6 @@ $(document).ready(function() {
 
   // Search within list of opportunities
   $(".search").keyup(function () {
-    console.log('hello');
     urlQuery = "";
     if ($(this).val().length > 0) {
       queries.description = $(this).val();
@@ -165,7 +164,7 @@ $(document).ready(function() {
     _.each(_.keys(queries), function(key) {
       urlQuery += "&"+key+"="+queries[key];
     });
-    $(".button-download_wrapper>a").attr("href",urlStem+urlQuery);
+    $(".button-download_wrapper a").attr("href",urlStem+urlQuery);
     listObj.filter(function(item) {
       return (filterCheck(item, queries));
     });
@@ -196,7 +195,7 @@ $(document).ready(function() {
     _.each(_.keys(queries), function(key) {
       urlQuery += "&"+key+"="+queries[key];
     });
-    $(".button-download_wrapper>a").attr("href",urlStem+urlQuery);
+    $(".button-download_wrapper a").attr("href",urlStem+urlQuery);
     listObj.filter(function(item) {
       return (filterCheck(item, queries));
     });
@@ -210,7 +209,7 @@ $(document).ready(function() {
     _.each(_.keys(queries), function(key) {
       urlQuery += "&"+key+"="+queries[key];
     });
-    $(".button-download_wrapper>a").attr("href",urlStem+urlQuery);
+    $(".button-download_wrapper a").attr("href",urlStem+urlQuery);
     listObj.filter(function(item) {
       return (filterCheck(item, queries));
     });