From 1ccb2f08e7afe60723f982a134c35c93bfdd1956 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Fri, 13 Jan 2023 15:11:12 +0100
Subject: [PATCH] Improved mobile popup for feedbacks

no refs.

Post feedback popups were not optimised for mobile usage at all. All the content was on top of the window which is really hard to reach using a single hand/thumb and it just looked like a scaled down version of a desktop modal.
---
 ghost/portal/src/components/PopupModal.js     |  5 +-
 .../src/components/pages/FeedbackPage.js      | 60 +++++++++++++++++++
 2 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/ghost/portal/src/components/PopupModal.js b/ghost/portal/src/components/PopupModal.js
index c628b3be20..1c47241020 100644
--- a/ghost/portal/src/components/PopupModal.js
+++ b/ghost/portal/src/components/PopupModal.js
@@ -55,7 +55,7 @@ class PopupContent extends React.Component {
 
     componentDidMount() {
         // Handle Esc to close popup
-        if (this.node && !hasMode(['preview'])) {
+        if (this.node && !hasMode(['preview']) && !this.props.isMobile) {
             this.node.focus();
             this.keyUphandler = (event) => {
                 if (event.key === 'Escape') {
@@ -274,6 +274,7 @@ export default class PopupModal extends React.Component {
     renderFrameContainer() {
         const {member, site, customSiteUrl} = this.context;
         const Styles = StylesWrapper({member});
+        const isMobile = window.innerWidth < 480;
 
         const frameStyle = {
             ...Styles.frame.common
@@ -296,7 +297,7 @@ export default class PopupModal extends React.Component {
             <div style={Styles.modalContainer}>
                 <Frame style={frameStyle} title="portal-popup" head={this.renderFrameStyles()} dataTestId='portal-popup-frame'>
                     <div className={className} onClick = {e => this.handlePopupClose(e)}></div>
-                    <PopupContent />
+                    <PopupContent isMobile={isMobile} />
                 </Frame>
             </div>
         );
diff --git a/ghost/portal/src/components/pages/FeedbackPage.js b/ghost/portal/src/components/pages/FeedbackPage.js
index c1f7893bb6..e01b0abe75 100644
--- a/ghost/portal/src/components/pages/FeedbackPage.js
+++ b/ghost/portal/src/components/pages/FeedbackPage.js
@@ -100,10 +100,70 @@ export const FeedbackPageStyles = `
     }
 
     @media (max-width: 480px) {
+        .gh-portal-popup-background {
+            animation: none;
+        }
+
+        .gh-portal-popup-wrapper.feedback h1 {
+            font-size: 2.5rem;
+        }
+
+        .gh-portal-popup-wrapper.feedback p {
+            margin-bottom: 1.2rem;
+        }
+
         .gh-portal-feedback .gh-portal-text-center {
             padding-left: 8px;
             padding-right: 8px;
         }
+
+        .gh-portal-popup-wrapper.feedback {
+            display: block;
+            position: relative;
+            width: 100%;
+            background: none;
+            padding-right: 0 !important;
+            overflow: hidden;
+            overflow-y: hidden !important;
+            animation: none;
+        }
+
+        .gh-portal-popup-container.feedback {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            border-radius: 18px 18px 0 0;
+            margin: 0 !important;
+            animation: none;
+            animation: mobile-tray-from-bottom 0.4s ease;
+        }
+
+        .gh-portal-popup-wrapper.feedback .gh-portal-closeicon-container {
+            display: none;
+        }
+
+        .gh-feedback-buttons-group,
+        .gh-portal-confirm-button {
+            margin-top: 28px;
+        }
+
+        .gh-portal-powered.outside.feedback {
+            display: none;
+        }
+
+        @keyframes mobile-tray-from-bottom {
+            0% { 
+                opacity: 0;
+                transform: translateY(300px);
+            }
+            20% {
+                opacity: 1.0;
+            }
+            100% { 
+                transform: translateY(0);
+            }
+        }
     }
 `;