holm/jq_offline
1
0
Fork 0
forked from extern/jq_offline
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature: move the query to the bottom to see the result while typing the query (mobile)

Browse Source
This commit is contained in:
Jiehong Ma 2021-10-03 10:43:02 +02:00
parent 5301e20ae9
commit ca6f134036
2 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
public/index.html
View File

@ -64,9 +64,12 @@
<div id="content"> <div id="content">
<div id="query"> <div id="query">
<label id="filter-label" for="filter">Query</label> <label id="filter-label" for="filter">Query</label>
<input id="filter" type="text" name="filter" <input
id="filter"
type="text"
name="filter"
autocapitalize="off" autocapitalize="off"
autocomplete="off" autocomplete="on"
spellcheck="false" spellcheck="false"
autocorrect="off" autocorrect="off"
/> />
@ -82,14 +85,27 @@
</li> </li>
</ul> </ul>
</div> </div>
<div id="input"> <div id="input">
<label id="input-label" for="input-json">Input</label> <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>
<div id="output"> <div id="output">
<label id="output-label" for="output-json">Result</label> <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>
</div> </div>
</body> </body>

8
public/style.css
View File

@ -33,11 +33,11 @@ h1 {
#content { #content {
display: grid; display: grid;
grid-template-areas: grid-template-areas:
"query"
"input" "input"
"output"; "output"
"query";
gap: 1em; gap: 1em;
grid-template-rows: auto 1fr 1fr; grid-template-rows: 1fr 1fr auto;
padding: 1em; padding: 1em;
height: 90vh; height: 90vh;
@ -131,6 +131,7 @@ textarea {
input[type=checkbox] { input[type=checkbox] {
transform: scale(2.5); transform: scale(2.5);
height: 2.5em; height: 2.5em;
margin-right: 1em;
} }
@media only screen and (min-width: 1000px) { @media only screen and (min-width: 1000px) {
@ -138,6 +139,7 @@ input[type=checkbox] {
input[type=checkbox] { input[type=checkbox] {
transform: scale(1.3); transform: scale(1.3);
height: 1em; height: 1em;
margin-right: .5em;
} }
} }