diff options
Diffstat (limited to 'web')
44 files changed, 287 insertions, 73 deletions
diff --git a/web/cobrands/bristol/base.scss b/web/cobrands/bristol/base.scss index 746e17064..c92b46ec3 100644 --- a/web/cobrands/bristol/base.scss +++ b/web/cobrands/bristol/base.scss @@ -4,6 +4,7 @@ @import "../sass/mixins"; @import "../sass/base"; +@import "../sass/report_list_pins"; // Put the BCC logo in place, and reveal the 'bristol.gov.uk' text alongside it #site-logo { diff --git a/web/cobrands/bristol/layout.scss b/web/cobrands/bristol/layout.scss index 02894e083..3b9dfa1b6 100644 --- a/web/cobrands/bristol/layout.scss +++ b/web/cobrands/bristol/layout.scss @@ -1,7 +1,6 @@ @import "_colours"; @import "_fonts"; @import "../sass/layout"; -@import "../sass/report_list_pins"; #site-header { background-color: $g1; diff --git a/web/cobrands/bromley/base.scss b/web/cobrands/bromley/base.scss index 5661632a3..0d028d190 100644 --- a/web/cobrands/bromley/base.scss +++ b/web/cobrands/bromley/base.scss @@ -4,6 +4,7 @@ @import "../sass/mixins"; @import "../sass/base"; +@import "../sass/report_list_pins"; // Override the site logo #site-logo{ diff --git a/web/cobrands/bromley/layout.scss b/web/cobrands/bromley/layout.scss index a8c1f35ce..71d7cbc47 100644 --- a/web/cobrands/bromley/layout.scss +++ b/web/cobrands/bromley/layout.scss @@ -1,6 +1,5 @@ @import "_colours"; @import "../sass/layout"; -@import "../sass/report_list_pins"; // Alter the logo and the header on every page *but* the map page. On the map // page it stays small like in base.css diff --git a/web/cobrands/fixmystreet.com/_colours.scss b/web/cobrands/fixmystreet.com/_colours.scss index 908356d36..c72e48d45 100644 --- a/web/cobrands/fixmystreet.com/_colours.scss +++ b/web/cobrands/fixmystreet.com/_colours.scss @@ -20,6 +20,6 @@ $col_fixed_label: #00BD08; $col_fixed_label_dark: #4B8304; $itemlist_item_background: #f6f6f6; -$itemlist_item_background_hover: mix(#fff, $primary, 50%); +$itemlist_item_background_hover: mix(#fff, $primary, 70%); $layout_front_stats_color: #222; diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js index 190978d45..1a69f895e 100644 --- a/web/cobrands/fixmystreet/fixmystreet.js +++ b/web/cobrands/fixmystreet/fixmystreet.js @@ -213,6 +213,15 @@ fixmystreet.geolocate = { } }; +fixmystreet.update_list_item_buttons = function($list) { + if (!$list) { + return; + } + $list.find('[name="shortlist-up"], [name="shortlist-down"]').prop('disabled', false); + $list.children(':first-child').find('[name="shortlist-up"]').prop('disabled', true); + $list.children(':last-child').find('[name="shortlist-down"]').prop('disabled', true); +}; + fixmystreet.set_up = fixmystreet.set_up || {}; $.extend(fixmystreet.set_up, { basics: function() { @@ -227,7 +236,7 @@ $.extend(fixmystreet.set_up, { $('#pc').focus(); // In case we've come here by clicking back to a form that disabled a submit button - $('input[type=submit]').removeAttr('disabled'); + $('form.validate input[type=submit]').removeAttr('disabled'); $('[data-confirm]').on('click', function() { return confirm(this.getAttribute('data-confirm')); @@ -313,7 +322,6 @@ $.extend(fixmystreet.set_up, { } e.preventDefault(); var $form = $(this), - $change = $form.find("input[name='change']" ), $submit = $form.find("input[type='submit']" ), $labels = $('label[for="' + $submit.attr('id') + '"]'), problemId = $form.find("input[name='id']").val(), @@ -324,18 +332,17 @@ $.extend(fixmystreet.set_up, { $.post(this.action, data, function(data) { if (data.outcome == 'add') { - changeValue = "remove"; + $form.find("input[name='shortlist-add']" ).attr('name', 'shortlist-remove'); buttonLabel = $submit.data('label-remove'); buttonValue = $submit.data('value-remove'); $('.shortlisted-status').remove(); $(document).trigger('shortlist-add', problemId); } else if (data.outcome == 'remove') { - changeValue = "add"; + $form.find("input[name='shortlist-remove']" ).attr('name', 'shortlist-add'); buttonLabel = $submit.data('label-add'); buttonValue = $submit.data('value-add'); $(document).trigger('shortlist-remove', problemId); } - $change.val(changeValue); $submit.val(buttonValue).attr('aria-label', buttonLabel); $labels.text(buttonValue).attr('aria-label', buttonLabel); }); @@ -474,6 +481,88 @@ $.extend(fixmystreet.set_up, { $("#js-change-duplicate-report").click(refresh_duplicate_list); }, + list_item_actions: function() { + function toggle_shortlist(btn, sw, id) { + btn.attr('class', 'item-list__item__shortlist-' + sw); + btn.attr('title', btn.data('label-' + sw)); + if (id) { + sw += '-' + id; + } + btn.attr('name', 'shortlist-' + sw); + } + + $('.item-list').on('click', ':submit', function(e) { + e.preventDefault(); + + var $submitButton = $(this); + var whatUserWants = $submitButton.prop('name'); + var data; + var $item; + var $list; + var $hiddenInput; + var report_id; + if (fixmystreet.page === 'around') { + // Deal differently because one big form + var parts = whatUserWants.split('-'); + whatUserWants = parts[0] + '-' + parts[1]; + report_id = parts[2]; + var token = $('[name=token]').val(); + data = whatUserWants + '=1&token=' + token + '&id=' + report_id; + } else { + var $form = $(this).parents('form'); + $item = $form.parent('.item-list__item'); + $list = $item.parent('.item-list'); + + // The server expects to be told which button/input triggered the form + // submission. But $form.serialize() doesn't know that. So we inject a + // hidden input into the form, that can pass the name and value of the + // submit button to the server, as it expects. + $hiddenInput = $('<input>').attr({ + type: 'hidden', + name: whatUserWants, + value: $submitButton.prop('value') + }).appendTo($form); + data = $form.serialize() + '&ajax=1'; + } + + // Update UI while the ajax request is sent in the background. + if ('shortlist-down' === whatUserWants) { + $item.insertAfter( $item.next() ); + } else if ('shortlist-up' === whatUserWants) { + $item.insertBefore( $item.prev() ); + } else if ('shortlist-remove' === whatUserWants) { + toggle_shortlist($submitButton, 'add', report_id); + } else if ('shortlist-add' === whatUserWants) { + toggle_shortlist($submitButton, 'remove', report_id); + } + + // Items have moved around. We need to make sure the "up" button on the + // first item, and the "down" button on the last item, are disabled. + fixmystreet.update_list_item_buttons($list); + + $.ajax({ + url: '/my/planned/change', + type: 'POST', + data: data + }).fail(function() { + // Undo the UI changes we made. + if ('shortlist-down' === whatUserWants) { + $item.insertBefore( $item.prev() ); + } else if ('shortlist-up' === whatUserWants) { + $item.insertAfter( $item.next() ); + } else if ('shortlist-remove' === whatUserWants) { + toggle_shortlist($submitButton, 'remove', report_id); + } else if ('shortlist-add' === whatUserWants) { + toggle_shortlist($submitButton, 'add', report_id); + } + fixmystreet.update_list_item_buttons($list); + }).complete(function() { + if ($hiddenInput) { + $hiddenInput.remove(); + } + }); + }); + }, contribute_as: function() { $('.content').on('change', '.js-contribute-as', function(){ diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-active-hover.png b/web/cobrands/fixmystreet/images/icon-shortlist-active-hover.png Binary files differnew file mode 100644 index 000000000..a2574d407 --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-active-hover.png diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-active-hover.svg b/web/cobrands/fixmystreet/images/icon-shortlist-active-hover.svg new file mode 100644 index 000000000..054b98134 --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-active-hover.svg @@ -0,0 +1 @@ +<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icon-shortlist-active-hover</title><defs><path d="M5.1 22.832l6.9-3.627 6.9 3.627c.286-.192.565-.395.835-.61l-1.318-7.68L24 9.103c-.093-.334-.2-.66-.32-.983l-7.714-1.122L12.518.01C12.346.005 12.173 0 12 0c-.173 0-.346.004-.518.01L8.034 7 .32 8.118c-.12.323-.227.65-.32.983l5.583 5.443-1.318 7.68c.27.214.55.417.836.61z" id="a"/><mask id="b" x="0" y="0" width="24" height="22.832" fill="#fff"><use xlink:href="#a"/></mask></defs><use mask="url(#b)" xlink:href="#a" stroke="#000" stroke-width="4" fill="#000" fill-rule="evenodd" stroke-opacity=".2" fill-opacity=".15"/></svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-active-hover@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-active-hover@2x.png Binary files differnew file mode 100644 index 000000000..b52123a4a --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-active-hover@2x.png diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-active.png b/web/cobrands/fixmystreet/images/icon-shortlist-active.png Binary files differnew file mode 100644 index 000000000..e35ecb179 --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-active.png diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-active.svg b/web/cobrands/fixmystreet/images/icon-shortlist-active.svg new file mode 100644 index 000000000..fcf677a0f --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-active.svg @@ -0,0 +1 @@ +<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>icon-shortlist-active</title><path d="M5.1 22.832l6.9-3.627 6.9 3.627c.286-.192.565-.395.835-.61l-1.318-7.68L24 9.103c-.093-.334-.2-.66-.32-.983l-7.714-1.122L12.518.01C12.346.005 12.173 0 12 0c-.173 0-.346.004-.518.01L8.034 7 .32 8.118c-.12.323-.227.65-.32.983l5.583 5.443-1.318 7.68c.27.214.55.417.836.61z" fill="#00BD08" fill-rule="evenodd"/></svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-active@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-active@2x.png Binary files differnew file mode 100644 index 000000000..bcd5d8c0d --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-active@2x.png diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-down-hover.png b/web/cobrands/fixmystreet/images/icon-shortlist-down-hover.png Binary files differnew file mode 100644 index 000000000..c2151f55e --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-down-hover.png diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-down-hover.svg b/web/cobrands/fixmystreet/images/icon-shortlist-down-hover.svg new file mode 100644 index 000000000..c8ab5b2b3 --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-down-hover.svg @@ -0,0 +1 @@ +<svg width="24" height="14" viewBox="0 0 24 14" xmlns="http://www.w3.org/2000/svg"><title>icon-shortlist-down-hover</title><path d="M10 6h4V0h-4v6zm2 8l8-8H4l8 8z" fill="#00BD08" fill-rule="evenodd"/></svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-down-hover@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-down-hover@2x.png Binary files differnew file mode 100644 index 000000000..3deb4c1d1 --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-down-hover@2x.png diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-down.png b/web/cobrands/fixmystreet/images/icon-shortlist-down.png Binary files differnew file mode 100644 index 000000000..df700f7cd --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-down.png diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-down.svg b/web/cobrands/fixmystreet/images/icon-shortlist-down.svg new file mode 100644 index 000000000..495f7d647 --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-down.svg @@ -0,0 +1 @@ +<svg width="24" height="14" viewBox="0 0 24 14" xmlns="http://www.w3.org/2000/svg"><title>icon-shortlist-down</title><path d="M10 6h4V0h-4v6zm2 8l8-8H4l8 8z" fill="#000" fill-rule="evenodd" fill-opacity=".3"/></svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-down@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-down@2x.png Binary files differnew file mode 100644 index 000000000..cfdadf2e4 --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-down@2x.png diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-inactive-hover.png b/web/cobrands/fixmystreet/images/icon-shortlist-inactive-hover.png Binary files differnew file mode 100644 index 000000000..897634bee --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-inactive-hover.png diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-inactive-hover.svg b/web/cobrands/fixmystreet/images/icon-shortlist-inactive-hover.svg new file mode 100644 index 000000000..05239ef51 --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-inactive-hover.svg @@ -0,0 +1 @@ +<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icon-shortlist-inactive-hover</title><defs><path d="M5.1 22.832l6.9-3.627 6.9 3.627c.286-.192.565-.395.835-.61l-1.318-7.68L24 9.103c-.093-.334-.2-.66-.32-.983l-7.714-1.122L12.518.01C12.346.005 12.173 0 12 0c-.173 0-.346.004-.518.01L8.034 7 .32 8.118c-.12.323-.227.65-.32.983l5.583 5.443-1.318 7.68c.27.214.55.417.836.61z" id="a"/><mask id="b" x="0" y="0" width="24" height="22.832" fill="#fff"><use xlink:href="#a"/></mask></defs><use mask="url(#b)" xlink:href="#a" stroke-width="4" stroke="#00BD08" fill="#00BD08" fill-rule="evenodd" fill-opacity=".25"/></svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-inactive-hover@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-inactive-hover@2x.png Binary files differnew file mode 100644 index 000000000..b561473fd --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-inactive-hover@2x.png diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-inactive.png b/web/cobrands/fixmystreet/images/icon-shortlist-inactive.png Binary files differnew file mode 100644 index 000000000..66d9684fb --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-inactive.png diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-inactive.svg b/web/cobrands/fixmystreet/images/icon-shortlist-inactive.svg new file mode 100644 index 000000000..b2709859e --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-inactive.svg @@ -0,0 +1 @@ +<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icon-shortlist-inactive</title><defs><path d="M5.1 22.832l6.9-3.627 6.9 3.627c.286-.192.565-.395.835-.61l-1.318-7.68L24 9.103c-.093-.334-.2-.66-.32-.983l-7.714-1.122L12.518.01C12.346.005 12.173 0 12 0c-.173 0-.346.004-.518.01L8.034 7 .32 8.118c-.12.323-.227.65-.32.983l5.583 5.443-1.318 7.68c.27.214.55.417.836.61z" id="a"/><mask id="b" x="0" y="0" width="24" height="22.832" fill="#fff"><use xlink:href="#a"/></mask></defs><use mask="url(#b)" xlink:href="#a" stroke="#000" stroke-width="4" fill="none" fill-rule="evenodd" stroke-opacity=".3"/></svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-inactive@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-inactive@2x.png Binary files differnew file mode 100644 index 000000000..47b86d144 --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-inactive@2x.png diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-taken-hover.png b/web/cobrands/fixmystreet/images/icon-shortlist-taken-hover.png Binary files differnew file mode 100644 index 000000000..0069de106 --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-taken-hover.png diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-taken-hover.svg b/web/cobrands/fixmystreet/images/icon-shortlist-taken-hover.svg new file mode 100644 index 000000000..b9442e004 --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-taken-hover.svg @@ -0,0 +1 @@ +<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>icon-shortlist-taken-hover</title><g fill="none" fill-rule="evenodd"><path d="M4.095 19.326l5.537-2.91 5.537 2.91c.23-.153.454-.316.67-.488l-1.057-6.165 4.48-4.368c-.074-.267-.16-.53-.255-.788l-6.192-.9-2.77-5.61C9.91 1.004 9.772 1 9.633 1c-.14 0-.278.003-.415.008l-2.77 5.61-6.19.9c-.097.257-.182.52-.257.787l4.48 4.368-1.056 6.165c.216.172.44.335.67.488z" fill="#00BD08"/><path d="M17.777 17.18c.142-.055.277-.118.402-.187.048-.026.102-.04.157-.04h.176c.057 0 .112.014.16.042 1.935.496 3.733 1.535 5.206 3.007.064.064.1.154.1.247L24 21.64c0 .19-.15.346-.336.346H8.336c-.185 0-.336-.156-.336-.346l-.02-1.393c0-.094.038-.183.103-.248.246-.246.5-.48.765-.7l.784-.414 4.335 2.28L17 21l.98-2.63-.203-1.19zm-.294-1.713c1.465-.742 2.498-2.538 2.498-4.635v-.167l-2.845 2.772.348 2.03z" fill-opacity=".3" fill="#000"/></g></svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-taken-hover@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-taken-hover@2x.png Binary files differnew file mode 100644 index 000000000..3e8bbcd58 --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-taken-hover@2x.png diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-taken.png b/web/cobrands/fixmystreet/images/icon-shortlist-taken.png Binary files differnew file mode 100644 index 000000000..f332d52f1 --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-taken.png diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-taken.svg b/web/cobrands/fixmystreet/images/icon-shortlist-taken.svg new file mode 100644 index 000000000..85154a8fb --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-taken.svg @@ -0,0 +1 @@ +<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>icon-shortlist-taken</title><path d="M12.167 5.303l-2.12-4.295C9.91 1.003 9.77 1 9.632 1c-.14 0-.278.003-.415.008l-2.77 5.61-6.19.9c-.097.257-.182.52-.257.787l4.48 4.368-1.056 6.165c.216.172.44.335.67.488L7.91 17.32c1.074-.93 2.244-1.644 3.47-2.116-.867-1.217-1.39-2.783-1.39-4.49 0-2.178.848-4.124 2.177-5.41zm6.495 11.686c.004 0 .008.003.012.005 1.934.496 3.732 1.535 5.205 3.007.064.064.1.154.1.247L24 21.64c0 .19-.15.346-.336.346H8.336c-.185 0-.336-.156-.336-.346l-.02-1.393c0-.094.038-.183.103-.248 1.477-1.476 3.28-2.516 5.22-3.012.806.473 1.716.74 2.678.74.965 0 1.876-.268 2.682-.74zm-2.68-1.158c2.208 0 4-2.24 4-5 0-2.762-1.792-5-4-5-2.21 0-4 2.238-4 5 0 2.76 1.79 5 4 5z" fill="#000" fill-rule="evenodd" fill-opacity=".3"/></svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-taken@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-taken@2x.png Binary files differnew file mode 100644 index 000000000..1c5759701 --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-taken@2x.png diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-up-hover.png b/web/cobrands/fixmystreet/images/icon-shortlist-up-hover.png Binary files differnew file mode 100644 index 000000000..d518fa029 --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-up-hover.png diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-up-hover.svg b/web/cobrands/fixmystreet/images/icon-shortlist-up-hover.svg new file mode 100644 index 000000000..fe3a941e1 --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-up-hover.svg @@ -0,0 +1 @@ +<svg width="24" height="14" viewBox="0 0 24 14" xmlns="http://www.w3.org/2000/svg"><title>icon-shortlist-up-hover</title><path d="M10 8h4v6h-4V8zm2-8l8 8H4l8-8z" fill="#00BD08" fill-rule="evenodd"/></svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-up-hover@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-up-hover@2x.png Binary files differnew file mode 100644 index 000000000..233864de9 --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-up-hover@2x.png diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-up.png b/web/cobrands/fixmystreet/images/icon-shortlist-up.png Binary files differnew file mode 100644 index 000000000..09ce57064 --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-up.png diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-up.svg b/web/cobrands/fixmystreet/images/icon-shortlist-up.svg new file mode 100644 index 000000000..c99767267 --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-up.svg @@ -0,0 +1 @@ +<svg width="24" height="14" viewBox="0 0 24 14" xmlns="http://www.w3.org/2000/svg"><title>icon-shortlist-up</title><path d="M10 8h4v6h-4V8zm2-8l8 8H4l8-8z" fill="#000" fill-rule="evenodd" fill-opacity=".3"/></svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-up@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-up@2x.png Binary files differnew file mode 100644 index 000000000..922cc0a94 --- /dev/null +++ b/web/cobrands/fixmystreet/images/icon-shortlist-up@2x.png diff --git a/web/cobrands/greenwich/base.scss b/web/cobrands/greenwich/base.scss index 756b2d60a..0c52bd5da 100644 --- a/web/cobrands/greenwich/base.scss +++ b/web/cobrands/greenwich/base.scss @@ -4,6 +4,7 @@ @import "../sass/mixins"; @import "../sass/base"; +@import "../sass/report_list_pins"; body.frontpage #site-logo, #site-logo diff --git a/web/cobrands/greenwich/layout.scss b/web/cobrands/greenwich/layout.scss index 54150cfd4..db06c9424 100644 --- a/web/cobrands/greenwich/layout.scss +++ b/web/cobrands/greenwich/layout.scss @@ -1,7 +1,6 @@ @import "_colours"; @import "_fonts"; @import "../sass/layout"; -@import "../sass/report_list_pins"; $fixed_page_width: 990px; diff --git a/web/cobrands/oxfordshire/_colours.scss b/web/cobrands/oxfordshire/_colours.scss index a8a78dc6e..ba0597bb8 100644 --- a/web/cobrands/oxfordshire/_colours.scss +++ b/web/cobrands/oxfordshire/_colours.scss @@ -25,6 +25,9 @@ $col_click_map: $oxfordshire_lt_green; $col_fixed_label: $oxfordshire_lt_green; $col_fixed_label_dark: mix(#000, $oxfordshire_lt_green, 50%); +$itemlist_item_background: $oxfordshire_very_light_green; +$itemlist_item_background_hover: #e3f1d5; // darker version of $oxfordshire_very_light_green + // Oxfordshire have toasty orange buttons $oxfordshire_button_base: #F35A0E; diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss index 0cc621310..49a1ac66c 100644 --- a/web/cobrands/oxfordshire/base.scss +++ b/web/cobrands/oxfordshire/base.scss @@ -4,6 +4,7 @@ @import "../sass/base"; @import "../sass/top-banner"; +@import "../sass/report_list_pins"; #site-header { background: none; diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss index 22edca768..726b298ff 100644 --- a/web/cobrands/oxfordshire/layout.scss +++ b/web/cobrands/oxfordshire/layout.scss @@ -4,7 +4,6 @@ $mappage-header-height: 64px; @import "_colours"; @import "../sass/layout"; -@import "../sass/report_list_pins"; body, body a { font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; @@ -231,20 +230,14 @@ body.mappage { background-color: #deead2; } -.item-list--reports { - li:after { - background-color: $oxfordshire_mid_grey_green; - } - - h3 { - color: $oxfordshire_link_colour; - } +.item-list--reports h3 { + color: $oxfordshire_link_colour; } h4.static-with-rule { margin-top: 1em; // down from default 2em, avoid extra space between heading and .council_info_box margin-bottom: 0; // no space between this and the .item-list items - background: transparent; // rather than light grey + // TODO background: transparent; // rather than light grey padding: 0.75em 1em * (1/0.875); // compensate for 0.875 font-size } diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index 3bb8715a1..5d6176add 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -1013,6 +1013,152 @@ input.final-submit { } } +// A version where the normal padding of the list-item is tweaked to +// make room for an icon or a button next to the report details. +.item-list__item--indented { + position: relative; + margin: 0; // reset 0.25em margin-top on default item-list__item + padding: 0; + border-top: 1px solid #e5e5e5; // can't apply border to `a` because of border-left + + a { + display: block; + padding: 1em; + padding-#{$left}: 2.5em; // make space for background image + border-#{$left}: solid 1em transparent; // inset background image 1em from the left + background: transparent; + } + + // Trigger hover style even when hovering over sibling item-action-button + &:hover a { + background-color: $itemlist_item_background_hover; + } + + h3 { + color: inherit; // Some cobrands might want to override with $primary for a more colourful list + margin: 0 0 0.2em 0; + padding-top: 0; // override .item-list__heading + line-height: 1.3em; // override .item-list__heading + } + + p { + margin: 0; + font-size: 0.8em; + color: #777; + } +} + +// Add this to your .item-list__item--indented element if you +// need to display both an action button *and* up/down arrows +.item-list__item--act-and-sort { + a { + padding-#{$left}: 4.5em; // make space for the extra buttons + } + + .item-list__item__shortlist-up, + .item-list__item__shortlist-down { + width: 36px; // down from 48px + left: 3.5em; // up from 1em + } +} + +%list-item-action-button { + position: absolute; + left: 1em; // match the padding on the `a` element + top: 50%; + margin-top: -24px; // vertically center + margin-left: -12px; // horizontally center + + display: block; + width: 48px; + font-size: 1em; + + padding: 0; + border: none; + background: transparent; + + overflow: hidden; // hide button text + height: 0; + padding-top: 48px; + + background-position: center center; + background-repeat: no-repeat; + background-size: 24px 24px; +} + +.item-list__item__shortlist-add { + @extend %list-item-action-button; + @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-inactive'); + + &:hover, + &:focus { + @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-inactive-hover'); + } +} + +.item-list__item__shortlist-remove { + @extend %list-item-action-button; + @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-active'); + + &:hover, + &:focus { + @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-active-hover'); + } +} + +.item-list__item__shortlist-take { + @extend %list-item-action-button; + @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-taken'); + + &:hover, + &:focus { + @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-taken-hover'); + } +} + +.item-list__item__shortlist-up { + @extend %list-item-action-button; + + padding-top: 24px; // half the normal height, because shorter icon + background-size: 24px 14px; + + @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-up'); + + &:hover, + &:focus { + @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-up-hover'); + } + + &[disabled] { + opacity: 0.5; + cursor: default; + + @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-up'); + } +} + +.item-list__item__shortlist-down { + @extend %list-item-action-button; + + margin-top: 0; // this is the "lower" arrow, so no need to offset vertical position + padding-top: 24px; // half the normal height, because shorter icon + background-size: 24px 14px; + + @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-down'); + + &:hover, + &:focus { + @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-down-hover'); + } + + &[disabled] { + opacity: 0.5; + cursor: default; + + @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-down'); + } +} + .item-list__heading { font-size: 1em; font-weight: normal; @@ -1045,8 +1191,15 @@ input.final-submit { margin-right: 0.1em; } -.item-list__item--empty p { - margin: 0; +.item-list__item--empty { + background: none; + color: #777; + + p { + margin: 0; + padding: 1em; + text-align: center; + } } .item-list--front-page { diff --git a/web/cobrands/sass/_mixins.scss b/web/cobrands/sass/_mixins.scss index 2b05b3c21..8b6114aec 100644 --- a/web/cobrands/sass/_mixins.scss +++ b/web/cobrands/sass/_mixins.scss @@ -171,3 +171,15 @@ $right: right; -ms-flex-align: $alignment; align-items: $alignment; } + +@mixin high-dpi-background-image($path) { + background-image: url("#{$path}.png"); + + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + background-image: url("#{$path}@2x.png"); + } + + @media screen { + background-image: url("#{$path}.svg"), none; + } +} diff --git a/web/cobrands/sass/_report_list_pins.scss b/web/cobrands/sass/_report_list_pins.scss index eaeefbc10..3dae2cf84 100644 --- a/web/cobrands/sass/_report_list_pins.scss +++ b/web/cobrands/sass/_report_list_pins.scss @@ -1,15 +1,11 @@ +// Like .item-list__item--indented except with a pin icon baked in! .item-list__item--with-pin { - position: relative; - margin: 0; - padding: 0; - background: none; + @extend .item-list__item--indented; a { - display: block; - padding: 1em; - padding-#{$left}: 3em; - border-#{$left}: solid 1em transparent; - background: transparent url(/i/pin-yellow-small.png) no-repeat $left center; + background-image: url(/i/pin-yellow-small.png); + background-repeat: no-repeat; + background-position: $left center; } &.yellow a { @@ -24,31 +20,6 @@ &.grey a { background-image: url(/i/pin-grey-small.png); } - - &:after { - content: ""; - display: block; - height: 1px; - position: absolute; - #{$left}: 3em; - #{$right}: 0; - bottom: 0; - background-color: #e5e5e5; - } - - h3, p { - margin: 0; - } - - h3 { - color: $primary; - margin-bottom: 0.2em; - } - - p { - font-size: 0.8em; - color: #777; - } } .item-list--reports__item--selected { background: $base_bg; @@ -59,24 +30,6 @@ } -.item-list__item--empty { - background: none; - color: #777; - p { - padding: 1em; - text-align: center; - } -} - -/* We have no padding on the front page */ -body.frontpage { - .item-list__item--with-pin a { - padding: 0; - padding-#{$left}: 3em; - } -} - - .big-green-banner { display: none; // hide the empty banner by default } |
