Restructure containers for responsive sizes

no refs. Prepared the container system to responsive sizes. - added inner scrollable container for all content - made footer sticky - set max height for each screen
2025-02-17 23:44:39 -05:00 · 2020-09-11 16:50:16 +02:00 · 2020-09-11 16:50:16 +02:00 · 740192f077
commit 740192f077
parent 9de17e2e2d
14 changed files with 150 additions and 75 deletions
--- a/ghost/portal/src/App.js
+++ b/ghost/portal/src/App.js
@ -13,7 +13,7 @@ const DEV_MODE_DATA = {
    showPopup: true,
    site: Fixtures.site,
    member: Fixtures.member.paid,
-    page: 'signup'
+    page: 'magiclink'
 };
 export default class App extends React.Component {
    constructor(props) {
--- a/ghost/portal/src/components/Frame.js
+++ b/ghost/portal/src/components/Frame.js
@ -16,19 +16,8 @@ export default class Frame extends Component {

    setupFrameBaseStyle() {
        this.iframeHtml = this.node.contentDocument.documentElement;
-        this.iframeHtml.style.fontSize = '62.5%';
-        this.iframeHtml.style.height = '100%';
-
        this.iframeHead = this.node.contentDocument.head;
        this.iframeRoot = this.node.contentDocument.body;
-        this.iframeRoot.style.margin = '0px';
-        this.iframeRoot.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif';
-        this.iframeRoot.style.fontSize = '1.6rem';
-        this.iframeRoot.style.height = '100%';
-        this.iframeRoot.style.lineHeight = '1.6em';
-        this.iframeRoot.style.fontWeight = '400';
-        this.iframeRoot.style.fontStyle = 'normal';
-        this.iframeRoot.style.color = '#333';
        this.forceUpdate();
    }

--- a/ghost/portal/src/components/Frame.styles.js
+++ b/ghost/portal/src/components/Frame.styles.js
@ -41,6 +41,27 @@ const GlobalStyles = `

    /* Globals
    /* ----------------------------------------------------- */
+    html {
+        font-size: 62.5%;
+        height: 100%;
+    }
+
+    body {
+        margin: 0px;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        font-size: 1.6rem;
+        height: 100%;
+        line-height: 1.6em;
+        font-weight: 400;
+        font-style: normal;
+        color: var(--grey4);
+        box-sizing: border-box;
+    }
+
+    *, ::after, ::before {
+        box-sizing: border-box;
+    }
+
    h1, h2, h3, h4, h5, h6, p {
        line-height: 1.15em;
        padding: 0;
@ -80,11 +101,13 @@ const GlobalStyles = `
        cursor: pointer;
    }

+    svg {
+        box-sizing: content-box;
+    }
+
    .gh-portal-main-title {
        text-align: center;
        color: var(--grey1);
-        margin: 24px 0 12px;
-        padding: 0 12px;
        line-height: 1.35em;
    }

@ -261,12 +284,15 @@ const GlobalStyles = `
        100%{ opacity: 1.0; }
    }

+    .gh-portal-popup-wrapper {
+        padding: 6vw 0;
+    }
+
    .gh-portal-popup-container {
        outline: none;
        position: relative;
        display: flex;
        box-sizing: border-box;
-        top: 100px;
        flex-direction: column;
        justify-content: flex-start;
        overflow: hidden;
@ -276,7 +302,7 @@ const GlobalStyles = `
        text-rendering: optimizeLegibility;
        background: var(--white);
        width: 440px;
-        padding: 32px;
+        /*max-height: calc(100vh - 12vw);*/
        margin: 0 auto;
        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);
@ -299,6 +325,26 @@ const GlobalStyles = `
        animation: none;
    }

+    /* Sets the main content area of the popup scrollable. 
+    /* 12vw is the sum horizontal padding of the popup container 
+    */
+    .gh-portal-content {
+        overflow-y: scroll;
+        padding: 32px;
+        max-height: calc(100vh - 12vw);
+    }
+
+    .gh-portal-content.with-footer {
+        overflow-y: scroll;
+        padding-bottom: 0;
+        max-height: calc(100vh - 12vw - 72px);
+    }
+    
+    .gh-portal-popup-container footer {
+        padding: 0 32px 32px;
+        height: 72px;
+    }
+
    @keyframes popup {
        0% {
            transform: scale(0.9) translateY(20px);
--- a/ghost/portal/src/components/PopupModal.js
+++ b/ghost/portal/src/components/PopupModal.js
@ -89,9 +89,11 @@ class PopupContent extends React.Component {
            ...Styles.page[page]
        };
        return (
-            <div className={(hasMode(['preview', 'dev']) ? 'gh-portal-popup-container preview' : 'gh-portal-popup-container') + (portalPlans.length <= 1 ? ' gh-portal-container-singleplan' : '')} style={pageStyle} ref={node => (this.node = node)} tabIndex="-1">
-                {this.renderPopupClose()}
-                {this.renderActivePage()}
+            <div className='gh-portal-popup-wrapper'>
+                <div className={(hasMode(['preview', 'dev']) ? 'gh-portal-popup-container preview' : 'gh-portal-popup-container') + (portalPlans.length <= 1 ? ' gh-portal-container-singleplan' : '')} style={pageStyle} ref={node => (this.node = node)} tabIndex="-1">
+                    {this.renderPopupClose()}
+                    {this.renderActivePage()}
+                </div>
            </div>
        );
    }
--- a/ghost/portal/src/components/TriggerButton.styles.js
+++ b/ghost/portal/src/components/TriggerButton.styles.js
@ -1,6 +1,30 @@
 import {AvatarStyles} from './common/MemberGravatar';

 const GlobalStyle = `
+    html {
+        font-size: 62.5%;
+        height: 100%;
+    }
+
+    body {
+        margin: 0px;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        font-size: 1.6rem;
+        height: 100%;
+        line-height: 1.6em;
+        font-weight: 400;
+        font-style: normal;
+        color: var(--grey4);
+    }
+
+    *, ::after, ::before {
+        box-sizing: border-box;
+    }
+
+    svg {
+        box-sizing: content-box;
+    }
+    
    .gh-portal-triggerbtn-wrapper {
        cursor: pointer;
        display: flex;
--- a/ghost/portal/src/components/common/PlansSection.js
+++ b/ghost/portal/src/components/common/PlansSection.js
@ -136,9 +136,9 @@ export const PlanSectionStyles = `

    .gh-portal-plan-checkbox .checkmark:after {
        left: 6.5px;
-        top: 3px;
-        width: 3px;
-        height: 9px;
+        top: 2.5px;
+        width: 5px;
+        height: 11px;
        border: solid var(--white);
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
--- a/ghost/portal/src/components/common/Switch.js
+++ b/ghost/portal/src/components/common/Switch.js
@ -49,8 +49,8 @@ export const SwitchStyles = `
        content: "";
        top: 2px !important;
        left: 2px !important;
-        height: 18px !important;
-        width: 18px !important;
+        height: 16px !important;
+        width: 16px !important;
        background-color: white;
        transition: .3s;
        box-shadow: 0 0 1px rgba(0,0,0,.3), 0 4px 6px rgba(0,0,0,.1);
--- a/ghost/portal/src/components/pages/AccountHomePage.js
+++ b/ghost/portal/src/components/pages/AccountHomePage.js
@ -9,14 +9,13 @@ import {getDateString} from '../../utils/date-time';
 const React = require('react');

 export const AccountHomePageStyles = `
-    .gh-portal-account-wrapper {
-
+    .gh-portal-content.account-home {
+        max-height: calc(100vh - 12vw - 104px);
    }

    .gh-portal-account-main {
        background: var(--grey13);
-        border-bottom: 1px solid #eaeaea;
-        margin: -32px -32px 0;
+        margin: -32px;
        padding: 32px;
    }

@ -31,9 +30,11 @@ export const AccountHomePageStyles = `
        margin: 6px 0 8px !important;
    }

-    .gh-portal-account-footer {
+    footer.gh-portal-account-footer {
        display: flex;
-        margin-top: 32px;
+        padding: 32px;
+        height: 104px;
+        border-top: 1px solid #eaeaea;
    }

    .gh-portal-account-footer.paid {
@ -403,15 +404,17 @@ export default class AccountHomePage extends React.Component {
        }
        return (
            <div className='gh-portal-account-wrapper'>
-                <LogoutButton handleSignout={e => this.handleSignout(e)} />
-                <AccountMain
-                    {...this.context}
-                    openSubscribe={e => this.openSubscribe(e)}
-                    openEditProfile={e => this.openEditProfile(e)}
-                    onToggleSubscription={(e, subscribed) => this.onToggleSubscription(e, subscribed)}
-                    openUpdatePlan={(e, subscribed) => this.openUpdatePlan(e, subscribed)}
-                    onEditBilling={(e, subscribed) => this.onEditBilling(e, subscribed)}
-                />
+                <div className='gh-portal-content account-home'>
+                    <LogoutButton handleSignout={e => this.handleSignout(e)} />
+                    <AccountMain
+                        {...this.context}
+                        openSubscribe={e => this.openSubscribe(e)}
+                        openEditProfile={e => this.openEditProfile(e)}
+                        onToggleSubscription={(e, subscribed) => this.onToggleSubscription(e, subscribed)}
+                        openUpdatePlan={(e, subscribed) => this.openUpdatePlan(e, subscribed)}
+                        onEditBilling={(e, subscribed) => this.onEditBilling(e, subscribed)}
+                    />
+                </div>
                <AccountFooter onClose={() => this.context.onAction('closePopup')} supportAddress={supportAddress} />
            </div>
        );
--- a/ghost/portal/src/components/pages/AccountPlanPage.js
+++ b/ghost/portal/src/components/pages/AccountPlanPage.js
@ -206,7 +206,6 @@ export default class AccountPlanPage extends React.Component {
                    {this.renderError()}
                </div>
                <CancelContinueSubscription {...this.context} />
-                {this.renderFooter()}
            </section>
        );
    }
@ -304,8 +303,11 @@ export default class AccountPlanPage extends React.Component {
        }
        return (
            <div>
-                {this.renderHeader()}
-                {this.renderPlanChooser()}
+                <div className='gh-portal-content with-footer'>
+                    {this.renderHeader()}
+                    {this.renderPlanChooser()}
+                </div>
+                {this.renderFooter()}
            </div>
        );
    }
--- a/ghost/portal/src/components/pages/AccountProfilePage.js
+++ b/ghost/portal/src/components/pages/AccountProfilePage.js
@ -195,9 +195,11 @@ export default class AccountProfilePage extends React.Component {
        }
        return (
            <div>
-                {this.renderHeader()}
-                <div className='gh-portal-section'>
-                    {this.renderProfileData()}
+                <div className='gh-portal-content with-footer'>
+                    {this.renderHeader()}
+                    <div className='gh-portal-section'>
+                        {this.renderProfileData()}
+                    </div>
                </div>
                {this.renderAccountFooter()}
            </div>
--- a/ghost/portal/src/components/pages/MagicLinkPage.js
+++ b/ghost/portal/src/components/pages/MagicLinkPage.js
@ -68,7 +68,7 @@ export default class MagicLinkPage extends React.Component {

    render() {
        return (
-            <div>
+            <div className='gh-portal-content'>
                {this.renderFormHeader()}
                {this.renderCloseButton()}
            </div>
--- a/ghost/portal/src/components/pages/SigninPage.js
+++ b/ghost/portal/src/components/pages/SigninPage.js
@ -89,10 +89,10 @@ export default class SigninPage extends React.Component {
    renderSignupMessage() {
        const brandColor = this.context.brandColor;
        return (
-            <footer className='gh-portal-signup-footer'>
+            <div className='gh-portal-signup-message'>
                <div>Don't have an account?</div>
                <button className='gh-portal-btn gh-portal-btn-link' style={{color: brandColor}} onClick={() => this.context.onAction('switchPage', {page: 'signup'})}>Sign up</button>
-            </footer>
+            </div>
        );
    }

@ -106,10 +106,6 @@ export default class SigninPage extends React.Component {
                        onBlur={(e, field) => this.handleInputBlur(e, field)}
                    />
                </div>
-                <div>
-                    {this.renderSubmitButton()}
-                    {this.renderSignupMessage()}
-                </div>
            </section>
        );
    }
@ -142,8 +138,14 @@ export default class SigninPage extends React.Component {
    render() {
        return (
            <div>
-                {this.renderFormHeader()}
-                {this.renderForm()}
+                <div className='gh-portal-content signin'>
+                    {this.renderFormHeader()}
+                    {this.renderForm()}
+                </div>
+                <footer className='gh-portal-signin-footer'>
+                    {this.renderSubmitButton()}
+                    {this.renderSignupMessage()}
+                </footer>
            </div>
        );
    }
--- a/ghost/portal/src/components/pages/SignupPage.js
+++ b/ghost/portal/src/components/pages/SignupPage.js
@ -8,6 +8,17 @@ import CalculateDiscount from '../../utils/discount';
 const React = require('react');

 export const SignupPageStyles = `
+    footer.gh-portal-signup-footer,
+    footer.gh-portal-signin-footer {
+        height: 112px;
+    }
+
+    .gh-portal-content.signup,
+    .gh-portal-content.signin {
+        max-height: calc(100vh - 12vw - 112px);
+        padding-bottom: 0;
+    }
+
    .gh-portal-signup-logo {
        position: relative;
        display: block;
@ -19,20 +30,12 @@ export const SignupPageStyles = `
        margin: 12px 0 10px;
    }

-    .gh-portal-signup-header {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding: 0 32px 32px;
-        margin: 0 -32px -8px;
-    }
-
+    .gh-portal-signup-header,
    .gh-portal-signin-header {
        display: flex;
        flex-direction: column;
        align-items: center;
-        padding: 0 32px 32px;
-        margin: 0 -32px -8px;
+        padding: 0 32px 24px;
    }

    .gh-portal-signup-header.nodivider {
@ -40,7 +43,7 @@ export const SignupPageStyles = `
        margin-bottom: 0;
    }

-    .gh-portal-signup-footer {
+    .gh-portal-signup-message {
        display: flex;
        justify-content: center;
        color: var(--grey4);
@ -49,7 +52,7 @@ export const SignupPageStyles = `
        margin-top: 8px;
    }

-    .gh-portal-signup-footer button {
+    .gh-portal-signup-message button {
        font-size: 1.3rem;
        font-weight: 400;
        margin-left: 4px;
@ -295,7 +298,7 @@ class SignupPage extends React.Component {
    renderLoginMessage() {
        const {brandColor, onAction} = this.context;
        return (
-            <footer className='gh-portal-signup-footer'>
+            <div className='gh-portal-signup-message'>
                <div>Already a member?</div>
                <button
                    className='gh-portal-btn gh-portal-btn-link'
@ -304,7 +307,7 @@ class SignupPage extends React.Component {
                >
                    Log in
                </button>
-            </footer>
+            </div>
        );
    }

@ -319,10 +322,6 @@ class SignupPage extends React.Component {
                    />
                    {this.renderPlans()}
                </div>
-                <div>
-                    {this.renderSubmitButton()}
-                    {this.renderLoginMessage()}
-                </div>
            </section>
        );
    }
@ -357,8 +356,14 @@ class SignupPage extends React.Component {
    render() {
        return (
            <div>
-                {this.renderFormHeader()}
-                {this.renderForm()}
+                <div className='gh-portal-content signup'>
+                    {this.renderFormHeader()}
+                    {this.renderForm()}
+                </div>
+                <footer className='gh-portal-signup-footer'>
+                    {this.renderSubmitButton()}
+                    {this.renderLoginMessage()}
+                </footer>
            </div>
        );
    }
--- a/ghost/portal/src/utils/fixtures.js
+++ b/ghost/portal/src/utils/fixtures.js
@ -1,5 +1,5 @@
 export const site = {
-    title: 'Check out my paying site, it has a long title',
+    title: 'A Ghost site',
    description: 'Thoughts, stories and ideas.',
    logo: 'https://pbs.twimg.com/profile_images/1111773508231667713/mf2N0uqc_400x400.png',
    icon: 'https://pbs.twimg.com/profile_images/1111773508231667713/mf2N0uqc_400x400.png',