extern/jq_offline
1
0
Fork 1
mirror of https://gitlab.com/jiehong/jq_offline.git synced 2024-12-12 17:30:56 +01:00
Code Issues 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="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>

8
public/style.css
View File

@ -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;
}
}