diff --git a/opentech/public/news/templates/news/news_index.html b/opentech/public/news/templates/news/news_index.html index 5188546f483ff3522c27ac7152180126c31e5c33..deceffbd78fde0d2591f6fa1fade967d0a2b091e 100644 --- a/opentech/public/news/templates/news/news_index.html +++ b/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 %} diff --git a/opentech/static_src/src/sass/public/components/_form.scss b/opentech/static_src/src/sass/public/components/_form.scss index d8d2e59d39c59787e54339a453f01abfa86a1a89..f46eaa8a2364692ad16e7d54aae83de71307859c 100644 --- a/opentech/static_src/src/sass/public/components/_form.scss +++ b/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; } } diff --git a/opentech/static_src/src/sass/public/components/_link.scss b/opentech/static_src/src/sass/public/components/_link.scss index 680d0d5bdcfe8c2e628e048177117e464667a8ab..825ea267041ccc7bcd37576fb65c3cd21fbd78ca 100644 --- a/opentech/static_src/src/sass/public/components/_link.scss +++ b/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 {