From 45147cacb24db6f4abe0007ae1ae3fd582d0833c Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Fri, 11 Jun 2021 16:03:35 +0200 Subject: [PATCH] Multiple products responsive UI --- ghost/portal/src/components/Frame.styles.js | 83 ++++++++++++++----- .../src/components/common/ProductsSection.js | 10 +-- .../portal/src/components/pages/SignupPage.js | 12 ++- 3 files changed, 74 insertions(+), 31 deletions(-) diff --git a/ghost/portal/src/components/Frame.styles.js b/ghost/portal/src/components/Frame.styles.js index 10c8ae638a..da2fb1e313 100644 --- a/ghost/portal/src/components/Frame.styles.js +++ b/ghost/portal/src/components/Frame.styles.js @@ -235,12 +235,35 @@ const FrameStyles = ` } .gh-portal-popup-wrapper.fullscreen { - position: absolute; - background: #fff; - height: 100vh !important; - width: 100% !important; + 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 { @@ -264,24 +287,20 @@ const FrameStyles = ` z-index: 9999; } - .gh-portal-popup-wrapper.fullscreen .gh-portal-popup-container:not(.preview) { + .gh-portal-popup-wrapper.fullscreen .gh-portal-popup-container { position: unset; align-items: center; width: 100% !important; - padding-top: 3vmin; box-shadow: none !important; border-radius: 0px; animation: fadein 0.35s ease-in-out; + padding: 3vmin 0; } - .gh-portal-popup-wrapper.fullscreen .gh-portal-popup-container.preview { - align-items: center; - justify-content: center; - width: 100% !important; - min-height: 100%; - overflow-y: scroll; - padding: 3vmin 0; - border-radius: 0px; + @media (max-width: 480px) { + .gh-portal-popup-wrapper.fullscreen .gh-portal-popup-container.preview { + max-height: 620px; + } } @keyframes popup { @@ -344,6 +363,11 @@ const FrameStyles = ` padding-bottom: 32px; } + .gh-portal-popup-wrapper.fullscreen.signin .gh-portal-powered { + position: absolute; + bottom: 0; + } + .gh-portal-container-wide { width: 440px; } @@ -409,8 +433,17 @@ const FrameStyles = ` z-index: 999; } - .gh-portal-popup-wrapper.fullscreen .gh-portal-closeicon-container { - position: fixed; + @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 { @@ -422,11 +455,6 @@ const FrameStyles = ` transition: all 0.2s ease-in-out; } - .gh-portal-popup-wrapper.fullscreen .gh-portal-closeicon { - width: 24px; - height: 24px; - } - .gh-portal-closeicon:hover { color: var(--grey5); } @@ -693,11 +721,20 @@ const MobileStyles = ` height: unset; } + .gh-portal-popup-wrapper { + overflow-y: unset; + } + .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 - 190px) !important; + } + .gh-portal-powered { position: relative; bottom: unset; @@ -735,6 +772,10 @@ const MobileStyles = ` .gh-portal-popup-wrapper.fullscreen .gh-portal-popup-container { padding: 0; } + + .gh-portal-popup-wrapper.fullscreen .gh-portal-powered { + padding-bottom: 0; + } } @media (max-width: 414px) { diff --git a/ghost/portal/src/components/common/ProductsSection.js b/ghost/portal/src/components/common/ProductsSection.js index 737d70de80..881306a76a 100644 --- a/ghost/portal/src/components/common/ProductsSection.js +++ b/ghost/portal/src/components/common/ProductsSection.js @@ -177,7 +177,7 @@ export const ProductsSectionStyles = ` grid-gap: 12px; align-items: start; min-height: unset; - padding: 20px; + padding: 12px 20px; } .gh-portal-product-card-header { @@ -187,7 +187,7 @@ export const ProductsSectionStyles = ` } .gh-portal-product-name { - margin: 0; + margin: 4px 0; padding: 0; text-align: left; border-bottom: none; @@ -223,12 +223,6 @@ export const ProductsSectionStyles = ` grid-row: 1; } - .gh-portal-popup-container.fullscreen footer.gh-portal-signup-footer, - .gh-portal-popup-container.fullscreen footer.gh-portal-signin-footer { - padding: 0 32px !important; - margin-top: 32px; - } - .gh-portal-product-alternative-price { display: none; } diff --git a/ghost/portal/src/components/pages/SignupPage.js b/ghost/portal/src/components/pages/SignupPage.js index e1922c07c7..09a55251aa 100644 --- a/ghost/portal/src/components/pages/SignupPage.js +++ b/ghost/portal/src/components/pages/SignupPage.js @@ -114,10 +114,18 @@ export const SignupPageStyles = ` .gh-portal-popup-wrapper.fullscreen footer.gh-portal-signup-footer, .gh-portal-popup-wrapper.fullscreen footer.gh-portal-signin-footer { - padding: 0; width: 100%; max-width: 420px; - height: 120px; + height: unset; + padding: 0 !important; + margin: 24px 32px 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 {