Flexbox form, refactors, tweaks

borken-flask
HeNine 3 years ago
parent 6c21834172
commit 172498fc22

@ -0,0 +1,44 @@
#search_tools {
display: flex;
flex-direction: column;
margin-bottom: 1em;
label {
display: inline-block;
font-family: sans-serif;
width: 5em;
text-align: right;
padding: 0.2em;
}
#text_search_line{
display: flex;
flex-direction: row;
margin-bottom: 0.2em;
#search_text {
flex-grow: 1;
min-width: 10em;
}
}
#time_search_line {
display: flex;
flex-direction: row;
input[type=datetime-local] {
width: 13em;
}
#search_button {
margin-left: auto;
}
}
button {
padding: 0.25em;
}
}

@ -10,12 +10,15 @@
<div id="search_tools">
<form>
<label for="search_text">Search</label> <input id="search_text" oninput="doSearch()" placeholder="Supports quotes, 'or' and -.">
<hr>
<label for="start_time">Start time</label> <input id="start_time" type="datetime-local">
<label for="end_time">End time</label> <input id="end_time" type="datetime-local">
<button id="search_button" onclick="doSearch()" type="button">Search</button>
<hr>
<div id="text_search_line" class="form_line">
<label for="search_text">Search</label> <input id="search_text" oninput="doSearch()"
placeholder="Supports quotes, 'or' and -.">
</div>
<div id="time_search_line" class="form_line">
<label for="start_time">Start time</label> <input id="start_time" type="datetime-local">
<label for="end_time">End time</label> <input id="end_time" type="datetime-local">
<button id="search_button" onclick="doSearch()" type="button">Search</button>
</div>
</form>
</div>

@ -0,0 +1,41 @@
.line {
display: grid;
grid-template-columns: [times] max-content [text] auto;
grid-template-rows: minmax(1.36em, max-content) min-content;
align-items: start;
margin-bottom: 0.1em;
padding: 0.1em;
max-width: 50em;
.line_start_time {
color: lightgray;
font-family: monospace;
font-size: smaller;
grid-column: times;
align-self: start;
}
.line_start_bus_time {
font-family: sans-serif;
//font-size: small;
text-align: right;
grid-column: times;
padding: 0.2em;
align-self: start;
}
.line_text {
padding: 0.2em;
margin-left: 0.3em;
grid-column: text;
grid-row: span 2;
}
}

@ -1,26 +1,12 @@
body {
color: aliceblue;
background: dimgray;
}
label {
display: inline-block;
font-family: sans-serif;
width: 5em;
text-align: right;
}
input[type=datetime-local] {
width: 13em;
}
button {
padding: 0.25em;
max-width: 900px;
}
#search_text {
width: 50em;
}
@import "form";
@import "line";
#help_box {
display: none;
@ -32,46 +18,4 @@ button {
background: #fff;
padding: 1em;
color: #000;
}
.line {
display: grid;
grid-template-columns: [times] max-content [text] auto;
grid-template-rows: minmax(1.36em, max-content) min-content;
align-items: start;
margin-bottom: 0.1em;
padding: 0.1em;
max-width: 50em;
.line_start_time {
color: lightgray;
font-family: monospace;
font-size: smaller;
grid-column: times;
align-self: start;
}
.line_start_bus_time {
font-family: sans-serif;
//font-size: small;
text-align: right;
grid-column: times;
padding: 0.2em;
align-self: start;
}
.line_text {
padding: 0.2em;
margin-left: 0.3em;
grid-column: text;
grid-row: span 2;
}
}
Loading…
Cancel
Save