Change to grid for lines

buscribe-web/script.js

@@ -43,14 +43,21 @@ function fillResults(results) {
 
         line_div.classList.add("line");
 
+        // line_div.innerHTML = `
+        // <div class="line_time">
+        //     <div class="line_start_bus_time">${line.start_bus_time}</div>
+        //     <div class="line_start_time">${line.start_time}</div>
+        // </div>
+        // <div class="line_text">${line.text}</div>
+        // `;
+
         line_div.innerHTML = `  
-        <div class="line_time">
             <div class="line_start_bus_time">${line.start_bus_time}</div>
+            <div class="line_text">${line.text}</div>
             <div class="line_start_time">${line.start_time}</div>
-        </div>
-        <div class="line_text">${line.text}</div>
         `;
 
+
         results_element.append(line_div)
     }
 }

buscribe-web/style.less

@@ -35,45 +35,43 @@ button {
 }
 
 .line {
-  display: flex;
+  display: grid;
-  flex-direction: row;
 
-  margin-bottom: 0.5em;
+  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_time {
+  .line_start_time {
-
+    color: lightgray;
-    text-align: right;
+    font-family: monospace;
-
+    font-size: smaller;
-    display: flex;
-    flex-direction: column;
 
-    flex-shrink: 0;
+    grid-column: times;
+    align-self: start;
+  }
 
-    //padding-top: 0.15em;
+  .line_start_bus_time {
+    font-family: sans-serif;
+    //font-size: small;
 
-    .line_start_time {
+    text-align: right;
-      color: lightgray;
-      font-family: monospace;
-      font-size: smaller;
-    }
 
-    .line_start_bus_time {
+    grid-column: times;
-      font-family: sans-serif;
-      font-size: small;
 
-      display: flex;
+    padding: 0.2em;
-      flex-direction: column;
+    align-self: start;
-      margin-bottom: 0.2em;
-      height: 1.36em; // try to align the baselines
-      justify-content: flex-end;
-      align-content: flex-end;
-    }
   }
 
   .line_text {
-    display: flex;
+    padding: 0.2em;
-    margin-left: 0.5em;
+
+    margin-left: 0.3em;
+
+    grid-column: text;
+    grid-row: span 2;
   }
 }