Put type dropdown, regenerate button on same row. Regain screen space

This commit is contained in:
Debanjum Singh Solanky
2022-08-05 06:17:43 +03:00
parent 017e287b8a
commit 24ccba74d4

View File

@@ -130,11 +130,13 @@
<!--Add Text Box To Enter Query, Trigger Incremental Search OnChange --> <!--Add Text Box To Enter Query, Trigger Incremental Search OnChange -->
<input type="text" id="query" onkeyup=incremental_search(event) autofocus="autofocus" placeholder="What is the meaning of life?"> <input type="text" id="query" onkeyup=incremental_search(event) autofocus="autofocus" placeholder="What is the meaning of life?">
<!--Add Dropdown to Select Query Type --> <div id="options">
<select id="type"></select> <!--Add Dropdown to Select Query Type -->
<select id="type"></select>
<!--Add Button To Regenerate --> <!--Add Button To Regenerate -->
<button id="regenerate" onclick="regenerate()">Regenerate</button> <button id="regenerate" onclick="regenerate()">Regenerate</button>
</div>
<!-- Section to Render Results --> <!-- Section to Render Results -->
<div id="results"></div> <div id="results"></div>
@@ -180,10 +182,24 @@
font-weight: 200; font-weight: 200;
color: #888; color: #888;
} }
button {
#options {
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
}
#options > * {
padding: 15px;
border-radius: 5px; border-radius: 5px;
border: 1px solid #ccc; border: 1px solid #ccc;
} }
#options > select {
margin-right: 5px;
}
#options > button {
margin-left: 5px;
}
#query { #query {
font-size: larger; font-size: larger;
} }
@@ -207,7 +223,6 @@
#json { #json {
white-space: pre-wrap; white-space: pre-wrap;
} }
#results-markdown { #results-markdown {
text-align: left; text-align: left;
} }