From a41f18f1979efa5fb85ae799c3948a1c3b164600 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Tue, 20 Feb 2018 16:01:04 +0000
Subject: [PATCH] adding mobile filters button
---
.../templates/dashboard/dashboard.html | 4 ++++
opentech/static_src/src/javascript/main.js | 6 ++++++
.../src/sass/apply/components/_button.scss | 16 ++++++++++++++
.../src/sass/apply/components/_form.scss | 21 +++++++++++++++++++
.../src/sass/apply/components/_icon.scss | 6 ++++++
opentech/templates/includes/sprites.html | 9 ++++++++
6 files changed, 62 insertions(+)
diff --git a/opentech/apply/dashboard/templates/dashboard/dashboard.html b/opentech/apply/dashboard/templates/dashboard/dashboard.html
index ef677534c..57dadf754 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 3c276e5ef..bb197ac89 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 7a8dc3287..ab53ad0d3 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 7173240aa..10e5e671d 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 8688dfbad..9fb2579cb 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 9b37d9406..7da5f5399 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>
--
GitLab