From 425a8247e28efcf8de040fb305f2228976c97d21 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Mon, 7 Jan 2019 12:22:46 +0000
Subject: [PATCH] adds desktop filters button and functionality
---
.../funds/base_submissions_table.html | 6 +--
.../javascript/apply/submission-filters.js | 19 +++-----
opentech/static_src/src/javascript/main.js | 6 +--
.../src/sass/apply/abstracts/_variables.scss | 7 +++
.../src/sass/apply/components/_button.scss | 4 --
.../src/sass/apply/components/_filters.scss | 24 +++++++---
.../src/sass/apply/components/_form.scss | 45 ++++++++++++-------
.../src/sass/public/abstracts/_variables.scss | 3 ++
8 files changed, 71 insertions(+), 43 deletions(-)
diff --git a/opentech/apply/funds/templates/funds/base_submissions_table.html b/opentech/apply/funds/templates/funds/base_submissions_table.html
index 43917fa7f..e4ed9a0a5 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 fe4f36b9c..0186b0c38 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 8356fe85e..40b87e15c 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 8f6c71137..f49d745e8 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 32efcfb5d..64cb8bdcc 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 812e3758f..8c496efd0 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 44c94c9ae..39ea97da1 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 8f6c71137..8545b9184 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;
--
GitLab