From e3bdc2916096310f8359c69de5307ab46f83797f Mon Sep 17 00:00:00 2001 From: Kohei Yoshino Date: Tue, 1 Oct 2024 23:50:02 -0400 Subject: [PATCH] Bug 1904321 - Make more user-facing pages mobile friendly --- Bugzilla/Template.pm | 5 - .../en/default/account/create.html.tmpl | 19 +- .../default/global/choose-product.html.tmpl | 6 +- .../hook/global/header-action-links.html.tmpl | 17 + .../global/header-external-links.html.tmpl | 37 +- extensions/BMO/web/styles/choose_product.css | 30 +- extensions/BMO/web/styles/create_account.css | 78 +- extensions/BugModal/web/bug_modal.css | 14 +- .../account/prefs/bugmail_filter.html.tmpl | 2 +- .../account/prefs/component_watch.html.tmpl | 2 +- extensions/FlagTypeComment/web/styles/ftc.css | 4 +- .../auth/login-additional_methods.html.tmpl | 2 +- .../login-small-additional_methods.html.tmpl | 2 +- .../hook/global/header-action-links.html.tmpl | 7 +- .../hook/global/header-badge.html.tmpl | 34 +- extensions/Review/web/js/badge.js | 2 +- js/global.js | 59 ++ js/widgets.js | 4 +- qa/t/3_test_qa_contact.t | 2 +- qa/t/4_test_user_privs.t | 2 +- skins/standard/admin.css | 137 ++- skins/standard/advanced-search.css | 4 +- skins/standard/attachment.css | 2 +- skins/standard/dependency-tree.css | 4 +- skins/standard/describecomponents.css | 23 +- skins/standard/global.css | 961 ++++++++++-------- skins/standard/index.css | 27 +- skins/standard/login.css | 121 +++ skins/standard/mobile.css | 64 -- .../account/auth/login-small.html.tmpl | 37 +- .../en/default/account/auth/login.html.tmpl | 98 +- .../auth/oauth2_login_button.html.tmpl | 2 +- .../default/account/prefs/account.html.tmpl | 4 +- .../en/default/account/prefs/apikey.html.tmpl | 2 + .../en/default/account/prefs/email.html.tmpl | 2 + .../account/prefs/permissions.html.tmpl | 2 + .../en/default/account/prefs/prefs.html.tmpl | 12 +- .../default/account/prefs/reminders.html.tmpl | 4 +- .../account/prefs/saved-searches.html.tmpl | 6 +- .../default/account/prefs/sessions.html.tmpl | 2 + .../default/account/prefs/settings.html.tmpl | 2 +- .../en/default/account/prefs/tabs.html.tmpl | 12 +- .../global/header-search-dropdown.html.tmpl | 20 +- template/en/default/global/header.html.tmpl | 275 ++--- .../en/default/global/user-error.html.tmpl | 5 +- template/en/default/index.html.tmpl | 9 +- template/en/default/mfa/totp/verify.html.tmpl | 5 +- .../en/default/reports/components.html.tmpl | 1 + userprefs.cgi | 4 +- 49 files changed, 1333 insertions(+), 842 deletions(-) create mode 100644 extensions/BMO/template/en/default/hook/global/header-action-links.html.tmpl create mode 100644 skins/standard/login.css delete mode 100644 skins/standard/mobile.css diff --git a/Bugzilla/Template.pm b/Bugzilla/Template.pm index 1b2d5f0db5..7920838363 100644 --- a/Bugzilla/Template.pm +++ b/Bugzilla/Template.pm @@ -1062,11 +1062,6 @@ sub create { DB_MODULE => \&Bugzilla::Constants::DB_MODULE, 'default_authorizer' => sub { return Bugzilla::Auth->new() }, -# It is almost always better to do mobile feature detection, client side in js. -# However, we need to set the meta[name=viewport] server-side or the behavior is -# not as predictable. It is possible other parts of the frontend may use this feature too. - 'is_mobile_browser' => sub { return Bugzilla->cgi->user_agent =~ /Mobi/ }, - 'socorro_lens_url' => sub { my ($sigs) = @_; diff --git a/extensions/BMO/template/en/default/account/create.html.tmpl b/extensions/BMO/template/en/default/account/create.html.tmpl index e57c9a1442..33eaee817c 100644 --- a/extensions/BMO/template/en/default/account/create.html.tmpl +++ b/extensions/BMO/template/en/default/account/create.html.tmpl @@ -36,6 +36,7 @@ [% PROCESS global/header.html.tmpl title = title style_urls = [ 'extensions/BMO/web/styles/create_account.css' ] + responsive = 1 %] - - +
-
+ - - + - -
+

I need help using a Mozilla Product

@@ -107,9 +107,9 @@ function onSubmit() { directions on our project repository.

-		 +

I want to help

@@ -134,11 +134,11 @@ function onSubmit() {
Email Address: - [% Param('emailsuffix') FILTER html %] + [% Param('emailsuffix') FILTER html %]
+
+ [% PROCESS global/footer.html.tmpl %] diff --git a/extensions/BMO/template/en/default/global/choose-product.html.tmpl b/extensions/BMO/template/en/default/global/choose-product.html.tmpl index 539ffcf912..4d1e3afe53 100644 --- a/extensions/BMO/template/en/default/global/choose-product.html.tmpl +++ b/extensions/BMO/template/en/default/global/choose-product.html.tmpl @@ -40,14 +40,12 @@ "extensions/ProdCompSearch/web/js/prod_comp_search.js", ]; - # use responsive design for the Enter Bug page - responsive = !is_describe; - cgi = Bugzilla.cgi; classification = cgi.param('classification'); PROCESS global/header.html.tmpl - generate_api_token = 1; + generate_api_token = 1 + responsive = 1; %] [% IF NOT is_describe %] diff --git a/extensions/BMO/template/en/default/hook/global/header-action-links.html.tmpl b/extensions/BMO/template/en/default/hook/global/header-action-links.html.tmpl new file mode 100644 index 0000000000..15042813f8 --- /dev/null +++ b/extensions/BMO/template/en/default/hook/global/header-action-links.html.tmpl @@ -0,0 +1,17 @@ +[%# This Source Code Form is subject to the terms of the Mozilla Public + # License, v. 2.0. If a copy of the MPL was not distributed with this + # file, You can obtain one at http://mozilla.org/MPL/2.0/. + # + # This Source Code Form is "Incompatible With Secondary Licenses", as + # defined by the Mozilla Public License, v. 2.0. + #%] + +[% IF user.login && user.in_group('mozilla-employee-confidential') %] +
  • + + + My Attention + +
    • +[% END %] diff --git a/extensions/BMO/template/en/default/hook/global/header-external-links.html.tmpl b/extensions/BMO/template/en/default/hook/global/header-external-links.html.tmpl index ef42060cce..cabbb152e4 100644 --- a/extensions/BMO/template/en/default/hook/global/header-external-links.html.tmpl +++ b/extensions/BMO/template/en/default/hook/global/header-external-links.html.tmpl @@ -6,24 +6,35 @@ # defined by the Mozilla Public License, v. 2.0. #%] - diff --git a/extensions/BMO/web/styles/choose_product.css b/extensions/BMO/web/styles/choose_product.css index e47f7a264d..f4fe0657f5 100644 --- a/extensions/BMO/web/styles/choose_product.css +++ b/extensions/BMO/web/styles/choose_product.css @@ -10,15 +10,6 @@ text-align: center; } -#choose_product { - margin: 16px 0; - border: 1px solid var(--primary-region-border-color); - border-radius: var(--primary-region-border-radius); - padding: 16px; - background-color: var(--primary-region-background-color); - box-shadow: var(--primary-region-box-shadow); -} - #choose_product h2, #choose_product p, #guided { @@ -90,19 +81,34 @@ vertical-align: text-bottom; } -@media screen and (min-width: 1024px) { +@media screen and (1024px <= width) { #product-list .tiles .product { width: 400px; } } -@media screen and (max-width: 1023px) { +@media screen and (width < 1024px) { #product-list .tiles .product { width: 100%; } } -@media screen and (max-width: 799px) { +@media screen and (768px <= width) { + #choose_product { + margin: 16px 0; + border: 1px solid var(--primary-region-border-color); + border-radius: var(--primary-region-border-radius); + padding: 16px; + background-color: var(--primary-region-background-color); + box-shadow: var(--primary-region-box-shadow); + } +} + +@media screen and (width < 768px) { + #choose_product { + margin: 32px 0; + } + #product-list .tiles .product { padding-left: 64px; } diff --git a/extensions/BMO/web/styles/create_account.css b/extensions/BMO/web/styles/create_account.css index 9fac0f874e..3ce22adb30 100644 --- a/extensions/BMO/web/styles/create_account.css +++ b/extensions/BMO/web/styles/create_account.css @@ -5,6 +5,14 @@ * This Source Code Form is "Incompatible With Secondary Licenses", as * defined by the Mozilla Public License, v. 2.0. */ +#create-account { + display: flex; +} + +#create-account .col { + box-sizing: border-box; +} + #create-account h2 { margin: 0 0 16px; } @@ -13,40 +21,78 @@ margin: 0 0 4px; } -#create-account-left { - border-right: 2px solid var(--primary-region-border-color); - padding: 16px 32px 16px 16px; +#product-list { + margin-bottom: 24px; } #product-list td { - padding-top: 10px; + padding: 8px 0; } #product-list img { - padding-right: 10px; + padding-right: 8px; } -#create-account-right { - padding: 16px 16px 16px 32px; +#right-blurb li { + margin: 1em 0; } -#left-blurb, #right-blurb { - font-size: var(--font-size-x-large); - line-height: var(--line-height-comfortable); +#create-account-form, +#create-account-form :is(tr, td) { + display: block; } -#right-blurb li { - padding-bottom: 1em; +#create-account-form tbody { + display: flex; + flex-direction: column; + gap: 16px; +} + +#create-account-form .label { + margin: 4px 0; + font-weight: bold; } -#create-account #product-list { - margin-bottom: 25px; +#create-account-form .consent { + display: flex; + align-items: center; + gap: 8px; } -#create-account-form tr:last-child { - text-align: right; +#create-account-form input { + flex: none; } #verify-auto-account-creation { margin-bottom: 2em; } + +@media screen and (768px <= width) { + #create-account .col { + padding: 32px; + width: 50%; + } + + #create-account-left { + border-right: 2px solid var(--primary-region-border-color); + } +} + +@media screen and (width < 768px) { + #create-account { + flex-direction: column; + } + + #create-account .col { + padding: 0; + width: auto; + } + + #create-account-left { + border: 0; + } + + #create-account-form :is(input[type="email"], input[type="submit"]) { + width: 100%; + } +} diff --git a/extensions/BugModal/web/bug_modal.css b/extensions/BugModal/web/bug_modal.css index e6e3555ec5..f9bcd58687 100644 --- a/extensions/BugModal/web/bug_modal.css +++ b/extensions/BugModal/web/bug_modal.css @@ -1295,8 +1295,8 @@ a.comment-tag-url { } .comment-reactions .anchor .icon::before { - font-size: 16px; - font-family: 'Material Symbols Outlined'; + font-size: var(--icon-size-small); + font-family: var(--icon-font-family); font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; content: '\e813'; @@ -1545,7 +1545,7 @@ a.lightbox-icon.markdown { } .name-info-popup header { - margin: 8px 16px; + margin: 8px 12px; } .name-info-popup header .title { @@ -1751,14 +1751,6 @@ a.lightbox-icon.markdown { } @media screen and (max-width: 900px) { - #wrapper { - position: relative !important; - } - - #header .inner { - width: auto !important; - } - .spin-latch { display: none; } diff --git a/extensions/BugmailFilter/template/en/default/account/prefs/bugmail_filter.html.tmpl b/extensions/BugmailFilter/template/en/default/account/prefs/bugmail_filter.html.tmpl index e1c63fe3cc..c17e7d0e83 100644 --- a/extensions/BugmailFilter/template/en/default/account/prefs/bugmail_filter.html.tmpl +++ b/extensions/BugmailFilter/template/en/default/account/prefs/bugmail_filter.html.tmpl @@ -37,7 +37,7 @@ var cpts = new Array(); that was changed.

    - +
    Field: diff --git a/extensions/ComponentWatching/template/en/default/account/prefs/component_watch.html.tmpl b/extensions/ComponentWatching/template/en/default/account/prefs/component_watch.html.tmpl index a2bd6e73a4..888ac64e4f 100644 --- a/extensions/ComponentWatching/template/en/default/account/prefs/component_watch.html.tmpl +++ b/extensions/ComponentWatching/template/en/default/account/prefs/component_watch.html.tmpl @@ -123,7 +123,7 @@ window.addEventListener('DOMContentLoaded', () => { notification emails you receive.

    - +
    Product: diff --git a/extensions/FlagTypeComment/web/styles/ftc.css b/extensions/FlagTypeComment/web/styles/ftc.css index 37a2b0fb73..87e2b38655 100644 --- a/extensions/FlagTypeComment/web/styles/ftc.css +++ b/extensions/FlagTypeComment/web/styles/ftc.css @@ -54,9 +54,9 @@ section.approval-request button.dismiss { section.approval-request button.dismiss .icon { display: block; - font-size: 16px; + font-size: var(--icon-size-small); line-height: 100%; - font-family: "Material Symbols Outlined"; + font-family: var(--icon-font-family); font-style: normal; } diff --git a/extensions/GitHubAuth/template/en/default/hook/account/auth/login-additional_methods.html.tmpl b/extensions/GitHubAuth/template/en/default/hook/account/auth/login-additional_methods.html.tmpl index 6ac3c744d9..8b0cdbe8c7 100644 --- a/extensions/GitHubAuth/template/en/default/hook/account/auth/login-additional_methods.html.tmpl +++ b/extensions/GitHubAuth/template/en/default/hook/account/auth/login-additional_methods.html.tmpl @@ -11,7 +11,7 @@ [% END %] diff --git a/extensions/GitHubAuth/template/en/default/hook/account/auth/login-small-additional_methods.html.tmpl b/extensions/GitHubAuth/template/en/default/hook/account/auth/login-small-additional_methods.html.tmpl index 8e23dccc57..26309d5161 100644 --- a/extensions/GitHubAuth/template/en/default/hook/account/auth/login-small-additional_methods.html.tmpl +++ b/extensions/GitHubAuth/template/en/default/hook/account/auth/login-small-additional_methods.html.tmpl @@ -12,7 +12,7 @@ [% END %] diff --git a/extensions/MyDashboard/template/en/default/hook/global/header-action-links.html.tmpl b/extensions/MyDashboard/template/en/default/hook/global/header-action-links.html.tmpl index 83f971470b..9b13a22851 100644 --- a/extensions/MyDashboard/template/en/default/hook/global/header-action-links.html.tmpl +++ b/extensions/MyDashboard/template/en/default/hook/global/header-action-links.html.tmpl @@ -7,10 +7,11 @@ #%] [% IF user.login %] -
  • - +
  • + - My Dashboard + My Dashboard
    • [% END %] diff --git a/extensions/Review/template/en/default/hook/global/header-badge.html.tmpl b/extensions/Review/template/en/default/hook/global/header-badge.html.tmpl index 7e08d809f0..726f820f68 100644 --- a/extensions/Review/template/en/default/hook/global/header-badge.html.tmpl +++ b/extensions/Review/template/en/default/hook/global/header-badge.html.tmpl @@ -8,22 +8,35 @@ [% IF user.id %] [% request_count = user.review_request_count + user.feedback_request_count + user.needinfo_request_count %] - +
    diff --git a/template/en/default/account/auth/login.html.tmpl b/template/en/default/account/auth/login.html.tmpl index 0a125ff262..c12b85c1c6 100644 --- a/template/en/default/account/auth/login.html.tmpl +++ b/template/en/default/account/auth/login.html.tmpl @@ -30,40 +30,53 @@ [% PROCESS global/variables.none.tmpl %] [% PROCESS global/header.html.tmpl - title = "Log in to $terms.Bugzilla", - onload = "document.forms['login'].Bugzilla_login.focus()" - allow_mobile = 1 + title = "Log in to $terms.Bugzilla", + style_urls = ["skins/standard/login.css"] + responsive = 1 %] [% USE Bugzilla %] -

    - I need an email address and password to continue. -

    +
    + +

    Log in to [% "$terms.Bugzilla" %]

    + +
    + [% IF Param('oauth2_client_enabled') %] + [% INCLUDE account/auth/oauth2_login_button.html.tmpl + target => target + %] + [% END %] + + [% additional_methods = Hook.process('additional_methods') %] + [% additional_methods %] + + [% IF Param('oauth2_client_enabled') || additional_methods %] +
    or
    + [% END %] -