Skip to content
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

Themes: added Support tab to sheet #5282

Merged
merged 8 commits into from
May 9, 2016
Merged

Conversation

folletto
Copy link
Contributor

@folletto folletto commented May 9, 2016

screen shot 2016-05-09 at 13 24 04

This PR does:

  1. Add Support page layout (React + CSS)
  2. Refactoring: moved tab code to individual render calls + cleanup of the logic
  3. Added footer line item (ready to be a component, but might be too much).

Still Todo

  1. The correct URL for the Theme Forum
  2. A visual glitch on the mobile size on IE11.

To test

  1. Open My Sites → Themes
  2. Tap any theme's ••• → Details
  3. Check the theme sheet page for the Support tab (and the closing footer (W) line) at multiple breakpoints.

1. Support page layout done
2. Moved tab code to individual render calls
3. Added footer line component
@folletto folletto added the [Feature Group] Appearance & Themes Features related to the appearance of sites. label May 9, 2016
@folletto
Copy link
Contributor Author

folletto commented May 9, 2016

Added:

The correct URL for the Theme Forum

Props @seear for the cherries ;)

@folletto
Copy link
Contributor Author

folletto commented May 9, 2016

Fixed:

A visual glitch on the mobile size on IE11.

The reason was that IE11 with a flex width of 100% forces the item to go beyond the container boundaries if the flex property for shrink was 0. Setting that at 1 fixes the issue.

@folletto folletto added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] In Progress labels May 9, 2016
@seear
Copy link
Contributor

seear commented May 9, 2016

We may want to open the forum links in a fresh browser tab, since they are not part of Calypso.

@folletto
Copy link
Contributor Author

folletto commented May 9, 2016

I wondered about that... While true in terms of our rule of thumb, I couldn't come up with a scenario where the user intent clicking there would be happy to have a second tab open. The button also seems quite a clear indication of a separate navigation flow.

},

renderOverviewTab() {
return <div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Multiline markup blocks tend to go inside (), see renderFeaturesCard below.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

* facepalm * fixed.

@seear
Copy link
Contributor

seear commented May 9, 2016

Very minor—iPad width has the text right up against the forum button:
screen shot 2016-05-09 at 15 50 59

Maybe the buttons need some margin?

@seear
Copy link
Contributor

seear commented May 9, 2016

I'd say this is good to merge when you are happy 👍

@folletto
Copy link
Contributor Author

folletto commented May 9, 2016

Ok, fixed:

screen shot 2016-05-09 at 18 20 00

@folletto folletto removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label May 9, 2016
@folletto folletto merged commit d7a8da8 into master May 9, 2016
@folletto folletto deleted the add/theme-sheet-support-tab branch May 9, 2016 16:48
@@ -9,6 +9,7 @@
import React from 'react';
import { connect } from 'react-redux';
import page from 'page';
import { isPremium } from 'my-sites/themes/helpers';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not an external dependency :-) Plus we're also importing from that file here -- so that line should be changed to

import { isPremium, getForumUrl } from 'my-sites/themes/helpers';

(And https://github.com/Automattic/wp-calypso/pull/5282/files#diff-f576b3c13daa17f9ccee514c4c46bc07R177 needs to be changed accordingly.)

Copy link
Contributor

@ockham ockham May 9, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can cherry-pick 51ef28fced3fe489deeca4c17f0ea35d9023cea5 for a fix :-p

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah good point. Since it's already merged tho we can just review that PR and merge it, right? :)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah this will be fixed by #5259.

import { isPremium, getForumUrl } from 'my-sites/themes/helpers';

Incidentally, the above doesn't work since getForumUrl uses this.isPremium().

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Incidentally, the above doesn't work since getForumUrl uses this.isPremium().

Mhm, noticed last night. Going to ES6ify helpers, probably as part of #5284.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Going to ES6ify helpers, probably as part of #5284.

#5315, actually :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature Group] Appearance & Themes Features related to the appearance of sites.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants