Merge pull request #5862 from roc-lang/mobile-repl

Give web repl some mobile-friendly styling
roc-lang · Sep 28, 2023 · 64f0c02 · 64f0c02
2 parents 5020b4d + 0974d57
commit 64f0c02
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 6 deletions.
diff --git a/www/public/repl/index.html b/www/public/repl/index.html
@@ -27,11 +27,11 @@
     <h1>The rockin’ Roc REPL</h1>
     <code class="history">
       <div id="help-text"></div>
-      <div id="history-text"><div id="loading-message">Loading Roc compiler as a WebAssembly module…please wait!</div></div>
+      <div id="history-text"><div id="loading-message">Loading REPL WebAssembly module…please wait!</div></div>
     </code>
     <section id="source-input-wrapper">
-      <textarea rows="5" autofocus id="source-input"
-        placeholder="You can enter Roc code here after the compiler is loaded!" disabled></textarea>
+      <textarea rows="5" autofocus id="source-input" placeholder="You can enter Roc code here once the REPL loads!"
+        disabled></textarea>
     </section>
     </div>
     <script type="module" src="/repl/repl.js"></script>

diff --git a/www/public/repl/repl.css b/www/public/repl/repl.css
@@ -140,3 +140,32 @@ li {
 .underline {
   text-decoration: underline;
 }
+
+
+/* Mobile-friendly screen width */
+@media only screen and (max-device-width: 480px) and (orientation: portrait) {
+  h1 {
+    font-size: 24px !important;
+    margin: 0;
+    padding: 16px 0;
+    text-align: center;
+  }
+
+  main {
+    margin: 0;
+    padding: 0;
+    min-height: calc(100vh - var(--top-bar-height));
+  }
+
+  code.history {
+    flex-grow: 1;
+  }
+
+  #source-input {
+    margin: 0
+  }
+
+  #loading-message {
+    margin: 0;
+  }
+}
diff --git a/www/public/repl/repl.js b/www/public/repl/repl.js
@@ -42,8 +42,7 @@ repl.elemSourceInput.addEventListener("keyup", onInputKeyup);
 roc_repl_wasm.default("/repl/roc_repl_wasm_bg.wasm").then(async (instance) => {
   repl.elemHistory.querySelector("#loading-message").remove();
   repl.elemSourceInput.disabled = false;
-  repl.elemSourceInput.placeholder =
-    "Type some Roc code and press Enter. (Use Shift-Enter or Ctrl-Enter for multi-line.)";
+  repl.elemSourceInput.placeholder = "Type some Roc code and press Enter.";
   repl.elemSourceInput.focus();
   repl.compiler = instance;
 

diff --git a/www/public/site.css b/www/public/site.css
@@ -13,6 +13,7 @@
     --top-bar-bg: #222;
     --top-bar-fg: #eee;
     --top-bar-logo-hover: #8055E4;
+    --top-bar-height: 50px;
     --header-link-color: #107F79;
     --header-link-hover: #222;
     --link-color: #7546e2;
@@ -77,7 +78,7 @@ li {
 #top-bar {
     background-color: var(--top-bar-bg);
     width: 100%;
-    height: 50px;
+    height: var(--top-bar-height);
 }
 
 #top-bar nav {