From 36135588a6aedf73d09bdfefa1d5fee6361c97c7 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Fri, 11 Sep 2020 18:20:01 +0200
Subject: [PATCH] Added responsive styles to logged out state

no refs.
- changed popup container to cover the whole screen on smaller screen sizes
- updated sizes on signup and signin screen for mobile devices
---
 ghost/portal/src/App.js                       |   2 +-
 ghost/portal/src/components/Frame.styles.js   | 138 +++++++++++++++++-
 ghost/portal/src/components/PopupModal.js     |   2 +-
 .../src/components/common/PlansSection.js     |   8 +-
 4 files changed, 141 insertions(+), 9 deletions(-)

diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js
index 1a76d645d2..e356da0a37 100644
--- 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: 'magiclink'
+    page: 'signup'
 };
 export default class App extends React.Component {
     constructor(props) {
diff --git a/ghost/portal/src/components/Frame.styles.js b/ghost/portal/src/components/Frame.styles.js
index 056764c063..dccc7a7888 100644
--- a/ghost/portal/src/components/Frame.styles.js
+++ b/ghost/portal/src/components/Frame.styles.js
@@ -306,7 +306,7 @@ const GlobalStyles = `
         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);
-        animation: popup 0.25s;
+        animation: popup 0.25s ease-in-out;
     }
 
     .gh-portal-container-singleplan {
@@ -506,6 +506,139 @@ const GlobalStyles = `
     }
 `;
 
+const MobileStyles = `
+@media (max-width: 480px) {
+    .gh-portal-popup-wrapper {
+        height: 100%;
+        padding: 0;
+    }
+    
+    .gh-portal-popup-container {
+        width: 100%;
+        height: 100%;
+        border-radius: 0;
+        overflow-y: scroll;
+        animation: popup-mobile 0.25s ease-in-out;
+    }
+
+    .gh-portal-content {
+        overflow-y: auto !important;
+        max-height: unset !important;
+    }
+}
+
+@media (max-width: 390px) {
+    .gh-portal-plans-container {
+        flex-direction: column;
+    }
+
+    .gh-portal-plan-section {
+        flex-direction: row;
+        min-height: 60px;
+        border-right: none;
+        border-bottom: 1px solid var(--grey10);
+    }
+
+    .gh-portal-plan-section:last-of-type {
+        border-bottom: none;
+    }
+
+    .gh-portal-plan-checkbox {
+        order: 1;
+        margin-left: 12px;
+    }
+
+    .gh-portal-plan-name {
+        position: absolute;
+        left: 40px;
+        top: 12px;
+        padding: 0;
+        margin: 0;
+        text-transform: none;
+        font-size: 1.4rem;
+        letter-spacing: 0.2px;
+    }
+
+    .gh-portal-plan-feature {
+        position: absolute;
+        left: 40px;
+        top: 32px;
+        padding: 0;
+        margin: 0;
+        width: unset;
+        text-align: left;
+        border-top: none;
+        font-weight: 400;
+        letter-spacing: 0.2px;
+    }
+    
+    .gh-portal-plan-pricelabel {
+        right: 20px;
+        top: 12px;
+        position: absolute;
+    }
+
+    .gh-portal-plan-section:first-of-type.checked::before {
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+        border-bottom-left-radius: 0;
+    }
+
+    .gh-portal-plan-section:last-of-type.checked::before {
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+        border-top-right-radius: 0;
+    }
+
+    .gh-portal-input {
+        font-size: 1.4rem;
+        margin-bottom: 16px;
+        height: 36px;
+    }
+
+    .gh-portal-content {
+        padding: 24px;
+    }
+
+    .gh-portal-popup-container footer {
+        padding-right: 24px;
+        padding-bottom: 24px;
+        padding-left: 24px;
+    }
+
+    .gh-portal-signup-header,
+    .gh-portal-signin-header {
+        padding-bottom: 16px;
+    }
+
+    .gh-portal-account-main {
+        margin: -24px;
+        padding: 24px;
+    }
+}
+
+@media (min-width: 768px) and (max-height: 768px) {
+    .gh-portal-signup-header,
+    .gh-portal-signin-header {
+        margin-top: -12px;
+        padding-bottom: 16px;
+    }
+}
+
+@keyframes popup-mobile {
+    0% {
+        transform: translateY(40px);
+        opacity: 0;
+    }
+    75% {
+        opacity: 1.0;
+    }
+    100%{
+        transform: translateY(0);
+    }
+}
+`;
+
 // Append all styles as string which we want to pass to iframe
 const FrameStyle =
     GlobalStyles +
@@ -518,6 +651,7 @@ const FrameStyle =
     AvatarStyles +
     MagicLinkStyles +
     LinkPageStyles +
-    SignupPageStyles;
+    SignupPageStyles +
+    MobileStyles;
 
 export default FrameStyle;
\ No newline at end of file
diff --git a/ghost/portal/src/components/PopupModal.js b/ghost/portal/src/components/PopupModal.js
index 89c5f559df..69e0b69b5b 100644
--- a/ghost/portal/src/components/PopupModal.js
+++ b/ghost/portal/src/components/PopupModal.js
@@ -153,7 +153,7 @@ export default class PopupModal extends React.Component {
         const frameStyle = {
             ...Styles.frame.common
         };
-        if (hasMode(['preview', 'dev'])) {
+        if (hasMode(['preview'])) {
             Styles.modalContainer.zIndex = '3999997';
         }
         return (
diff --git a/ghost/portal/src/components/common/PlansSection.js b/ghost/portal/src/components/common/PlansSection.js
index 48b1c3f53e..01b60dea29 100644
--- a/ghost/portal/src/components/common/PlansSection.js
+++ b/ghost/portal/src/components/common/PlansSection.js
@@ -48,7 +48,7 @@ export const PlanSectionStyles = `
         border-right: none;
     }
 
-    .gh-portal-plan-details {
+    .gh-portal-plan-pricelabel {
         margin-top: 8px;
     }
 
@@ -178,7 +178,7 @@ function Checkbox({name, onPlanSelect, isChecked}) {
 
 function PriceLabel({currency, price}) {
     return (
-        <div className='gh-portal-plan-details'>
+        <div className='gh-portal-plan-pricelabel'>
             <span className='gh-portal-plan-currency'>{currency}</span>
             <span className='gh-portal-plan-price'>{price}</span>
         </div>
@@ -212,9 +212,7 @@ function PlanOptions({plans, selectedPlan, onPlanSelect}) {
             <div className={classes} key={name} onClick={e => onPlanSelect(e, name)}>
                 <Checkbox name={name} isChecked={isChecked} onPlanSelect={onPlanSelect} />
                 <h4 className='gh-portal-plan-name'>{name}</h4>
-                <div>
-                    <PriceLabel name={name} currency={currency} price={price} />
-                </div>
+                <PriceLabel name={name} currency={currency} price={price} />
                 <div className='gh-portal-plan-feature'>
                     {planDetails.feature}
                 </div>