Extract filters styles and template from report to its own component

client/scss/components/_filters.scss

@@ -0,0 +1,35 @@
+.filterable {
+  display: grid;
+  grid-template-columns: auto 300px;
+  grid-column-gap: 50px;
+
+  &__filters {
+    grid-column-start: col-start -2 col-end -1;
+
+    button[type='submit'] {
+      display: block;
+      margin-bottom: 20px;
+    }
+
+    input[type='checkbox'] {
+      display: block;
+      margin-bottom: 10px;
+    }
+
+    // Get rid of Wagtail's overrides
+    label {
+      float: unset;
+      display: block;
+      width: unset;
+      padding-top: 1.2em;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    grid-template-columns: auto;
+
+    &__filters {
+      grid-row: 1;
+    }
+  }
+}

client/scss/core.scss

@@ -117,6 +117,7 @@ These are classes for components.
 @import 'components/chooser';
 @import 'components/tag';
 @import 'components/listing';
+@import 'components/filters';
 @import 'components/messages';
 @import 'components/messages.capability';
 @import 'components/messages.status';

client/scss/layouts/_report.scss

@@ -1,6 +1,5 @@
 .report {
   display: grid;
-  grid-template-columns: auto;
   grid-column-gap: 50px;
 
   &:not(&--no-margin) {
@@ -8,10 +7,6 @@
     margin-inline-end: 50px;
   }
 
-  &--has-filters {
-    grid-template-columns: auto 300px;
-  }
-
   &__results {
     grid-column-start: col-start 1 col-end 2;
 
@@ -28,28 +23,6 @@
     }
   }
 
-  &__filters {
-    grid-column-start: col-start -2 col-end -1;
-
-    button[type='submit'] {
-      display: block;
-      margin-bottom: 20px;
-    }
-
-    input[type='checkbox'] {
-      display: block;
-      margin-bottom: 10px;
-    }
-
-    // Get rid of Wagtail's overrides
-    label {
-      float: unset;
-      display: block;
-      width: unset;
-      padding-top: 1.2em;
-    }
-  }
-
   &__actions > div {
     float: right;
     display: block;
@@ -57,14 +30,6 @@
   }
 
   @include media-breakpoint-down(sm) {
-    &--has-filters {
-      grid-template-columns: auto;
-    }
-
-    &__filters {
-      grid-row: 1;
-    }
-
     form {
       margin-bottom: 1em;
     }

wagtail/admin/templates/wagtailadmin/reports/base_report.html

@@ -21,7 +21,7 @@
     {% endfragment %}
 
     {% include "wagtailadmin/shared/header.html" with title=title icon=header_icon merged=1 extra_actions=report_actions %}
-    <div class="report{% if filters %} report--has-filters{% endif %}">
+    <div class="report{% if filters %} filterable{% endif %}">
         <div class="report__results">
             {% block results %}
             {% endblock %}
@@ -30,18 +30,7 @@
             {% endif %}
         </div>
         {% if filters %}
-            <div class="report__filters">
+            {% include "wagtailadmin/shared/filters.html" %}
-                <h2>{% trans 'Filter' %}</h2>
-                <form method="get">
-                    <button class="button button-longrunning" type="submit">{% icon name="spinner" %}{% trans 'Apply filters' %}</button>
-
-                    {% for filter in filters.form %}
-                        {{ filter.label_tag }}
-                        {{ filter }}
-                        {{ filter.errors }}
-                    {% endfor %}
-                </form>
-            </div>
         {% endif %}
     </div>
 {% endblock %}

wagtail/admin/templates/wagtailadmin/shared/filters.html

@@ -0,0 +1,14 @@
+{% load i18n wagtailadmin_tags %}
+
+<div class="filterable__filters">
+    <h2>{% trans 'Filter' %}</h2>
+    <form method="get">
+        <button class="button button-longrunning" type="submit">{% icon name="spinner" %}{% trans 'Apply filters' %}</button>
+
+        {% for filter in filters.form %}
+            {{ filter.label_tag }}
+            {{ filter }}
+            {{ filter.errors }}
+        {% endfor %}
+    </form>
+</div>