馃枍 Added shopping tag flip on too far position to the right by jshamble 路 Pull Request #37195 路 ampproject/amphtml (original) (raw)

Conversation

@jshamble

Added the ability to have a shopping tag auto-change it's pill position to the left of the dot if it is too far to the right of the screen.

Also flips the dot to align with the correct spot for RTL languages.

Fixes #37028

Normal LTR Flipped LTR
Screen Shot 2021-12-13 at 8 24 40 PM Screen Shot 2021-12-13 at 8 32 00 PM
Normal RTL Flipped RTL
Screen Shot 2022-01-06 at 10 01 38 PM Screen Shot 2022-01-06 at 10 01 56 PM

@jshamble

@jshamble

@amp-owners-bot

Hey @gmajoulet! These files were changed:

extensions/amp-story-shopping/0.1/amp-story-shopping-tag.css
extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js
extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-tag.js

@jshamble jshamble changed the title馃枍 Added shopping tag flip on specific position to the right 馃枍 Added shopping tag flip on too far position to the right

Dec 13, 2021

coreymasanto

Choose a reason for hiding this comment

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

Could you add a screenshot of a story that includes both normal and flipped shopping tags?

@jshamble

processprocess

gmajoulet

@jshamble

@processprocess

There's another piece to this concept that needs to be worked into this PR.
The element needs to be transformed so that the indicator dot is in the same place as it was before the flip. This ensures that the tag will be on screen.

Screen Shot 2022-01-13 at 10 15 01 AM

An approach:
If the element is off-screen on the right:
translateX by -100% + the size of the dot.
If off-screen on the left, a flipped version of the same equation can be used.

We will need to make this check on window resize:

Jan-14-2022.10-46-01.mp4

processprocess

@jshamble

@jshamble

@processprocess

We need to hide the button until the calculation is made and the element is flipped. Otherwise we see it flash on one side then flip to the other:

This could be accomplished by setting opacity to 0 initially and setting it to 1 after the check and positioning is done.

Also the margin between the button and pill is gone.
Please bring that back.

Jan-14-2022.11-39-53.mp4

@jshamble

gmajoulet

@jshamble

鈥use the window of the whoel apge and intead use the window of the mobile regtangle in a separate pr

@jshamble

@jshamble

@jshamble

@jshamble

@jshamble

@jshamble

gmajoulet

processprocess

Choose a reason for hiding this comment

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

Looks awesome!

@processprocess

The margins are broken in RTL. Please take a look into this:

Screen Shot 2022-02-02 at 1 47 52 PM

@jshamble

This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.Learn more about bidirectional Unicode characters

[ Show hidden characters]({{ revealButtonHref }})

Labels