-
Notifications
You must be signed in to change notification settings - Fork 2k
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
Domains: Add right-hand column to the transfer page #58662
Domains: Add right-hand column to the transfer page #58662
Conversation
Link to Calypso live: https://calypso.live?image=registry.a8c.com/calypso/app:build-21284 |
Here is how your PR affects size of JS and CSS bundles shipped to the user's browser: Sections (~225 bytes added 📈 [gzipped])
Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to. Async-loaded Components (~2 bytes added 📈 [gzipped])
React components that are loaded lazily, when a certain part of UI is displayed for the first time. Legend What is parsed and gzip size?Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory. Generated by performance advisor bot at iscalypsofastyet.com. |
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 LGTM! The only thing I noticed that is different from the design is that the gap between the two columns should be 48px, so each column should have a right/left padding of 24px.
I was going to mention that we are using at least three different approaches to the two column layout: @hambai's 12-column grid (#57111), @gius80's 2-column grid (#58653) and this with the Column
component (nice find, btw!), but I saw you've already discussed this here https://github.com/Automattic/wp-calypso/pull/58653/files#r760789139 and a card was created, so it's all good 🙂
Edit: Oh, there's also a code conflict that should be solved before merging this - now the transfer options are rendered in a method.
&-section-card { | ||
background: var( --studio-gray-0 ); | ||
border-radius: 2px; | ||
box-shadow: none; | ||
padding: 24px; | ||
} |
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.
There's a border-radius in the designs, I hadn't noticed it 😅 good eyes! We'll probably have to fix that in the other pages.
c55c7c2
to
4de3e42
Compare
Rebased on |
This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/7017152 Thank you @rafaelgalani for including a screenshot in the description! This is really helpful for our translators. |
Translation for this Pull Request has now been finished. |
* Add column component * Add support link * Fix column padding
Changes proposed in this Pull Request
Adds the right-hand column to the transfer page with a help text. This is part of the domain management redesign project described in pcYYhz-m2-p2.
Preview
Desktop
Mobile
Testing instructions
?flags=domains/transfers-redesign
to your URL to enable the appropriate feature flag;