From 86d457f2e09aa6470670ed47c46884e60f5c43f9 Mon Sep 17 00:00:00 2001 From: Lucas Date: Thu, 24 Oct 2024 07:26:53 +0100 Subject: [PATCH 1/7] [Icons] Added file with a list of inline SVGs icons A file where you can find all the available icons to use as inline SVGs. --- .../fixmystreet/images/inline-svg-list.html | 30 +++++++++++++++++++ web/cobrands/sass/_base.scss | 16 ++++++++++ 2 files changed, 46 insertions(+) create mode 100644 web/cobrands/fixmystreet/images/inline-svg-list.html diff --git a/web/cobrands/fixmystreet/images/inline-svg-list.html b/web/cobrands/fixmystreet/images/inline-svg-list.html new file mode 100644 index 00000000000..f0077a35b6a --- /dev/null +++ b/web/cobrands/fixmystreet/images/inline-svg-list.html @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index c3472b07341..84e82dba21f 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -1055,6 +1055,22 @@ html.mobile.js-nav-open #js-menu-open-modal { } } +.has-inline-svg { + display: flex; + flex-direction: row; + gap: 0.25rem; + align-items: center; + justify-content: center; + + &.has-inline-svg--left-align { + justify-content: left; + } + + &.has-inline-svg--column-wrap { + flex-direction: column; + } +} + //footer blocks footer { margin-top: 1em; From 69eebd7ca919dc30831f43bcc31eb91c70d1f8f3 Mon Sep 17 00:00:00 2001 From: Lucas Date: Mon, 7 Oct 2024 09:19:52 +0100 Subject: [PATCH 2/7] Improve meaningful sequence in report page Currently users using keyboard might miss that they can provide an update for a report, because the keyboard jumps straight to the key-tools like "Get udpates" which is at the bottom of the page. Also depending on the length of the report all the update related section might be down the bottom and invisible make it even less obvious that a user has elements they can interact with. --- templates/web/base/around/_updates.html | 6 +- .../web/base/around/display_location.html | 5 +- templates/web/base/report/_back_to_all.html | 5 +- templates/web/base/report/display.html | 9 +- templates/web/base/report/display_tools.html | 31 +++++-- .../web/base/report/display_tools_mobile.html | 61 +++++++++++++ .../web/base/report/new/fill_in_details.html | 5 +- templates/web/base/reports/_rss.html | 14 +-- web/cobrands/sass/_base.scss | 86 +++++++------------ web/cobrands/sass/_layout.scss | 9 ++ 10 files changed, 154 insertions(+), 77 deletions(-) create mode 100644 templates/web/base/report/display_tools_mobile.html diff --git a/templates/web/base/around/_updates.html b/templates/web/base/around/_updates.html index e5af69da08a..187aaeeaacd 100755 --- a/templates/web/base/around/_updates.html +++ b/templates/web/base/around/_updates.html @@ -1,5 +1,9 @@
diff --git a/templates/web/base/around/display_location.html b/templates/web/base/around/display_location.html index 5a2f9e0903a..84840ad1446 100755 --- a/templates/web/base/around/display_location.html +++ b/templates/web/base/around/display_location.html @@ -80,7 +80,10 @@ [% IF allow_creation %] [% second_column | safe %] diff --git a/templates/web/base/report/display_tools.html b/templates/web/base/report/display_tools.html index 84a889437e1..73c0303515b 100644 --- a/templates/web/base/report/display_tools.html +++ b/templates/web/base/report/display_tools.html @@ -4,24 +4,39 @@ [% IF c.cobrand.users_can_hide AND relevant_staff_user %]
  • - +
    • [% ELSIF c.cobrand.moniker != 'zurich' %] -
  • [% - c.cobrand.moniker == 'fixmystreet' ? 'Unsuitable?' : loc('Report abuse') - %]
    • +
  • + [% c.cobrand.moniker == 'fixmystreet' ? 'Unsuitable?' : loc('Report abuse') %] +
    • [% END %] [% IF c.cobrand.moniker != 'zurich' %] -
  • [% loc('Get updates' ) %]
    • +
  • + [% loc('Get updates' ) %] + +
    • [% END %] [% IF c.cobrand.moniker == 'fixmystreet' %] -
    • +
  • + [% loc('Share') %] + +
    • [% END %] [% END %] [% IF c.cobrand.moniker == 'zurich' %] -
  • [% loc( 'Problems on the map' ) %]
    • +
  • + [% loc( 'Problems on the map' ) %] + +
    • [% ELSE %] -
  • [% loc( 'Problems nearby' ) %]
    • +
  • + [% loc( 'Problems nearby' ) %] + +
    • [% END %] diff --git a/templates/web/base/report/display_tools_mobile.html b/templates/web/base/report/display_tools_mobile.html new file mode 100644 index 00000000000..c4d2a94e083 --- /dev/null +++ b/templates/web/base/report/display_tools_mobile.html @@ -0,0 +1,61 @@ +
    + + +[% IF c.cobrand.moniker == 'fixmystreet' %] + +[% END %] + +
    + [% INCLUDE 'alert/_updates.html' %] +
    + +
    diff --git a/templates/web/base/report/new/fill_in_details.html b/templates/web/base/report/new/fill_in_details.html index 7a9a2e3f152..85667828daf 100644 --- a/templates/web/base/report/new/fill_in_details.html +++ b/templates/web/base/report/new/fill_in_details.html @@ -42,7 +42,10 @@ [% END %]
    - [% loc('Back') %] + + + [% loc('Back') %] + [% IF login_success %] [% PROCESS 'report/new/login_success_form.html' %] [% ELSIF oauth_need_email %] diff --git a/templates/web/base/reports/_rss.html b/templates/web/base/reports/_rss.html index 731eef90c6e..fa177de1502 100644 --- a/templates/web/base/reports/_rss.html +++ b/templates/web/base/reports/_rss.html @@ -1,7 +1,7 @@
    diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index 84e82dba21f..277fa6643be 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -933,21 +933,17 @@ html.mobile.js-nav-open #js-menu-open-modal { margin: 0 -1em; } -#key-tools { +#key-tools, #key-tools-mobile { @include list-reset-soft; margin-bottom: 1em; - display: table; + display: flex; + flex-direction: row; width: 100%; + gap: 0.25rem; + box-sizing: border-box; li { - display: table-cell; - vertical-align: bottom; text-align: center; - border-#{$right}: 0.25em solid #fff; - - &:last-child { - border-#{$right}: none; - } &.hidden-js { display: none; @@ -962,17 +958,17 @@ html.mobile.js-nav-open #js-menu-open-modal { a, button { - display: block; + box-sizing: border-box; + height: 100%; background-color: #f5f5f5; - background-repeat: no-repeat; color: #333 !important; - padding: 1em; + padding: 1em 0.5em; font-size: 0.6875em; font-family: $meta-font; font-weight: normal; line-height: 1.2em; - white-space: normal; - border-radius: 0; + // Prevents elements with more than two words to break into multiple lines + white-space: nowrap; &:hover, &.hover, @@ -982,34 +978,6 @@ html.mobile.js-nav-open #js-menu-open-modal { color: #fff !important; } - &:after { - content: ""; - display: inline-block; - width: 16px; - height: 16px; - margin-#{$left}: 0.5em; - vertical-align: -0.25em; - background-size: 112px 16px; - background-repeat: no-repeat; - background-image: url("/cobrands/fixmystreet/images/report-tools.svg"); - } - - &.abuse:after { - background-position: -96px 0; - } - - &.feed:after { - background-position: -64px 0; - } - - &.share:after { - background-position: -80px 0; - } - - &.chevron:after { - background-position: flip(-16px 0, 0 0); - } - &.offline:after { background-size: 16px 16px; background-position: 0 0; @@ -1032,7 +1000,26 @@ html.mobile.js-nav-open #js-menu-open-modal { } } +#key-tools-mobile { + padding: 0 1em; + li { + flex: 1; + + a, button { + border-radius:4px; + border: 1px solid #ccc; + } + } +} + +#key-tools { + html.js & { + display: none; + } +} + #report-updates-data { + box-sizing: border-box; img { float: $right; } @@ -1044,6 +1031,7 @@ html.mobile.js-nav-open #js-menu-open-modal { } #report-share { + box-sizing: border-box; .btn { padding-#{$left}: 1.5em; padding-#{$right}: 1.5em; @@ -1794,7 +1782,6 @@ input.final-submit { } .problem-back { - display: block; font-size: 1em; line-height: 1.2em; margin: -1em -1em 1em -1em; @@ -1806,19 +1793,6 @@ input.final-submit { &:hover { color: #666; } - - &:before { - content: ""; - display: inline-block; - width: 16px; - height: 16px; - margin-#{$right}: 0.5em; - vertical-align: -0.15em; - background-size: 112px 16px; - background-repeat: no-repeat; - background-image: url("/cobrands/fixmystreet/images/report-tools.svg"); - background-position: flip(0 0, -16px 0); - } } .problem-back--top { margin-top: 0; diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss index a1cef8ebc9a..b6e2059bebb 100644 --- a/web/cobrands/sass/_layout.scss +++ b/web/cobrands/sass/_layout.scss @@ -683,7 +683,12 @@ body.authpage { margin: 0; box-shadow: 0 0 1em 1em #fff; + html.js & { + display: table; + } + li { + display: table-cell; border-#{$right}: none; // undo border-right/left from _base.scss // Cancel centre alignment, if the *only child* in list. @@ -701,6 +706,10 @@ body.authpage { } } +#key-tools-mobile { + display: none; +} + // If JS is disabled, these are still CSS positioned, so don't want behind shining through. #report-share, #report-updates-data { background-color: #fff; From e112225db3140f202d11b4932cd1fe209db2f252 Mon Sep 17 00:00:00 2001 From: Lucas Date: Thu, 24 Oct 2024 13:55:13 +0100 Subject: [PATCH 3/7] Added accessibility improvements to small_drawer --- templates/web/base/alert/_updates.html | 9 +-- templates/web/base/report/display.html | 4 +- templates/web/base/report/display_tools.html | 28 ++++---- .../web/base/report/display_tools_mobile.html | 24 +------ web/cobrands/fixmystreet/fixmystreet.js | 65 +++++++++++++++---- web/cobrands/sass/_base.scss | 2 + web/cobrands/sass/_layout.scss | 1 + 7 files changed, 81 insertions(+), 52 deletions(-) diff --git a/templates/web/base/alert/_updates.html b/templates/web/base/alert/_updates.html index b237b1bff1b..f2dce1b4c1a 100644 --- a/templates/web/base/alert/_updates.html +++ b/templates/web/base/alert/_updates.html @@ -1,16 +1,17 @@
    -

    [% loc('RSS feed of updates to this problem' ) %] [% IF NOT c.user_exists OR c.user.alert_updates_by(c.cobrand) != 'phone' %] - [% loc('Receive email when updates are left on this problem.') %] + [% loc('Receive email when updates are left on this problem.') %] [% ELSE %] - [% loc('Receive a text when updates are left on this problem.') %] - [% END %] + [% loc('Receive a text when updates are left on this problem.') %] + [% END %]

    + + [% PROCESS 'auth/form_extra.html' %] [% IF c.user_exists %] diff --git a/templates/web/base/report/display.html b/templates/web/base/report/display.html index 0dd30ec3c3f..1c0913aff97 100644 --- a/templates/web/base/report/display.html +++ b/templates/web/base/report/display.html @@ -46,8 +46,6 @@ [% TRY %][% INCLUDE 'report/_message_manager.html' %][% CATCH file %][% END %] [% INCLUDE 'report/display_tools_mobile.html' %] -[% TRY %][% INCLUDE 'report/sharing.html' %][% CATCH file %][% END %] -[% INCLUDE 'report/updates.html' %] [% IF problem.duplicate_of %] [% INCLUDE 'report/duplicate-no-updates.html' %] @@ -58,6 +56,8 @@ [% END %] [% INCLUDE 'report/display_tools.html' %] +[% TRY %][% INCLUDE 'report/sharing.html' %][% CATCH file %][% END %] +[% INCLUDE 'report/updates.html' %]
    [% second_column | safe %] diff --git a/templates/web/base/report/display_tools.html b/templates/web/base/report/display_tools.html index 73c0303515b..346f249a514 100644 --- a/templates/web/base/report/display_tools.html +++ b/templates/web/base/report/display_tools.html @@ -1,5 +1,5 @@
    -