From ca6f1340364736b21d83d7c9d38e5b4c207a0388 Mon Sep 17 00:00:00 2001
From: Jiehong Ma <email@majiehong.com>
Date: Sun, 3 Oct 2021 10:43:02 +0200
Subject: [PATCH] feature: move the query to the bottom to see the result while
 typing the query (mobile)

---
 public/index.html | 24 ++++++++++++++++++++----
 public/style.css  |  8 +++++---
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/public/index.html b/public/index.html
index 6972314..4c4e762 100755
--- a/public/index.html
+++ b/public/index.html
@@ -64,9 +64,12 @@
     <div id="content">
         <div id="query">
             <label id="filter-label" for="filter">Query</label>
-            <input id="filter" type="text" name="filter"
+            <input
+              id="filter"
+              type="text"
+              name="filter"
               autocapitalize="off"
-              autocomplete="off"
+              autocomplete="on"
               spellcheck="false"
               autocorrect="off"
             />
@@ -82,14 +85,27 @@
               </li>
             </ul>
         </div>
+
         <div id="input">
             <label id="input-label" for="input-json">Input</label>
-            <textarea id="input-json" name="input" placeholder="Paste your input json here"></textarea>
+            <textarea
+              id="input-json"
+              name="input"
+              placeholder="Paste your input json here"
+              autocapitalize="off"
+              autocomplete="off"
+              spellcheck="false"
+              autocorrect="off"
+            ></textarea>
         </div>
 
         <div id="output">
             <label id="output-label" for="output-json">Result</label>
-            <textarea id="output-json">Output</textarea>
+            <textarea
+              id="output-json"
+              placeholder="Output will appear here"
+              readonly
+            ></textarea>
         </div>
     </div>
 </body>
diff --git a/public/style.css b/public/style.css
index 00ba7ac..4de08f4 100755
--- a/public/style.css
+++ b/public/style.css
@@ -33,11 +33,11 @@ h1 {
 #content {
   display: grid;
   grid-template-areas:
-    "query"
     "input"
-    "output";
+    "output"
+    "query";
   gap: 1em;
-  grid-template-rows: auto 1fr 1fr;
+  grid-template-rows: 1fr 1fr auto;
 
   padding: 1em;
   height: 90vh;
@@ -131,6 +131,7 @@ textarea {
 input[type=checkbox] {
   transform: scale(2.5);
   height: 2.5em;
+  margin-right: 1em;
 }
 
 @media only screen and (min-width: 1000px) {
@@ -138,6 +139,7 @@ input[type=checkbox] {
   input[type=checkbox] {
     transform: scale(1.3);
     height: 1em;
+    margin-right: .5em;
   }
 }