Skip to content

🐛 Hiding story education layer when viewport warning layer is visible#32230

Merged
gmajoulet merged 5 commits intoampproject:masterfrom
raxsha:layers
Feb 1, 2021
Merged

🐛 Hiding story education layer when viewport warning layer is visible#32230
gmajoulet merged 5 commits intoampproject:masterfrom
raxsha:layers

Conversation

@raxsha
Copy link
Copy Markdown
Contributor

@raxsha raxsha commented Jan 26, 2021

Modified z-index so the viewport warning layer covers all the content when it is displayed. Once the user has resized their viewport, they will see the education and/or the story content.

Changed z-index on amp-story-unsupported-browser-layer for same reason.

Screencapture after education layer was changed:
after

Context / Fixes #30294.

@raxsha raxsha requested a review from gmajoulet January 26, 2021 21:47
@amp-owners-bot amp-owners-bot bot requested a review from Enriqe January 26, 2021 21:47
@amp-owners-bot
Copy link
Copy Markdown

amp-owners-bot bot commented Jan 26, 2021

Hey @gmajoulet, @newmuis, @Enriqe! These files were changed:

extensions/amp-story/1.0/amp-story-unsupported-browser-layer.css
extensions/amp-story/1.0/amp-story-viewport-warning-layer.css

@raxsha raxsha requested review from processprocess and removed request for Enriqe January 26, 2021 21:47
@processprocess
Copy link
Copy Markdown
Contributor

processprocess commented Jan 26, 2021

I like how this solution fixes the messaging priority UX as well as fixing the display issue.

The viewport warning and unsupported browser seem to take priority of education since you can't interact with the story anyway if either of the warnings are visible.

Since the user has to interact with the education layer to dismiss it, it will still be there when the window is resized:
Jan-26-2021 17-05-56

Copy link
Copy Markdown
Contributor

@processprocess processprocess left a comment

Choose a reason for hiding this comment

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

Approved with one nit.

@raxsha raxsha requested a review from newmuis February 1, 2021 16:49
@gmajoulet gmajoulet merged commit ea2e7f6 into ampproject:master Feb 1, 2021
zaparent pushed a commit to zaparent/amphtml that referenced this pull request Feb 1, 2021
…ampproject#32230)

* hiding education layer when warning layer is visible

* removing force-education-layer code

* fixing z-index

* nit
@raxsha raxsha deleted the layers branch April 12, 2021 16:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Story education and viewport warning layer don't overlap well

4 participants