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.

Sign up for GitHub

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

Jump to bottom

portico: Add redesigned Plans page. #27851

Merged
merged 21 commits into from
Dec 1, 2023
Merged

portico: Add redesigned Plans page. #27851

merged 21 commits into from
Dec 1, 2023

Conversation

karlstolley
Copy link
Contributor

@karlstolley karlstolley commented Nov 22, 2023 •
edited
Loading

This is PR for placing the redesigned plans page.

Here are screenshots implementing the fixes noted below as of 2023-12-01:

Zulip Cloud Self-hosted
zulip-cloud-fixes self-hosted-fixes

Here is a screenshot of its responsive state as of 2023-11-30:

responsive-plans

Some things remain to be finished and polished, including:

  • Placing the various button styles
  • Handling curves and other flourishes on the box elements
  • Adjusting how individual plans sit within their grid
  • Cleaning up the CSS to keep the linter from complaining bitterly about a duplicate selector
  • Placing the responsive styles on plans
  • Correcting some JavaScript errors being run out of context (intended originally just for the /hello page)

Some things to handle probably as follow-up PRs

  • Engineering the JavaScript-based plan scroller
  • Handling some subtle light/dark mode differences
  • Removing the mystery gap of space beneath the footer
Self-review checklist
  • Self-reviewed the changes for clarity and maintainability
    (variable names, code reuse, readability, etc.).

Communicate decisions, questions, and potential concerns.

  • Explains differences from previous plans (e.g., issue description).
  • Highlights technical choices and bugs encountered.
  • Calls out remaining decisions and concerns.
  • Automated tests verify logic where appropriate.

Individual commits are ready for review (see commit discipline).

  • Each commit is a coherent idea.
  • Commit message(s) explain reasoning and motivation for changes.

Completed manual review and testing of the following:

  • Visual appearance of the changes.
  • Responsiveness and internationalization.
  • Strings and tooltips.
  • End-to-end functionality of buttons, interactions and flows.
  • Corner cases, error conditions, and easily imagined bugs.

@zulipbot
Copy link
Member

Hello @zulip/server-misc members, this pull request was labeled with the "area: portico" label, so you may want to check it out!

@alya alya mentioned this pull request Nov 23, 2023
Closed
@karlstolley karlstolley force-pushed the plans-page-redesign branch 7 times, most recently from 6c182ff to 761b61d Compare November 27, 2023 22:59
@alya alya mentioned this pull request Nov 27, 2023
Closed
@karlstolley karlstolley force-pushed the plans-page-redesign branch 4 times, most recently from 9cd77a6 to 2480f3a Compare November 28, 2023 22:57
@alya alya mentioned this pull request Nov 29, 2023
Merged
7 tasks
@karlstolley karlstolley force-pushed the plans-page-redesign branch 7 times, most recently from d9d9379 to 4a51244 Compare November 30, 2023 18:35
@alya
Copy link
Contributor

alya commented Nov 30, 2023 •
edited
Loading

I would really like to have the price line wrapping as in Vlad's prototype when we have the horiziontal space for it. The $8 is quite hard to locate right now.

We might need to bump the visual distinctness of that number in any case.

This PR:
this PR

Prototype:
prototype

We might even be better off with a line break before "or" whether we have 2 lines or 3.

@alya
Copy link
Contributor

alya commented Nov 30, 2023 •
edited
Loading

How is the width constrained in general? We should have all the features fit on one line at full width. We could fiddle with the wording if we need to, but do we? Let me know if we need to change the SSO line to make it fit.

Let's also:

  • Drop "Funds the Zulip open source project" in any case
  • Add this as the last line for Standard: Public access option

@alya
Copy link
Contributor

alya commented Nov 30, 2023

Needs a space:

Limit user list access forguests

@alya
Copy link
Contributor

alya commented Dec 1, 2023

Is it intentional that we have 2-colored underlines here? It looks quite odd to me, especially on hover.

Screenshot 2023-11-30 at 3 59 19 PM
Screenshot 2023-11-30 at 3 59 04 PM

@alya
Copy link
Contributor

alya commented Dec 1, 2023

I wonder if we should bump up the contrast on the tab subheadings? They feel a bit hard to read.

Screenshot 2023-11-30 at 3 58 18 PM

@alya alya mentioned this pull request Dec 1, 2023
Closed
@alya alya mentioned this pull request Dec 1, 2023
Closed
3 tasks
@karlstolley
Copy link
Contributor Author

Thanks @alya! Yes. PAGE_DESCRIPTION is set the same on that page, regardless of which tab is selected.

karlstolley and others added 20 commits December 1, 2023 17:03
@karlstolley
plans_page: Align content with Vlad's mock.
3f6ac7d
@karlstolley
plans_page: Simplify structures and present page header.
a902046
@karlstolley
plans_page: Rough out structures and grid layout.
2f19e0e
@karlstolley
plans_page: Handle typesetting and vertical alignment.
bb8cabd
@karlstolley
plans_page: Add JS toggle for showing cloud or self-hosted plans.
6e7f6e3
@karlstolley
plans_page: Add cloud Plus plan.
96a8c54
@karlstolley
plans_page: Add independent additional info sections for cloud, self-…
70e8178 
…hosted.
@karlstolley
plans_page: Place text, background colors.
775907d
@karlstolley
plans_page: Place non-button link colors.
f116a4a
@alya @karlstolley
plans_page: Adjust /plans content.
20ad0e5 
[squash]: Update sponsorsip and question boxes for Cloud.

[squash]: Update tabs subtitles.

[squash]: Content for info boxes for self-hosted plans.

[squash]: Adjust content to fit design.

portico: Tweak /plans text.
@karlstolley
plans_page: Place custom bullets with flexbox.
9cd9d9a
@karlstolley
plans_page: Place pricing styles.
3a0fd92
@karlstolley
plans_page: Adjust spacing, curved borders.
47510c4
@karlstolley
plans_page: Add curvature to pricing tabs.
d590a19
@karlstolley
plans_page: Place swooshes on question headers.
0004fec
@karlstolley
plans_page: Implement button styles and icons.
272c4f3
@karlstolley
plans_page: Add dashed separators.
d497bab
@karlstolley
plans_page: Place responsive styles, other than plans pane.
c0d4014
@karlstolley
plans_page: Add responsive non-JS plan-pane scrolling.
65f52ce
@karlstolley
plans_page: Allow different max-widths on cloud, self-hosted panes.
d9b57e4
@alya
Copy link
Contributor

alya commented Dec 1, 2023

Works for me!

@alya alya added the integration review Added by maintainers when a PR may be ready for integration. label Dec 1, 2023
timabbott
timabbott reviewed Dec 1, 2023
View reviewed changes
web/src/portico/landing-page.js
const $pricing_wrapper = $(".portico-pricing");
$pricing_wrapper.removeClass("showing-cloud");
$pricing_wrapper.addClass("showing-self-hosted");
}
Copy link
Member

Choose a reason for hiding this comment

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

Just a small comment that in #27137, we're working towards just having each page have its own little JS file rather than these path-specific checks. Can be left for a follow-up when we get around to finishing that PR.

@timabbott timabbott merged commit 871054b into zulip:main Dec 1, 2023
7 checks passed
@timabbott
Copy link
Member

Merged, thanks @karlstolley and @terpimost for all the work on this!

@karlstolley karlstolley deleted the plans-page-redesign branch December 15, 2023 21:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@timabbott timabbott timabbott left review comments

Assignees
No one assigned
Labels
area: portico integration review Added by maintainers when a PR may be ready for integration. size: XL
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@karlstolley @zulipbot @alya @terpimost @timabbott