Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: now the back of the dev card no longer peers through when flipped on Safari and Firefox #3931

Merged
merged 2 commits into from
Aug 12, 2024
Merged

fix: now the back of the dev card no longer peers through when flipped on Safari and Firefox #3931

merged 2 commits into from
Aug 12, 2024

Conversation

nickytonline
Copy link
Member

@nickytonline nickytonline commented Aug 12, 2024 •
edited
Loading

Description

Te dev card back and front no longer overlap when flipped on Safari and Firefox

Related Tickets & Documents

Fixes #3927

Mobile & Desktop Screenshots/Recordings

Before

Safari

CleanShot 2024-08-12 at 18 33 31

Firefox

CleanShot 2024-08-12 at 18 32 19

Chromium

CleanShot 2024-08-12 at 18 48 26

After

Safari

CleanShot 2024-08-12 at 18 47 37

Firefox

CleanShot 2024-08-12 at 18 46 40

Chromium

CleanShot 2024-08-12 at 18 48 26

Text Selection on Card Flip

I also fixed an issue where the card would get text or images selected within the card.

Before

CleanShot 2024-08-12 at 19 22 37

After

CleanShot 2024-08-12 at 19 27 48

Steps to QA

Test the following in a Chromium based browser, Firefox and Safari.

  1. Navigate to a dev card page for a user, e.g. https://deploy-preview-3931--oss-insights.netlify.app/u/nickytonline/card
  2. Flip the card using the mouse or touch if on mobile.
  3. Notice the dev card back and front no longer overlap when flipped

Tier (staff will fill in)

  • Tier 1
  • Tier 2
  • Tier 3
  • Tier 4

[optional] What gif best describes this PR or how it makes you feel?

@netlify Netlify
Copy link

netlify bot commented Aug 12, 2024 •
edited
Loading

✅ Deploy Preview for oss-insights ready!

Name Link
🔨 Latest commit 4a394fa
🔍 Latest deploy log https://app.netlify.com/sites/oss-insights/deploys/66ba9a6d9fd83d000824c004
😎 Deploy Preview https://deploy-preview-3931--oss-insights.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@netlify Netlify
Copy link

netlify bot commented Aug 12, 2024 •
edited
Loading

✅ Deploy Preview for design-insights ready!

Name Link
🔨 Latest commit 4a394fa
🔍 Latest deploy log https://app.netlify.com/sites/design-insights/deploys/66ba9a6d5c48bd0008b1459d
😎 Deploy Preview https://deploy-preview-3931--design-insights.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@nickytonline nickytonline requested review from BekahHW and a team August 12, 2024 22:54
@bdougie
Copy link
Member

bdougie commented Aug 12, 2024 •
edited
Loading

This works but the QA monster in me can't definitely break it if I click fast enough.image

I can get the check to be hidden by cancelling the flip with a quick tap before it flips fully.

This is much better than what we have but just sharing an edge case.

@nickytonline
Copy link
Member Author

nickytonline commented Aug 12, 2024 •
edited
Loading

This works but the QA monster in me can't definitely break it if I click fast enough.!

I can get the check to be hidden by cancelling the flip with a quick tap before it flips fully.

This is much better than what we have but just sharing an edge case.

I'd say ship as is as, but I'll create an issue for that. The component currently only handles clicks which translate to touches on the phone, but we can probably handle your QA gestures. 😅

I clicked as fast as I could on desktop, and all good though.

I created #3932 for this @bdougie.

@nickytonline nickytonline mentioned this pull request Aug 12, 2024
Open
bdougie
bdougie approved these changes Aug 12, 2024
View reviewed changes
Copy link
Member

@bdougie bdougie left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Let's move with what we have and follow up with the other things in a future PR for #3932.

@nickytonline nickytonline added this pull request to the merge queue Aug 12, 2024
Merged via the queue into beta with commit eb9f458 Aug 12, 2024
19 checks passed
@nickytonline nickytonline deleted the nickytonline/the-flippening branch August 12, 2024 23:50
open-sauced bot pushed a commit that referenced this pull request Aug 12, 2024
@nickytonline @open-sauced
chore(patch): release 2.55.2-beta.1 on beta channel [skip ci]
75dc49a 
## [2.55.2-beta.1](v2.55.1...v2.55.2-beta.1) (2024-08-12)

### 🐛 Bug Fixes

* now the back of the dev card no longer peers through when flipped on Safari and Firefox ([#3931](#3931)) ([eb9f458](eb9f458))
open-sauced bot pushed a commit that referenced this pull request Aug 13, 2024
@nickytonline @open-sauced
chore(patch): release 2.55.2 [skip ci]
a2e58f6 
## [2.55.2](v2.55.1...v2.55.2) (2024-08-13)

### 🐛 Bug Fixes

* now the back of the dev card no longer peers through when flipped on Safari and Firefox ([#3931](#3931)) ([eb9f458](eb9f458))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@zeucapua zeucapua zeucapua approved these changes

@bdougie bdougie bdougie approved these changes

@brandonroberts brandonroberts brandonroberts approved these changes

@BekahHW BekahHW Awaiting requested review from BekahHW

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Bug: Dev card back and front overlap when flipped
4 participants
@nickytonline @bdougie @brandonroberts @zeucapua