From 4abe01df6bae32d7578047ac67466794d92e5176 Mon Sep 17 00:00:00 2001 From: Zarino Zappia Date: Tue, 12 Mar 2019 12:32:11 +0000 Subject: Show detailed delivery info in expanded list items MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Make the expandable list item’s expanded state look more like the regular `.problem-header`, to more strongly imply that you don’t need to visit the individual report page to read more. Since expandable list items now *always* contain more information in their expanded state, there’s no need for the `show_more` flag in the templates. Addresses part of the feedback in mysociety/fixmystreet-commercial#1304. --- templates/web/base/report/_item_expandable.html | 18 ++++++++---------- web/cobrands/sass/_base.scss | 10 ++++++++++ 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/templates/web/base/report/_item_expandable.html b/templates/web/base/report/_item_expandable.html index 27682012b..7723ed54a 100644 --- a/templates/web/base/report/_item_expandable.html +++ b/templates/web/base/report/_item_expandable.html @@ -11,9 +11,8 @@ [% truncated_detail = BLOCK %][% problem.detail | truncate(75, '…') | html_para %][% END ~%] [% full_detail = BLOCK %][% problem.detail | add_links | html_para %][% END ~%] -[% SET show_more = truncated_detail != full_detail OR problem.photo ~%] -
  • @@ -33,23 +32,22 @@ [% END %] - [% PROCESS 'report/_item_small.html' %] -
    + [% PROCESS 'report/_item_small.html' %] [% truncated_detail %]
    - [% IF show_more ~%]
    - [% full_detail %] - [% INCLUDE 'report/photo.html' object=problem %] +

    + [% INCLUDE 'report/_report_meta_info.html' %] +

    + [% INCLUDE 'report/_main_sent_info.html' %] + [% INCLUDE 'report/photo.html' object=problem %] + [% full_detail %]
    - [% END %]
    - [% IF show_more ~%] - [% END %]
    • diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index 2491c4c21..8d80044ee 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -1339,6 +1339,16 @@ input.final-submit { margin-top: 0.5em; } + // A sort of hybrid between the .problem-header meta rows, + // and the regular .list-item meta row. + .report_meta_info, + .council_sent_info { + color: #666; + font-family: $meta-font; + font-style: italic; + font-size: 0.8125em; + } + p { line-height: 1.4em; margin-top: 0.5em; -- cgit v1.2.3 From 7e6aa26f5e88d9973ad073c263bf49cb930dfb37 Mon Sep 17 00:00:00 2001 From: Zarino Zappia Date: Tue, 12 Mar 2019 12:35:34 +0000 Subject: Avoid broken looking singleton images in expandable list items When an expanded list item has a single image, it would previously float to the right of the list item action buttons, which looked messy. Now, the buttons clear below the floated image, just like the buttons in the individual report page `.problem-header`. --- web/cobrands/sass/_base.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index 8d80044ee..419d0965e 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -1366,6 +1366,7 @@ input.final-submit { } .item-list__item--expandable__actions { + clear: both; // clear floated .update-img images @include flex-container(); & > * { -- cgit v1.2.3 From a304ca8fe4aebe3063eef8b935fe1881dfeaa38e Mon Sep 17 00:00:00 2001 From: Matthew Somerville Date: Wed, 13 Mar 2019 13:37:09 +0000 Subject: Fix duplicate email alert signup. --- web/cobrands/fixmystreet/fixmystreet.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js index 54ecb3662..0a1e1d2cc 100644 --- a/web/cobrands/fixmystreet/fixmystreet.js +++ b/web/cobrands/fixmystreet/fixmystreet.js @@ -977,7 +977,7 @@ $.extend(fixmystreet.set_up, { e.preventDefault(); var form = $('
    ').attr({ method:'post', action:"/alert/subscribe" }); form.append($('')); - $(this).closest('.js-alert-list').find('input[type=text], input[type=hidden], input[type=radio]:checked').each(function() { + $(this).closest('.js-alert-list').find('input[type=email], input[type=text], input[type=hidden], input[type=radio]:checked').each(function() { var $v = $(this); $('').attr({ name:$v.attr('name'), value:$v.val(), type:'hidden' }).appendTo(form); }); -- cgit v1.2.3 From e306b7d2bc269f58f5feca9497cba031929d6e70 Mon Sep 17 00:00:00 2001 From: Matthew Somerville Date: Wed, 13 Mar 2019 13:54:05 +0000 Subject: Tidy up duplicate fetching code. Run immediately, not onready, so the category change listener is in place; listen to a better event, removing need for a debouncer; don't look up if empty category. --- web/js/duplicates.js | 34 ++++++++-------------------------- 1 file changed, 8 insertions(+), 26 deletions(-) diff --git a/web/js/duplicates.js b/web/js/duplicates.js index d80eb9a2d..723c357e9 100644 --- a/web/js/duplicates.js +++ b/web/js/duplicates.js @@ -1,4 +1,4 @@ -$(function() { +(function() { // Store a reference to the "duplicate" report pins so we can // quickly remove them when we’re finished showing duplicates. @@ -9,13 +9,14 @@ $(function() { var report_id = $("#report_inspect_form .js-report-id").text() || undefined; function refresh_duplicate_list() { - // This function will return a jQuery Promise, so callbacks can be - // hooked onto it, once the ajax request as completed. - var dfd = $.Deferred(); + var category = $('select[name="category"]').val(); + if (category === '-- Pick a category --') { + return; + } var nearby_url; var url_params = { - filter_category: $('select[name="category"]').val(), + filter_category: category, latitude: $('input[name="latitude"]').val(), longitude: $('input[name="longitude"]').val() }; @@ -42,14 +43,10 @@ $(function() { remove_duplicate_pins(); remove_duplicate_list(); } - dfd.resolve(); }).fail(function(){ remove_duplicate_pins(); remove_duplicate_list(); - dfd.reject(); }); - - return dfd.promise(); } function render_duplicate_list(api_response) { @@ -170,24 +167,9 @@ $(function() { refresh_duplicate_list(); } - var category_changing = false; - function problem_form_category_change() { - // Annoyingly this event seems to fire a few times in quick succession, - // so set a flag to avoid multiple overlapping refreshes. - if (category_changing) { return; } - category_changing = true; - - refresh_duplicate_list().always(function(){ - // Wait an extra second until we allow another reload. - setTimeout(function(){ - category_changing = false; - }, 1000); - }); - } - // Want to show potential duplicates when a regular user starts a new // report, or changes the category/location of a partial report. - $("#problem_form").on("change.category", "select#form_category", problem_form_category_change); + $(fixmystreet).on('report_new:category_change', refresh_duplicate_list); // Want to show duplicates when an inspector sets a report’s state to "duplicate". $(document).on('change.state', "#report_inspect_form select#state", inspect_form_state_change); @@ -203,4 +185,4 @@ $(function() { }); }); -}); +})(); -- cgit v1.2.3 From 0fc6e6b1f6fb58ee1a4c587997e727aafa9a75fa Mon Sep 17 00:00:00 2001 From: Matthew Somerville Date: Mon, 25 Mar 2019 18:50:44 +0000 Subject: Fetch reporting data if needed, even if no map. --- web/cobrands/fixmystreet/fixmystreet.js | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js index 0a1e1d2cc..8638c4228 100644 --- a/web/cobrands/fixmystreet/fixmystreet.js +++ b/web/cobrands/fixmystreet/fixmystreet.js @@ -378,8 +378,8 @@ $.extend(fixmystreet.set_up, { // /report/new), fetch it first. That will then automatically call this // function again, due to it calling change() on the category if set. if (!fixmystreet.reporting_data) { - if (fixmystreet.map) { - fixmystreet.update_pin(fixmystreet.map.getCenter(), false); + if (fixmystreet.page === 'new') { + fixmystreet.fetch_reporting_data(); } return; } @@ -1158,6 +1158,15 @@ fixmystreet.update_pin = function(lonlat, savePushState) { } } + fixmystreet.fetch_reporting_data(); + + if (!$('#side-form-error').is(':visible')) { + $('#side-form').show(); + $('#map_sidebar').scrollTop(0); + } +}; + +fixmystreet.fetch_reporting_data = function() { $.getJSON('/report/new/ajax', { latitude: $('#fixmystreet\\.latitude').val(), longitude: $('#fixmystreet\\.longitude').val() @@ -1171,7 +1180,7 @@ fixmystreet.update_pin = function(lonlat, savePushState) { $('body').removeClass('with-notes'); return; } - $('#side-form, #site-logo').show(); + $('#side-form').show(); var old_category_group = $('#category_group').val(), old_category = $("#form_category").val(), filter_category = $("#filter_categories").val(); @@ -1226,12 +1235,6 @@ fixmystreet.update_pin = function(lonlat, savePushState) { $('#js-contribute-as-wrapper').hide(); } }); - - if (!$('#side-form-error').is(':visible')) { - $('#side-form, #site-logo').show(); - $('#map_sidebar').scrollTop(0); - } - }; fixmystreet.display = { -- cgit v1.2.3 From ab11fd295a49bf9107832db27e157741a5cd4224 Mon Sep 17 00:00:00 2001 From: Matthew Somerville Date: Tue, 26 Mar 2019 15:05:21 +0000 Subject: Move added messages to the same place. --- templates/web/base/report/new/category_wrapper.html | 10 ++++++++-- templates/web/base/report/new/form_report.html | 1 - web/cobrands/buckinghamshire/assets.js | 2 +- web/cobrands/fixmystreet-uk-councils/roadworks.js | 2 +- web/cobrands/fixmystreet/assets.js | 2 +- web/cobrands/fixmystreet/fixmystreet.js | 2 +- web/cobrands/oxfordshire/assets.js | 2 +- 7 files changed, 13 insertions(+), 8 deletions(-) diff --git a/templates/web/base/report/new/category_wrapper.html b/templates/web/base/report/new/category_wrapper.html index d6cba9bb3..33c6813f9 100644 --- a/templates/web/base/report/new/category_wrapper.html +++ b/templates/web/base/report/new/category_wrapper.html @@ -17,6 +17,12 @@ [% END %] -[%- IF category_extras OR report_extra_fields %] +[% PROCESS "report/new/duplicate_suggestions.html" %] + +
    + [%# This section includes 'Pick an asset' text, roadworks info, extra category questions %] + + [%- IF category_extras OR report_extra_fields %] [% PROCESS "report/new/category_extras.html" %] -[%- END %] + [%- END %] +
    diff --git a/templates/web/base/report/new/form_report.html b/templates/web/base/report/new/form_report.html index a5b378641..39e29c723 100644 --- a/templates/web/base/report/new/form_report.html +++ b/templates/web/base/report/new/form_report.html @@ -7,7 +7,6 @@ [% PROCESS "report/new/category_wrapper.html" %] [% TRY %][% PROCESS 'report/new/after_category.html' %][% CATCH file %][% END %] -[% PROCESS "report/new/duplicate_suggestions.html" %]
    [% TRY %][% PROCESS 'report/new/_form_labels.html' %][% CATCH file %][% END %] diff --git a/web/cobrands/buckinghamshire/assets.js b/web/cobrands/buckinghamshire/assets.js index 87b7561b8..8135fe184 100644 --- a/web/cobrands/buckinghamshire/assets.js +++ b/web/cobrands/buckinghamshire/assets.js @@ -483,7 +483,7 @@ function check_rights_of_way() { } var $msg = $('

    If you wish to report an issue on a Public Right of Way, please use this service.

    '); - $('#form_category_row').after($msg); + $msg.insertBefore('#js-post-category-messages'); $('.js-hide-if-invalid-category').hide(); } $(fixmystreet).on('report_new:category_change', check_rights_of_way); diff --git a/web/cobrands/fixmystreet-uk-councils/roadworks.js b/web/cobrands/fixmystreet-uk-councils/roadworks.js index 57941082f..7b1b00583 100644 --- a/web/cobrands/fixmystreet-uk-councils/roadworks.js +++ b/web/cobrands/fixmystreet-uk-councils/roadworks.js @@ -217,7 +217,7 @@ fixmystreet.roadworks.display_message = function(feature) { $dl.append(config.text_after); } - $('.change_location').after($msg); + $msg.prependTo('#js-post-category-messages'); }; diff --git a/web/cobrands/fixmystreet/assets.js b/web/cobrands/fixmystreet/assets.js index 53eb616a0..8eaaf463c 100644 --- a/web/cobrands/fixmystreet/assets.js +++ b/web/cobrands/fixmystreet/assets.js @@ -376,7 +376,7 @@ function check_zoom_message_visibility() { if (this.relevant()) { if ($p.length === 0) { $p = $("

    ").prop("id", id).prop('class', 'category_meta_message'); - $p.insertAfter('#form_category_row'); + $p.prependTo('#js-post-category-messages'); } if (this.getVisibility() && this.inRange) { diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js index 8638c4228..30de7a857 100644 --- a/web/cobrands/fixmystreet/fixmystreet.js +++ b/web/cobrands/fixmystreet/fixmystreet.js @@ -407,7 +407,7 @@ $.extend(fixmystreet.set_up, { $category_meta.find("[name="+this.name+"]").val(this.value); }); } else { - $('#form_category_row').after( data.category_extra ); + $('#js-post-category-messages').prepend( data.category_extra ); } } else { $category_meta.empty(); diff --git a/web/cobrands/oxfordshire/assets.js b/web/cobrands/oxfordshire/assets.js index 819719dc1..46b555b02 100644 --- a/web/cobrands/oxfordshire/assets.js +++ b/web/cobrands/oxfordshire/assets.js @@ -18,7 +18,7 @@ function check_rights_of_way() { } var $msg = $('

    Please report problems with rights of way using this page.

    '); - $('#form_category_row').after($msg); + $msg.insertBefore('#js-post-category-messages'); $('.js-hide-if-invalid-category').hide(); } $(fixmystreet).on('report_new:category_change', check_rights_of_way); -- cgit v1.2.3 From 4e23ce51fa7353b915488266517c786168a41880 Mon Sep 17 00:00:00 2001 From: Zarino Zappia Date: Tue, 26 Mar 2019 17:46:31 +0000 Subject: Matching vertical margins for new `js-post-category-messages` MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Shared margin rules for `.box-warning` and `.extra-category-questions` in `_base.scss` and `_layout.scss` (where the margin can potentially change based on the `$mappage-sidebar-padding` variable). * Move the Sass rules for `.box-warning` further up `_base.scss` to be next to `.extra-category-questions` since they’re both so similar. * No need for `.full-width` on the `.extra-category-questions` div since we were overriding the margin-top anyway. * Remove the little triangle between the category select box and the grey `.extra-category-questions` div, since the category questions isn’t always presented immediately after the category select box. --- templates/web/base/report/new/category_extras.html | 2 +- web/cobrands/sass/_base.scss | 112 +++++++++------------ web/cobrands/sass/_layout.scss | 5 + 3 files changed, 56 insertions(+), 63 deletions(-) diff --git a/templates/web/base/report/new/category_extras.html b/templates/web/base/report/new/category_extras.html index f787b9c52..c7bdad94d 100644 --- a/templates/web/base/report/new/category_extras.html +++ b/templates/web/base/report/new/category_extras.html @@ -9,7 +9,7 @@ [%- IF category_extras.$category.size %] [% UNLESS category_extras_hidden.$category %] -
    +

    [% category %]

    [% tprintf( diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index 419d0965e..14d5d2607 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -2043,31 +2043,65 @@ label .muted { } } +.box-warning, +.extra-category-questions { + margin: 1em -1em; +} + .extra-category-questions { background-color: #eee; padding: 1em; - margin-top: 1.5em; // make room for the triangle - position: relative; - - // An upwards pointing triangle - &:before { - content: ""; - display: block; - width: 0; - height: 0; - border-style: solid; - border-width: 0 1em 1em 1em; - border-color: transparent transparent #eee transparent; - position: absolute; - top: -0.9em; // avoid hairline gap between triangle and parent - #{$left}: 1.5em; - } & > :first-child { margin-top: 0; } } +.box-warning { + padding: 2em 2em; + background-color: mix(#fff, $primary, 70%); + + h1 { + font-size: 1.4em; + } + + p { + margin-bottom: 0.5em; + } + + .btn, .btn-primary { + margin: 0.5em 0 1em 0; + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + .segmented-control { + .btn { + &:last-child { + margin-bottom: 1em; + } + } + } +} + +.asset-spot:before { + content: ""; + display: inline-block; + width: 10px; + height: 10px; + border: 2px solid #000; + background-color: #ffff00; + margin: 0 0.3em 0 0.2em; + border-radius: 100%; + vertical-align: -2px; +} + // The coloured sidebar column on .with-actions pages. // On narrow screens, it becomes a full-width section. #side-inspect { @@ -2610,52 +2644,6 @@ a#geolocate_link.loading, .btn--geolocate.loading { } } -.box-warning { - margin: 1em -1em; - padding: 2em 2em; - background-color: mix(#fff, $primary, 70%); - - h1 { - font-size: 1.4em; - } - - p { - margin-bottom: 0.5em; - } - - .btn, .btn-primary { - margin: 0.5em 0 1em 0; - - &:first-child { - margin-top: 0; - } - - &:last-child { - margin-bottom: 0; - } - } - - .segmented-control { - .btn { - &:last-child { - margin-bottom: 1em; - } - } - } -} - -.asset-spot:before { - content: ""; - display: inline-block; - width: 10px; - height: 10px; - border: 2px solid #000; - background-color: #ffff00; - margin: 0 0.3em 0 0.2em; - border-radius: 100%; - vertical-align: -2px; -} - $nicetable-cell-padding: 0.6em 1.5em !default; $nicetable-border-color: #ccc !default; $nicetable-stripe-background: rgba($primary, 0.05) !default; diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss index fb42b39ad..0cbb6a007 100644 --- a/web/cobrands/sass/_layout.scss +++ b/web/cobrands/sass/_layout.scss @@ -200,6 +200,11 @@ body.mappage { // } } +.box-warning, +.extra-category-questions { + margin: 1em ($mappage-sidebar-padding * -1); +} + // Want to cover over the blue sidebar body.mappage.admin { .full-width--top { -- cgit v1.2.3 From 4ea58d559456918624d48d2777a6d68ea0735fae Mon Sep 17 00:00:00 2001 From: Matthew Somerville Date: Thu, 28 Mar 2019 14:36:48 +0000 Subject: [UK] Make roadworks layer a standard road layer. This gives us the "set up on load" functionality. --- web/cobrands/bathnes/js.js | 8 ---- web/cobrands/fixmystreet-uk-councils/roadworks.js | 46 +++++++++-------------- 2 files changed, 17 insertions(+), 37 deletions(-) diff --git a/web/cobrands/bathnes/js.js b/web/cobrands/bathnes/js.js index 418e0650c..afc7df44d 100644 --- a/web/cobrands/bathnes/js.js +++ b/web/cobrands/bathnes/js.js @@ -24,14 +24,6 @@ fixmystreet.roadworks.filter = function(feature) { ( type === 'o' && OpenLayers.Util.indexOf(valid_subtypes, sub_type) != -1 ) ); }; -fixmystreet.roadworks.category_change = function() { - if (fixmystreet.map) { - fixmystreet.roadworks.show_nearby(null, fixmystreet.get_lonlat_from_dom()); - } -}; - -$(fixmystreet).on('report_new:category_change', fixmystreet.roadworks.category_change); - var org_id = '114'; var body = "Bath and North East Somerset Council"; fixmystreet.assets.add($.extend(true, {}, fixmystreet.roadworks.layer_future, { diff --git a/web/cobrands/fixmystreet-uk-councils/roadworks.js b/web/cobrands/fixmystreet-uk-councils/roadworks.js index 7b1b00583..f7451f801 100644 --- a/web/cobrands/fixmystreet-uk-councils/roadworks.js +++ b/web/cobrands/fixmystreet-uk-councils/roadworks.js @@ -140,7 +140,22 @@ var roadworks_defaults = { stylemap: stylemap, body: "", // Cobrand JS should extend and override this. non_interactive: true, - always_visible: true + always_visible: true, + nearest_radius: 100, + road: true, + all_categories: true, + actions: { + found: function(layer, feature) { + $(".js-roadworks-message-" + layer.id).remove(); + if (!fixmystreet.roadworks.filter || fixmystreet.roadworks.filter(feature)) { + fixmystreet.roadworks.display_message(feature); + return true; + } + }, + not_found: function(layer) { + $(".js-roadworks-message-" + layer.id).remove(); + } + } }; fixmystreet.roadworks = {}; @@ -155,30 +170,6 @@ fixmystreet.roadworks.layer_future = $.extend(true, {}, roadworks_defaults, { // fixmystreet.map.layers[5].getNearestFeature(new OpenLayers.Geometry.Point(-0.835614, 51.816562).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:3857")), 10) -fixmystreet.roadworks.show_nearby = function(evt, lonlat) { - $(".js-roadworks-message").remove(); - var providers = fixmystreet.map.getLayersBy('fixmystreet', { - test: function(options) { - return options && options.format_class == OpenLayers.Format.RoadworksForwardPlanning; - } - }); - for (var i=0; i<' + tag_top + '>Roadworks are scheduled near this location, so you may not need to report your issue.

    '); + var $msg = $('
    <' + tag_top + '>Roadworks are scheduled near this location, so you may not need to report your issue.
    '); var $dl = $("
    ").appendTo($msg); $dl.append("
    Dates" + colon + "
    "); $dl.append($("
    ").text(start + " until " + end)); @@ -220,9 +211,6 @@ fixmystreet.roadworks.display_message = function(feature) { $msg.prependTo('#js-post-category-messages'); }; - -$(fixmystreet).on('maps:update_pin', fixmystreet.roadworks.show_nearby); - /* Stop sending a needless header so that no preflight CORS request */ OpenLayers.Request.XMLHttpRequest.prototype.setRequestHeader = function(sName, sValue) { if (sName.toLowerCase() == 'x-requested-with') { -- cgit v1.2.3 From c4c3e4cfb95f0548b1ea4500337777ba327c4445 Mon Sep 17 00:00:00 2001 From: Matthew Somerville Date: Thu, 28 Mar 2019 14:37:14 +0000 Subject: If no category selected, default to main bodies. Otherwise, e.g. going straight to /report/new when category groups enabled may cause always visible layers to disappear because bodies gets emptied. --- web/cobrands/fixmystreet/fixmystreet.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js index 30de7a857..160c39e5f 100644 --- a/web/cobrands/fixmystreet/fixmystreet.js +++ b/web/cobrands/fixmystreet/fixmystreet.js @@ -388,7 +388,11 @@ $.extend(fixmystreet.set_up, { data = fixmystreet.reporting_data.by_category[category], $category_meta = $('#category_meta'); - fixmystreet.bodies = data && data.bodies ? data.bodies : []; + if (data) { + fixmystreet.bodies = data.bodies || []; + } else { + fixmystreet.bodies = fixmystreet.reporting_data.bodies || []; + } if (fixmystreet.body_overrides) { fixmystreet.body_overrides.clear(); } -- cgit v1.2.3