Add new connect splash screen content. #9138

zinigor · 2018-03-23T19:37:13Z

Fixes #8900 and #8617

This still needs some work:

URLs for white buttons needed.
Scrolling doesn't work because of the absolutely positioned element.
The 'not now' button doesn't do anything.
Paddings and margins seem to be off.

I was hoping I could get some help with this from the design team.

Changes proposed in this Pull Request:

Adds new content, includes illustrations from Add illustrations for Jetpack connection banner screens #9097
Cleans up old unused styles.

Testing instructions:

Deactivate Jetpack from the plugins menu.
Activate Jetpack again, see the splash screen

Proposed changelog entry for your changes:

Refreshed the connect splash screen to help new users learn more about Jetpack.

joanrho · 2018-03-23T20:29:25Z

URLs for white buttons needed.

Chat with us: https://jetpack.com/contact-support/
Search our support site: https://jetpack.com/support/

jeffgolenski · 2018-03-23T20:42:24Z

Just some quick feedback!

There's like 6 different text styles on this one page, let's cut that back!
Jetpack Logo is called with an img tag — we can just inline that SVG to reduce a request!
Line-height of text in footer of the page needs to be taller. Line that starts with "Connect to, or create"
I'd like to call in @nicoleckohler for a quick review of the content here, just in case of any grammatical or flow issues
Need to make some adjustments for mobile. See image below. The illustrations are super small
The scrolling issue as discussed in slack!

@joanrho The only goal of this page is to get people to connect. Do you think the "chat with us" or "search our support site" buttons are necessary?

joanrho · 2018-03-23T21:08:58Z

@jeffgolenski Thanks for the review and feedback! I'll get on the styling once we have the scrolling worked out.

As for the "chat with us" and "search our support" site buttons, that section already exists in the current longer disconnection full-screen banner, so my version updates that as a way for uncertain users to reach out for help before deciding. Here's what the current (old) one looks like:

I don't think we should nix this just yet, but we may decide to later on if we see that few users click through to those support options.

zinigor · 2018-03-26T10:46:45Z

Thanks for the review @joanrho and @jeffgolenski !

@jeffgolenski about this:

Jetpack Logo is called with an img tag — we can just inline that SVG to reduce a request!

I'd argue here that one more request doesn't hurt that much, while we have the benefit to make changes to the logo in one place if needed. This PR also makes the settings masthead include that logo as a file.

zinigor · 2018-03-26T13:06:08Z

This is ready for review again, @jeffgolenski . Thanks for the feedback!

joanrho

Thanks for this, @zinigor! I added some minor styling to the "not now" dismiss text and increased the bottom padding.

rickybanister · 2018-03-27T14:53:02Z

Did the font style issues get resolved? I know @zinigor is on a linux machine, but we're seeing both system fonts and helvetica in his screenshots.

dereksmart · 2018-04-24T20:32:07Z

_inc/client/components/masthead/index.jsx

@@ -14,6 +14,7 @@ import analytics from 'lib/analytics';
 */
 import { getSiteConnectionStatus } from 'state/connection';
 import { getCurrentVersion, userCanEditPosts } from 'state/initial-state';
+import { imagePath } from 'constants/urls';


This is not defined when we're building the static.html file for the loading screen, so the console is always giving me a 404 for this path, even though the logo is showing after it loads.

rickybanister · 2018-04-24T21:03:14Z

Some things I noticed:

The footer area is acting strange, the gray is partially covering the wp footer and the white overlay ends at a strange place 200px from the bottom:

The typography all seemed small. On Jetpack.com the h1 and h2 are 2.5em and compute to 35px. Here they are 1.35em and compute to 22px. The terms of service text is 0.6875rem and computes to 11px which is too small. Body copy on Jetpack.com's homepage is 1.25em and here it's not set so it defaults to the p style which is 13px. I suppose we don't need to match jetpack.com exactly, but bumping up the headlines, paragraph styles, and small text would help.

This PR only covers the pop up splash content, not the disconnected dashboard (in the react codebase) stuff. We still need to take care of that.

dereksmart · 2018-04-24T21:49:55Z

I added a commit that renders the svg inline in the masthead, which fixes the undefined problem.

It looks a little choppy to me though.

rickybanister · 2018-04-25T19:33:01Z

Let's merge this as is and address the choppy logo and other to-dos in another PR, is that alright @dereksmart?

@jeffgolenski can you take a look at the logo svg and the other checkboxed items I posted?

joanrho · 2018-05-08T00:40:39Z

The footer area is acting strange, the gray is partially covering the wp footer and the white overlay ends at a strange place 200px from the bottom:

I'm not seeing this @rickybanister. Can you test again and see if you are?

joanrho · 2018-05-09T22:45:53Z

I've updated the styling so it better matches the hierarchies in my original mockups and removed the word "fascinating" from our TOS line in functions.global.php:

Ready for review and to pass on to whoever for next steps (disconnected dashboard?).

cc @zinigor @dereksmart @rickybanister

rickybanister · 2018-05-10T13:42:20Z

That looks much better.

Let's get this merged!

@zinigor @dereksmart, what's the best way to copy this to the dashboard, should we rewrite it and duplicate it? Are there any other viable solutions with less duplication? Can we use some interpretive thing for the links that get 'pre-processed' by the php and react code so we can reuse some meta template for the content and copy?

dereksmart · 2018-05-10T14:07:20Z

@rickybanister -- the good news is that @oskosk is currently working on a solution so we can reuse components in html/templates, so we only have the write them once.

The bad new is that to take advantage of that, this whole PR would have to be re-written in React.

keoshi · 2018-06-04T16:32:34Z

@zinigor This seems to be in great shape to be closed—want to go ahead and merge it? Thanks!

* Set boilerplate for 6.3 in readme.txt * Add changelog for 6.2.1 to changelog.txt * Set boilerplate for 6.3 in to-test.md * Sync Stable tag to 6.2.1 * Add #5647 to changelog * Add #7956 to changelog * Add #9138 to changelog * Add #9573 to changelog * Add #9728 to changelog * Add #9732 to changelog * Add #9752 to changelog * Add some testing instructions * Add #9823 to changelog * Add #9780 to changelog * Add testing instructions for #9780 * Add #9525 to changelog * Add #9782 to changelog * Add #9828 to changelog

zinigor added 4 commits March 23, 2018 14:31

Moved the Jetpack logo SVG into a separate file.

ff7cb0f

Removed old unneeded structures from the connect banner.

04834ce

Added the first card with styles.

30c2ddb

Added feature cards and bottom part.

2c98fdc

zinigor added [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it [Status] In Progress [Status] Needs Design Review Design has been added. Needs a review! [Focus] FixTheFlows labels Mar 23, 2018

zinigor requested review from joanrho, jeffgolenski and rickybanister March 23, 2018 19:37

zinigor requested a review from a team as a code owner March 23, 2018 19:37

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

Added 'chat with us' button URL.

bc7d5e1

zinigor added 2 commits March 26, 2018 14:12

Removed the no-scroll hack.

22cd76d

Increased line height, fixed mobile img width, evened out font styles.

0a96a8a

Tweak styling on dismiss text and bottom padding

9372a3f

joanrho approved these changes Mar 26, 2018

View reviewed changes

oskosk added this to the 6.1 milestone Apr 11, 2018

dereksmart reviewed Apr 24, 2018

View reviewed changes

dereksmart removed this from the 6.1 milestone Apr 24, 2018

inline svg for masthead

ec1611f

More styling edits

3bc2bd4

joanrho added the [Status] In Progress label May 9, 2018

joanrho and others added 2 commits May 9, 2018 15:59

Update TOS line to remove fascinating

596a199

Merge branch 'master' into add/connect-splash-content

c4f2ce9

keoshi added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] In Progress [Status] Needs Design Review Design has been added. Needs a review! labels Jun 4, 2018

zinigor added this to the 6.3 milestone Jun 5, 2018

zinigor merged commit e04bcd9 into master Jun 5, 2018

matticbot added the [Status] Needs Changelog label Jun 5, 2018

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

zinigor deleted the add/connect-splash-content branch June 5, 2018 16:34

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

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

Add #9138 to changelog

c69c336

joanrho mentioned this pull request Jun 28, 2018

Connection Splash Screen: remove "fascinating" and add period to end of TOS line. #9837

Closed

joanrho mentioned this pull request Jul 30, 2018

Update disconnected landing page in Plugin directory view #8617

Closed

joanrho mentioned this pull request Dec 4, 2018

Update disconnected landing page in Jetpack dashboard view #8618

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add new connect splash screen content. #9138

Add new connect splash screen content. #9138

zinigor commented Mar 23, 2018 •

edited

Loading

joanrho commented Mar 23, 2018

jeffgolenski commented Mar 23, 2018 •

edited by zinigor

Loading

joanrho commented Mar 23, 2018

zinigor commented Mar 26, 2018

zinigor commented Mar 26, 2018

joanrho left a comment

rickybanister commented Mar 27, 2018

dereksmart Apr 24, 2018

rickybanister commented Apr 24, 2018 •

edited by joanrho

Loading

dereksmart commented Apr 24, 2018

rickybanister commented Apr 25, 2018

joanrho commented May 8, 2018

joanrho commented May 9, 2018

rickybanister commented May 10, 2018

dereksmart commented May 10, 2018

keoshi commented Jun 4, 2018

Add new connect splash screen content. #9138

Add new connect splash screen content. #9138

Conversation

zinigor commented Mar 23, 2018 • edited Loading

Changes proposed in this Pull Request:

Testing instructions:

Proposed changelog entry for your changes:

joanrho commented Mar 23, 2018

jeffgolenski commented Mar 23, 2018 • edited by zinigor Loading

joanrho commented Mar 23, 2018

zinigor commented Mar 26, 2018

zinigor commented Mar 26, 2018

joanrho left a comment

Choose a reason for hiding this comment

rickybanister commented Mar 27, 2018

dereksmart Apr 24, 2018

Choose a reason for hiding this comment

rickybanister commented Apr 24, 2018 • edited by joanrho Loading

dereksmart commented Apr 24, 2018

rickybanister commented Apr 25, 2018

joanrho commented May 8, 2018

joanrho commented May 9, 2018

rickybanister commented May 10, 2018

dereksmart commented May 10, 2018

keoshi commented Jun 4, 2018

zinigor commented Mar 23, 2018 •

edited

Loading

jeffgolenski commented Mar 23, 2018 •

edited by zinigor

Loading

rickybanister commented Apr 24, 2018 •

edited by joanrho

Loading