Plans: don't hide on small screens #8969

mattwiebe · 2018-03-02T22:31:00Z

Changes proposed in this Pull Request:

don't hide the plans table on small screens

Testing instructions:

View the Plans tab on a screen smaller than 600px wide. Before this PR, the table will be hidden. After, it shows.

It does look bad on very small screens, and we should plan to bring over the plans cards view from Calypso in the next release.

Changelog entry

Show link to see all plans on small screens.

Very small screens don't look great, but we didn't bring in the dedicated moblie view from Calypso

oskosk

Was gonna approve this one, but it just looks really bad on my phone (iPhone SE). ( I know you mentioned it looks bad on small screens on this PR's description). I wouldn't ship this as is unless Design approves.

cc @jeffgolenski @rickybanister @joanrho

jeffgolenski · 2018-03-07T18:45:54Z

@mattwiebe + @oskosk let me test this a bit and we'll see what kind of a quick fix we can get in until we can get the full collapsible plans cards from calypso (and jetpack.com). cc @keoshi

adding a mobile notice to view plans

jeffgolenski · 2018-03-07T20:09:12Z

Alright, I made some quick enhancements for a slightly better UX on small mobile devices

Currently, on screen sizes smaller than 660px, we can see some real cramping in the table:

Unfortunately, after taking a look at the code, I discovered that this table is built with some row-centric table markup (instead of column centric), so we're not easily able to break apart the columns and make them mobile friendly.

Because of which, I'm suggesting we hide the table on devices with screen sizes smaller than 660px and display a card with two CTAs. One with a link to manage the users plan, and one to view all plans. I've already coded them in and it currently looks like this on small screens:

These links should take the users to view the proper plans page and plans listing in calypso, which are all mobile optimized.

@mattwiebe I just need a little help from you!
[ ] Take a look at my code in the plans-grid.jsx file. It probably could use some cleaning up to match proper react syntax
[ ] Make the "manage your plan" link take the user to https://wordpress.com/plans/my-plan/sitename.com [ ] Make the "view all plans" link take the user to https://wordpress.com/plans/sitename.com`

Thankfully, we have a really low traffic rate for small mobile devices at this point in time, so this is an okay quick fix, but we'll need to take some time to look at bringing over the proper pricing tables from calypso at some point since they're all optimized for mobile!

Thanks!

review too old

zinigor

This needs more work due to missing i18n strings and variables.

zinigor · 2018-03-19T14:31:18Z

_inc/client/plans/plan-grid.jsx

 			<div className="plan-features">
+				<div className="plans-mobile-notice dops-card">
+					<h2>Your plan</h2>
+					<p>You're currently on the Jetpack [plan name].</p>


This line actually needs the plan name now, and the entire block needs translated strings.

designsimply · 2018-03-19T19:29:25Z

For reference, here's what I see for WP 4.9.4 JP 5.9 for WP Admin > Jetpack > "Plans" and "Compare All Plans."

And here is what I see on the same page with the branch loaded via https://jurassic.ninja/create/?shortlived&jetpack-beta&nojetpack&branch=fix/plans-small-screens

Note the placeholder text on for "[plan name]".
When I tapped "View all Jetpack plans" I was prompted to select a site (even though I just came from a very specific site), is that expected?
Looks like my test site isn't loading the new layout from the branch and I suspect a Pixel phone doesn't meet the smaller than 600px requirement.

^{Tested with Pixel, Android 8.1.0 using WordPress 4.9.4 and Jetpack 6.0-beta-17828-4f10116-fix_plans-small-screens.}

jeffgolenski · 2018-03-20T14:12:53Z

@zinigor @designsimply Thanks for testing. Sorry, this PR should of had a "in progress" label—there's still work to be done here!

jeffgolenski · 2018-03-21T21:58:54Z

@mattwiebe Lookin' good dude. Labels changed accordingly.

Request seems to have been addressed

oskosk

LGTM!

@tiagonoronha

* Changelog 6.0: create base for changelog. * Add #8938 to changelog * Add #8962 to changelog * Add #8974 to changelog * Add #8975 to changelog * Add #8978 to changelog * Add #8867 to changelog * Add #8937 to changelog * Add #8961 to changelog * Add #8855 to changelog * Add #8944 to changelog * Add #8973 to changelog * Add #8977 to changelog * Add #8979 to changelog * Add #8980 to changelog * Add #8982 to changelog * Add #8983 to changelog * Add #8984 to changelog * Add #8986 to changelog * Add #9005 to changelog * Add #9010 to changelog * Add #9012 to changelog * Add #9021 to changelog * Add #9022 to changelog * Add #9056 to changelog * Add #9061 to changelog * Add #9079 to changelog * Add #9080 to changelog * Add #9088 to changelog * Add #9096 to changelog * Add #9097 to changelog * Add #9100 to changelog * Add #9107 to changelog * Add #8969 to changelog * Add #8993 to changelog * Add #9003 to changelog * Add #9031 to changelog * Add #8945 to changelog * Add #9052 to changelog * Add #9058 to changelog * Add #9066 to changelog * Add #9076 to changelog * Add #9053 to changelog * Add #9108 to changelog * Add #9135 to changelog * Add #9148 to changelog * Add #9125 to changelog * Add #9137 to changelog * Added testing instructions for 6.0. * Added IS testing instructions, huge props to @tiagonoronha. * Added #8498 to changelog. * Added #8954 to changelog. * Added #8985 to changelog. * add #9027 * add #9112 to changelog * add #9136 to changelog * add #9102 to changelog * add #9093 to changelog * add #9062 to changelog * add #9172 to changelog

Plans: don't hide on small screens

2aa0292

Very small screens don't look great, but we didn't bring in the dedicated moblie view from Calypso

mattwiebe added [Status] Needs Review This PR is ready for review. Plans labels Mar 2, 2018

mattwiebe added this to the 5.9 milestone Mar 2, 2018

mattwiebe requested review from bubel and withinboredom March 2, 2018 22:31

mattwiebe requested a review from a team as a code owner March 2, 2018 22:31

withinboredom requested a review from oskosk March 3, 2018 01:20

withinboredom approved these changes Mar 3, 2018

View reviewed changes

withinboredom requested a review from dereksmart March 3, 2018 01:21

withinboredom added [Pri] Normal [Type] Bug When a feature is broken and / or not performing as intended labels Mar 3, 2018

oskosk added [Status] Needs Design Review Design has been added. Needs a review! [Status] Needs Review This PR is ready for review. and removed [Status] Needs Review This PR is ready for review. labels Mar 6, 2018

oskosk previously requested changes Mar 6, 2018

View reviewed changes

zinigor modified the milestones: 5.9, 6.0 Mar 6, 2018

jeffgolenski self-assigned this Mar 7, 2018

Jetpack: modding plans table for mobile

01f8fc7

adding a mobile notice to view plans

zinigor previously requested changes Mar 19, 2018

View reviewed changes

jeffgolenski added the [Status] In Progress label Mar 20, 2018

jeffgolenski removed the [Status] Needs Review This PR is ready for review. label Mar 20, 2018

Componentize mobile card, translate strings

f6339f0

ghost removed the [Status] In Progress label Mar 21, 2018

jeffgolenski added [Status] Design Review Complete [Status] Needs Review This PR is ready for review. and removed [Status] Needs Design Review Design has been added. Needs a review! labels Mar 21, 2018

oskosk approved these changes Mar 23, 2018

View reviewed changes

oskosk added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Review This PR is ready for review. labels Mar 23, 2018

mattwiebe merged commit eeb4d70 into master Mar 23, 2018

matticbot added the [Status] Needs Changelog label Mar 23, 2018

ghost removed the [Status] Ready to Merge Go ahead, you can push that green button! label Mar 23, 2018

mattwiebe deleted the fix/plans-small-screens branch March 23, 2018 16:49

oskosk added a commit that referenced this pull request Mar 26, 2018

Add #8969 to changelog

fd9d273

oskosk added [Status] Has Changelog and removed [Status] Needs Changelog labels Mar 26, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Plans: don't hide on small screens #8969

Plans: don't hide on small screens #8969

Uh oh!

mattwiebe commented Mar 2, 2018 •

edited by oskosk

Loading

Uh oh!

oskosk left a comment •

edited

Loading

Uh oh!

jeffgolenski commented Mar 7, 2018

Uh oh!

jeffgolenski commented Mar 7, 2018

Uh oh!

zinigor left a comment

Uh oh!

zinigor Mar 19, 2018

Uh oh!

designsimply commented Mar 19, 2018

Uh oh!

jeffgolenski commented Mar 20, 2018

Uh oh!

jeffgolenski commented Mar 21, 2018 •

edited

Loading

Uh oh!

oskosk left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

Plans: don't hide on small screens #8969

Plans: don't hide on small screens #8969

Uh oh!

Conversation

mattwiebe commented Mar 2, 2018 • edited by oskosk Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes proposed in this Pull Request:

Testing instructions:

Changelog entry

Uh oh!

oskosk left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jeffgolenski commented Mar 7, 2018

Uh oh!

jeffgolenski commented Mar 7, 2018

Uh oh!

zinigor left a comment

Choose a reason for hiding this comment

Uh oh!

zinigor Mar 19, 2018

Choose a reason for hiding this comment

Uh oh!

designsimply commented Mar 19, 2018

Uh oh!

jeffgolenski commented Mar 20, 2018

Uh oh!

jeffgolenski commented Mar 21, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

oskosk left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

mattwiebe commented Mar 2, 2018 •

edited by oskosk

Loading

oskosk left a comment •

edited

Loading

jeffgolenski commented Mar 21, 2018 •

edited

Loading