Skip to content
Snippets Groups Projects
Commit 425a8247 authored by Chris Lawton's avatar Chris Lawton
Browse files

adds desktop filters button and functionality

parent f073dc37
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 71 additions and 43 deletions
opentech/apply/funds/templates/funds/base_submissions_table.html
+ 3
− 3
View file @ 425a8247
......@@ -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>
......
opentech/static_src/src/javascript/apply/submission-filters.js
+ 7
− 12
View file @ 425a8247
......@@ -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
......
opentech/static_src/src/javascript/main.js
+ 2
− 4
View file @ 425a8247
......@@ -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');
......
opentech/static_src/src/sass/apply/abstracts/_variables.scss
+ 7
− 0
View file @ 425a8247
......@@ -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';
opentech/static_src/src/sass/apply/components/_button.scss
+ 0
− 4
View file @ 425a8247
......@@ -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 {
......
opentech/static_src/src/sass/apply/components/_filters.scss
+ 19
− 5
View file @ 425a8247
.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;
......
opentech/static_src/src/sass/apply/components/_form.scss
+ 30
− 15
View file @ 425a8247
......@@ -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;
......
opentech/static_src/src/sass/public/abstracts/_variables.scss
+ 3
− 0
View file @ 425a8247
......@@ -99,5 +99,8 @@ $breakpoints: (
$transition: .25s ease-out;
$quick-transition: .15s ease;
// Delays
$base-delay: 30ms;
// Spacing
$mobile-gutter: 20px;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment