From 94823dfe67c7e3ab4b2a667840f0f21d18acfd38 Mon Sep 17 00:00:00 2001
From: Chris Lawton <31627284+chris-lawton@users.noreply.github.com>
Date: Wed, 6 Nov 2019 15:33:01 +0000
Subject: [PATCH] feature/gh-1643-report-page (#1664)
* style report page
---
opentech/apply/projects/forms.py | 4 ++--
.../application_projects/report_form.html | 12 +++++++---
.../src/sass/apply/components/_alert.scss | 24 +++++++++++++++++++
.../sass/apply/components/_data-block.scss | 1 +
opentech/static_src/src/sass/apply/main.scss | 1 +
5 files changed, 37 insertions(+), 5 deletions(-)
create mode 100644 opentech/static_src/src/sass/apply/components/_alert.scss
diff --git a/opentech/apply/projects/forms.py b/opentech/apply/projects/forms.py
index 218b2df53..eeeb245ba 100644
--- a/opentech/apply/projects/forms.py
+++ b/opentech/apply/projects/forms.py
@@ -381,10 +381,10 @@ class UpdateProjectLeadForm(forms.ModelForm):
class ReportEditForm(forms.ModelForm):
public_content = RichTextField(
- help_text="This section will be shared with the wider community."
+ help_text="This section of the report will be shared with the broader community."
)
private_content = RichTextField(
- help_text="This section will be shared with staff members only."
+ help_text="This section of the report will be shared with staff only."
)
file_list = forms.ModelMultipleChoiceField(
widget=forms.CheckboxSelectMultiple(attrs={'class': 'delete'}),
diff --git a/opentech/apply/projects/templates/application_projects/report_form.html b/opentech/apply/projects/templates/application_projects/report_form.html
index 3296a547a..5ba50eeae 100644
--- a/opentech/apply/projects/templates/application_projects/report_form.html
+++ b/opentech/apply/projects/templates/application_projects/report_form.html
@@ -8,15 +8,21 @@
<a class="admin-bar__back-link" href="{{ object.project.get_absolute_url }}">
Project
</a>
- <h2 class="heading heading--no-margin">Report for the period {{ report.start_date }} to {{ report.end_date }}</h2>
- <h5 class="heading heading--no-margin">{{ object.project.title }}</h5>
+ <h2 class="heading heading--no-margin">{{ object.project.title }}</h2>
+ <h5 class="heading heading--no-margin">Submit a report</h5>
</div>
</div>
{% include "forms/includes/form_errors.html" with form=form %}
-<div class="wrapper wrapper--light-grey-bg wrapper--form wrapper--sidebar">
+<div class="wrapper wrapper--light-grey-bg wrapper--form">
<div class="wrapper--sidebar--inner">
+
+ <div class="alert">
+ <svg class="alert__icon"><use xlink:href="#exclamation-point"></use></svg>
+ <p class="alert__text">You are reporting for the period running from {{ report.start_date }} to {{ report.end_date }}</p>
+ </div>
+
<form class="form" action="" method="post" enctype="multipart/form-data" novalidate>
{% csrf_token %}
{{ form.media }}
diff --git a/opentech/static_src/src/sass/apply/components/_alert.scss b/opentech/static_src/src/sass/apply/components/_alert.scss
new file mode 100644
index 000000000..9c1997b5e
--- /dev/null
+++ b/opentech/static_src/src/sass/apply/components/_alert.scss
@@ -0,0 +1,24 @@
+.alert {
+ border: 2px solid $color--lighter-blue;
+ padding: 1rem;
+ margin: 0 0 2rem;
+ background-color: $color--light-blue-90;
+ display: flex;
+ align-items: center;
+
+ @include media-query(tablet-portrait) {
+ padding: 1.5rem;
+ }
+
+ &__icon {
+ width: 25px;
+ height: 25px;
+ fill: $color--light-blue;
+ margin-right: .8rem;
+ }
+
+ &__text {
+ margin: 0;
+ flex: 1;
+ }
+}
diff --git a/opentech/static_src/src/sass/apply/components/_data-block.scss b/opentech/static_src/src/sass/apply/components/_data-block.scss
index f1f5544e0..fe1e42f85 100644
--- a/opentech/static_src/src/sass/apply/components/_data-block.scss
+++ b/opentech/static_src/src/sass/apply/components/_data-block.scss
@@ -169,6 +169,7 @@
margin-right: 1rem;
text-decoration: underline;
color: $color--primary;
+ word-break: normal;
&:last-child {
margin: 0;
diff --git a/opentech/static_src/src/sass/apply/main.scss b/opentech/static_src/src/sass/apply/main.scss
index e05387624..332e4d98c 100644
--- a/opentech/static_src/src/sass/apply/main.scss
+++ b/opentech/static_src/src/sass/apply/main.scss
@@ -8,6 +8,7 @@
@import 'base/typography';
// Components
+@import 'components/alert';
@import 'components/all-submissions-table';
@import 'components/all-rounds-table';
@import 'components/admin-bar';
--
GitLab