Skip to content

Commit d12a061

Browse files
lucascumsillelucascumsille
committed
Added front end to Parishes page
** General: ** - Increased padding content container padding - Split pages into sections - Improved heading hierarchy - Moved the fee to its own paragraph. Mainly because I find it easier to scan, it's also the first thing you see before start completing the form. So it's not mixed on brackets with the rest of the text. - Added a "Change your previous answers" below h1 titles. - Added an override to dropzone for parishes, so the preview thumbnail is visible at its original ratio, so the user can see exactly what they are uploading. - Added Progress form component ** Intro Page: ** - Added USP sections - Reduced `max-width` for input fields and dropzone area ** Pick Category page: ** - Moved category selection higher on the page - Added more headings and split page into section to hierarchy and make the page easier to scan. - Differenciate the help section so it's clearer its purpose. - Added optional styling in case we decide to move ahead with govuk styling for the "Remove category" button.
1 parent 9d23c51 commit d12a061

File tree

7 files changed

+436
-78
lines changed

7 files changed

+436
-78
lines changed

‎templates/web/fixmystreet.com/parishes/categories.html‎

Lines changed: 125 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,115 @@
44
<script src="/vendor/mapit.mysociety.org/reqwest.min.c949fe855720.js"></script>
55
<script src="/vendor/mapit.mysociety.org/leaflet.f1cc0a70c78b.js"></script>
66

7-
<div id="parish-map" style="float:right;height:300px;width:300px;"></div>
7+
<style>
8+
.parish-category-list ul { margin-bottom: 0; }
9+
#form-categories-row > div:first-child:last-child .rm_element { display: none; }
10+
</style>
11+
12+
<form method="post" style="display:inline">
13+
<input type="hidden" name="saved_data" value="[% form.fif.saved_data %]">
14+
<input type="hidden" name="goto" value="intro">
15+
<input type="submit" class="fake-link govuk-!-margin-bottom-0" value="&#8592; Change your previous answers">
16+
</form>
17+
18+
<nav aria-label="Form progress bar">
19+
<ol class="progress-form is--aligned-left">
20+
<li class="progress-form__step is-complete">
21+
<div class="progress-form__circle" aria-hidden="true"></div>
22+
<div class="progress-form__label">Your details</div>
23+
</li>
24+
25+
<li class="progress-form__step is-active" aria-current="step">
26+
<div class="progress-form__circle" aria-hidden="true"></div>
27+
<div class="progress-form__label">Select categories</div>
28+
</li>
29+
30+
<li class="progress-form__step">
31+
<div class="progress-form__circle" aria-hidden="true"></div>
32+
<div class="progress-form__label">Review your answers</div>
33+
</li>
34+
35+
<li class="progress-form__step">
36+
<div class="progress-form__circle" aria-hidden="true"></div>
37+
<div class="progress-form__label">Payment</div>
38+
</li>
39+
</ol>
40+
</nav>
41+
42+
<section class="parish-location-section govuk-!-margin-top-6 govuk-!-margin-bottom-6">
43+
<div>
44+
<h2 class="govuk-heading-m">Check your location is the right one</h2>
45+
<h3 class="govuk-heading-s">Currently looking at [% label_for_field(form, 'parish', form.saved_data.parish) %]</h3>
46+
47+
<p>
48+
We’ve included a map of boundary here, to confirm we’ve found the right one.
49+
</p>
50+
51+
<p class="govuk-!-margin-bottom-0">If you need to adjust your location please come back to the previous step to select a new location.</p>
52+
</div>
53+
54+
<div id="parish-map"></div>
55+
</section>
56+
57+
<section>
58+
<h2 class="govuk-heading-m">Add categories</h2>
59+
<p>
60+
The next step is to pick what things you would like to receive reports about.
61+
</p>
62+
63+
<p>
64+
Perhaps you are responsible for all grass cutting within your area, in which case you could have a “Grass cutting” category.
65+
Or perhaps you look after a particular playing field, so a “Lifford Lane playing field” category could work for that.
66+
67+
<p>We understand each parish/town council is different, and you have the freedom
68+
to pick what categories work for you. Please add the categories you would like below:</p>
69+
70+
<form method="post" enctype="multipart/form-data">
71+
[% PROCESS form %]
72+
</form>
73+
</section>
74+
75+
<section class="help-section">
76+
<h3 class="govuk-heading-m has-inline-svg has-inline-svg--left-align">[% INCLUDE 'icons/information.html' width='1.5em' height='1.5em' %] Need help?</h3>
77+
[% IF category_groups.size %]
78+
79+
<h4 class="govuk-heading-s govuk-!-margin-bottom-2">Check the categories used by hight-tier councils in you area</h4>
80+
<p>The list below list all the categories currently selected by councils in your area, so you can see how
81+
your categories could fit in alongside them.</p>
82+
83+
<ul class='parish-category-list'>
84+
[%~ FOREACH group IN category_groups ~%]
85+
[% IF group.name %]
86+
<li>[% group.name %]
87+
<ul>
88+
[% END %]
89+
[%~ FOREACH cat IN group.categories ~%]
90+
[% NEXT IF cat.category_display == '-- Pick a category --' %]
91+
<li>[% cat.category_display %]
92+
[%~ END ~%]
93+
[% IF group.name %]</ul>[% END %]
94+
[% END %]
95+
</ul>
96+
[% END %]
97+
98+
<h4 class="govuk-heading-s govuk-!-margin-bottom-2">Do you have devolved responsibilities?</h4>
99+
<div class="two-col-desktop">
100+
<p>
101+
Let’s say you look after all the road signs, but there already is a road signs category - then you can have a
102+
category of the same name, and within your boundary you will take precedence and receive reports in that category.
103+
</p>
104+
105+
<p>
106+
If you are only responsible for some of the street lights, choose a category name that would make it clearer to the user which category they should pick. For example, "Road signs on the estate roads". See some examples:
107+
</p>
108+
109+
<ul>
110+
<li><strong>Bridgwater Town Council</strong> in Somerset is responsible for a wide array of things within their area &ndash; their categories include Dog fouling, Flytipping, Graffiti, Grass cutting, Litter/dog bins, Parks, Street lighting in parks, Trees in parks (not roads), and Weed growth.
111+
<li><strong>Adstock Parish Council</strong> in Buckinghamshire is responsible for Flyposting, Grass cutting, Hedge problem, Dirty signs and Unauthorised signs.
112+
</ul>
113+
</div>
114+
</section>
115+
8116
<script nonce="[% csp_nonce %]">
9117
var map = new L.Map("parish-map");
10118
map.attributionControl.setPrefix('');
@@ -29,65 +137,20 @@
29137
});
30138
</script>
31139

32-
<style>
33-
.hfh-repinst div { display: inline-block; }
34-
.hfh-repinst .btn { vertical-align: baseline; }
35-
.parish-category-list ul { margin-bottom: 0; }
36-
#form-categories-row > div:first-child:last-child .rm_element { display: none; }
37-
</style>
140+
<script>
141+
// Temporary fix to add govuk styling to the remove and add category. Most likely will need to be deleted. Also it doesn't work when adding new categories for the remove button.
142+
// Remember to also get rid of section dedicated for GOVUK button styling at the end of _base.scss and _layout.scss
143+
document.addEventListener('DOMContentLoaded', function() {
144+
var addBtn = document.querySelector('.add_element');
145+
if (addBtn) {
146+
addBtn.classList.remove('btn');
147+
addBtn.classList.add('govuk-button', 'govuk-button--secondary');
148+
}
38149

39-
<h2>[% label_for_field(form, 'parish', form.saved_data.parish) %]</h2>
40-
41-
<p>
42-
Thanks! We've included a map of your boundary here, to confirm we've found the right one.
43-
</p>
44-
45-
<p>
46-
The next step is to pick what things you would like to receive reports about.
47-
</p>
48-
49-
<p>
50-
Perhaps you are responsible for all grass cutting within your area, in which case you could have a "Grass cutting" category.
51-
Or perhaps you look after a particular playing field, so a "Lifford Lane playing field" category could work for that.
52-
53-
[% IF category_groups.size %]
54-
<p>To help, below we list the existing higher-tier council categories currently covering your area, so you can see how
55-
your categories could fit in alongside them:
56-
</p>
57-
58-
<ul class='parish-category-list'>
59-
[%~ FOREACH group IN category_groups ~%]
60-
[% IF group.name %]
61-
<li>[% group.name %]
62-
<ul>
63-
[% END %]
64-
[%~ FOREACH cat IN group.categories ~%]
65-
[% NEXT IF cat.category_display == '-- Pick a category --' %]
66-
<li>[% cat.category_display %]
67-
[%~ END ~%]
68-
[% IF group.name %]</ul>[% END %]
69-
[% END %]
70-
</ul>
71-
[% END %]
72-
73-
<p>
74-
If you have devolved responsibility for something in your area - say you look after
75-
all the road signs, but there already is a road signs category - then you can have a
76-
category of the same name, and within your boundary you will take precedence
77-
and receive reports in that category.
78-
</p>
79-
80-
<p>If you are only responsible for some of the street lights, choose a category name
81-
that would make it clearer to the user which category they should pick. For example,
82-
"Road signs on the estate roads".
83-
84-
<p>
85-
As a couple of examples:</p>
86-
87-
<ul>
88-
<li><strong>Bridgwater Town Council</strong> in Somerset is responsible for a wide array of things within their area &ndash; their categories include Dog fouling, Flytipping, Graffiti, Grass cutting, Litter/dog bins, Parks, Street lighting in parks, Trees in parks (not roads), and Weed growth.
89-
<li><strong>Adstock Parish Council</strong> in Buckinghamshire is responsible for Flyposting, Grass cutting, Hedge problem, Dirty signs and Unauthorised signs.
90-
</ul>
91-
92-
<p>We understand each parish/town council is different, and you have the freedom
93-
to pick what categories work for you. Please add the categories you would like below:</p>
150+
var rmBtns = document.querySelectorAll('.rm_element');
151+
rmBtns.forEach(function(btn) {
152+
btn.classList.remove('btn');
153+
btn.classList.add('govuk-button', 'govuk-button--secondary', 'govuk-button--warning');
154+
});
155+
});
156+
</script>

‎templates/web/fixmystreet.com/parishes/index.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
[% SET bodyclass = 'formflow govuk';
1+
[% SET bodyclass = 'formflow govuk parish-page';
22
SET title = form.title;
33
SET extra_js = version('/vendor/accessible-autocomplete.min.js');
44
%]
@@ -11,11 +11,13 @@
1111

1212
[% IF form.intro_template %][% PROCESS "parishes/${form.intro_template}" %][% END %]
1313

14+
[% IF form.current_page.name != 'categories' %]
1415
<form method="post" enctype="multipart/form-data">
1516
[% PROCESS form %]
1617
</form>
18+
[% END %]
1719

18-
[% IF form.current_page.name != 'intro' %]
20+
[% IF form.current_page.name != 'intro' AND form.current_page.name != 'categories' %]
1921
<button id='form-back' class="hidden-nojs govuk-button govuk-button--secondary">Back</button>
2022
[% END %]
2123

‎templates/web/fixmystreet.com/parishes/start.html‎

Lines changed: 76 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,82 @@
1-
<p>
21

2+
<p class="govuk-body-l">
33
Sign up to receive reports from FixMyStreet on relevant local issues in
44
categories your town or parish council is responsible for.
55
</p>
66

7-
<p>
8-
Complete the form below to provide your details, set up your subscription
9-
(there’s a small monthly fee of £20 which you can cancel any time if you
10-
decide it’s not working out for you), and that’s it! Start receiving
11-
reports and respond to let people in your community know what’s happening.
12-
See <a href="/about/faq-parishes" target="_blank">our FAQs</a> for more information.
13-
</p>
7+
<section class="parishes-usp-section">
8+
<h2 class="govuk-heading-l">Features & benefits</h2>
149

15-
<p>
16-
Your data will be handled in accordance with our <a href="/about/privacy" target="_blank">Privacy Policy</a>.
17-
</p>
10+
<div class="parishes-usp-grid">
11+
<div class="parishes-usp-grid--card">
12+
<h3>Our map-based technology</h3>
13+
<p>Add your logo to a parish page on FixMyStreet from which local people can make reports, accessible on any device.</p>
14+
</div>
15+
16+
<div class="parishes-usp-grid--card">
17+
<h3>Take control of reports</h3>
18+
<p>Choose your own categories whenever you like, have reports sent straight to you, and update users on progress.</p>
19+
</div>
20+
21+
<div class="parishes-usp-grid--card">
22+
<h3>Better oversight of report data</h3>
23+
<p>See exactly what's being reported in your area, manage report statuses and analyse trends.</p>
24+
</div>
25+
26+
<div class="parishes-usp-grid--card">
27+
<h3>Build trust and visibility</h3>
28+
<p>Existing reports shown on the map for transparency help to strengthen reputation by demonstrating responsiveness.</p>
29+
</div>
30+
31+
<div class="parishes-usp-grid--card">
32+
<h3>Improve relationships with other authorities</h3>
33+
<p>Automated triaging of reports between authorities helps to eliminate misreporting and duplication of effort.</p>
34+
</div>
35+
36+
<div class="parishes-usp-grid--card">
37+
<h3>Increase efficiency</h3>
38+
<p>Save time and money by replacing manual processes and removing reliance on fielding reports from upper tier authorities.</p>
39+
</div>
40+
</div>
41+
</section>
42+
43+
<section>
44+
<h2 class="govuk-heading-l govuk-!-margin-bottom-2">Get started</h2>
45+
46+
<div class="text-content">
47+
<p>
48+
Subscribe for only <strong>£20 a month</strong> which you can cancel any time if you decide it’s not working out for you.
49+
</p>
50+
51+
<p>
52+
Just complete the form below to provide your details, set up your subscription, and that’s it! Start receiving reports and respond to let people in your community know what’s happening. See <a href="/about/faq-parishes" target="_blank">our FAQs</a> for more information.
53+
</p>
54+
<p>
55+
Your data will be handled in accordance with our <a href="/about/privacy" target="_blank">Privacy Policy</a>.
56+
</p>
57+
58+
<nav aria-label="Form progress bar">
59+
<ol class="progress-form is--aligned-left">
60+
<li class="progress-form__step is-active" aria-current="step">
61+
<div class="progress-form__circle" aria-hidden="true"></div>
62+
<div class="progress-form__label">Your details</div>
63+
</li>
64+
65+
<li class="progress-form__step">
66+
<div class="progress-form__circle" aria-hidden="true"></div>
67+
<div class="progress-form__label">Select categories</div>
68+
</li>
69+
70+
<li class="progress-form__step">
71+
<div class="progress-form__circle" aria-hidden="true"></div>
72+
<div class="progress-form__label">Review your answers</div>
73+
</li>
74+
75+
<li class="progress-form__step">
76+
<div class="progress-form__circle" aria-hidden="true"></div>
77+
<div class="progress-form__label">Payment</div>
78+
</li>
79+
</ol>
80+
</nav>
81+
</div>
82+
</section>

‎templates/web/fixmystreet.com/parishes/summary.html‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,37 @@
77
[% PROCESS errors %]
88
[% SET data = form.saved_data ~%]
99

10-
<h1 class="govuk-heading-xl">[% form.title %]</h1>
10+
<h1 class="govuk-heading-xl govuk-!-margin-bottom-2">[% form.title %]</h1>
11+
12+
<form method="post" style="display:inline">
13+
<input type="hidden" name="saved_data" value="[% form.fif.saved_data %]">
14+
<input type="hidden" name="goto" value="categories">
15+
<input type="submit" class="fake-link govuk-!-margin-bottom-0" value="&#8592; Change your previous answers">
16+
</form>
17+
18+
<nav aria-label="Form progress bar">
19+
<ol class="progress-form is--aligned-left" style="--progress-form-bar-max-width:600px;">
20+
<li class="progress-form__step is-complete">
21+
<div class="progress-form__circle" aria-hidden="true"></div>
22+
<div class="progress-form__label">Your details</div>
23+
</li>
24+
25+
<li class="progress-form__step is-complete">
26+
<div class="progress-form__circle" aria-hidden="true"></div>
27+
<div class="progress-form__label">Select categories</div>
28+
</li>
29+
30+
<li class="progress-form__step is-active" aria-current="step">
31+
<div class="progress-form__circle" aria-hidden="true"></div>
32+
<div class="progress-form__label">Review your answers</div>
33+
</li>
34+
35+
<li class="progress-form__step">
36+
<div class="progress-form__circle" aria-hidden="true"></div>
37+
<div class="progress-form__label">Payment</div>
38+
</li>
39+
</ol>
40+
</nav>
1141

1242
<div class="claims__summary">
1343
<dl class="govuk-summary-list">

‎web/cobrands/fixmystreet/fixmystreet.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1090,13 +1090,14 @@ $.extend(fixmystreet.set_up, {
10901090
default_message = translation_strings.upload_default_message_mobile;
10911091
}
10921092
var prevFile;
1093+
var isParishPage = document.body.classList.contains('parish-page');
10931094
var photodrop = new Dropzone($dropzone[0], {
10941095
url: '/photo/upload',
10951096
paramName: 'photo',
10961097
maxFiles: max_photos,
10971098
addRemoveLinks: true,
1098-
thumbnailHeight: 150,
1099-
thumbnailWidth: 150,
1099+
thumbnailHeight: isParishPage ? null : 150,
1100+
thumbnailWidth: isParishPage ? null : 150,
11001101
resizeWidth: 2048,
11011102
resizeHeight: 2048,
11021103
resizeQuality: 0.6,

0 commit comments

Comments
 (0)