aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--perllib/FixMyStreet/App/Controller/Report.pm2
-rw-r--r--t/app/controller/report_inspect.t6
-rw-r--r--templates/web/base/report/_inspect.html132
-rw-r--r--web/cobrands/fixmystreet/images/crosshairs.pngbin0 -> 248 bytes
-rw-r--r--web/cobrands/fixmystreet/images/crosshairs.svg1
-rw-r--r--web/cobrands/fixmystreet/images/crosshairs@2x.pngbin0 -> 427 bytes
-rw-r--r--web/cobrands/fixmystreet/images/navigate.pngbin0 -> 261 bytes
-rw-r--r--web/cobrands/fixmystreet/images/navigate.svg1
-rw-r--r--web/cobrands/fixmystreet/images/navigate@2x.pngbin0 -> 489 bytes
-rw-r--r--web/cobrands/sass/_base.scss88
10 files changed, 142 insertions, 88 deletions
diff --git a/perllib/FixMyStreet/App/Controller/Report.pm b/perllib/FixMyStreet/App/Controller/Report.pm
index 34392782b..cca2568f2 100644
--- a/perllib/FixMyStreet/App/Controller/Report.pm
+++ b/perllib/FixMyStreet/App/Controller/Report.pm
@@ -317,7 +317,7 @@ sub inspect : Private {
my $update_text;
if ($permissions->{report_inspect}) {
- foreach (qw/detailed_location detailed_information traffic_information/) {
+ foreach (qw/detailed_information traffic_information/) {
$problem->set_extra_metadata( $_ => $c->get_param($_) );
}
diff --git a/t/app/controller/report_inspect.t b/t/app/controller/report_inspect.t
index 3aea08eec..690a01ca1 100644
--- a/t/app/controller/report_inspect.t
+++ b/t/app/controller/report_inspect.t
@@ -46,10 +46,10 @@ FixMyStreet::override_config {
};
subtest "test basic inspect submission" => sub {
- $mech->submit_form_ok({ button => 'save', with_fields => { traffic_information => 'Lots', state => 'Planned' } });
+ $mech->submit_form_ok({ button => 'save', with_fields => { traffic_information => 'Yes', state => 'Planned' } });
$report->discard_changes;
is $report->state, 'planned', 'report state changed';
- is $report->get_extra_metadata('traffic_information'), 'Lots', 'report data changed';
+ is $report->get_extra_metadata('traffic_information'), 'Yes', 'report data changed';
};
subtest "test inspect & instruct submission" => sub {
@@ -94,7 +94,7 @@ FixMyStreet::override_config {
$mech->contains_or_lacks($test->{priority}, 'Priority');
$mech->contains_or_lacks($test->{priority}, 'High');
$mech->contains_or_lacks($test->{category}, 'Category');
- $mech->contains_or_lacks($test->{detailed}, 'Detailed problem information');
+ $mech->contains_or_lacks($test->{detailed}, 'Extra details');
$mech->submit_form_ok({
button => 'save',
with_fields => {
diff --git a/templates/web/base/report/_inspect.html b/templates/web/base/report/_inspect.html
index 31a8cd9ad..a4501aebd 100644
--- a/templates/web/base/report/_inspect.html
+++ b/templates/web/base/report/_inspect.html
@@ -2,48 +2,37 @@
[% permissions = c.user.permissions(c, problem.bodies_str) %]
[% second_column = BLOCK -%]
<div id="side-report-secondary">
- <div class="problem-inspector-fields clearfix">
- [% INCLUDE 'errors.html' %]
+ [% INCLUDE 'errors.html' %]
- <form id="report_inspect_form" method="post" action="[% c.uri_for( '/report', problem.id, 'inspect' ) %]">
- <p class="left">
- <label for="problem_id">[% loc('Report ID:') %]</label>
- <input type="text" readonly id="problem_id" value="[% problem.id %]">
- </p>
+ <form id="report_inspect_form" method="post" action="[% c.uri_for( '/report', problem.id, 'inspect' ) %]">
-[% IF permissions.report_edit_priority OR permissions.report_inspect %]
- <p class="right">
- <label for="problem_priority">[% loc('Priority:') %]</label>
- <select name="priority" id="problem_priority">
- <option value="" [% 'selected' UNLESS problem.response_priority_id %]>-</option>
- [% FOREACH priority IN problem.response_priorities %]
- <option value="[% priority.id %]" [% 'selected' IF problem.response_priority_id == priority.id %] [% 'disabled' IF priority.deleted %]>[% priority.name %]</option>
- [% END %]
- </select>
+ <div class="inspect-section">
+ <p>
+ <strong>[% loc('Report ID:') %]</strong>
+ [% problem.id %]
</p>
-[% END %]
-
-[% IF permissions.report_inspect %]
- <p class="left">
- <label for="state">[% loc('State:') %]</label>
- [%# XXX this is duplicated from admin/report_edit.html, should be refactored %]
- <select name="state" id="state">
- [% FOREACH group IN state_groups %]
- <optgroup label="[% group.0 %]">
- [% FOREACH state IN group.1 %]
- <option [% 'selected ' IF state == problem.state %] value="[% state %]">[% state_pretty.$state %]</option>
- [% END %]
- </optgroup>
- [% END %]
- </select>
+ <p>
+ [% SET local_coords = problem.local_coords; %]
+ <strong>[% loc('Easting/Northing:') %]</strong>
+ <span id="problem_easting">[% local_coords.0 IF local_coords %]</span>,
+ <span id="problem_northing">[% local_coords.1 IF local_coords %]</span>
+ <input type="hidden" name="longitude" value="[% problem.longitude %]">
+ <input type="hidden" name="latitude" value="[% problem.latitude %]">
+ </p>
+ <p>
+ <a href="https://www.google.com/maps/dir/Current+Location/[% problem.latitude %],[% problem.longitude %]" class="btn btn-block btn--navigate">[% loc('Navigate to this problem') %]</a>
</p>
-[% END %]
+ <p>
+ <a href="#" class="btn btn-block btn--geolocate" id="geolocate_link">[% loc('Set to my current location') %]</a>
+ </p>
+ </div>
-[% IF permissions.report_edit_category OR permissions.report_inspect %]
- <p class="right">
- <label for="category">[% loc('Category:') %]</label>
+ [% IF permissions.report_edit_category OR permissions.report_inspect %]
+ <div class="inspect-section">
+ <p>
+ <label for="category">[% loc('Category') %]</label>
[%# XXX this is duplicated from admin/report_edit.html, should be refactored %]
- <select name="category" id="category">
+ <select name="category" id="category" class="form-control">
[% IF NOT problem.category OR NOT categories.grep(problem.category).size %]
<optgroup label="[% loc('Existing category') %]">
<option selected value="[% problem.category | html %]">[% (problem.category OR '-') | html %]</option>
@@ -58,47 +47,69 @@
[% END %]
</select>
</p>
-[% END %]
+ [% IF permissions.report_inspect %]
<p>
- [% SET local_coords = problem.local_coords; %]
- <strong>[% loc('Easting/Northing:') %]</strong>
- <span id="problem_easting">[% local_coords.0 IF local_coords %]</span>,
- <span id="problem_northing">[% local_coords.1 IF local_coords %]</span>
- <input type="hidden" name="longitude" value="[% problem.longitude %]">
- <input type="hidden" name="latitude" value="[% problem.latitude %]">
- </p>
- <p style="clear:both;">
- <a href="#" id="geolocate_link">[% loc('Use my current location') %]</a>,
- [% loc('or drag the pin on the map') %] &raquo;
+ <label for="state">[% loc('State') %]</label>
+ [%# XXX this is duplicated from admin/report_edit.html, should be refactored %]
+ <select name="state" id="state" class="form-control">
+ [% FOREACH group IN state_groups %]
+ <optgroup label="[% group.0 %]">
+ [% FOREACH state IN group.1 %]
+ <option [% 'selected ' IF state == problem.state %] value="[% state %]">[% state_pretty.$state %]</option>
+ [% END %]
+ </optgroup>
+ [% END %]
+ </select>
</p>
+ [% END %]
+ </div>
+ [% END %]
-[% IF permissions.report_inspect %]
+ <div class="inspect-section">
+ [% IF permissions.report_edit_priority OR permissions.report_inspect %]
<p>
- <label for="detailed_information">[% loc('Detailed problem location:') %]</label>
- <textarea rows="2" name="detailed_location">[% problem.get_extra_metadata('detailed_location') | html %]</textarea>
+ <label for="problem_priority">[% loc('Priority') %]</label>
+ <select name="priority" id="problem_priority" class="form-control">
+ <option value="" [% 'selected' UNLESS problem.response_priority_id %]>-</option>
+ [% FOREACH priority IN problem.response_priorities %]
+ <option value="[% priority.id %]" [% 'selected' IF problem.response_priority_id == priority.id %] [% 'disabled' IF priority.deleted %]>[% priority.name %]</option>
+ [% END %]
+ </select>
</p>
+ [% END %]
+
+ [% IF permissions.report_inspect %]
<p>
- <label for="detailed_information">[% loc('Detailed problem information:') %]</label>
- <textarea rows="2" name="detailed_information">[% problem.get_extra_metadata('detailed_information') | html %]</textarea>
+ <label for="traffic_information">[% loc('Traffic management required?') %]</label>
+ [% traffic_info = problem.get_extra_metadata('traffic_information') %]
+ <select id="traffic_information" name="traffic_information" class="form-control">
+ <option value=""[% ' selected' IF NOT traffic_info %]>-</option>
+ <option[% ' selected' IF traffic_info == "Yes" %]>Yes</option>
+ <option[% ' selected' IF traffic_info == "No" %]>No</option>
+ </select>
</p>
<p>
- <label for="traffic_information">[% loc('Traffic management information:') %]</label>
- <textarea rows="2" name="traffic_information">[% problem.get_extra_metadata('traffic_information') | html %]</textarea>
+ <label for="detailed_information">[% loc('Extra details') %]</label>
+ <textarea rows="2" name="detailed_information" class="form-control">[% problem.get_extra_metadata('detailed_information') | html %]</textarea>
</p>
-[% END %]
+ [% END %]
<p>
<input type="hidden" name="token" value="[% csrf_token %]">
<a href="[% c.uri_for( '/report', problem.id ) %]" class="btn">[% loc('Cancel') %]</a>
<input type="submit" value="[% loc('Save changes') %]" name="save" />
</p>
-[% IF permissions.report_inspect %]
+ </div>
+
+ [% IF permissions.report_inspect %]
+ <div class="inspect-section">
[% UNLESS problem.get_extra_metadata('inspected') %]
+ [%# TODO: Integrate this textarea into the main form, for simpler UX %]
<p>
<label for="public_update">[% loc('Public update:') %]</label>
[% INCLUDE 'admin/response_templates_select.html' for='public_update' %]
- <textarea rows="2" name="public_update" id="public_update" required>[% public_update | html %]</textarea>
+ <textarea rows="2" name="public_update" id="public_update" class="form-control" required>[% public_update | html %]</textarea>
</p>
<p>
<input type="submit" value="[% loc('Save changes + send') %]" name="save_inspected" />
@@ -112,8 +123,9 @@
[% END %]
</p>
[% END %]
-[% END %]
- </form>
- </div>
+ </div>
+ [% END %]
+
+ </form>
</div>
[%- END %]
diff --git a/web/cobrands/fixmystreet/images/crosshairs.png b/web/cobrands/fixmystreet/images/crosshairs.png
new file mode 100644
index 000000000..e3f216814
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/crosshairs.png
Binary files differ
diff --git a/web/cobrands/fixmystreet/images/crosshairs.svg b/web/cobrands/fixmystreet/images/crosshairs.svg
new file mode 100644
index 000000000..80b5172c6
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/crosshairs.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>icon-crosshairs</title><path d="M13.013 8.48c-.242 2.344-2.117 4.204-4.475 4.445V9.977H7.534v2.953c-2.375-.225-4.268-2.095-4.512-4.45h3.005v-.997H3.02C3.246 5.113 5.146 3.227 7.533 3v2.986h1.004V3.003c2.37.243 4.25 2.12 4.478 4.48h-2.97v.998h2.967zm1.008-.997c-.232-2.91-2.558-5.232-5.482-5.48V0H7.534v2.002c-2.942.233-5.285 2.56-5.52 5.48H0v1h2.017c.25 2.904 2.587 5.214 5.517 5.446V16h1.004v-2.074c2.912-.247 5.232-2.55 5.48-5.445H16v-.997h-1.98z" fill="#000" fill-rule="evenodd"/></svg> \ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/crosshairs@2x.png b/web/cobrands/fixmystreet/images/crosshairs@2x.png
new file mode 100644
index 000000000..c7caa518a
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/crosshairs@2x.png
Binary files differ
diff --git a/web/cobrands/fixmystreet/images/navigate.png b/web/cobrands/fixmystreet/images/navigate.png
new file mode 100644
index 000000000..c37331e0d
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/navigate.png
Binary files differ
diff --git a/web/cobrands/fixmystreet/images/navigate.svg b/web/cobrands/fixmystreet/images/navigate.svg
new file mode 100644
index 000000000..a00b08825
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/navigate.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>icon-navigate</title><path d="M15.348.002c-.072.007-.142.026-.206.057L.342 7.057c-.216.103-.35.324-.342.562.008.24.158.45.38.538l5.356 2.106 2.106 5.356c.088.222.3.372.538.38.238.008.46-.126.562-.342l7-14.8c.092-.194.074-.423-.05-.6-.122-.177-.33-.274-.544-.256zm-2.82 2.62L6.055 9.095 2.11 7.546 12.53 2.62zm.857.836l-4.937 10.43-1.55-3.942 6.487-6.488z" fill="#000" fill-rule="evenodd"/></svg> \ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/navigate@2x.png b/web/cobrands/fixmystreet/images/navigate@2x.png
new file mode 100644
index 000000000..1ea3659eb
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/navigate@2x.png
Binary files differ
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 7462682ee..60f992410 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -398,30 +398,6 @@ select.form-control {
margin:1em 0;
}
-.problem-inspector-fields {
- select {
- height: 2.4em; // match text inputs
- -webkit-appearance: menulist-button; // so it's the right height in Safari
- }
-
- p.left,
- p.right {
- width: 46%;
-
- label {
- margin-top: 0;
- }
- }
-
- p.left {
- float: #{$left};
- }
-
- p.right {
- float: #{$right};
- }
-}
-
// form errors
div.form-error,
@@ -750,6 +726,13 @@ input.final-submit {
float: $right;
}
+// TODO: Sort out this a/a:visited/a.btn hideousness
+.btn-block,
+a.btn-block {
+ display: block;
+ text-align: center;
+}
+
.btn--facebook {
@include button-reset(#3b5998, darken(#3b5998, 10%), #3b5998, #fff, darken(#3b5998, 5%), darken(#3b5998, 10%), #3b5998, #fff);
@@ -780,6 +763,42 @@ input.final-submit {
}
}
+.btn--navigate,
+.btn--geolocate {
+ &:before {
+ content: "";
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ background: transparent url(/cobrands/fixmystreet/images/navigate.png) no-repeat 0 0;
+ background-size: 16px 16px;
+ margin-#{$right}: 0.5em;
+ vertical-align: -0.1em; // vertically centre icon in button
+
+ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+ background-image: url(/cobrands/fixmystreet/images/navigate@2.png);
+ }
+
+ @media all {
+ background-image: url(/cobrands/fixmystreet/images/navigate.svg), none;
+ }
+ }
+}
+
+.btn--geolocate {
+ &:before {
+ background-image: url(/cobrands/fixmystreet/images/crosshairs.png);
+
+ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+ background-image: url(/cobrands/fixmystreet/images/crosshairs@2.png);
+ }
+
+ @media all {
+ background-image: url(/cobrands/fixmystreet/images/crosshairs.svg), none;
+ }
+ }
+}
+
.btn--block {
display: block;
width: auto;
@@ -1463,6 +1482,27 @@ label .muted {
}
}
+.inspect-section {
+ border-top: 1px solid rgba(0, 0, 0, 0.2);
+ padding-top: 1.5em;
+ margin-top: 1.5em;
+
+ &:first-child {
+ border-top: none;
+ margin-top: 0;
+ padding-top: 0;
+ }
+
+ & > :first-child,
+ & > :first-child > :first-child {
+ margin-top: 0;
+ }
+}
+
+.inspect-section--hidden {
+ display: none;
+}
+
table.nicetable {
width:100%;
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-26 19:23:15 +0000