diff options
| -rw-r--r-- | CHANGELOG.md | 2 | ||||
| -rw-r--r-- | templates/web/base/report/new/fill_in_details_form.html | 5 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/images/change-location-arrow.png | bin | 0 -> 138 bytes | |||
| -rw-r--r-- | web/cobrands/fixmystreet/images/change-location-arrow.svg | 1 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/images/change-location-search.png | bin | 0 -> 220 bytes | |||
| -rw-r--r-- | web/cobrands/fixmystreet/images/change-location-search.svg | 1 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/images/wrong-location.png | bin | 316 -> 0 bytes | |||
| -rw-r--r-- | web/cobrands/sass/_base.scss | 33 | ||||
| -rw-r--r-- | web/cobrands/sass/_layout.scss | 4 |
9 files changed, 41 insertions, 5 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 2ef0aaceb..50802a4e4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,8 @@ ## Releases * Unreleased + - Front end improvements: + - Clearer relocation options while you’re reporting a problem #2238 * v2.4.2 (6th November 2018) - New features: diff --git a/templates/web/base/report/new/fill_in_details_form.html b/templates/web/base/report/new/fill_in_details_form.html index a508b9307..c819d34a0 100644 --- a/templates/web/base/report/new/fill_in_details_form.html +++ b/templates/web/base/report/new/fill_in_details_form.html @@ -1,7 +1,10 @@ <h1>[% loc('Report your problem') %]</h1> [% IF report.used_map %] - <p class="change_location">[% loc('Wrong location? Just click again on the map.') %]</p> + <ul class="change_location"> + <li class="change_location__map">[% loc('Click the map or drag the pin to adjust the location') %]</li> + <li class="change_location__search">[% loc('Or <a href="/">search for a different location</a>') %]</li> + </ul> [% END %] [% TRY %][% INCLUDE 'report/new/roads_message.html' %][% CATCH file %][% END %] diff --git a/web/cobrands/fixmystreet/images/change-location-arrow.png b/web/cobrands/fixmystreet/images/change-location-arrow.png Binary files differnew file mode 100644 index 000000000..6b3cf0efc --- /dev/null +++ b/web/cobrands/fixmystreet/images/change-location-arrow.png diff --git a/web/cobrands/fixmystreet/images/change-location-arrow.svg b/web/cobrands/fixmystreet/images/change-location-arrow.svg new file mode 100644 index 000000000..fb6f1c429 --- /dev/null +++ b/web/cobrands/fixmystreet/images/change-location-arrow.svg @@ -0,0 +1 @@ +<svg width="14" height="14" viewbox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill="#999" fill-rule="nonzero"><path d="M0 6h12v2H0z"/><path d="M11.2 7L6.9 2.8l1.5-1.5 4.2 4.3L14 7l-5.6 5.7-1.5-1.5L11.2 7z"/></g></svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/images/change-location-search.png b/web/cobrands/fixmystreet/images/change-location-search.png Binary files differnew file mode 100644 index 000000000..8f5ac91ba --- /dev/null +++ b/web/cobrands/fixmystreet/images/change-location-search.png diff --git a/web/cobrands/fixmystreet/images/change-location-search.svg b/web/cobrands/fixmystreet/images/change-location-search.svg new file mode 100644 index 000000000..6b628e1eb --- /dev/null +++ b/web/cobrands/fixmystreet/images/change-location-search.svg @@ -0,0 +1 @@ +<svg width="14" height="14" viewbox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill="#999" fill-rule="nonzero"><path d="M5 10A5 5 0 1 1 5 0a5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/><path d="M7.5 9L9 7.4l5 5-1.4 1.4z"/></g></svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/images/wrong-location.png b/web/cobrands/fixmystreet/images/wrong-location.png Binary files differdeleted file mode 100644 index 8f775f710..000000000 --- a/web/cobrands/fixmystreet/images/wrong-location.png +++ /dev/null diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index f21650660..c17790176 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -382,10 +382,35 @@ select.form-control { .change_location { color: #666; - padding-#{$left}: 20px; - background: transparent url(/cobrands/fixmystreet/images/wrong-location.png) $left 50% no-repeat; - border-#{$left}: solid 4px transparent; - margin-top: -0.5em; + margin: 0; + + // No need for this element on mobile, where they can't click the map, + // and there's already a "Report" button in the header that leads to + // the homepage search form. But we'll want to unhide in layout.scss. + display: none; + + li { + list-style: none; + padding-#{$left}: 24px; + margin: 0.3em 0 0 0; + background-size: 14px 14px; + background-repeat: no-repeat; + background-position: flip(0 50%, 100% 50%); + } +} + +.change_location__map { + @include svg-background-image('/cobrands/fixmystreet/images/change-location-arrow'); +} + +.change_location__search { + @include svg-background-image('/cobrands/fixmystreet/images/change-location-search'); +} + +// Space between the .change_location list and any +// top_message.html announcements inserted via ajax. +#js-top-message > :first-child { + margin-top: 1.5em; } .form-txt-submit-box { diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss index 2b00dec82..2c641f30c 100644 --- a/web/cobrands/sass/_layout.scss +++ b/web/cobrands/sass/_layout.scss @@ -354,6 +354,10 @@ body.mappage.admin { } } +.change_location { + display: block; +} + .category_meta_message { padding-top: 0.5em; font-size: 0.9em; |
