Flexbox form, refactors, tweaks

buscribe-web/form.less

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

buscribe-web/index.html

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

buscribe-web/line.less

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

buscribe-web/style.less

@@ -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;
@@ -33,45 +19,3 @@ button {
   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;
-  }
-}