Hosting config: Use two equal columns #90592

dsas · 2024-05-10T16:07:05Z

Related to https://github.com/Automattic/dotcom-forge/issues/7078

Proposed Changes

The hosting config cards have been re-sorted into columns and both columns are now displayed with equal widths.

Testing Instructions

Use calypso live link
Go to /hosting-config
For a browser width >1280px you should see two equal columns, for lower browser widths you should see narrower columns.
Essentially it should look like the mock in the linked issue, albeit the order of the boxes may change depending upon what your site has enabled etc

Before	After

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

The hosting config cards have been re-sorted into columns and both columns are now displayed with equal widths.

github-actions · 2024-05-10T16:07:19Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-107354

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-107354&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-107354&env=a8c-for-agencies

matticbot · 2024-05-10T16:11:19Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~108 bytes added 📈 [gzipped])

name      parsed_size           gzip_size
hosting       +1405 B  (+0.1%)     +108 B  (+0.0%)
settings        +39 B  (+0.0%)      +10 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

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.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

DustyReagan

Looks great!

Aurorum

Just wondering if it’s not better to display more icons or centre align them rather than the (IMO) oddly-spaced icons here?

taipeicoder · 2024-05-13T02:58:44Z

Just wondering if it’s not better to display more icons or centre align them rather than the (IMO) oddly-spaced icons here?

+1.

There's also a horizontal scrolling issue on mobile, I'll improve the CSS a bit and merge it!

fushar

Unfortunately this breaks the existing page (flags=-layout/dotcom-nav-redesign-v2) which uses narrower page width. The section cards look too narrow:

Perhaps we should also use full-width page for the existing page? We're gonna launch the feature soon anyway. 😄

--- a/client/my-sites/hosting/main.js
+++ b/client/my-sites/hosting/main.js
@@ -310,7 +310,7 @@ const Hosting = ( props ) => {
 	const banner = shouldShowUpgradeBanner ? getUpgradeBanner() : getAtomicActivationNotice();

 	return (
-		<Main wideLayout className="hosting">
+		<Main fullWidthLayout className="hosting">
 			{ ! isLoadingSftpData && <ScrollToAnchorOnMount offset={ HEADING_OFFSET } /> }
 			<PageViewTracker path="/hosting-config/:site" title="Hosting" />
 			<DocumentHead title={ translate( 'Hosting' ) } />

taipeicoder · 2024-05-13T04:23:34Z

@fushar could you explain a bit more how the changes breaks the layout? The columns are narrower, but I didn't see anything breaking.

With flag	Without flag

fushar · 2024-05-13T04:26:48Z

@fushar could you explain a bit more how the changes breaks the layout?

Oops sorry, I meant it looks weird (to me) that we are using two-column layout with narrow page width. But you're right that nothing in that page breaks. Maybe I'm just not used to seeing hosting config page that way 🙈

Now I believe this PR is fine.

fushar

Now that I think about it.... is the intention to have the cards from both columns "aligned"? That's what I'm under impression reading the original issue. However, in this PR, the cards in right column are misaligned with the left column, making the page hard to read.

Design	Actual

cc: @davemart-in @lucasmendes-design

taipeicoder · 2024-05-13T07:15:54Z

Now that I think about it.... is the intention to have the cards from both columns "aligned"? That's what I'm under impression reading the original issue. However, in this PR, the cards in right column are misaligned with the left column, making the page hard to read.

Design Actual

cc: @davemart-in @lucasmendes-design

Updated the code using CSS grid, give it a look 🙂

fushar

Thanks, looking perfect now!

fushar · 2024-05-13T07:19:40Z

client/my-sites/hosting/main.js

+									<SidebarCards
+										hasStagingSitesFeature={ hasStagingSitesFeature }
+										isAdvancedHostingDisabled={ ! hasSftpFeature || ! isSiteAtomic }
+										isBasicHostingDisabled={ ! hasAtomicFeature || ! isSiteAtomic }


I believe this is the only prop needed for <SidebarCards />

Nice! Forgot to remove it in the cleanup.

matticbot · 2024-05-13T07:33:10Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

blaze-dashboard
command-palette-wp-admin
odyssey-stats

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/hosting-config-cards on your sandbox.

lucasmendes-design · 2024-05-13T12:14:49Z

LGTM. Thanks folks :)

Hosting config: Use two equal columns

15a275e

The hosting config cards have been re-sorted into columns and both columns are now displayed with equal widths.

dsas self-assigned this May 10, 2024

Improve card type check for right col

047189f

DustyReagan approved these changes May 10, 2024

View reviewed changes

Aurorum reviewed May 12, 2024

View reviewed changes

fushar reviewed May 13, 2024

View reviewed changes

fushar assigned taipeicoder May 13, 2024

CSS improvements

ab07622

fushar reviewed May 13, 2024

View reviewed changes

taipeicoder added 2 commits May 13, 2024 14:15

Maintain existing layout

bab163e

Use grid

8c151b0

fushar approved these changes May 13, 2024

View reviewed changes

Remove unused props

28e6432

taipeicoder merged commit 6241a94 into trunk May 13, 2024
11 checks passed

taipeicoder deleted the update/hosting-config-cards branch May 13, 2024 07:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hosting config: Use two equal columns #90592

Hosting config: Use two equal columns #90592

dsas commented May 10, 2024

github-actions bot commented May 10, 2024 •

edited by matticbot

matticbot commented May 10, 2024 •

edited

DustyReagan left a comment

Aurorum left a comment •

edited

taipeicoder commented May 13, 2024

fushar left a comment

taipeicoder commented May 13, 2024

fushar commented May 13, 2024

fushar left a comment

taipeicoder commented May 13, 2024

fushar left a comment

fushar May 13, 2024

taipeicoder May 13, 2024

matticbot commented May 13, 2024

lucasmendes-design commented May 13, 2024

Hosting config: Use two equal columns #90592

Hosting config: Use two equal columns #90592

Conversation

dsas commented May 10, 2024

Proposed Changes

Testing Instructions

Pre-merge Checklist

github-actions bot commented May 10, 2024 • edited by matticbot

matticbot commented May 10, 2024 • edited

DustyReagan left a comment

Choose a reason for hiding this comment

Aurorum left a comment • edited

Choose a reason for hiding this comment

taipeicoder commented May 13, 2024

fushar left a comment

Choose a reason for hiding this comment

taipeicoder commented May 13, 2024

fushar commented May 13, 2024

fushar left a comment

Choose a reason for hiding this comment

taipeicoder commented May 13, 2024

fushar left a comment

Choose a reason for hiding this comment

fushar May 13, 2024

Choose a reason for hiding this comment

taipeicoder May 13, 2024

Choose a reason for hiding this comment

matticbot commented May 13, 2024

lucasmendes-design commented May 13, 2024

github-actions bot commented May 10, 2024 •

edited by matticbot

matticbot commented May 10, 2024 •

edited

Aurorum left a comment •

edited