There are a couple needed improvements to the mobile experience in forced colors mode. Even though I don't know of any mobile phones that use forced colors, its entirely possible that people using Windows high contrast might have their browser window narrow, thus bringing up the mobile experience.

1. The 3 lines which comprise the hamburger (menu) icon within Olivero do not adapt to forced colors mode.

2. Mobile menu has a very thick border that is visible when in forced colors

This border is used for spacing (when margin and padding wouldn't do the trick).

3. Overlay is imperceptible when in forced colors

The overlay uses a background color that gets removed in forced colors mode.

Mobile search icon is invisible in Firefox when using a light theme

CommentFileSizeAuthor
#16 interdiff-11-16.txt3.32 KBmherchel
#16 3274080-16-10.0.x.patch9.15 KBmherchel
#15 3274080-15-9.4.x.patch8.93 KBmherchel
#15 interdiff-4-15.txt3.27 KBmherchel
#11 3274080-11-10.0.x.patch7.35 KBmherchel
#10 3274080-10-10.0.x.patch9.25 KBmherchel
#5 firefox-HC-light.png13.37 KBandy-blum
#5 chrome-HC-overlay.png58.59 KBandy-blum
#5 chrome-hc-menu-border.png15.27 KBandy-blum
#5 chrome-HC-menu-bars.png211.81 KBandy-blum
#4 3274080-4.patch7.16 KBmherchel
#3 Windows_11__1_-2.png38.21 KBmherchel
#3 Windows_11__1_.png103.09 KBmherchel
Windows_11__1__and_Control_Center.png126.11 KBmherchel

Issue fork drupal-3274080

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

mherchel created an issue. See original summary.

lets4 made their first commit to this issue’s fork.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Title: Olivero's mobile menu 🍔 icon doesn't properly adapt to forced colors » Olivero's mobile menu experience doesn't properly adapt to forced colors
Issue summary: View changes
StatusFileSize
new Windows_11__1_.png103.09 KB
new Windows_11__1_-2.png38.21 KB

Doing a bit of work on this, and I'm expanding the scope of this issue.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Active » Needs review
StatusFileSize
new 3274080-4.patch7.16 KB

Patch attached. If this patch looks good, I can create one for Drupal 10 (which will be slightly different, as we can get rid of the IE11 stuff).

andy-blum’s picture

andy-blum
he/him/his
Primary language English
Location Ohio, USA
commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new chrome-HC-menu-bars.png211.81 KB
new chrome-hc-menu-border.png15.27 KB
new chrome-HC-overlay.png58.59 KB
new firefox-HC-light.png13.37 KB
  1. Olivero's hamburger menu icon is visible
  2. Olivero's mobile menu has a proper overlay & no border weirdness

  3. Firefox's light theme displays the icon

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 4: 3274080-4.patch, failed testing. View results

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs work » Reviewed & tested by the community

Unrelated failure

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 4: 3274080-4.patch, failed testing. View results

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs work » Reviewed & tested by the community

Unrelated failure

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new 3274080-10-10.0.x.patch9.25 KB

Patch for 10.0.x attached.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new 3274080-11-10.0.x.patch7.35 KB

#10 had some unrelated changes.

Updated patch attached.

The last submitted patch, 4: 3274080-4.patch, failed testing. View results

The last submitted patch, 4: 3274080-4.patch, failed testing. View results

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Needs review 
+++ b/core/themes/olivero/css/components/header-navigation.css
@@ -109,6 +109,22 @@
+   * Top border is used for spacing when either margin / padding were not
+   * working as needed. This colors the top border the same as the background
+   * of the page when in forced colors mode.

@mherchel pointed out that there's a very specific reason for using border instead of padding. Let's explain that here.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new interdiff-4-15.txt3.27 KB
new 3274080-15-9.4.x.patch8.93 KB

Updated comment for 9.4.x.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new 3274080-16-10.0.x.patch9.15 KB
new interdiff-11-16.txt3.32 KB

10.0.x patch installed. Setting back to RTBC since the only thing that changed was the comments.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
commented
Version: 9.5.x-dev » 9.4.x-dev
Status: Reviewed & tested by the community » Fixed

Committed 8ed1f23 and pushed to 10.0.x. Thanks!

diff --git a/core/themes/olivero/css/components/header-navigation.css b/core/themes/olivero/css/components/header-navigation.css
index 6eced35bfd..66b4f1ddfa 100644
--- a/core/themes/olivero/css/components/header-navigation.css
+++ b/core/themes/olivero/css/components/header-navigation.css
@@ -56,7 +56,7 @@
    * mobile navigation needs to slide beneath the button, but we also cannot
    * use padding because that would enable the button to scroll out of the
    * viewport on short screens.
-  */
+   */
   border-top: solid #fff 54px;
   background-color: #fff;
   box-shadow: 0 0 72px rgba(0, 0, 0, 0.1)
diff --git a/core/themes/olivero/css/components/header-navigation.pcss.css b/core/themes/olivero/css/components/header-navigation.pcss.css
index 9ab8c7ce08..103e150cb2 100644
--- a/core/themes/olivero/css/components/header-navigation.pcss.css
+++ b/core/themes/olivero/css/components/header-navigation.pcss.css
@@ -29,7 +29,7 @@
    * mobile navigation needs to slide beneath the button, but we also cannot
    * use padding because that would enable the button to scroll out of the
    * viewport on short screens.
-  */
+   */
   border-block-start: solid var(--color--white) var(--sp3);
   background-color: var(--color--white);
   box-shadow: 0 0 72px rgba(0, 0, 0, 0.1);

Fixed a tiny comment thing on commit.

  • alexpott committed 8ed1f23 on 10.0.x 
    Issue #3274080 by mherchel, andy-blum, lauriii: Olivero's mobile menu...

  • alexpott committed ab69d9a on 9.5.x 
    Issue #3274080 by mherchel, andy-blum, lauriii: Olivero's mobile menu...

  • alexpott committed e9778b8 on 9.4.x 
    Issue #3274080 by mherchel, andy-blum, lauriii: Olivero's mobile menu...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.