From 01b4922205e27ac1c1ac6d9c8b0037897cec2e66 Mon Sep 17 00:00:00 2001
From: Chris Lawton <31627284+chris-lawton@users.noreply.github.com>
Date: Wed, 6 Nov 2019 17:29:03 +0000
Subject: [PATCH] style all reports filters (#1668)
---
opentech/apply/funds/tables.py | 2 +-
.../includes/table_filter_and_search.html | 2 +-
opentech/apply/projects/tables.py | 1 +
.../widgets/date_range_input_widget.html | 3 +-
.../application_projects/report_list.html | 6 +-
.../src/sass/apply/components/_form.scss | 62 +++++++++++++++++++
...unds-table.scss => _responsive-table.scss} | 2 +-
opentech/static_src/src/sass/apply/main.scss | 2 +-
8 files changed, 70 insertions(+), 10 deletions(-)
rename opentech/static_src/src/sass/apply/components/{_all-rounds-table.scss => _responsive-table.scss} (94%)
diff --git a/opentech/apply/funds/tables.py b/opentech/apply/funds/tables.py
index 90821692c..ff5ff55a2 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 de0201ac2..051a657f3 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 4064f5dae..4be6c4998 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 fe469bc85..d498285f5 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 8a3579808..ab735a8fb 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 f73c89b51..896eaba00 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 3be90e1d1..ea14a560a 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 332e4d98c..dc091325e 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';
--
GitLab