From 0974d5709d63d18f218276513a1d76c006de1a59 Mon Sep 17 00:00:00 2001
From: Richard Feldman <oss@rtfeldman.com>
Date: Wed, 27 Sep 2023 22:09:54 -0400
Subject: [PATCH] Give web repl some mobile-friendly styling

---
 www/public/repl/index.html |  6 +++---
 www/public/repl/repl.css   | 29 +++++++++++++++++++++++++++++
 www/public/repl/repl.js    |  3 +--
 www/public/site.css        |  3 ++-
 4 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/www/public/repl/index.html b/www/public/repl/index.html
index fb274f029f0..651a9d869c2 100644
--- 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
index 846c1086420..e4d32f1884d 100644
--- 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
index 65deb6af944..bd7e6f23b09 100644
--- 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
index ad5e542afa7..6f2a878ecb0 100644
--- 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 {