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

@@ -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>
         );

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);
+            }
+        }
     }
 `;