diff --git a/opentech/apply/funds/templates/funds/base_submissions_table.html b/opentech/apply/funds/templates/funds/base_submissions_table.html index e4ed9a0a53ff968ae8c2730d5dc43ce2f2a77143..d99ee90829abcc01fa9c180824ffbdd1e6dfa86c 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 64cb8bdccc33c8a4a678b52d598d05a7aee0694d..932b2d80e5d264b39d9a6f91f379168bee12b7e4 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 cf14c2fe9e3c99c34137f3c664e107db9a940445..27dbe6aebaa95adb0b41a2e31e2ebea49e260a73 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; + } + } }