mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-25 02:31:59 -05:00
Update multiple tiers signup (#230)
* Made signin screen normal size for multiple tiers * Powered by updates * Removed innser scrolling of portal modal
This commit is contained in:
Peter Zimon
GitHub
parent
8bf5eebdbe
commit
30703842b5
5 changed files with 83 additions and 45 deletions
|
|
@ -251,7 +251,8 @@ const FrameStyles = `
|
|||
text-rendering: optimizeLegibility;
|
||||
background: var(--white);
|
||||
width: 420px;
|
||||
margin: 0 auto;
|
||||
margin: 0 auto 40px;
|
||||
transform: translateY(20px);
|
||||
border-radius: 5px;
|
||||
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);
|
||||
animation: popup 0.25s ease-in-out;
|
||||
|
|
@ -260,14 +261,20 @@ const FrameStyles = `
|
|||
|
||||
@keyframes popup {
|
||||
0% {
|
||||
transform: scale(0.9) translateY(20px);
|
||||
transform: scale(0.9) translateY(0px);
|
||||
opacity: 0;
|
||||
}
|
||||
75% {
|
||||
opacity: 1.0;
|
||||
}
|
||||
100%{
|
||||
transform: scale(1) translateY(0);
|
||||
transform: scale(1) translateY(20px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 670px) {
|
||||
.gh-portal-popup-container {
|
||||
transform-origin: top;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -279,13 +286,25 @@ const FrameStyles = `
|
|||
|
||||
.gh-portal-powered a {
|
||||
border: none;
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 0;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
padding: 6px 8px 6px 7px;
|
||||
color: #303336;
|
||||
font-size: 1.25rem;
|
||||
letter-spacing: -0.2px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: color 0.5s ease-in-out;
|
||||
width: 146px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.gh-portal-powered img {
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.08);
|
||||
.gh-portal-powered a:hover {
|
||||
color: #15171A;
|
||||
}
|
||||
|
||||
@keyframes powered-fade-in {
|
||||
|
|
@ -334,13 +353,11 @@ const FrameStyles = `
|
|||
position: relative;
|
||||
overflow-y: scroll;
|
||||
padding: 24px 32px 32px;
|
||||
max-height: calc(100vh - 20vmin);
|
||||
}
|
||||
|
||||
.gh-portal-content.with-footer {
|
||||
overflow-y: scroll;
|
||||
padding-bottom: 0;
|
||||
max-height: calc(100vh - 20vmin - 132px);
|
||||
}
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
|
|
@ -635,6 +652,7 @@ const MobileStyles = `
|
|||
overflow: unset;
|
||||
animation: popup-mobile 0.25s ease-in-out;
|
||||
box-shadow: none !important;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.account-home,
|
||||
|
|
@ -665,8 +683,8 @@ const MobileStyles = `
|
|||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.gh-portal-popup-container.preview .gh-portal-powered {
|
||||
display: none;
|
||||
.gh-portal-popup-wrapper.preview .gh-portal-powered a {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.account-home .gh-portal-powered {
|
||||
|
|
@ -794,7 +812,7 @@ const MobileStyles = `
|
|||
|
||||
@media (min-width: 480px) and (max-height: 880px) {
|
||||
.gh-portal-popup-wrapper {
|
||||
padding: 4vmin 0;
|
||||
padding: 4vmin 0 72px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -814,15 +832,26 @@ const MultipleProductsGlobalStyles = `
|
|||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Multiple product signup/signin-only modifications! */
|
||||
.gh-portal-popup-wrapper.multiple-products {
|
||||
margin: 32px;
|
||||
height: calc(100vh - 64px) !important;
|
||||
overflow-y: scroll;
|
||||
overflow-x: clip;
|
||||
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;
|
||||
height: calc(100vh - 64px);
|
||||
max-width: calc(100vw - 64px);
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.multiple-products.signup {
|
||||
overflow-y: scroll;
|
||||
overflow-x: clip;
|
||||
margin: 32px auto;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.multiple-products.signin {
|
||||
margin: 10vmin auto;
|
||||
max-width: 480px;
|
||||
height: unset;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.multiple-products.preview {
|
||||
|
|
@ -830,19 +859,23 @@ const MultipleProductsGlobalStyles = `
|
|||
}
|
||||
|
||||
.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;
|
||||
padding: 1vmin 0;
|
||||
transform: translateY(0px);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.multiple-products.signup .gh-portal-popup-container {
|
||||
position: unset;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.multiple-products .gh-portal-powered {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
bottom: unset;
|
||||
left: unset;
|
||||
width: 100%;
|
||||
|
|
@ -857,16 +890,20 @@ const MultipleProductsGlobalStyles = `
|
|||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.gh-portal-popup-wrapper.multiple-products {
|
||||
margin: 20px;
|
||||
height: calc(100vh - 40px) !important;
|
||||
.gh-portal-popup-wrapper.multiple-products.signup:not(.preview) {
|
||||
margin: 20px !important;
|
||||
height: 100%;
|
||||
max-height: calc(100vh - 40px) !important;
|
||||
max-width: calc(100vw - 40px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.gh-portal-popup-wrapper.multiple-products {
|
||||
margin: 0;
|
||||
height: 100vh !important;
|
||||
margin: 0 !important;
|
||||
max-width: unset !important;
|
||||
max-height: 100% !important;
|
||||
height: 100% !important;
|
||||
border-radius: 0px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import {getFrameStyles} from './Frame.styles';
|
|||
import Pages, {getActivePage} from '../pages';
|
||||
import PopupNotification from './common/PopupNotification';
|
||||
import {hasMultipleProducts, isCookiesDisabled, getSitePrices, isInviteOnlySite} from '../utils/helpers';
|
||||
import {ReactComponent as GhostLogo} from '../images/ghost-logo-small.svg';
|
||||
|
||||
const React = require('react');
|
||||
|
||||
|
|
@ -200,11 +201,12 @@ class PopupContent extends React.Component {
|
|||
{this.renderActivePage()}
|
||||
</div>
|
||||
</div>
|
||||
<div className={'gh-portal-powered outside ' + (hasMode(['preview']) ? ' hidden' : '') + pageClass}>
|
||||
<div className={'gh-portal-powered outside ' + (hasMode(['preview']) ? 'hidden ' : '') + pageClass}>
|
||||
<a href='https://ghost.org' target='_blank' rel='noopener noreferrer' onClick={() => {
|
||||
window.open('https://ghost.org', '_blank');
|
||||
}}>
|
||||
<img src="https://static.ghost.org/v4.0.0/images/powered.png" border="0" width="142" height="30" alt="Publish with Ghost" />
|
||||
<GhostLogo />
|
||||
Powered by Ghost
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@ export const AccountHomePageStyles = `
|
|||
.gh-portal-account-main {
|
||||
background: var(--grey13);
|
||||
padding: 32px 32px 0;
|
||||
max-height: calc(100vh - 12vw - 104px);
|
||||
}
|
||||
|
||||
.gh-portal-account-header {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import InputForm from '../common/InputForm';
|
|||
import {ValidateInputForm} from '../../utils/form';
|
||||
import {getSiteProducts, getSitePrices, hasMultipleProducts, hasOnlyFreePlan, isInviteOnlySite, getAvailableProducts, hasMultipleProductsFeature, freeHasBenefitsOrDescription} from '../../utils/helpers';
|
||||
import {ReactComponent as InvitationIcon} from '../../images/icons/invitation.svg';
|
||||
import {ReactComponent as GhostLogo} from '../../images/ghost-logo-small.svg';
|
||||
|
||||
const React = require('react');
|
||||
|
||||
|
|
@ -138,9 +139,9 @@ export const SignupPageStyles = `
|
|||
|
||||
.gh-portal-popup-wrapper.multiple-products .gh-portal-powered {
|
||||
display: flex;
|
||||
margin-top: 24px;
|
||||
margin-top: 48px;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.gh-portal-invite-only-notification {
|
||||
|
|
@ -166,33 +167,32 @@ export const SignupPageStyles = `
|
|||
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;
|
||||
padding: 0 32px !important;
|
||||
margin: 24px 32px;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.multiple-products footer .gh-portal-btn {
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.multiple-products footer.gh-portal-signin-footer {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.gh-portal-powered.multiple-products {
|
||||
.gh-portal-powered.multiple-products.signup {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.gh-portal-popup-wrapper.multiple-products .gh-portal-powered {
|
||||
margin-top: 0;
|
||||
margin-bottom: -32px;
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.multiple-products footer.gh-portal-signup-footer,
|
||||
.gh-portal-popup-wrapper.multiple-products footer.gh-portal-signin-footer {
|
||||
max-width: unset;
|
||||
|
|
@ -222,10 +222,6 @@ export const SignupPageStyles = `
|
|||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.gh-portal-popup-wrapper.signup {
|
||||
padding-bottom: 20vmin;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
|
|
@ -620,7 +616,8 @@ class SignupPage extends React.Component {
|
|||
<a href='https://ghost.org' target='_blank' rel='noopener noreferrer' onClick={() => {
|
||||
window.open('https://ghost.org', '_blank');
|
||||
}}>
|
||||
<img src="https://static.ghost.org/v4.0.0/images/powered.png" border="0" width="142" height="30" alt="Publish with Ghost" />
|
||||
<GhostLogo />
|
||||
<span>Powered by Ghost</span>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
3
ghost/portal/src/images/ghost-logo-small.svg
Normal file
3
ghost/portal/src/images/ghost-logo-small.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM11.8326 2.33879C6.37785 2.95189 3.95901 5.20797 3.41126 9.74699C3.34896 10.2632 3.22642 10.7805 3.10443 11.2954C2.93277 12.02 2.76221 12.74 2.76221 13.4458C2.76221 17.9885 6.5856 21.556 11.1283 21.556C12.8959 21.556 14.4433 20.8144 15.8756 20.048C19.0536 18.3478 22.0328 16.2597 22.0328 12.5411C22.0328 9.91512 20.1051 7.56932 18.466 5.5747C18.3834 5.47416 18.3015 5.37451 18.2206 5.27577C17.3866 4.25742 14.4333 2.04643 11.8326 2.33879Z" fill="#15171A"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 722 B |
Loading…
Add table
Reference in a new issue