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

Add template, pattern and styles for Enterprise page #157

Merged
merged 22 commits into from
Jan 12, 2023

Conversation

adamwoodnz
Copy link
Contributor

@adamwoodnz adamwoodnz commented Dec 14, 2022

Closes #150

Adds a template and pattern for the Enterprise page. Some custom styles have had to be added, mostly for the logo grid which changes layout significantly on mobile.

Remaining tasks:

  • Prod quality images
  • Escaping
  • Arrow styling for last section
  • Heading hierarchy
  • A11y
  • Lighthouse Perf and a11y tests

Props @bengreeley

Screenshots

Desktop Tablet Mobile
localhost_8888_enterprise_ localhost_8888_enterprise_(iPad) localhost_8888_enterprise_(Samsung Galaxy S20 Ultra)

How to test the changes in this Pull Request:

  1. Add an 'Enterprise' page with slug enterprise (an existing page may need to be deprecated in your site)
  2. Rebuild the styles yarn workspace wporg-main-2022-theme build
  3. Test the responsive layout

@adamwoodnz adamwoodnz force-pushed the add/150-enterprise-page branch from 4ae3c5e to 2b75bbf Compare December 14, 2022 22:45
@adamwoodnz adamwoodnz added the [Component] Theme Templates, patterns, CSS label Dec 14, 2022
@adamwoodnz adamwoodnz self-assigned this Dec 14, 2022
@adamwoodnz adamwoodnz marked this pull request as draft December 14, 2022 22:53
@adamwoodnz adamwoodnz marked this pull request as ready for review December 15, 2022 03:51
@adamwoodnz

This comment was marked as outdated.

@fcoveram

This comment was marked as resolved.

@adamwoodnz

This comment was marked as resolved.

@adamwoodnz adamwoodnz force-pushed the add/150-enterprise-page branch 5 times, most recently from b764aba to f8b4568 Compare January 5, 2023 04:00
@adamwoodnz
Copy link
Contributor Author

adamwoodnz commented Jan 5, 2023

Updated screenshots below with constrained layout and 'Try WordPress' font size reduced to fit (99px, down from 120px), rather than using letter spacing.

@javierarce @panchovm please let me know what you think.

1600px 1320px (as designed) Tablet Mobile
localhost_8888_enterprise-2_ (3) localhost_8888_enterprise-2_ (2) localhost_8888_enterprise-2_(iPad) (1) localhost_8888_enterprise-2_(Samsung Galaxy S20 Ultra) (1)

@adamwoodnz adamwoodnz force-pushed the add/150-enterprise-page branch from a73c919 to 8f9b62b Compare January 5, 2023 04:10
@adamwoodnz adamwoodnz requested a review from fcoveram January 5, 2023 04:12
@StevenDufresne
Copy link
Contributor

This looks good. 👍

I do find that the "WordPress Enterprise" graphic gets blurry on my large desktop.

@adamwoodnz adamwoodnz force-pushed the add/150-enterprise-page branch from 5b2771e to f70a6e8 Compare January 11, 2023 01:16
@adamwoodnz adamwoodnz force-pushed the add/150-enterprise-page branch from 35c5784 to 7c81380 Compare January 11, 2023 07:58
Copy link

@fcoveram fcoveram left a comment

Choose a reason for hiding this comment

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

I have been trying to set up and run the PR in my local, but I couldn't. So instead of keep pining folks for help and delaying my comments, I will share feedback based on the screenshots shared. Sorry for jumping in late.

The page looks great across breakpoints, I just noticed the following in mobile:

  1. Images in Features section are slightly bigger compared to the mockup.
  2. Top and bottom paddings look tighter compared to the mockup.
  3. Section headings, below Try WordPress action, look smaller. The mockup's style is Heading 5.

The font-size reduction in Try WordPress works well.

@adamwoodnz
Copy link
Contributor Author

adamwoodnz commented Jan 11, 2023

@panchovm thanks for the feedback!

3. Section headings, below Try WordPress action, look smaller. The mockup's style is Heading 5

We have a rule in the parent theme for all the redesigned sites which reduces the size of H5 headings from 26px to 20px on mobile: https://github.com/WordPress/wporg-parent-2021/blob/trunk/source/wp-content/themes/wporg-parent-2021/theme.json#L334

Does this rule need to be adjusted? If it's not intended to be applied globally, we could specifically resize the other places it's applied, on the Download pages:

'Everything you need to set up your site just the way you want it.'

'Number of WordPress 6.1 downloads'

I have reduced the size of the Features icons to match the design (now 58px high), and increased the padding on the header and features sections as they seemed the furthest off. Again these paddings are controlled globally and clamped on mobile, so to some degree we try to go with these settings that have been developed on other pages.

@adamwoodnz adamwoodnz requested a review from fcoveram January 11, 2023 22:31
@adamwoodnz adamwoodnz force-pushed the add/150-enterprise-page branch from 77e2285 to e5541b1 Compare January 11, 2023 22:33
@adamwoodnz adamwoodnz added this to the Enterprise launch milestone Jan 11, 2023
@adamwoodnz adamwoodnz mentioned this pull request Jan 12, 2023
7 tasks
@adamwoodnz adamwoodnz force-pushed the add/150-enterprise-page branch from 467f4fc to e5541b1 Compare January 12, 2023 01:14
Copy link

@fcoveram fcoveram left a comment

Choose a reason for hiding this comment

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

The change looks great. We should keep consistency across the site, so your approach is perfect.

Thanks for the work ✨

@adamwoodnz adamwoodnz merged commit fd1c753 into trunk Jan 12, 2023
@adamwoodnz adamwoodnz deleted the add/150-enterprise-page branch January 12, 2023 20:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Component] Theme Templates, patterns, CSS
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

Add new Enterprise content and design
5 participants