diff --git a/opentech/apply/dashboard/templates/dashboard/dashboard.html b/opentech/apply/dashboard/templates/dashboard/dashboard.html index ef677534c5cbb1ee718d715bc9844c1425ea78b4..57dadf754d69d2989158c308cb79a05fbed29ccd 100644 --- a/opentech/apply/dashboard/templates/dashboard/dashboard.html +++ b/opentech/apply/dashboard/templates/dashboard/dashboard.html @@ -20,6 +20,10 @@ <button class="button button--primary" type="submit" value="Filter">Filter</button> </ul> </form> + <div class="button button--filters button--contains-icons js-open-filters"> + Filter By + <svg class="icon icon--filters icon--small"><use xlink:href="#filters"></use></svg> + </div> {% endif %} {% render_table table %} </div> diff --git a/opentech/static_src/src/javascript/main.js b/opentech/static_src/src/javascript/main.js index 3c276e5efaf505b4f372878dbce9c134bb0fb189..bb197ac89f1e6b126df4a1359d01dc095708c760 100755 --- a/opentech/static_src/src/javascript/main.js +++ b/opentech/static_src/src/javascript/main.js @@ -50,6 +50,12 @@ $(function () { const dropdown = e.target.nextElementSibling.firstChild.firstChild; (dropdown.classList.contains('is-active')) ? dropdown.classList.remove('is-active') : null; }); + + // open mobile filters + $('.js-open-filters').on('click', (e) => { + e.target.nextElementSibling.classList.add('is-open'); + $('.js-filter-list').addClass('form__filters--mobile'); + }); }); // wait for DOM content to load before checking for select2 diff --git a/opentech/static_src/src/sass/apply/components/_button.scss b/opentech/static_src/src/sass/apply/components/_button.scss index 7a8dc3287a769c76dd180ab3a661e12c2eee7c92..ab53ad0d31defd4f86e9e76b123b64b53a09d52c 100644 --- a/opentech/static_src/src/sass/apply/components/_button.scss +++ b/opentech/static_src/src/sass/apply/components/_button.scss @@ -38,5 +38,21 @@ color: $color--white; } } + + &--filters { + @include button($color--white, $color--white); + display: flex; + justify-content: space-between; + max-width: 300px; + padding: 15px 20px; + margin-bottom: 20px; + font-weight: $weight--normal; + color: $color--default; + border-color: $color--light-mid-grey; + + @include media-query(tablet-portrait) { + display: none; + } + } } diff --git a/opentech/static_src/src/sass/apply/components/_form.scss b/opentech/static_src/src/sass/apply/components/_form.scss index 7173240aaa3627dde89db88e1f7d406932f192b3..10e5e671db7b966dbf7bfcb0b43d97dc75921d9d 100644 --- a/opentech/static_src/src/sass/apply/components/_form.scss +++ b/opentech/static_src/src/sass/apply/components/_form.scss @@ -13,6 +13,27 @@ flex-basis: 215px; margin-right: 10px; } + + &--mobile { + flex-direction: column; + padding: 0; + + .select2 .select2-selection.select2-selection--single { + border: 0; + border-top: 1px solid $color--mid-grey; + + &.is-active { + font-weight: $weight--normal; + background-color: transparentize($color--primary, 0.9); + border-color: $color--mid-grey; + } + } + + > * { + flex-basis: auto; + margin: 0; + } + } } } diff --git a/opentech/static_src/src/sass/apply/components/_icon.scss b/opentech/static_src/src/sass/apply/components/_icon.scss index 8688dfbadf1e42d1c56dddb66d84b52b773891b2..9fb2579cb95879aef5507c15058d31089588ca2d 100644 --- a/opentech/static_src/src/sass/apply/components/_icon.scss +++ b/opentech/static_src/src/sass/apply/components/_icon.scss @@ -51,4 +51,10 @@ width: 14px; height: 14px; } + + &--filters { + width: 16px; + height: 16px; + fill: $color--primary; + } } diff --git a/opentech/templates/includes/sprites.html b/opentech/templates/includes/sprites.html index 9b37d94069cc4082c9e940b2a86a64663227fb6d..7da5f5399d8ba3e398ef46166de43e13dd70e8ff 100644 --- a/opentech/templates/includes/sprites.html +++ b/opentech/templates/includes/sprites.html @@ -177,4 +177,13 @@ <path opacity=".75" d="M54 165h55v-55H54z" /> </g> </symbol> + + <symbol id="filters" viewBox="0 0 16 16"> + <g transform="rotate(90 8 8)" fill-rule="evenodd"> + <path d="M0 1.28h16V3.2H0zM0 7.04h16v1.92H0zM0 12.8h16v1.92H0z" /> + <circle transform="rotate(90 4.8 13.76)" cx="4.8" cy="13.76" r="2.24" /> + <circle transform="rotate(90 11.84 8)" cx="11.84" cy="8" r="2.24" /> + <circle transform="rotate(90 4.8 2.24)" cx="4.8" cy="2.24" r="2.24" /> + </g> + </symbol> </svg>