From 71ddd5d079056dfe51e678288fd154411caedd42 Mon Sep 17 00:00:00 2001
From: gmurtaza00 <111306331+gmurtaza00@users.noreply.github.com>
Date: Wed, 26 Apr 2023 13:23:50 -0400
Subject: [PATCH] Fixed filter presentation on small screens (#3346)
Fixed filter presentation on small screen. It is close by default and
filters options will show when **filters** button is clicked.
Closes #3345
---
.../funds/includes/table_filter_and_search.html | 1 +
.../src/javascript/apply/submission-filters.js | 9 ++++++++-
hypha/static_src/src/sass/apply/components/_filters.scss | 6 ++++++
3 files changed, 15 insertions(+), 1 deletion(-)
diff --git a/hypha/apply/funds/templates/funds/includes/table_filter_and_search.html b/hypha/apply/funds/templates/funds/includes/table_filter_and_search.html
index baff51884..6d35625fa 100644
--- a/hypha/apply/funds/templates/funds/includes/table_filter_and_search.html
+++ b/hypha/apply/funds/templates/funds/includes/table_filter_and_search.html
@@ -60,6 +60,7 @@
<button class="button button--filters js-toggle-filters">{% trans "Filters" %}</button>
{% endif %}
+ <button class="button button--filters js-toggle-filters" id="show-filters-button">{% trans "Filters" %}</button>
{% if use_search|default:False %}
<form action="{{ search_action }}" method="get" role="search" class="form form--search-desktop">
<button class="button button--search" type="submit" aria-label="{% trans 'Search' %}">
diff --git a/hypha/static_src/src/javascript/apply/submission-filters.js b/hypha/static_src/src/javascript/apply/submission-filters.js
index d751eb514..585b31eff 100644
--- a/hypha/static_src/src/javascript/apply/submission-filters.js
+++ b/hypha/static_src/src/javascript/apply/submission-filters.js
@@ -148,7 +148,7 @@
$(window).resize(function resize() {
if ($(window).width() < 1024) {
// close the filters if open when reducing the window size
- $('body').removeClass('filters-open');
+ $('.filters').removeClass('filters-open');
// update filter button text
$('.js-toggle-filters').text('Filters');
@@ -158,6 +158,13 @@
mobileFilterPadding(e.target);
});
}
+ else {
+ $('.filters').addClass('filters-open');
+ }
}).trigger('resize');
+ $('#show-filters-button').on('click', () => {
+ $('.filters').addClass('filters-open');
+ });
+
})(jQuery);
diff --git a/hypha/static_src/src/sass/apply/components/_filters.scss b/hypha/static_src/src/sass/apply/components/_filters.scss
index 089c17d1f..9ef9a2d25 100644
--- a/hypha/static_src/src/sass/apply/components/_filters.scss
+++ b/hypha/static_src/src/sass/apply/components/_filters.scss
@@ -61,3 +61,9 @@
background: transparent;
}
}
+// stylelint-disable selector-max-id
+#show-filters-button {
+ @include media-query(tablet-landscape) {
+ display: none;
+ }
+}
--
GitLab