diff --git a/opentech/apply/funds/templates/funds/base_submissions_table.html b/opentech/apply/funds/templates/funds/base_submissions_table.html
index 43917fa7f2757879bd9163bc8f1a95aabc281c8a..e4ed9a0a53ff968ae8c2730d5dc43ce2f2a77143 100644
--- a/opentech/apply/funds/templates/funds/base_submissions_table.html
+++ b/opentech/apply/funds/templates/funds/base_submissions_table.html
@@ -9,9 +9,9 @@
{% block content %}
{% block table %}
{% if table.data or active_filters %}
- <div class="button button--filters button--contains-icons js-open-filters">Filter By</div>
+ <div class="button button--filters button--contains-icons js-toggle-filters">Filter By</div>
- <div class="filters js-filter-wrapper">
+ <div class="filters">
<div class="filters__header">
<div class="js-clear-filters">Clear</div>
<div>Filter by</div>
@@ -19,7 +19,7 @@
</div>
<form action="" method="get" class="form form--filters">
- <ul class="form__filters select2 js-filter-list">
+ <ul class="form__filters select2">
{{ filter.form.as_ul }}
<li>
<button class="button button--primary" type="submit" value="Filter">Filter</button>
diff --git a/opentech/static_src/src/javascript/apply/submission-filters.js b/opentech/static_src/src/javascript/apply/submission-filters.js
index fe4f36b9c2e7368c7675f98eec0918c616c3dda9..0186b0c3819cad743e4de1f1877abb196b508953 100644
--- a/opentech/static_src/src/javascript/apply/submission-filters.js
+++ b/opentech/static_src/src/javascript/apply/submission-filters.js
@@ -2,11 +2,10 @@
'use strict';
- const $openButton = $('.js-open-filters');
+ const $toggleButton = $('.js-toggle-filters');
const $closeButton = $('.js-close-filters');
const $clearButton = $('.js-clear-filters');
- const $filterList = $('.js-filter-list');
- const $filterWrapper = $('.js-filter-wrapper');
+ const activeClass = 'filters-open';
// Add active class to filters - dropdowns are dynamically appended to the dom,
// so we have to listen for the event higher up
@@ -34,18 +33,14 @@
}
});
- // open mobile filters
- $openButton.on('click', (e) => {
- $('body').addClass('no-scroll');
- $(e.target).next($filterWrapper).addClass('is-open');
- $filterList.addClass('form__filters--mobile');
+ // toggle filters
+ $toggleButton.on('click', (e) => {
+ $('body').toggleClass(activeClass);
});
- // close mobile filters
+ // close filters on mobile
$closeButton.on('click', (e) => {
- $('body').removeClass('no-scroll');
- $(e.target).closest($filterWrapper).removeClass('is-open');
- $filterList.removeClass('form__filters--mobile');
+ $('body').removeClass(activeClass);
});
// clear all filters
diff --git a/opentech/static_src/src/javascript/main.js b/opentech/static_src/src/javascript/main.js
index 8356fe85e95e43e5fcd325c6c5619b00a7019f0b..40b87e15ce74d10b4c311dd8aeee31ac179c6241 100644
--- a/opentech/static_src/src/javascript/main.js
+++ b/opentech/static_src/src/javascript/main.js
@@ -137,15 +137,13 @@
// reset mobile filters if they're open past the tablet breakpoint
$(window).resize(function resize() {
- if ($(window).width() < 768) {
+ if ($(window).width() < 1024) {
+ $('body').removeClass('filters-open');
$('.select2').on('click', (e) => {
mobileFilterPadding(e.target);
});
}
else {
- $('body').removeClass('no-scroll');
- $('.js-filter-wrapper').removeClass('is-open');
- $('.js-filter-list').removeClass('form__filters--mobile');
$('.js-actions-toggle').removeClass('is-active');
$('.js-actions-sidebar').removeClass('is-visible');
$('.tr--parent.is-expanded').removeClass('is-expanded');
diff --git a/opentech/static_src/src/sass/apply/abstracts/_variables.scss b/opentech/static_src/src/sass/apply/abstracts/_variables.scss
index 8f6c7113797a6ed556b4e59ef7446e7f88156958..f49d745e8984da9dd0ccaff6c02c294279b91ab0 100644
--- a/opentech/static_src/src/sass/apply/abstracts/_variables.scss
+++ b/opentech/static_src/src/sass/apply/abstracts/_variables.scss
@@ -98,6 +98,13 @@ $breakpoints: (
// Transition
$transition: .25s ease-out;
$quick-transition: .15s ease;
+$medium-transition: .5s ease;
+
+// Delays
+$base-delay: 30ms;
// Spacing
$mobile-gutter: 20px;
+
+// Filters
+$filter-dropdown: '.select2 .select2-selection.select2-selection--single';
diff --git a/opentech/static_src/src/sass/apply/components/_button.scss b/opentech/static_src/src/sass/apply/components/_button.scss
index 32efcfb5da86bc49602c897f429e5cad93fc46ab..64cb8bdccc33c8a4a678b52d598d05a7aee0694d 100644
--- a/opentech/static_src/src/sass/apply/components/_button.scss
+++ b/opentech/static_src/src/sass/apply/components/_button.scss
@@ -84,10 +84,6 @@
&:hover {
background: url('./../../images/filters.svg') $color--white no-repeat 93% center;
}
-
- @include media-query(tablet-landscape) {
- display: none;
- }
}
&--filters-header {
diff --git a/opentech/static_src/src/sass/apply/components/_filters.scss b/opentech/static_src/src/sass/apply/components/_filters.scss
index 812e3758fdda9463815598c4d655fe4ae916d40f..8c496efd0f17ceb6c15c9c3f35c327258346b356 100644
--- a/opentech/static_src/src/sass/apply/components/_filters.scss
+++ b/opentech/static_src/src/sass/apply/components/_filters.scss
@@ -1,11 +1,7 @@
.filters {
display: none;
- @include media-query(tablet-landscape) {
- display: block;
- }
-
- &.is-open {
+ .filters-open & {
position: fixed;
top: 0;
right: 0;
@@ -18,6 +14,24 @@
background: $color--white;
}
+ @include media-query(tablet-landscape) {
+ display: block;
+ max-height: 0;
+ transition: max-height $medium-transition;
+ transition-delay: $base-delay;
+
+ .filters-open & {
+ position: relative;
+ top: auto;
+ left: auto;
+ right: auto;
+ bottom: auto;
+ height: auto;
+ background: transparent;
+ max-height: 200px;
+ }
+ }
+
&__header {
display: flex;
align-items: center;
diff --git a/opentech/static_src/src/sass/apply/components/_form.scss b/opentech/static_src/src/sass/apply/components/_form.scss
index 44c94c9aea1d60515fde8b2ce023234235c57936..39ea97da13c84da001110087f7bc021ad7e606aa 100644
--- a/opentech/static_src/src/sass/apply/components/_form.scss
+++ b/opentech/static_src/src/sass/apply/components/_form.scss
@@ -107,8 +107,32 @@
}
&__filters {
- display: flex;
- padding: 10px 0 30px;
+ #{$filter-dropdown} {
+ border: 0;
+ border-top: 1px solid $color--mid-grey;
+
+ &.is-active {
+ font-weight: $weight--normal;
+ background-color: transparentize($color--primary, .9);
+ border-color: $color--mid-grey;
+ }
+
+ @include media-query(tablet-landscape) {
+ border: 1px solid $color--mid-grey;
+ }
+ }
+
+ @include media-query(tablet-landscape) {
+ display: flex;
+ padding: 10px 0 30px;
+ opacity: 0;
+ transition: opacity $transition;
+
+ .filters-open & {
+ opacity: 1;
+ transition-delay: $base-delay * 10;
+ }
+ }
label {
display: none;
@@ -116,25 +140,16 @@
// so the form can be output in any tag
> * {
- flex-basis: 225px;
- margin-right: 10px;
+ @include media-query(tablet-landscape) {
+ flex-basis: 225px;
+ margin-right: 10px;
+ }
}
&--mobile {
flex-direction: column;
padding: 0;
- .select2 .select2-selection.select2-selection--single { // sass-lint:disable-line force-element-nesting
- border: 0;
- border-top: 1px solid $color--mid-grey;
-
- &.is-active {
- font-weight: $weight--normal;
- background-color: transparentize($color--primary, .9);
- border-color: $color--mid-grey;
- }
- }
-
// so the form can be output in any tag
> * {
flex-basis: auto;
diff --git a/opentech/static_src/src/sass/public/abstracts/_variables.scss b/opentech/static_src/src/sass/public/abstracts/_variables.scss
index 8f6c7113797a6ed556b4e59ef7446e7f88156958..8545b9184473fddf3b1265333fe22b842cc6d0cd 100644
--- a/opentech/static_src/src/sass/public/abstracts/_variables.scss
+++ b/opentech/static_src/src/sass/public/abstracts/_variables.scss
@@ -99,5 +99,8 @@ $breakpoints: (
$transition: .25s ease-out;
$quick-transition: .15s ease;
+// Delays
+$base-delay: 30ms;
+
// Spacing
$mobile-gutter: 20px;