Merge pull request #450 from OpenTechFund/bugfix/278-make-news-filter-work

Add the button to filter the news articles and look at styling

opentech/public/news/templates/news/news_index.html

@@ -6,7 +6,7 @@
 <div class="wrapper wrapper--small wrapper--inner-space-medium">
 
         <form class="form" method="GET">
-            <div class="form__select form__select--narrow">
+            <div class="form__select form__select--narrow form__select--inline">
                 <select name="news_type">
                     <option value="">All</option>
                     {% for news_type in news_types %}
@@ -14,6 +14,7 @@
                     {% endfor %}
                 </select>
             </div>
+            <input class="link link--button link--button__stretch" type="submit" value="Filter">
         </form>
 
         {% if news %}

opentech/static_src/src/sass/public/components/_form.scss

@@ -146,7 +146,15 @@
         }
 
         &--narrow {
-            max-width: 280px;
+            @include media-query(mob-landscape) {
+                max-width: 280px;
+            }
+            width: 100%;
+            max-width: none;
+        }
+
+        &--inline {
+            display: inline-block;
         }
     }
 

opentech/static_src/src/sass/public/components/_link.scss

@@ -2,6 +2,15 @@
     &--button {
         @include button($color--light-blue, $color--dark-blue);
         display: inline-block;
+
+        &__stretch {
+            width: 100%;
+
+            @include media-query(mob-landscape) {
+                width: inherit;
+            }
+        }
+
     }
 
     &--button-secondary {