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

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' %}">

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);

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;
+    }
+}