mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-25 20:03:12 +03:00
Added benefit fixtures (alpha)
This commit is contained in:
Peter Zimon
parent
40e86e0a77
commit
75d0b40be8
@ -1,5 +1,6 @@
|
||||
import React, {useContext, useEffect, useState} from 'react';
|
||||
import Switch from '../common/Switch';
|
||||
import {ReactComponent as CheckmarkIcon} from '../../images/icons/checkmark.svg';
|
||||
import {getAllProducts, getCurrencySymbol, getPriceString, getStripeAmount, isCookiesDisabled} from '../../utils/helpers';
|
||||
import AppContext from '../../AppContext';
|
||||
|
||||
@ -140,8 +141,8 @@ export const ProductsSectionStyles = ({site}) => {
|
||||
}
|
||||
|
||||
.gh-portal-product-description {
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.5em;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.45em;
|
||||
text-align: center;
|
||||
color: var(--grey5);
|
||||
margin-bottom: 24px;
|
||||
@ -168,7 +169,7 @@ export const ProductsSectionStyles = ({site}) => {
|
||||
align-self: flex-end;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.6em;
|
||||
color: var(--grey7);
|
||||
color: var(--grey4);
|
||||
letter-spacing: 0.3px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
@ -183,6 +184,37 @@ export const ProductsSectionStyles = ({site}) => {
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.gh-portal-product-benefits {
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.45em;
|
||||
margin: -8px 0 0;
|
||||
padding: 20px 8px;
|
||||
border-top: 1px solid var(--grey12);
|
||||
color: var(--grey3);
|
||||
}
|
||||
|
||||
.gh-portal-product-benefit {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.gh-portal-benefit-checkmark {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
min-width: 12px;
|
||||
margin: 3px 6px 0 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.gh-portal-benefit-checkmark path {
|
||||
stroke-width: 2.5px;
|
||||
}
|
||||
|
||||
.gh-portal-benefit-title {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.gh-portal-products {
|
||||
margin: 0 -32px;
|
||||
@ -300,6 +332,21 @@ function Checkbox({name, id, onProductSelect, isChecked, disabled = false}) {
|
||||
);
|
||||
}
|
||||
|
||||
function ProductBenefits({product}) {
|
||||
if (!product.benefits || !product.benefits.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return product.benefits.map((benefit) => {
|
||||
return (
|
||||
<div className="gh-portal-product-benefit">
|
||||
<CheckmarkIcon className='gh-portal-benefit-checkmark' alt=''/>
|
||||
<div className="gh-portal-benefit-title">{benefit.title}</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function ProductCardFooterAlternatePrice({price}) {
|
||||
const {site} = useContext(AppContext);
|
||||
const {portal_plans: portalPlans} = site;
|
||||
@ -350,6 +397,7 @@ function ProductCard({product}) {
|
||||
}} />
|
||||
<h4 className="gh-portal-product-name">{product.name}</h4>
|
||||
<div className="gh-portal-product-description">{product.description}</div>
|
||||
<div className="gh-portal-product-benefits"><ProductBenefits product={product} /></div>
|
||||
</div>
|
||||
<ProductCardFooter product={product} />
|
||||
</div>
|
||||
|
||||
1
ghost/portal/src/images/icons/checkmark.svg
Normal file
1
ghost/portal/src/images/icons/checkmark.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>check-1</title><path class="a" d="M23.25.749,8.158,22.308a2.2,2.2,0,0,1-3.569.059L.75,17.249"/></svg>
|
||||
|
After Width: | Height: | Size: 292 B |
@ -73,6 +73,28 @@ const products = [
|
||||
type: 'recurring',
|
||||
interval: 'year'
|
||||
}
|
||||
],
|
||||
benefits: [
|
||||
{
|
||||
id: 'a1',
|
||||
title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec maximus odio'
|
||||
},
|
||||
{
|
||||
id: 'a2',
|
||||
title: 'Aliquam nec condimentum libero. In in turpis quis nibh faucibus bibendum mollis et elit'
|
||||
},
|
||||
{
|
||||
id: 'a3',
|
||||
title: 'Nullam hendrerit accumsan facilisis'
|
||||
},
|
||||
{
|
||||
id: 'a4',
|
||||
title: 'Vivamus vel elit lectus'
|
||||
},
|
||||
{
|
||||
id: 'a5',
|
||||
title: 'Maecenas tempus cursus metus'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -124,6 +146,24 @@ const products = [
|
||||
type: 'recurring',
|
||||
interval: 'year'
|
||||
}
|
||||
],
|
||||
benefits: [
|
||||
{
|
||||
id: 'b1',
|
||||
title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec maximus odio'
|
||||
},
|
||||
{
|
||||
id: 'b2',
|
||||
title: 'Aliquam nec condimentum libero. In in turpis quis nibh faucibus bibendum mollis et elit'
|
||||
},
|
||||
{
|
||||
id: 'b3',
|
||||
title: 'Nullam hendrerit accumsan facilisis'
|
||||
},
|
||||
{
|
||||
id: 'b4',
|
||||
title: 'Vivamus vel elit lectus'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -175,6 +215,20 @@ const products = [
|
||||
type: 'recurring',
|
||||
interval: 'year'
|
||||
}
|
||||
],
|
||||
benefits: [
|
||||
{
|
||||
id: 'c1',
|
||||
title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec maximus odio'
|
||||
},
|
||||
{
|
||||
id: 'c2',
|
||||
title: 'Aliquam nec condimentum libero. In in turpis quis nibh faucibus bibendum mollis et elit'
|
||||
},
|
||||
{
|
||||
id: 'c3',
|
||||
title: 'Nullam hendrerit accumsan facilisis'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
@ -194,7 +248,7 @@ export const site = {
|
||||
portal_products: ['product_1', 'product_2', 'product_3'],
|
||||
products,
|
||||
prices,
|
||||
allow_self_signup: false,
|
||||
allow_self_signup: true,
|
||||
members_signup_access: 'all',
|
||||
free_price_name: 'Free',
|
||||
free_price_description: 'Free preview',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user