Support mobile phones on the dev pages

microsoft · Jan 12, 2020 · cfba7fc · cfba7fc
1 parent 6164322
commit cfba7fc
Show file tree

Hide file tree

Showing 5 changed files with 136 additions and 35 deletions.
diff --git a/packages/typescriptlang-org/lib/utils/isTouchDevice.ts b/packages/typescriptlang-org/lib/utils/isTouchDevice.ts
@@ -0,0 +1,26 @@
+/** Based on https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent */
+export function isTouchDevice() {
+  return true
+  var hasTouchScreen = false
+  if ("maxTouchPoints" in navigator) {
+    hasTouchScreen = navigator.maxTouchPoints > 0
+  } else if ("msMaxTouchPoints" in navigator) {
+    // @ts-ignore
+    hasTouchScreen = navigator.msMaxTouchPoints > 0
+  } else {
+    var mQ = window.matchMedia && matchMedia("(pointer:coarse)")
+    if (mQ && mQ.media === "(pointer:coarse)") {
+      hasTouchScreen = !!mQ.matches
+    } else if ("orientation" in window) {
+      hasTouchScreen = true // deprecated, but good fallback
+    } else {
+      // Only as a last resort, fall back to user agent sniffing
+      // @ts-ignore
+      var UA = navigator.userAgent
+      hasTouchScreen =
+        /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
+        /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA)
+    }
+  }
+  return hasTouchScreen
+}
diff --git a/packages/typescriptlang-org/src/components/SuppressWhenTouch.tsx b/packages/typescriptlang-org/src/components/SuppressWhenTouch.tsx
@@ -0,0 +1,36 @@
+import React, { useEffect } from "react"
+import { isTouchDevice } from "../../lib/utils/isTouchDevice"
+
+/**
+ * A React component which will remove its children (at runtime!)
+ * from the hierarchy if we're on a touch device
+ */
+export const SuppressWhenTouch = ({ children, hideOnTouch }: any) => {
+
+  useEffect(() => {
+    if (isTouchDevice()) {
+      // It's touch, so let's kill the content in the child and 
+      // replace it with a message that this section isn't good for mobile
+      const suppressible = document.getElementById("touch-suppressible")!
+      while (suppressible.firstChild) {
+        suppressible.removeChild(suppressible.firstChild)
+      }
+
+      if (hideOnTouch) return
+
+      const h4 = document.createElement("h4")
+      h4.textContent = "Section best on a computer"
+
+      const p = document.createElement("p")
+      p.textContent = "This part of the site does not run well on a touch-oriented browser. We recommend switching to a computer to carry on."
+
+      suppressible.appendChild(h4)
+      suppressible.appendChild(p)
+    }
+
+  })
+  return (
+    <div id="touch-suppressible">
+      {children}
+    </div>)
+}
diff --git a/packages/typescriptlang-org/src/pages/dev/dev.scss b/packages/typescriptlang-org/src/pages/dev/dev.scss
@@ -1,3 +1,5 @@
+$width-for-single-column: 800px;
+
 #dev {
   .content {
     display: flex;
@@ -6,6 +8,8 @@
   pre {
     background-color: #f9f9f9;
     color: black;
+    margin-right: 0;
+    overflow-x: scroll;
 
     .mtk5 {
       color: black;
@@ -17,12 +21,34 @@
     flex-direction: row;
     width: 100%;
 
+    @media (max-width: $width-for-single-column) {
+      flex-direction: column;
+    }
+
     > p,
     > div {
       flex: 1;
     }
   }
 
+  .split-sixhundred {
+    width: calc(100% - 600px);
+    @media (max-width: $width-for-single-column) {
+      width: 100%;
+    }
+  }
+  .sixhundred {
+    width: 600px;
+    margin-left: 20px;
+
+    @media (max-width: $width-for-single-column) {
+      width: 100%;
+      margin-left: 0px;
+      padding-left: 20px;
+      text-align: center;
+    }
+  }
+
   .split-code {
     display: flex;
 

diff --git a/packages/typescriptlang-org/src/pages/dev/sandbox.tsx b/packages/typescriptlang-org/src/pages/dev/sandbox.tsx
@@ -4,11 +4,14 @@ import { withPrefix } from "gatsby"
 
 import "./dev.scss"
 import { DevNav } from "../../components/dev-nav"
-
-
+import { isTouchDevice } from "../../../lib/utils/isTouchDevice"
+import { SuppressWhenTouch } from "../../components/SuppressWhenTouch"
 
 const Index = (props: any) => {
   useEffect(() => {
+    // Don't even bother getting monaco
+    if (isTouchDevice()) { return }
+
     const getLoaderScript = document.createElement('script');
     getLoaderScript.src = withPrefix("/js/vs.loader.js");
     getLoaderScript.async = true;
@@ -69,7 +72,7 @@ export default async function () {
         <div id="dev">
           <DevNav />
           <div className="ms-depth-4 content" style={{ backgroundColor: "white", padding: "2rem", margin: "2rem", marginTop: "1rem" }}>
-            <div style={{ width: "calc(100% - 600px)" }}>
+            <div className="split-sixhundred">
               <h1 style={{ marginTop: "0" }}>TypeScript Sandbox</h1>
               <p>A DOM library for interacting with TypeScript and JavaScript code, which powers the heart of the <a href={withPrefix("/en/play")}>TypeScript playground</a></p>
               <p>You can use the TypeScript sandbox for:</p>
@@ -82,13 +85,16 @@ export default async function () {
               <p>This library builds on top of the <a href="https://microsoft.github.io/monaco-editor/index.html">Monaco Editor</a>, providing a higher level API but offering access to all the lower-level APIs via a single <code>sandbox</code> object.</p>
               <p>You can find the code for the TypeScript Sandbox inside the <a href="https://github.com/microsoft/TypeScript-Website/tree/v2/packages/sandbox#typescript-sandbox">microsoft/TypeScript-Website</a> mono-repo.</p>
             </div>
-            <div style={{ width: "600px", marginLeft: "20px", borderLeft: "1px solid gray" }}>
-              <div id="loader">
-                <div className="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
-                <p id="loading-message">Downloading Sandbox...</p>
+
+            <SuppressWhenTouch hideOnTouch>
+              <div className="sixhundred" style={{ borderLeft: "1px solid gray" }}>
+                <div id="loader">
+                  <div className="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+                  <p id="loading-message">Downloading Sandbox...</p>
+                </div>
+                <div style={{ height: "400px" }} id="monaco-editor-embed" />
               </div>
-              <div style={{ height: "400px" }} id="monaco-editor-embed" />
-            </div>
+            </SuppressWhenTouch>
           </div>
 
           <div className="ms-depth-4" style={{ backgroundColor: "white", padding: "2rem", margin: "2rem" }}>

diff --git a/packages/typescriptlang-org/src/pages/dev/twoslash.tsx b/packages/typescriptlang-org/src/pages/dev/twoslash.tsx
@@ -8,6 +8,8 @@ import { renderToHTML } from "gatsby-remark-shiki/src/renderer"
 
 import "./dev.scss"
 import { DevNav } from "../../components/dev-nav"
+import { isTouchDevice } from "../../../lib/utils/isTouchDevice"
+import { SuppressWhenTouch } from "../../components/SuppressWhenTouch"
 
 /** Note: to run all the web infra in debug, run:
   localStorage.debug = '*'
@@ -17,6 +19,9 @@ import { DevNav } from "../../components/dev-nav"
 
 const Index = (props: any) => {
   useEffect(() => {
+    // No monaco for touch
+    if (isTouchDevice()) { return }
+
     const getLoaderScript = document.createElement('script');
     getLoaderScript.src = withPrefix("/js/vs.loader.js");
     getLoaderScript.async = true;
@@ -176,38 +181,40 @@ const Index = (props: any) => {
           </div>
 
           <div className="ms-depth-4 content" style={{ backgroundColor: "white", padding: "2rem", margin: "2rem", marginTop: "1rem" }}>
-            <div style={{ width: "600px", }}>
-              <h3 style={{ marginTop: "0" }}>Markup</h3>
-              <p id="exampleBlurb">{codeSamples[0].blurb}</p>
-              <div id="loader">
-                <div className="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
-                <p id="loading-message">Downloading Sandbox...</p>
-              </div>
-              <div style={{ height: "300px" }} id="monaco-editor-embed" />
-              <div id="example-buttons">
-                {codeSamples.map(code => {
-                  const setExample = (e) => {
-                    if (e.target.classList.contains("disabled")) return
-
-                    document.getElementById("exampleBlurb")!.innerText = code.blurb
-                    // @ts-ignore
-                    window.sandbox.setText(code.code)
+            <SuppressWhenTouch>
+
+              <div style={{ width: "600px", }}>
+                <h3 style={{ marginTop: "0" }}>Markup</h3>
+                <p id="exampleBlurb">{codeSamples[0].blurb}</p>
+                <div id="loader">
+                  <div className="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+                  <p id="loading-message">Downloading Sandbox...</p>
+                </div>
+                <div style={{ height: "300px" }} id="monaco-editor-embed" />
+                <div id="example-buttons">
+                  {codeSamples.map(code => {
+                    const setExample = (e) => {
+                      if (e.target.classList.contains("disabled")) return
+
+                      document.getElementById("exampleBlurb")!.innerText = code.blurb
+                      // @ts-ignore
+                      window.sandbox.setText(code.code)
+                    }
+                    return <div className="button disabled" onClick={setExample}>{code.name}</div>
                   }
-                  return <div className="button disabled" onClick={setExample}>{code.name}</div>
-                }
-                )}
+                  )}
+                </div>
               </div>
-            </div>
 
-            <div style={{ width: "calc(100% - 600px)", paddingLeft: "20px", borderLeft: "1px solid gray", position: "relative" }}>
-              <h3 style={{ marginTop: "0" }}>Results</h3>
+              <div style={{ width: "calc(100% - 600px)", paddingLeft: "20px", borderLeft: "1px solid gray", position: "relative" }}>
+                <h3 style={{ marginTop: "0" }}>Results</h3>
 
-              <div id="twoslash-results" />
-              <div id="twoslash-failure" />
-            </div>
+                <div id="twoslash-results" />
+                <div id="twoslash-failure" />
+              </div>
+            </SuppressWhenTouch>
           </div>
 
-
           <div className="ms-depth-4" style={{ backgroundColor: "white", padding: "2rem", margin: "2rem" }}>
             <h2>Usage</h2>
             <p>Twoslash will be available on NPM soon, for now it's only being used in the TypeScript website.</p>