mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-25 20:03:12 +03:00
Refined mobile styles
This commit is contained in:
Peter Zimon
parent
fcf3dfce6a
commit
594b951fb6
@ -234,38 +234,6 @@ const FrameStyles = `
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.fullscreen {
|
||||
margin: 32px;
|
||||
height: calc(100vh - 64px) !important;
|
||||
overflow-y: scroll;
|
||||
background: #fff;
|
||||
box-shadow: 0 3.8px 2.2px rgba(0, 0, 0, 0.028), 0 9.2px 5.3px rgba(0, 0, 0, 0.04), 0 17.3px 10px rgba(0, 0, 0, 0.05), 0 30.8px 17.9px rgba(0, 0, 0, 0.06), 0 57.7px 33.4px rgba(0, 0, 0, 0.072), 0 138px 80px rgba(0, 0, 0, 0.1);
|
||||
padding: 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.gh-portal-popup-wrapper.fullscreen {
|
||||
margin: 20px;
|
||||
height: calc(100vh - 40px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.gh-portal-popup-wrapper.fullscreen {
|
||||
margin: 0;
|
||||
height: 100vh !important;
|
||||
border-radius: 0px;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.gh-portal-popup-wrapper.fullscreen.preview {
|
||||
height: calc(100vh - 150px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.gh-portal-popup-container {
|
||||
outline: none;
|
||||
position: relative;
|
||||
@ -287,22 +255,6 @@ const FrameStyles = `
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.fullscreen .gh-portal-popup-container {
|
||||
position: unset;
|
||||
align-items: center;
|
||||
width: 100% !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0px;
|
||||
animation: fadein 0.35s ease-in-out;
|
||||
padding: 3vmin 0;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.gh-portal-popup-wrapper.fullscreen .gh-portal-popup-container.preview {
|
||||
max-height: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes popup {
|
||||
0% {
|
||||
transform: scale(0.9) translateY(20px);
|
||||
@ -352,22 +304,6 @@ const FrameStyles = `
|
||||
margin: 0 6px 0 0;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.fullscreen .gh-portal-powered {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
bottom: unset;
|
||||
left: unset;
|
||||
width: 100%;
|
||||
z-index: 10000;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.fullscreen.signin .gh-portal-powered {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.gh-portal-container-wide {
|
||||
width: 440px;
|
||||
}
|
||||
@ -415,12 +351,6 @@ const FrameStyles = `
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.fullscreen .gh-portal-content {
|
||||
position: unset;
|
||||
overflow-y: visible;
|
||||
max-height: unset !important;
|
||||
}
|
||||
|
||||
.gh-portal-popup-container footer {
|
||||
padding: 0 32px 32px;
|
||||
height: 72px;
|
||||
@ -433,19 +363,6 @@ const FrameStyles = `
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.gh-portal-popup-wrapper.fullscreen .gh-portal-closeicon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.fullscreen .gh-portal-closeicon-container {
|
||||
top: 48px;
|
||||
right: 48px;
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
.gh-portal-closeicon {
|
||||
color: var(--grey9);
|
||||
cursor: pointer;
|
||||
@ -700,6 +617,7 @@ const MobileStyles = `
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--white);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.gh-portal-popup-container {
|
||||
@ -721,20 +639,12 @@ const MobileStyles = `
|
||||
height: unset;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper {
|
||||
overflow-y: unset;
|
||||
}
|
||||
|
||||
.gh-portal-content {
|
||||
.gh-portal-popup-container:not(.multiple-products) .gh-portal-content {
|
||||
position: relative !important;
|
||||
overflow-y: auto !important;
|
||||
max-height: unset !important;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.fullscreen:not(.preview) .gh-portal-content {
|
||||
max-height: calc(100vh - 180px) !important;
|
||||
}
|
||||
|
||||
.gh-portal-powered {
|
||||
position: relative;
|
||||
bottom: unset;
|
||||
@ -768,16 +678,6 @@ const MobileStyles = `
|
||||
.gh-portal-popup-wrapper.account-home .gh-portal-powered a {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.fullscreen .gh-portal-popup-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.fullscreen .gh-portal-powered {
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
margin-top: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 414px) {
|
||||
@ -896,6 +796,78 @@ const MobileStyles = `
|
||||
}
|
||||
`;
|
||||
|
||||
const MultipleProductsGlobalStyles = `
|
||||
.gh-portal-popup-wrapper.multiple-products .gh-portal-input-section {
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.multiple-products {
|
||||
margin: 32px;
|
||||
height: calc(100vh - 64px) !important;
|
||||
overflow-y: scroll;
|
||||
background: #fff;
|
||||
box-shadow: 0 3.8px 2.2px rgba(0, 0, 0, 0.028), 0 9.2px 5.3px rgba(0, 0, 0, 0.04), 0 17.3px 10px rgba(0, 0, 0, 0.05), 0 30.8px 17.9px rgba(0, 0, 0, 0.06), 0 57.7px 33.4px rgba(0, 0, 0, 0.072), 0 138px 80px rgba(0, 0, 0, 0.1);
|
||||
padding: 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.multiple-products.preview {
|
||||
height: calc(100vh - 150px) !important;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.multiple-products .gh-portal-popup-container {
|
||||
position: unset;
|
||||
align-items: center;
|
||||
width: 100% !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0px;
|
||||
animation: fadein 0.35s ease-in-out;
|
||||
padding: 3vmin 0;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.multiple-products .gh-portal-powered {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
bottom: unset;
|
||||
left: unset;
|
||||
width: 100%;
|
||||
z-index: 10000;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.multiple-products .gh-portal-content {
|
||||
position: unset;
|
||||
overflow-y: visible;
|
||||
max-height: unset !important;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.gh-portal-popup-wrapper.multiple-products {
|
||||
margin: 20px;
|
||||
height: calc(100vh - 40px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.gh-portal-popup-wrapper.multiple-products {
|
||||
margin: 0;
|
||||
height: 100vh !important;
|
||||
border-radius: 0px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.multiple-products.preview {
|
||||
height: unset !important;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.multiple-products:not(.dev) .gh-portal-popup-container.preview {
|
||||
max-height: 640px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export function getFrameStyles({site}) {
|
||||
const FrameStyle =
|
||||
GlobalStyles +
|
||||
@ -913,6 +885,7 @@ export function getFrameStyles({site}) {
|
||||
LinkPageStyles +
|
||||
SignupPageStyles +
|
||||
PopupNotificationStyles +
|
||||
MobileStyles;
|
||||
MobileStyles +
|
||||
MultipleProductsGlobalStyles;
|
||||
return FrameStyle;
|
||||
}
|
||||
|
||||
@ -167,7 +167,7 @@ class PopupContent extends React.Component {
|
||||
}
|
||||
|
||||
if (hasMultipleProducts({site}) && (page === 'signup' || page === 'signin')) {
|
||||
pageClass += ' fullscreen';
|
||||
pageClass += ' multiple-products';
|
||||
}
|
||||
|
||||
if (hasMode(['preview'])) {
|
||||
|
||||
@ -228,7 +228,7 @@ export const ProductsSectionStyles = ({site}) => {
|
||||
.gh-portal-products-grid {
|
||||
grid-template-columns: unset;
|
||||
grid-gap: 20px;
|
||||
padding: 32px 0;
|
||||
padding: 32px 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@ -35,10 +35,6 @@ export const SignupPageStyles = `
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.fullscreen .gh-portal-signin-header {
|
||||
padding-top: 18vmin;
|
||||
}
|
||||
|
||||
.gh-portal-signup-logo + .gh-portal-main-title {
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
@ -56,10 +52,6 @@ export const SignupPageStyles = `
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.signin.fullscreen .gh-portal-popup-container {
|
||||
padding-bottom: 3vmin;
|
||||
}
|
||||
|
||||
.gh-portal-signup-message {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -92,16 +84,6 @@ export const SignupPageStyles = `
|
||||
background-attachment: local,local,scroll,scroll;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.fullscreen .gh-portal-content.signup,
|
||||
.gh-portal-popup-wrapper.fullscreen .gh-portal-content.signin {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.fullscreen .gh-portal-input-section {
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.gh-portal-content.signup.invite-only {
|
||||
background: none;
|
||||
}
|
||||
@ -112,26 +94,6 @@ export const SignupPageStyles = `
|
||||
height: 132px;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.fullscreen footer.gh-portal-signup-footer,
|
||||
.gh-portal-popup-wrapper.fullscreen footer.gh-portal-signin-footer {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
height: unset;
|
||||
padding: 0 !important;
|
||||
margin: 24px 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.gh-portal-popup-wrapper.fullscreen footer.gh-portal-signup-footer,
|
||||
.gh-portal-popup-wrapper.fullscreen footer.gh-portal-signin-footer {
|
||||
padding: 0 24px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.fullscreen footer.gh-portal-signin-footer {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.gh-portal-content.signup,
|
||||
.gh-portal-content.signin {
|
||||
max-height: calc(100vh - 12vw - 140px);
|
||||
@ -189,6 +151,60 @@ export const SignupPageStyles = `
|
||||
height: 44px;
|
||||
margin: 12px 0 2px;
|
||||
}
|
||||
|
||||
|
||||
/* Multiple products signup */
|
||||
|
||||
.gh-portal-popup-wrapper.signup.multiple-products .gh-portal-content,
|
||||
.gh-portal-popup-wrapper.signin.multiple-products .gh-portal-content {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.multiple-products .gh-portal-signin-header {
|
||||
padding-top: 18vmin;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.signin.multiple-products .gh-portal-popup-container {
|
||||
padding-bottom: 3vmin;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.multiple-products footer.gh-portal-signup-footer,
|
||||
.gh-portal-popup-wrapper.multiple-products footer.gh-portal-signin-footer {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
height: unset;
|
||||
padding: 0 !important;
|
||||
margin: 24px 32px;
|
||||
}
|
||||
|
||||
|
||||
.gh-portal-popup-wrapper.multiple-products footer.gh-portal-signin-footer {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.multiple-products.signin .gh-portal-powered {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.gh-portal-popup-wrapper.multiple-products footer.gh-portal-signup-footer,
|
||||
.gh-portal-popup-wrapper.multiple-products footer.gh-portal-signin-footer {
|
||||
padding: 0 24px !important;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.multiple-products.preview footer.gh-portal-signup-footer,
|
||||
.gh-portal-popup-wrapper.multiple-products.preview footer.gh-portal-signin-footer {
|
||||
padding-bottom: 32px !important;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.signup.multiple-products.preview .gh-portal-content,
|
||||
.gh-portal-popup-wrapper.signin.multiple-products.preview .gh-portal-content {
|
||||
overflow: unset;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
class SignupPage extends React.Component {
|
||||
|
||||
@ -246,6 +246,7 @@ export const site = {
|
||||
currency: 'USD'
|
||||
},
|
||||
portal_products: ['product_1', 'product_2', 'product_3'],
|
||||
// products: [products[0]],
|
||||
products: products,
|
||||
prices,
|
||||
allow_self_signup: true,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user