-
Notifications
You must be signed in to change notification settings - Fork 3
Responsive fallback #1529
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.
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
Responsive fallback #1529
Conversation
🦋 Changeset detectedLatest commit: 1580ae3 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✔️ Deploy Preview for cloudfour-patterns ready! 🔨 Explore the source changes: 1580ae3 🔍 Inspect the deploy log: https://app.netlify.com/sites/cloudfour-patterns/deploys/613a7ba976842700074d4769 😎 Browse the preview: https://deploy-preview-1529--cloudfour-patterns.netlify.app |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Very cool!
Deferring approval to @cloudfour/dev in case there's anything that needs to change in order to use this with our service worker. (FYI @calebeby)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is looking great Arianna! 🎉
I made a couple super nitpicky suggestions but this all looks good to me.
I don't see anything that I think would need to change for us to use this with our service worker. 🤔 We're including the assets directory in the output of our npm package so it seems like we should be able to grab that from Wordpress:
cloudfour.com-patterns/package.json
Lines 32 to 41 in 6c444f9
"files": [ | |
"/dist", | |
"/src/compiled/tokens", | |
"/src/**/*.scss", | |
"/src/**/*.twig", | |
"!/src/**/demo/**/*.twig", | |
"/src/assets", | |
"!.gitignore", | |
"!src/index.scss" | |
], |
Co-authored-by: Paul Hebert <paul@cloudfour.com>
Co-authored-by: Paul Hebert <paul@cloudfour.com>
<Story name="Responsive fallback image" height="200px"> | ||
{() => | ||
responsiveImageDeck({ | ||
ratios: ['1 / 1', '16 / 9', '9 / 16'], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Quick question, @AriannaChau! 🙂
In Safari, the aspect ratios all look the same in the documentation page. Does that matter? Is this expected? 🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
AGH! No, thank you for bringing that to my attention!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh, is it because aspect-ratio
isn't supported in Safari?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It looks like Safari doesn't support aspect-ratio
(though it does in the Technology Preview so it should be rolling out soon)
I think that's fine for our pattern documentation site (though I'd be hesitant to use it on our actual site). I'm curious what others think though
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Cool, I'm fine leaving it as-is for the documentation site. 😉
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎉
…into feature/button-swap * 'v-next' of github.com:cloudfour/cloudfour.com-patterns: Update storybook monorepo to v6.3.8 Update babel monorepo Incease whitespace for the ground nav component (#1533) Responsive fallback (#1529) Use aria-labelledby to add accessible names to articles (#1530) # Conflicts: # package-lock.json
Overview
This PR adds a new responsive fallback image in the instance that an image fails to load.
Screenshots
Testing