Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-17 23:44:39 -05:00
Code Issues Activity

Refined multiple tiers signup desktop UI

Browse source
This commit is contained in:
Peter Zimon 2021-08-17 17:56:24 +02:00
parent cf36bffe07
commit 421654e491
3 changed files with 37 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
ghost/portal/src/components/common/PlansSection.js
View file

@ -404,8 +404,8 @@ export const PlanSectionStyles = `
flex-direction: column;
border: 1px solid var(--grey11);
border-top: none !important;
padding: 16px 24px 12px !important;
margin: 0 0 4px !important;
padding: 16px 24px 12px !important;
border-radius: 0 0 5px 5px;
}
@ -413,26 +413,14 @@ export const PlanSectionStyles = `
padding: 0 8px;
}
.gh-portal-singleproduct-benefits .gh-portal-product-description {
margin-top: 8px !important;
margin-bottom: 14px !important;
}
.gh-portal-singleproduct-benefits:not(.free) .gh-portal-product-description {
border-bottom: 1px solid var(--grey11);
padding-bottom: 20px;
margin-bottom: 20px !important;
}
.gh-portal-singleproduct-benefits .gh-portal-product-benefit:last-of-type {
margin-bottom: 12px;
}
.gh-portal-discount-label {
color: var(--brandcolor);
font-size: 1.2rem;
margin-top: 4px;
margin-bottom: -12px;
.gh-portal-singleproduct-benefits:not(.free) .gh-portal-product-description {
border-bottom: 1px solid var(--grey12);
padding-bottom: 20px;
margin-bottom: 16px;
}
@media (max-width: 480px) {

35
ghost/portal/src/components/common/ProductsSection.js
View file

@ -93,7 +93,7 @@ export const ProductsSectionStyles = ({site}) => {
align-items: center;
justify-content: space-between;
background: white;
padding: 24px 24px 18px;
padding: 24px;
border-radius: 3px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
min-height: 240px;
@ -144,10 +144,19 @@ export const ProductsSectionStyles = ({site}) => {
.gh-portal-product-description {
font-size: 1.35rem;
font-weight: 500;
line-height: 1.45em;
text-align: center;
color: var(--grey3);
margin-bottom: 24px;
margin-bottom: 14px;
margin-top: 8px;
padding: 0 4px;
width: 100%;
}
.gh-portal-product-card:not(.free) .gh-portal-product-description {
padding-bottom: 20px;
margin-bottom: 16px;
}
.gh-portal-product-price {
@ -177,7 +186,7 @@ export const ProductsSectionStyles = ({site}) => {
}
.gh-portal-product-alternative-price {
font-size: 1.15rem;
font-size: 1.2rem;
line-height: 1.6em;
color: var(--grey7);
text-align: center;
@ -189,12 +198,18 @@ export const ProductsSectionStyles = ({site}) => {
.gh-portal-product-benefits {
font-size: 1.3rem;
line-height: 1.45em;
margin: -12px 0 0;
padding: 14px 24px;
margin: -8px 0 0;
padding: 16px 8px 16px;
color: var(--grey3);
width: 100%;
}
.gh-portal-product-card .gh-portal-product-description + .gh-portal-product-benefits {
border-top: 1px solid var(--grey12);
margin-top: -16px;
padding-top: 24px;
}
.gh-portal-product-benefit {
display: flex;
align-items: flex-start;
@ -215,6 +230,7 @@ export const ProductsSectionStyles = ({site}) => {
.gh-portal-benefit-title {
flex-grow: 1;
color: var(--grey5);
}
.gh-portal-product-benefits.vertical {
@ -225,6 +241,13 @@ export const ProductsSectionStyles = ({site}) => {
padding: 0;
}
.gh-portal-discount-label {
color: var(--brandcolor);
font-size: 1.2rem;
margin-top: 4px;
margin-bottom: -12px;
}
@media (max-width: 480px) {
.gh-portal-products {
margin: 0 -32px;
@ -581,7 +604,7 @@ function ProductCards({products}) {
function FreeProductCard() {
const {selectedProduct, setSelectedProduct} = useContext(ProductsContext);
const cardClass = selectedProduct === 'free' ? 'gh-portal-product-card checked' : 'gh-portal-product-card';
const cardClass = selectedProduct === 'free' ? 'gh-portal-product-card free checked' : 'gh-portal-product-card free';
return (
<div className={cardClass} onClick={(e) => {

7
ghost/portal/src/utils/fixtures.js
View file

@ -27,7 +27,7 @@ const products = [
{
id: 'product_1',
name: 'Ball is life membership',
description: '',
description: 'Get access to everything and lock in early adopter pricing for life + listen to my podcast',
monthlyPrice: {
id: '6085adc776909b1a2382369a',
stripe_price_id: '7d6c89c0289ca1731226e86b95b5a162085b8561ca0d10d3a4f03afd3e3e6ba6',
@ -50,7 +50,6 @@ const products = [
type: 'recurring',
interval: 'year'
},
// benefits: [],
benefits: [
{
id: 'a1',
@ -163,8 +162,8 @@ export const site = {
currency: 'USD'
},
portal_products: ['product_1', 'product_2', 'product_3'],
products: [products[0]],
// products: products,
// products: [products[0]],
products: products,
prices,
allow_self_signup: true,
members_signup_access: 'all',