From ee564958a15a2aae87112afd2317d645ba974526 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Mon, 7 Jan 2019 16:33:36 +0000
Subject: [PATCH] changes filters button alignment
---
.../funds/base_submissions_table.html | 36 ++++++++++---------
.../src/sass/apply/components/_button.scss | 24 ++++++++++---
.../src/sass/apply/components/_wrapper.scss | 7 ++++
3 files changed, 47 insertions(+), 20 deletions(-)
diff --git a/opentech/apply/funds/templates/funds/base_submissions_table.html b/opentech/apply/funds/templates/funds/base_submissions_table.html
index e4ed9a0a5..d99ee9082 100644
--- a/opentech/apply/funds/templates/funds/base_submissions_table.html
+++ b/opentech/apply/funds/templates/funds/base_submissions_table.html
@@ -8,25 +8,29 @@
{% block content %}
{% block table %}
+ <div class="wrapper wrapper--table-actions">
{% if table.data or active_filters %}
- <div class="button button--filters button--contains-icons js-toggle-filters">Filter By</div>
+ <div class="button button--filters button--contains-icons js-toggle-filters">Filters</div>
+ {% endif %}
+ </div>
- <div class="filters">
- <div class="filters__header">
- <div class="js-clear-filters">Clear</div>
- <div>Filter by</div>
- <div class="js-close-filters">Close</div>
- </div>
+ {% if table.data or active_filters %}
+ <div class="filters">
+ <div class="filters__header">
+ <div class="js-clear-filters">Clear</div>
+ <div>Filter by</div>
+ <div class="js-close-filters">Close</div>
+ </div>
- <form action="" method="get" class="form form--filters">
- <ul class="form__filters select2">
- {{ filter.form.as_ul }}
- <li>
- <button class="button button--primary" type="submit" value="Filter">Filter</button>
- </li>
- </ul>
- </form>
- </div>
+ <form action="" method="get" class="form form--filters">
+ <ul class="form__filters select2">
+ {{ filter.form.as_ul }}
+ <li>
+ <button class="button button--primary" type="submit" value="Filter">Filter</button>
+ </li>
+ </ul>
+ </form>
+ </div>
{% endif %}
{% render_table table %}
diff --git a/opentech/static_src/src/sass/apply/components/_button.scss b/opentech/static_src/src/sass/apply/components/_button.scss
index 64cb8bdcc..932b2d80e 100644
--- a/opentech/static_src/src/sass/apply/components/_button.scss
+++ b/opentech/static_src/src/sass/apply/components/_button.scss
@@ -79,10 +79,26 @@
border: 1px solid $color--light-mid-grey;
transition: none;
- &:focus,
- &:active,
- &:hover {
- background: url('./../../images/filters.svg') $color--white no-repeat 93% center;
+ @include media-query(tablet-landscape) {
+ background: none;
+ padding: 0;
+ border: 0;
+ align-items: center;
+ justify-content: flex-start;
+ max-width: initial;
+
+ &::before {
+ content: '';
+ background-image: url('./../../images/filters.svg');
+ background-color: transparent;
+ background-position: left center;
+ transform: rotate(90deg);
+ background-size: 20px;
+ width: 20px;
+ height: 20px;
+ display: inline-block;
+ margin-right: 10px;
+ }
}
}
diff --git a/opentech/static_src/src/sass/apply/components/_wrapper.scss b/opentech/static_src/src/sass/apply/components/_wrapper.scss
index cf14c2fe9..27dbe6aeb 100644
--- a/opentech/static_src/src/sass/apply/components/_wrapper.scss
+++ b/opentech/static_src/src/sass/apply/components/_wrapper.scss
@@ -265,4 +265,11 @@
&--reviews-table {
overflow-x: scroll;
}
+
+ &--table-actions {
+ @include media-query(tablet-landscape) {
+ display: flex;
+ justify-content: flex-end;
+ }
+ }
}
--
GitLab