Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve meaningful sequence in report page #5208

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions templates/web/base/alert/_updates.html
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
<form action="[% c.uri_for( '/alert/subscribe' ) %]" method="post">

<p><a href="[% c.uri_for( '/rss', problem.id ) %]">
<img src="/i/feed.png" width="16" height="16" title="[% loc('RSS feed') %]" alt="[% loc('RSS feed of updates to this problem' ) %]" border="0" style="float:right">
</a>

[% IF NOT c.user_exists OR c.user.alert_updates_by(c.cobrand) != 'phone' %]
[% loc('Receive email when updates are left on this problem.') %]
<span id="report-updates-data-title">[% loc('Receive email when updates are left on this problem.') %]</span>
[% ELSE %]
[% loc('Receive a text when updates are left on this problem.') %]
[% END %]
<span id="report-updates-data-title">[% loc('Receive a text when updates are left on this problem.') %]
[% END %]</span>
</p>

<button type="button" class="close-drawer screen-reader-only" aria-label="Close this dialog"></button>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it better to use aria-label or just have the button have the same text as its actual contents?


[% PROCESS 'auth/form_extra.html' %]

[% IF c.user_exists %]
Expand Down
1 change: 1 addition & 0 deletions templates/web/base/around/_skip-key-tools.html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<a href="#report-list-filters" class="skiplink" aria-label="Skip report tools and jump to reports list">Skip report tools</a>
7 changes: 6 additions & 1 deletion templates/web/base/around/_updates.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
[% INCLUDE 'around/_skip-key-tools.html' %]
<div class="shadow-wrap">
<ul id="key-tools">
<li><a class="feed js-feed" id="key-tool-around-updates" href="[% email_url | html %]">[% loc("Get updates") %]</a></li>
<li>
<a class="feed js-feed has-inline-svg" id="key-tool-around-updates" href="[% email_url | html %]">[% loc("Get updates") %]
<svg xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em" viewBox="0 0 24 24" fill="currentColor" role="presentation" aria-hidden="true"><path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/></svg>
</a>
</li>
</ul>
</div>
5 changes: 4 additions & 1 deletion templates/web/base/around/display_location.html
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,10 @@

[% IF allow_creation %]
<div style="display:none" id="side-form">
<a href="#" class="js-back problem-back problem-back--top">[% loc('Back') %]</a>
<a href="#" class="js-back has-inline-svg problem-back problem-back--top">
<svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H13L6.5 8L13 16H6.5L0 8L6.5 0Z" fill="currentColor"/></svg>
[% loc('Back') %]
</a>
[% INCLUDE "report/new/fill_in_details_form.html"
js = 1,
report.used_map = 1
Expand Down
5 changes: 4 additions & 1 deletion templates/web/base/report/_back_to_all.html
Original file line number Diff line number Diff line change
@@ -1,2 +1,5 @@
<a href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]"
class="problem-back js-back-to-report-list">[% loc('Back to all reports') %]</a>
class="has-inline-svg has-inline-svg--left-align problem-back js-back-to-report-list">
<svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H13L6.5 8L13 16H6.5L0 8L6.5 0Z" fill="currentColor"/></svg>
[% loc('Back to all reports') %]
</a>
13 changes: 7 additions & 6 deletions templates/web/base/report/display.html
Original file line number Diff line number Diff line change
Expand Up @@ -45,18 +45,19 @@
[% END %]

[% TRY %][% INCLUDE 'report/_message_manager.html' %][% CATCH file %][% END %]
[% INCLUDE 'report/display_tools.html' %]
[% TRY %][% INCLUDE 'report/sharing.html' %][% CATCH file %][% END %]
[% INCLUDE 'report/updates.html' %]
[% INCLUDE 'report/display_tools_mobile.html' %]

[% IF problem.duplicate_of %]
[% INCLUDE 'report/duplicate-no-updates.html' %]
[% INCLUDE 'report/duplicate-no-updates.html' %]
[% ELSIF problem.cobrand_data == 'noise' %]
<p>[% loc('This report is now closed to updates from the public.') %]</p>
<p>[% loc('This report is now closed to updates from the public.') %]</p>
[% ELSIF NOT shown_form %]
[% PROCESS 'report/update-form-wrapper.html' %]
[% PROCESS 'report/update-form-wrapper.html' %]
[% END %]

[% INCLUDE 'report/display_tools.html' %]
[% TRY %][% INCLUDE 'report/sharing.html' %][% CATCH file %][% END %]
[% INCLUDE 'report/updates.html' %]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The get updates and share things are appearing in the wrong place at mobile width for staff - you click either button and the extra stuff appears too far down, underneath the "Provide an update" button rather than above it. And for non-staff, the buttons aren't working at all, nothing happens when clicked.

</div>

[% second_column | safe %]
Expand Down
55 changes: 36 additions & 19 deletions templates/web/base/report/display_tools.html
Original file line number Diff line number Diff line change
@@ -1,44 +1,61 @@
<div class="shadow-wrap">
<ul id="key-tools">
<ul id="key-tools" class="js-key-tools">
[% IF c.user_exists OR NOT problem.non_public %]
[% IF c.cobrand.users_can_hide AND relevant_staff_user %]
<li><form method="post" action="/report/[% problem.id %]/delete" id="remove-from-site-form">
<input type="hidden" name="token" value="[% csrf_token %]">
<button type="submit" id="key-tool-report-abuse" class="abuse" data-confirm="[% loc('Are you sure?') %]" name="remove_from_site">[% loc('Remove from site') %]</button>
<button type="submit" id="key-tool-report-abuse" class="has-inline-svg" data-confirm="[% loc('Are you sure?') %]" name="remove_from_site">
[% loc('Remove from site') %]
<svg role="presentation" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M12.866 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0zM11 16v2h2v-2h-2zm0-7v5h2V9h-2z"/></svg>
</button>
</form></li>
[% ELSIF c.cobrand.moniker != 'zurich' %]
<li><a rel="nofollow" id="key-tool-report-abuse" class="abuse" href="[% c.uri_for( '/contact', { id => problem.id } ) %]">[%
c.cobrand.moniker == 'fixmystreet' ? 'Unsuitable?' : loc('Report abuse')
%]</a></li>
<li><a rel="nofollow" id="key-tool-report-abuse" class="has-inline-svg" href="[% c.uri_for( '/contact', { id => problem.id } ) %]">
[% c.cobrand.moniker == 'fixmystreet' ? 'Unsuitable?' : loc('Report abuse') %]
<svg role="presentation" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M12.866 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0zM11 16v2h2v-2h-2zm0-7v5h2V9h-2z"/></svg></a></li>
[% END %]
[% IF c.cobrand.moniker != 'zurich' %]
<li><a rel="nofollow" id="key-tool-report-updates" class="feed" href="[% c.uri_for( '/alert/subscribe', { id => problem.id } ) %]">[% loc('Get updates' ) %]</a></li>
<li><a rel="nofollow" class="has-inline-svg js-key-tool-report-updates" aria-expanded="false" href="[% c.uri_for( '/alert/subscribe', { id => problem.id } ) %]">
[% loc('Get updates' ) %]
<svg xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em" viewBox="0 0 24 24" fill="currentColor" role="presentation" aria-hidden="true"><path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/></svg>
</a></li>
[% END %]
[% IF c.cobrand.moniker == 'fixmystreet' %]
<li><a rel="nofollow" id="key-tool-report-share" class="share" href="#report-share">[% loc('Share') %]</a></li>
<li><a rel="nofollow" class="has-inline-svg js-key-tool-report-share" href="#report-share" aria-expanded="false">
[% loc('Share') %]
<svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" fill="currentColor" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M378,324a69.78,69.78,0,0,0-48.83,19.91L202,272.41a69.68,69.68,0,0,0,0-32.82l127.13-71.5A69.76,69.76,0,1,0,308.87,129l-130.13,73.2a70,70,0,1,0,0,107.56L308.87,383A70,70,0,1,0,378,324Z"/></svg>
</a></li>
[% END %]
[% END %]
[% IF c.cobrand.moniker == 'zurich' %]
<li><a class="chevron" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">[% loc( 'Problems on the map' ) %]</a></li>
<li><a class="has-inline-svg" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">
[% loc( 'Problems on the map' ) %]
<svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H0L6.5 8L0 16H6.5L13 8L6.5 0Z" fill="currentColor"/></svg>
</a></li>
[% ELSE %]
<li><a class="chevron" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">[% loc( 'Problems nearby' ) %]</a></li>
<li><a class="has-inline-svg" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">
[% loc( 'Problems nearby' ) %]
<svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H0L6.5 8L0 16H6.5L13 8L6.5 0Z" fill="currentColor"/></svg>
</a></li>
[% END %]
</ul>

[% IF c.cobrand.moniker == 'fixmystreet' %]
<div id="report-share" class="hidden-js" align="center">
<a class="btn btn--social btn--twitter" href="https://twitter.com/intent/tweet?text=I%20just%20viewed%20this%20report:%20&lsquo;[% problem.title_safe | uri %]&rsquo;&amp;url=[% c.cobrand.base_url | uri %][% c.req.uri.path | uri %]&amp;via=fixmystreet&amp;related=mySociety">
<img alt="" src="/i/twitter-icon-32.png" width="17" height="32">
Tweet
</a>
<a class="btn btn--social btn--facebook" href="https://www.facebook.com/sharer/sharer.php?u=[% c.cobrand.base_url %][% c.req.uri.path %]">
<img alt="" src="/i/facebook-icon-32.png" width="17" height="32">
Share
</a>
<div id="report-share" class="hidden-js" align="center" role="dialog" aria-modal="true" aria-labelledby="report-share-title">
<p id="report-share-title" class="screen-reader-only">Share this report on Twitter or Facebook</p>
<a class="btn btn--social btn--twitter" href="https://twitter.com/intent/tweet?text=I%20just%20viewed%20this%20report:%20&lsquo;[% problem.title_safe | uri %]&rsquo;&amp;url=[% c.cobrand.base_url | uri %][% c.req.uri.path | uri %]&amp;via=fixmystreet&amp;related=mySociety">
<img alt="" src="/i/twitter-icon-32.png" width="17" height="32">
Tweet
</a>
<a class="btn btn--social btn--facebook" href="https://www.facebook.com/sharer/sharer.php?u=[% c.cobrand.base_url %][% c.req.uri.path %]">
<img alt="" src="/i/facebook-icon-32.png" width="17" height="32">
Share
</a>
<button class="close-drawer screen-reader-only" aria-label="Close this dialog"></button>
</div>
[% END %]

<div id="report-updates-data" class="hidden-js">
<div id="report-updates-data" class="hidden-js" role="dialog" aria-modal="true" aria-labelledby="report-updates-data-title">
[% INCLUDE 'alert/_updates.html' %]
</div>

Expand Down
43 changes: 43 additions & 0 deletions templates/web/base/report/display_tools_mobile.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<div class="shadow-wrap">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This template seems very similar to the non-mobile one, I can combine them later.

<ul id="key-tools-mobile" class="js-key-tools">
[% IF c.user_exists OR NOT problem.non_public %]
[% IF c.cobrand.users_can_hide AND relevant_staff_user %]
<li><form method="post" action="/report/[% problem.id %]/delete" id="remove-from-site-form">
<input type="hidden" name="token" value="[% csrf_token %]">
<button type="submit" id="key-tool-report-abuse" class="has-inline-svg has-inline-svg--column-wrap" data-confirm="[% loc('Are you sure?') %]" name="remove_from_site">
<svg role="presentation" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M12.866 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0zM11 16v2h2v-2h-2zm0-7v5h2V9h-2z"/></svg>
[% loc('Remove from site') %]
</button>
</form></li>
[% ELSIF c.cobrand.moniker != 'zurich' %]
<li><a rel="nofollow" id="key-tool-report-abuse" class="has-inline-svg has-inline-svg--column-wrap" href="[% c.uri_for( '/contact', { id => problem.id } ) %]">
<svg role="presentation" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M12.866 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0zM11 16v2h2v-2h-2zm0-7v5h2V9h-2z"/></svg>
[% c.cobrand.moniker == 'fixmystreet' ? 'Unsuitable?' : loc('Report abuse') %]
</a></li>
[% END %]
[% IF c.cobrand.moniker != 'zurich' %]
<li><a rel="nofollow" class="js-key-tool-report-updates has-inline-svg has-inline-svg--column-wrap" href="[% c.uri_for( '/alert/subscribe', { id => problem.id } ) %]" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em" viewBox="0 0 24 24" fill="currentColor" role="presentation" aria-hidden="true"><path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/></svg>
[% loc('Get updates' ) %]
</a></li>
[% END %]
[% IF c.cobrand.moniker == 'fixmystreet' %]
<li><a rel="nofollow" class="js-key-tool-report-share has-inline-svg has-inline-svg--column-wrap" href="#report-share" aria-expanded="false">
<svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" fill="currentColor" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M378,324a69.78,69.78,0,0,0-48.83,19.91L202,272.41a69.68,69.68,0,0,0,0-32.82l127.13-71.5A69.76,69.76,0,1,0,308.87,129l-130.13,73.2a70,70,0,1,0,0,107.56L308.87,383A70,70,0,1,0,378,324Z"/></svg>
[% loc('Share') %]
</a></li>
[% END %]
[% END %]
[% IF c.cobrand.moniker == 'zurich' %]
<li><a class="has-inline-svg has-inline-svg--column-wrap" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">
<svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H0L6.5 8L0 16H6.5L13 8L6.5 0Z" fill="currentColor"/></svg>
[% loc( 'Problems on the map' ) %]
</a></li>
[% ELSE %]
<li><a class="has-inline-svg has-inline-svg--column-wrap" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">
<svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H0L6.5 8L0 16H6.5L13 8L6.5 0Z" fill="currentColor"/></svg>
[% loc( 'Problems nearby' ) %]
</a></li>
[% END %]
</ul>
</div>
5 changes: 4 additions & 1 deletion templates/web/base/report/new/fill_in_details.html
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,10 @@
[% END %]

<div id="report-a-problem-main">
<a href="#" class="js-back problem-back problem-back--top">[% loc('Back') %]</a>
<a href="#" class="js-back has-inline-svg problem-back problem-back--top">
<svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H13L6.5 8L13 16H6.5L0 8L6.5 0Z" fill="currentColor"/></svg>
[% loc('Back') %]
</a>
[% IF login_success %]
[% PROCESS 'report/new/login_success_form.html' %]
[% ELSIF oauth_need_email %]
Expand Down
2 changes: 1 addition & 1 deletion templates/web/base/reports/_list-filters.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
[% END %]
[% END %]

<div class="report-list-filters-wrapper govuk-fieldset-wrapper govuk-small">
<div id="report-list-filters" class="report-list-filters-wrapper govuk-fieldset-wrapper govuk-small">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't think this ID is used?


[% IF use_form_wrapper %]
<form method="get" action="">
Expand Down
14 changes: 9 additions & 5 deletions templates/web/base/reports/_rss.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div id="key-tools-wrapper" class="shadow-wrap">
<ul id="key-tools">
<li class="feed-list-wrapper"><a rel="nofollow" id="key-tool-updates-area" class="feed" href="[% rss_url %]">[%
SET monikers = ['bromley','hounslow'];
<li class="feed-list-wrappe"><a rel="nofollow" id="key-tool-updates-area" class="feed has-inline-svg" href="[% rss_url %]">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lost an r on wrapper

[% SET monikers = ['bromley','hounslow'];
IF monikers.grep(c.cobrand.moniker).size AND thing == 'council';
'Get updates of reports in ' _ c.cobrand.moniker.ucfirst;
ELSIF c.cobrand.moniker == 'isleofwight';
Expand All @@ -12,13 +12,17 @@
tprintf(loc('Get updates of %s problems'), thing);
ELSE;
tprintf(loc('Get updates of problems in this %s'), thing);
END
%]</a></li>
END %]
<svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24" fill="currentColor" role="presentation" aria-hidden="true"><path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/></svg>
</a></li>
[% IF children.size %]
[% TRY %]
[% INCLUDE 'reports/_rss_other_districts.html' %]
[% CATCH %]
<li><a href="#council_wards" id="key-tool-wards" class="chevron">[% ward_text %]</a></li>
<li><a href="#council_wards" id="key-tool-wards" class="has-inline-svg">
[% ward_text %]
<svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H0L6.5 8L0 16H6.5L13 8L6.5 0Z" fill="currentColor"/></svg>
</a></li>
[% END %]
[% END %]
</ul>
Expand Down
Loading
Loading