Improve nav & editor layout, make naive mobile version available

Author: ryyppy

components/CodeMirror2.re

@@ -20,14 +20,14 @@ if (typeof window !== "undefined" && typeof window.navigator !== "undefined") {
 }
 |};
 
-let useWindowWidth: unit => option(int) = [%raw
+let useWindowWidth: unit => int = [%raw
   {j| () => {
   const isClient = typeof window === 'object';
 
   function getSize() {
     return {
-      width: isClient ? window.innerWidth : undefined,
-      height: isClient ? window.innerHeight : undefined
+      width: isClient ? window.innerWidth : 0,
+      height: isClient ? window.innerHeight : 0
     };
   }
 

components/Navigation.re

@@ -479,7 +479,7 @@ let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
     style={Style.make(~minWidth, ())}
     className={
       fixedNav
-      ++ " flex xs:justify-center w-full h-18 bg-night-dark shadow text-white-80 text-base"
+      ++ " flex xs:justify-center w-full h-18 bg-gray-95 shadow text-white-80 text-base"
     }>
     <div
       className="flex justify-between mx-4 md:mx-8 items-center h-full w-full max-w-1280">
@@ -490,13 +490,9 @@ let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
           <img src="/static/[email protected]" />
         </a>
       </div>
-      /*<img*/
-      /*className="inline-block w-full h-full"*/
-      /*src="/static/reason_logo.svg"*/
-      /*/>*/
       /* Desktop horizontal navigation */
       <div
-        className="flex items-center xs:justify-end w-full bg-night-dark sm:h-auto sm:relative">
+        className="flex items-center xs:justify-end w-full bg-gray-95 sm:h-auto sm:relative">
         <div
           className="flex ml-10 w-full max-w-320"
           style={Style.make(~maxWidth="26rem", ())}>
@@ -591,7 +587,7 @@ let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
       style={Style.make(~minWidth, ~top="4.5rem", ())}
       className={
         (isOverlayOpen ? "flex" : "hidden")
-        ++ " sm:hidden flex-col fixed top-0 left-0 h-full w-full sm:w-9/12 bg-night-dark sm:h-auto sm:flex sm:relative sm:flex-row sm:justify-between"
+        ++ " sm:hidden flex-col fixed top-0 left-0 h-full w-full z-20 sm:w-9/12 bg-gray-100 sm:h-auto sm:flex sm:relative sm:flex-row sm:justify-between"
       }>
       <MobileNav route />
     </div>

re_pages/Playground.re

@@ -25,7 +25,7 @@ module DropdownSelect = {
     let opacity = disabled ? " opacity-50" : "";
     <select
       className={
-        "border border-night-light inline-block rounded px-4 py-1 bg-onyx appearance-none font-semibold "
+        "border border-night-light inline-block rounded px-4 py-1 bg-gray-100 appearance-none font-semibold "
         ++ opacity
       }
       name
@@ -114,7 +114,7 @@ module Pane = {
   let defaultMakeTabClass = (active: bool): string => {
     let rest =
       active
-        ? "text-fire font-medium bg-onyx hover:cursor-default"
+        ? "text-fire font-medium bg-gray-100 hover:cursor-default"
         : "hover:cursor-pointer";
 
     "flex items-center h-12 px-4 pr-24 " ++ rest;
@@ -181,7 +181,7 @@ module Pane = {
       Belt.Array.mapWithIndex(
         tabs,
         (i, tab) => {
-          let className = current === i ? "block" : "hidden";
+          let className = current === i ? "block h-full" : "hidden";
 
           <div key={Belt.Int.toString(i)} className> {tab.content} </div>;
         },
@@ -435,7 +435,7 @@ module ResultPane = {
     | Comp(Success({warnings, time})) =>
       if (Array.length(warnings) === 0) {
         let ms = Belt.Float.toInt(time)->Belt.Int.toString ++ " ms";
-        <PreWrap> {("0 Errors, 0 Warnings, built in " ++ ms)->s} </PreWrap>;
+        <PreWrap> "0 Errors, 0 Warnings"->s </PreWrap>;
       } else {
         filterHighlightedLocWarnings(~focusedRowCol, warnings)
         ->Belt.Array.mapWithIndex((i, warning) => {
@@ -1081,7 +1081,7 @@ module MiscPanel = {
         Belt.Option.map(suggestions, elements => {
           <div
             ref={ReactDOMRe.Ref.domRef(listboxRef)}
-            className="p-2 absolute overflow-auto z-50 border-b rounded border-l border-r block w-full bg-onyx"
+            className="p-2 absolute overflow-auto z-50 border-b rounded border-l border-r block w-full bg-gray-100"
             style={ReactDOMRe.Style.make(~maxHeight="15rem", ())}>
             elements
           </div>
@@ -1300,7 +1300,7 @@ module ControlPanel = {
       | None => None
       };
 
-    <div className="flex bg-onyx text-night-light px-6 text-14 w-full">
+    <div className="flex bg-gray-100 text-night-light px-6 text-14 w-full">
       <div
         className="flex justify-between items-center border-t py-4 border-night-60 w-full">
         <div>
@@ -1468,10 +1468,10 @@ module OutputPanel = {
         style={ReactDOMRe.Style.make(~height="calc(100vh - 9rem)", ())}>
         resultPane
         codeElement
-        <div className="absolute bottom-0 w-full">
-          <Statusbar actionIndicatorKey state=compilerState />
-        </div>
       </div>;
+    /*<div className="absolute bottom-0 w-full">*/
+    /*<Statusbar actionIndicatorKey state=compilerState />*/
+    /*</div>*/
     /*resultPane*/
 
     let errorPane =
@@ -1560,6 +1560,8 @@ let default = () => {
 
   let overlayState = React.useState(() => false);
 
+  let windowWidth = CodeMirror2.useWindowWidth();
+
   // The user can focus an error / warning on a specific line & column
   // which is stored in this ref and triggered by hover / click states
   // in the CodeMirror editor
@@ -1781,91 +1783,89 @@ module Button3 = {
       title="ReScript Playground"
       description="Try ReScript in the browser"
     />
-    <div className="text-16 pt-2 bg-night-dark">
+    <Next.Head>
+      <style> {j|body { background-color: #010427; } |j}->s </style>
+    </Next.Head>
+    <div className="text-16 bg-gray-100">
       <div className="text-night text-14">
         <Navigation fixed=false overlayState />
-        /* MOBILE PLACEHOLDER */
-        <div className="block lg:hidden h-screen text-snow-darker text-center">
-          <div className="font-bold mb-4">
-            "Mobile Playground version not available yet."->s
-          </div>
-          <div>
-            "Please use a screen with at least 1024px width for the desktop version"
-            ->s
-          </div>
-        </div>
-        /* DESKTOP */
         <main
-          className="hidden lg:block mt-4 bg-onyx overflow-hidden h-screen"
-          style={ReactDOMRe.Style.make(~maxHeight="calc(100vh - 6rem)", ())}>
-          <div className="flex justify-center">
-            <div className="w-full flex border-t-4 border-night">
-              <div
-                className="w-full border-r-4 pl-2 border-night"
-                style={ReactDOMRe.Style.make(~maxWidth="65%", ())}>
-                <div className="bg-onyx text-snow-darker">
-                  <CodeMirror2
-                    className="w-full pb-4"
-                    minHeight="calc(100vh - 10.5rem)"
-                    maxHeight="calc(100vh - 10.5rem)"
-                    mode="reason"
-                    errors=cmErrors
-                    value={React.Ref.current(editorCode)}
-                    onChange={value => {
-                      React.Ref.setCurrent(editorCode, value);
-
-                      switch (React.Ref.current(typingTimer)) {
-                      | None => ()
-                      | Some(timer) => Js.Global.clearTimeout(timer)
-                      };
-                      let timer =
-                        Js.Global.setTimeout(
-                          () => {
-                            (React.Ref.current(timeoutCompile))();
-                            React.Ref.setCurrent(typingTimer, None);
-                          },
-                          100,
-                        );
-                      React.Ref.setCurrent(typingTimer, Some(timer));
-                    }}
-                    onMarkerFocus={rowCol => {
-                      setFocusedRowCol(prev => {Some(rowCol)})
-                    }}
-                    onMarkerFocusLeave={_ => {setFocusedRowCol(_ => None)}}
-                  />
-                </div>
+          className="bg-gray-100 lg:overflow-hidden lg:h-screen"
+          style={ReactDOMRe.Style.make(~maxHeight="calc(100vh - 4.5rem)", ())}>
+          <div
+            className="w-full h-full flex flex-col lg:flex-row border-t-4 border-night">
+            <div className="w-full lg:border-r-4 pl-2 border-night">
+              <div className="bg-gray-100 text-snow-darker">
+                <CodeMirror2
+                  className="w-full py-4"
+                  minHeight="calc(100vh - 6rem)"
+                  maxHeight="calc(100vh - 6rem)"
+                  mode="reason"
+                  errors=cmErrors
+                  value={React.Ref.current(editorCode)}
+                  onChange={value => {
+                    React.Ref.setCurrent(editorCode, value);
+
+                    switch (React.Ref.current(typingTimer)) {
+                    | None => ()
+                    | Some(timer) => Js.Global.clearTimeout(timer)
+                    };
+                    let timer =
+                      Js.Global.setTimeout(
+                        () => {
+                          (React.Ref.current(timeoutCompile))();
+                          React.Ref.setCurrent(typingTimer, None);
+                        },
+                        100,
+                      );
+                    React.Ref.setCurrent(typingTimer, Some(timer));
+                  }}
+                  onMarkerFocus={rowCol => {
+                    setFocusedRowCol(prev => {Some(rowCol)})
+                  }}
+                  onMarkerFocusLeave={_ => {setFocusedRowCol(_ => None)}}
+                />
               </div>
-              <div
-                className="w-1/2"
-                style={ReactDOMRe.Style.make(~maxWidth="56rem", ())}>
-                <OutputPanel
+            </div>
+            <div
+              className="relative w-full overflow-x-hidden h-screen lg:h-auto lg:w-1/2"
+              style={ReactDOMRe.Style.make(
+                ~maxWidth=windowWidth > 1024 ? "56rem" : "100%",
+                (),
+              )}>
+              <OutputPanel
+                actionIndicatorKey={Belt.Int.toString(actionCount)}
+                compilerDispatch
+                compilerState
+              />
+              <div className="absolute bottom-0 w-full">
+                <Statusbar
                   actionIndicatorKey={Belt.Int.toString(actionCount)}
-                  compilerDispatch
-                  compilerState
+                  state=compilerState
                 />
-                {switch (compilerState) {
-                 | Ready(ready)
-                 | Compiling(ready, _)
-                 | SwitchingCompiler(ready, _, _) =>
-                   let disabled =
-                     switch (compilerState) {
-                     | SwitchingCompiler(_, _, _) => true
-                     | _ => false
-                     };
-                   let config = ready.selected.config;
-                   let setConfig = config => {
-                     compilerDispatch(UpdateConfig(config));
-                   };
-
-                   <div />;
-                 /*<MiscPanel*/
-                 /*disabled*/
-                 /*className="border-t-4 border-night"*/
-                 /*/>;*/
-                 | Init
-                 | SetupFailed(_) => React.null
-                 }}
               </div>
+              {switch (compilerState) {
+               | Ready(ready)
+               | Compiling(ready, _)
+               | SwitchingCompiler(ready, _, _) =>
+                 let disabled =
+                   switch (compilerState) {
+                   | SwitchingCompiler(_, _, _) => true
+                   | _ => false
+                   };
+                 let config = ready.selected.config;
+                 let setConfig = config => {
+                   compilerDispatch(UpdateConfig(config));
+                 };
+
+                 <div />;
+               /*<MiscPanel*/
+               /*disabled*/
+               /*className="border-t-4 border-night"*/
+               /*/>;*/
+               | Init
+               | SetupFailed(_) => React.null
+               }}
             </div>
           </div>
         </main>

styles/cm.css

@@ -22,7 +22,7 @@
 
 .cm-s-material.CodeMirror {
   /*background-color: #263238;*/
-  @apply font-mono py-8;
+  @apply font-mono; /*py-8;*/
 }
 
 .cm-s-material .CodeMirror-gutters {
@@ -32,10 +32,9 @@
   color: inherit;
 }
 
-.CodeMirror pre.CodeMirror-line,
-.CodeMirror pre.CodeMirror-line-like {
-  @apply pl-8 pr-2;
-}
+/*.CodeMirror pre.CodeMirror-line,*/
+/*.CodeMirror pre.CodeMirror-line-like {*/
+/*}*/
 
 .cm-s-material .CodeMirror-guttermarker,
 .cm-s-material .CodeMirror-guttermarker-subtle,