Bug 1904321 - Make more user-facing pages mobile friendly

mozilla-bteam · Oct 2, 2024 · e3bdc29 · e3bdc29
1 parent 3913105
commit e3bdc29
Show file tree

Hide file tree

Showing 49 changed files with 1,333 additions and 842 deletions.
diff --git 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
@@ -36,6 +36,7 @@
 [% PROCESS global/header.html.tmpl
    title = title
    style_urls = [ 'extensions/BMO/web/styles/create_account.css' ]
+   responsive = 1
 %]
 
 <script [% script_nonce FILTER none %]>
@@ -72,10 +73,9 @@ function onSubmit() {
 }
 </script>
 
-<table border="0" id="create-account">
-<tr>
+<div id="create-account">
 
-<td width="50%" id="create-account-left" valign="top">
+<div class="col" id="create-account-left">
 
   <h2 class="column-header">I need help using a Mozilla Product</h2>
 
@@ -107,9 +107,9 @@ function onSubmit() {
       directions on <a href="https://github.com/mozilla-bteam/bmo/">our project repository</a>.</p>
   </div>
 
-</td>
+</div>
 
-<td width="50%" id="create-account-right" valign="top">
+<div class="col" id="create-account-right">
 
   <h2 class="column-header">I want to help</h2>
 
@@ -134,11 +134,11 @@ function onSubmit() {
     <tr>
     <td class="label">Email Address:</td>
     <td>
-      <input size="35" id="login" name="login" placeholder="[email protected]">[% Param('emailsuffix') FILTER html %]
+      <input type="email" size="35" id="login" name="login" placeholder="[email protected]">[% Param('emailsuffix') FILTER html %]
     </td>
     </tr>
     <tr>
-    <td colspan="2">
+    <td colspan="2" class="consent">
       <input type="checkbox" id="etiquette" value="agreed">
       <label for="etiquette">
       I have read <a href="[% basepath FILTER none %]page.cgi?id=etiquette.html">[% terms.Bugzilla %] Etiquette</a>
@@ -158,10 +158,9 @@ function onSubmit() {
 
   [% Hook.process('additional_methods') %]
 
-</td>
+</div>
 
-</tr>
-</table>
+</div>
 
 [% 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
@@ -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
@@ -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') %]
+  <li class="link-attention" role="none">
+    <a class="header-button" href="[% basepath FILTER none %]page.cgi?id=attention.html"
+       title="What Needs My Attention?" role="menuitem">
+      <span class="icon" aria-hidden="true"></span>
+      <span class="label" role="none">My Attention</span>
+    </a>
+  </li>
+[% 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
@@ -6,24 +6,35 @@
   # defined by the Mozilla Public License, v. 2.0.
   #%]
 
-<div id="header-external-links" class="dropdown first">
-  <button type="button" id="header-external-menu-button" class="dropdown-button minor" title="Mozilla"
-          aria-label="Mozilla" aria-expanded="false" aria-haspopup="true" aria-controls="header-external-menu">
-    <img src="[% 'extensions/BMO/web/images/moz-fav-one-color-white-rgb.svg' FILTER version %]" width="32" height="32" alt="">
+<div id="header-external-links" class="dropdown" role="none">
+  <button type="button" id="header-external-menu-button" class="dropdown-button minor"
+          aria-label="Show Mozilla Menu" aria-expanded="false" aria-haspopup="true"
+          aria-controls="header-external-menu">
+    <img src="[% 'extensions/BMO/web/images/moz-fav-one-color-white-rgb.svg' FILTER version %]"
+         width="32" height="32" alt="">
   </button>
-  <ul class="dropdown-content right" id="header-external-menu" role="menu" style="display:none;">
-    <li role="presentation">
-      <a href="https://www.mozilla.org/" role="menuitem" tabindex="-1">Mozilla Home</a>
+  <ul class="dropdown-content right" id="header-external-menu" role="menu" aria-label="Mozilla Menu"
+      style="display:none;">
+    <li role="none">
+      <a href="https://www.mozilla.org/" role="menuitem">
+        <span class="label" role="none">Mozilla Home</span>
+      </a>
     </li>
     <li role="separator"></li>
-    <li role="presentation">
-      <a href="https://www.mozilla.org/privacy/websites/" role="menuitem" tabindex="-1">Privacy</a>
+    <li role="none">
+      <a href="https://www.mozilla.org/privacy/websites/" role="menuitem">
+        <span class="label" role="none">Privacy</span>
+      </a>
     </li>
-    <li role="presentation">
-      <a href="https://www.mozilla.org/privacy/websites/#cookies" role="menuitem" tabindex="-1">Cookies</a>
+    <li role="none">
+      <a href="https://www.mozilla.org/privacy/websites/#cookies" role="menuitem">
+        <span class="label" role="none">Cookies</span>
+      </a>
     </li>
-    <li role="presentation">
-      <a href="https://www.mozilla.org/about/legal/" role="menuitem" tabindex="-1">Legal</a>
+    <li role="none">
+      <a href="https://www.mozilla.org/about/legal/" role="menuitem">
+        <span class="label" role="none">Legal</span>
+      </a>
     </li>
   </ul>
 </div>
diff --git 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
@@ -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
@@ -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
@@ -37,7 +37,7 @@ var cpts = new Array();
   that was changed.
 </p>
 
-<table id="add_filter_table">
+<table id="add_filter_table" class="collapsible">
 <tr>
   <th>Field:</th>
   <td>

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
@@ -123,7 +123,7 @@ window.addEventListener('DOMContentLoaded', () => {
   notification emails you receive.
 </p>
 
-<table border="0" cellpadding="3" cellspacing="0" id="add_compwatch">
+<table border="0" cellpadding="3" cellspacing="0" id="add_compwatch" class="collapsible">
 <tr>
   <th align="right">Product:</th>
   <td colspan="2">

diff --git 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/...sions/GitHubAuth/template/en/default/hook/account/auth/login-additional_methods.html.tmpl b/...sions/GitHubAuth/template/en/default/hook/account/auth/login-additional_methods.html.tmpl
@@ -11,7 +11,7 @@
     <input type="hidden" name="github_token" value="[% Bugzilla.github_token FILTER html %]">
     <input type="hidden" name="target_uri" value="[% Bugzilla.cgi.target_uri FILTER html %]">
     <button type="submit">
-      <i class="fab fa-github"></i> Login with GitHub
+      <i class="fab fa-github"></i> Log In with GitHub
     </button>
   </form>
 [% END %]