mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-17 23:44:39 -05:00
Refined upgrade flow
This commit is contained in:
parent
594b951fb6
commit
cdfbd18dbb
3 changed files with 21 additions and 5 deletions
|
@ -18,8 +18,8 @@ const React = require('react');
|
|||
const DEV_MODE_DATA = {
|
||||
showPopup: true,
|
||||
site: Fixtures.site,
|
||||
member: Fixtures.member.paid,
|
||||
page: 'signup'
|
||||
member: Fixtures.member.free,
|
||||
page: 'accountHome'
|
||||
};
|
||||
|
||||
function SentryErrorBoundary({site, children}) {
|
||||
|
|
|
@ -331,13 +331,13 @@ const FrameStyles = `
|
|||
position: relative;
|
||||
overflow-y: scroll;
|
||||
padding: 24px 32px 32px;
|
||||
max-height: calc(100vh - 12vw);
|
||||
max-height: 680px;
|
||||
}
|
||||
|
||||
.gh-portal-content.with-footer {
|
||||
overflow-y: scroll;
|
||||
padding-bottom: 0;
|
||||
max-height: calc(100vh - 12vw - 72px);
|
||||
max-height: calc(680px - 72px);
|
||||
}
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
|
|
|
@ -314,19 +314,23 @@ export const ProductsSectionStyles = ({site}) => {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.gh-portal-upgrade-product.gh-portal-products {
|
||||
margin: 0 -32px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.gh-portal-upgrade-product .gh-portal-products-grid {
|
||||
grid-template-columns: unset;
|
||||
grid-gap: 20px;
|
||||
padding: 32px 0;
|
||||
padding: 32px 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gh-portal-upgrade-product .gh-portal-products-priceswitch {
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.gh-portal-upgrade-product .gh-portal-product-card {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr minmax(60px,auto);
|
||||
|
@ -338,11 +342,13 @@ export const ProductsSectionStyles = ({site}) => {
|
|||
border: 1px solid var(--grey12);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.gh-portal-upgrade-product .gh-portal-product-card-header {
|
||||
grid-row: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 20px auto;
|
||||
}
|
||||
|
||||
.gh-portal-upgrade-product .gh-portal-product-name {
|
||||
margin: 4px 0;
|
||||
padding: 0;
|
||||
|
@ -350,37 +356,46 @@ export const ProductsSectionStyles = ({site}) => {
|
|||
border-bottom: none;
|
||||
min-height: unset;
|
||||
}
|
||||
|
||||
.gh-portal-upgrade-product .gh-portal-product-description {
|
||||
grid-column: 2 / 3;
|
||||
margin-bottom: 0px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.gh-portal-upgrade-product .gh-portal-product-price {
|
||||
position: relative;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gh-portal-upgrade-product .gh-portal-product-price .currency-sign {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.gh-portal-upgrade-product .gh-portal-product-price .amount {
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
|
||||
.gh-portal-upgrade-product .gh-portal-product-price .billing-period {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 24px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.gh-portal-upgrade-product .gh-portal-product-card-footer {
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.gh-portal-upgrade-product .gh-portal-product-alternative-price {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gh-portal-upgrade-product .gh-portal-product-benefits {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gh-portal-upgrade-product .gh-portal-product-benefits.vertical {
|
||||
grid-column: 2;
|
||||
padding: 12px 20px;
|
||||
|
@ -389,6 +404,7 @@ export const ProductsSectionStyles = ({site}) => {
|
|||
grid-row: 2;
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.gh-portal-upgrade-product .gh-portal-product-benefit:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue