From a21eb00c204f9df995a590b57e0197fa9225a791 Mon Sep 17 00:00:00 2001
From: Roman Zupancic <roman.k.zupancic@gmail.com>
Date: Sat, 27 Jan 2024 19:53:19 -0500
Subject: [PATCH] Altered TextInput scene to passthrough keyboard input instead
 of buffering it in a textarea.

---
 webdata/index.html |  8 ++++----
 webdata/main.css   | 39 +++++++++++++--------------------------
 2 files changed, 17 insertions(+), 30 deletions(-)

diff --git a/webdata/index.html b/webdata/index.html
index a011d0b..cc788f3 100644
--- a/webdata/index.html
+++ b/webdata/index.html
@@ -24,11 +24,11 @@
     <button class="bottom right" onclick="app.showTextInput()">⌨</button>
 </div>
 
-<div id="text-input" class="scene">
-    <textarea class="grow" cols=1 rows=1></textarea>
-    <div class="buttons">
+<div id="text-input" class="scene touch-input mouse-input keyboard-input">
+    <textarea placeholder="Touch to type" cols=1 rows=1></textarea>
+    <div class="flex-between">
         <button onclick="app.showKeys('text-input', 1)">≡</button>
-        <button class="grow" id="send-text">➣</button>
+        <button id="send-text">↩</button>
     </div>
 </div>
 
diff --git a/webdata/main.css b/webdata/main.css
index bf66d6a..5a1eab1 100644
--- a/webdata/main.css
+++ b/webdata/main.css
@@ -147,10 +147,15 @@ textarea {
     border: none;
     resize: none;
     font-size: 2rem;
-    background-color: white;
+    background-color: #303030;
     color: black;
     margin: 0;
     padding: 0 0.5rem;
+    width: 100%;
+}
+
+textarea:focus {
+    outline: none;
 }
 
 #keys {
@@ -175,35 +180,17 @@ textarea {
 
 #text-input {
     align-items: stretch;
+    justify-content: end;
     padding: 0;
     gap: 0;
 }
 
-#text-input .buttons > button {
+#text-input button {
     border-bottom: none;
-    border-right: none;
-}
-
-#text-input .buttons > button:first-child {
-    border-left: none;
+    border-top: none;
 }
 
-@media (min-aspect-ratio: 4/3) {
-    #text-input {
-        flex-direction: row;
-    }
-
-    #text-input .buttons {
-        flex-direction: column;
-    }
-
-    #text-input .buttons > button,
-    #text-input .buttons > button:first-child {
-        border-top: 1px solid black;
-        border-left: 1px solid black;
-    }
-
-    #text-input .buttons > button:first-child {
-        border-top: none;
-    }
-}
+.flex-between {
+    display: flex;
+    justify-content: space-between;
+}
\ No newline at end of file