diff --git a/opentech/apply/funds/tables.py b/opentech/apply/funds/tables.py
index 90821692c36308900cd77695b5ccfbe873dc05b0..ff5ff55a2fa922443613fa9913a31f9d873503d4 100644
--- a/opentech/apply/funds/tables.py
+++ b/opentech/apply/funds/tables.py
@@ -288,7 +288,7 @@ class RoundsTable(tables.Table):
class Meta:
fields = ('title', 'fund', 'lead', 'start_date', 'end_date', 'progress')
- attrs = {'class': 'all-rounds-table'}
+ attrs = {'class': 'responsive-table'}
def render_lead(self, value):
return format_html('<span>{}</span>', value)
diff --git a/opentech/apply/funds/templates/funds/includes/table_filter_and_search.html b/opentech/apply/funds/templates/funds/includes/table_filter_and_search.html
index de0201ac2a9efe9ea276af1d57886261656c0462..051a657f3bde149a3b3faa40e0db67e3ab3d22da 100644
--- a/opentech/apply/funds/templates/funds/includes/table_filter_and_search.html
+++ b/opentech/apply/funds/templates/funds/includes/table_filter_and_search.html
@@ -52,7 +52,7 @@
</div>
-<div class="filters">
+<div class="filters {% if filter_classes %}{{filter_classes}}{% endif %}">
<div class="filters__header">
<button class="filters__button js-clear-filters">Clear</button>
<div>Filter by</div>
diff --git a/opentech/apply/projects/tables.py b/opentech/apply/projects/tables.py
index 4064f5dae932f353aa2ef5bb1449b7a35c1d1680..4be6c4998d028bd32e1dda276aaba6db41bd6ee6 100644
--- a/opentech/apply/projects/tables.py
+++ b/opentech/apply/projects/tables.py
@@ -142,6 +142,7 @@ class ReportListTable(tables.Table):
'...'
]
model = Report
+ attrs = {'class': 'responsive-table'}
def render_report_period(self, record):
return f"{record.start} to {record.end_date}"
diff --git a/opentech/apply/projects/templates/application_projects/filters/widgets/date_range_input_widget.html b/opentech/apply/projects/templates/application_projects/filters/widgets/date_range_input_widget.html
index fe469bc85d1baa68f7a63b57c468088f710c1218..d498285f5c11f080e261a510ff8e8d6ce2453eb8 100644
--- a/opentech/apply/projects/templates/application_projects/filters/widgets/date_range_input_widget.html
+++ b/opentech/apply/projects/templates/application_projects/filters/widgets/date_range_input_widget.html
@@ -1,5 +1,4 @@
-from:
{% include widget.subwidgets.0.template_name %}
-to:
+<span>to:</span>
{% include widget.subwidgets.1.template_name %}
diff --git a/opentech/apply/projects/templates/application_projects/report_list.html b/opentech/apply/projects/templates/application_projects/report_list.html
index 8a3579808112bc05373568dccddef1b544e2566a..ab735a8fb348ec34f80ed3d9696d87f4788d7f00 100644
--- a/opentech/apply/projects/templates/application_projects/report_list.html
+++ b/opentech/apply/projects/templates/application_projects/report_list.html
@@ -9,16 +9,14 @@
<div class="admin-bar">
<div class="admin-bar__inner wrapper--search">
{% block page_header %}
- <div>
- <h1 class="gamma heading heading--no-margin heading--bold">Submitted Reports</h1>
- </div>
+ <h1 class="gamma heading heading--no-margin heading--bold">Submitted Reports</h1>
{% endblock %}
</div>
</div>
<div class="wrapper wrapper--large wrapper--inner-space-medium">
{% if table %}
- {% include "funds/includes/table_filter_and_search.html" with filter_form=filter_form use_search=False filter_action=filter_action %}
+ {% include "funds/includes/table_filter_and_search.html" with filter_form=filter_form use_search=False filter_action=filter_action filter_classes="filters--dates" %}
{% render_table table %}
{% else %}
<p>No Reports Available</p>
diff --git a/opentech/static_src/src/sass/apply/components/_form.scss b/opentech/static_src/src/sass/apply/components/_form.scss
index f73c89b5127a00f38d5e51467517c72a017073ac..896eaba00a0f3bb8334a0f0d672714a6b1a21487 100644
--- a/opentech/static_src/src/sass/apply/components/_form.scss
+++ b/opentech/static_src/src/sass/apply/components/_form.scss
@@ -168,10 +168,20 @@
opacity: 1;
transition-delay: $base-delay * 10;
}
+
+ .filters--dates & {
+ align-items: flex-end;
+ margin: 10px 0 30px;
+ padding: 0;
+ }
}
label {
display: none;
+
+ .filters--dates & {
+ display: block;
+ }
}
// so the form can be output in any tag
@@ -195,6 +205,58 @@
margin: 0;
}
}
+
+ > li {
+ padding: 0 1rem;
+
+ @include media-query(tablet-landscape) {
+ padding: 0;
+ }
+
+ // re-order from/to date inputs and text
+ .filters--dates & {
+ margin: 0 auto 1rem;
+ max-width: 320px;
+
+ @include media-query(mob-landscape) {
+ display: flex;
+ max-width: 600px;
+
+ @supports (display: grid) {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-gap: 5px;
+ }
+ }
+
+ @include media-query(tablet-landscape) {
+ margin: 0 1rem 0 0;
+ max-width: initial;
+ }
+
+ label {
+ @supports (display: grid) {
+ grid-column: 1;
+ grid-row: 1;
+ }
+ }
+
+ input {
+ &:first-of-type {
+ @supports (display: grid) {
+ grid-column: 1;
+ }
+ }
+ }
+
+ span {
+ @supports (display: grid) {
+ grid-column: 2;
+ grid-row: 1;
+ }
+ }
+ }
+ }
}
&__label {
diff --git a/opentech/static_src/src/sass/apply/components/_all-rounds-table.scss b/opentech/static_src/src/sass/apply/components/_responsive-table.scss
similarity index 94%
rename from opentech/static_src/src/sass/apply/components/_all-rounds-table.scss
rename to opentech/static_src/src/sass/apply/components/_responsive-table.scss
index 3be90e1d1aeed7bea486547e45a16653f0d757c5..ea14a560a1783bd3313c4b242a2ff86acbbf919a 100644
--- a/opentech/static_src/src/sass/apply/components/_all-rounds-table.scss
+++ b/opentech/static_src/src/sass/apply/components/_responsive-table.scss
@@ -1,4 +1,4 @@
-.all-rounds-table {
+.responsive-table {
@include table-ordering-styles;
thead {
diff --git a/opentech/static_src/src/sass/apply/main.scss b/opentech/static_src/src/sass/apply/main.scss
index 332e4d98c7ee3105ffd0e9eb061198d415eb5b7d..dc091325ef24a8ad6de6146124ebda5ec63eda17 100644
--- a/opentech/static_src/src/sass/apply/main.scss
+++ b/opentech/static_src/src/sass/apply/main.scss
@@ -10,7 +10,6 @@
// Components
@import 'components/alert';
@import 'components/all-submissions-table';
-@import 'components/all-rounds-table';
@import 'components/admin-bar';
@import 'components/actions-bar';
@import 'components/card';
@@ -40,6 +39,7 @@
@import 'components/pagination';
@import 'components/profile';
@import 'components/related-sidebar';
+@import 'components/responsive-table';
@import 'components/reviewer-dash-box';
@import 'components/reviews-list';
@import 'components/reviews-summary';