🎉 (admin) add mobile preview to gdocs preview

owid · Feb 18, 2025 · 751cba2 · 751cba2
1 parent 80d940a
commit 751cba2
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 14 deletions.
diff --git a/adminSiteClient/GdocsMoreMenu.tsx b/adminSiteClient/GdocsMoreMenu.tsx
@@ -5,6 +5,8 @@ import {
     faTrash,
     faXmark,
     faBug,
+    faMobileScreen,
+    faDesktop,
 } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import {
@@ -23,18 +25,23 @@ enum GdocsMoreMenuAction {
     Debug = "debug",
     Unpublish = "unpublish",
     Delete = "delete",
+    Mobile = "mobile",
 }
 
 export const GdocsMoreMenu = ({
     gdoc,
     onDebug,
     onUnpublish,
     onDelete,
+    isMobilePreviewActive,
+    toggleMobilePreview,
 }: {
     gdoc: OwidGdoc
     onDebug: VoidFunction
     onUnpublish: VoidFunction
     onDelete: (tombstone?: CreateTombstoneData) => Promise<void>
+    isMobilePreviewActive: boolean
+    toggleMobilePreview: () => void
 }) => {
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
 
@@ -68,6 +75,8 @@ export const GdocsMoreMenu = ({
                             case GdocsMoreMenuAction.Delete:
                                 setIsDeleteModalOpen(true)
                                 break
+                            case GdocsMoreMenuAction.Mobile:
+                                toggleMobilePreview()
                         }
                     },
                     items: [
@@ -76,6 +85,21 @@ export const GdocsMoreMenu = ({
                             label: "Debug",
                             icon: <FontAwesomeIcon icon={faBug} />,
                         },
+                        {
+                            key: GdocsMoreMenuAction.Mobile,
+                            label: isMobilePreviewActive
+                                ? "Desktop preview"
+                                : "Mobile preview",
+                            icon: (
+                                <FontAwesomeIcon
+                                    icon={
+                                        isMobilePreviewActive
+                                            ? faDesktop
+                                            : faMobileScreen
+                                    }
+                                />
+                            ),
+                        },
                         {
                             key: GdocsMoreMenuAction.Unpublish,
                             label: "Unpublish",

diff --git a/adminSiteClient/GdocsPreviewPage.tsx b/adminSiteClient/GdocsPreviewPage.tsx
@@ -74,6 +74,8 @@ export const GdocsPreviewPage = ({ match, history }: GdocsMatchProps) => {
     const { admin } = useContext(AdminAppContext)
     const store = useGdocsStore()
 
+    const [isMobilePreviewActive, setIsMobilePreviewActive] = useState(false)
+
     const iframeRef = useRef<HTMLIFrameElement>(null)
 
     const fetchGdoc = useCallback(
@@ -173,6 +175,11 @@ export const GdocsPreviewPage = ({ match, history }: GdocsMatchProps) => {
         history.push("/gdocs")
     }
 
+    const toggleMobilePreview = () =>
+        setIsMobilePreviewActive(
+            (isMobilePreviewActive) => !isMobilePreviewActive
+        )
+
     const onSettingsClose = () => {
         setSettingsOpen(false)
     }
@@ -303,6 +310,8 @@ export const GdocsPreviewPage = ({ match, history }: GdocsMatchProps) => {
                                 onDebug={() => setDiffOpen(true)}
                                 onUnpublish={doUnpublish}
                                 onDelete={onDelete}
+                                isMobilePreviewActive={isMobilePreviewActive}
+                                toggleMobilePreview={toggleMobilePreview}
                             />
                         </Space>
                     </Col>
@@ -408,19 +417,25 @@ export const GdocsPreviewPage = ({ match, history }: GdocsMatchProps) => {
                     />
                 </Drawer>
 
-                {/*
-                    This uses the full SSR rendering pipeline. It is more accurate but comes
-                    with an additional requests to the Google API and has a less polished
-                    authoring experience at the moment (content flashes and scrolling position
-                    resets on every change)
-                */}
-                <iframe
-                    ref={iframeRef}
-                    src={`/gdocs/${currentGdoc.id}/preview#owid-document-root`}
-                    style={{ width: "100%", border: "none" }}
-                    // use `updatedAt` as a proxy for when database-level settings such as breadcrumbs have changed
-                    key={`${currentGdoc.revisionId}-${originalGdoc?.updatedAt}`}
-                />
+                <div className="iframe-container">
+                    {/*
+                        This uses the full SSR rendering pipeline. It is more accurate but comes
+                        with an additional requests to the Google API and has a less polished
+                        authoring experience at the moment (content flashes and scrolling position
+                        resets on every change)
+                    */}
+                    <iframe
+                        ref={iframeRef}
+                        src={`/gdocs/${currentGdoc.id}/preview#owid-document-root`}
+                        style={{
+                            width: "100%",
+                            border: "none",
+                            maxWidth: isMobilePreviewActive ? 375 : undefined,
+                        }}
+                        // use `updatedAt` as a proxy for when database-level settings such as breadcrumbs have changed
+                        key={`${currentGdoc.revisionId}-${originalGdoc?.updatedAt}`}
+                    />
+                </div>
 
                 {currentGdoc.published && (
                     <div

diff --git a/adminSiteClient/admin.scss b/adminSiteClient/admin.scss
@@ -1156,8 +1156,11 @@ main:not(.ChartEditorPage):not(.GdocsEditPage) {
         }
     }
 
-    iframe {
+    .iframe-container {
         height: calc(100% - 65px);
+        display: flex;
+        justify-content: center;
+        background: #f2f2f2;
     }
 
     .GdocsEditPage__error-container {