From 6c21834172984897872f9adccb53b2414b03b607 Mon Sep 17 00:00:00 2001
From: HeNine <>
Date: Wed, 6 Oct 2021 10:34:31 +0200
Subject: [PATCH] Change to grid for lines

---
 buscribe-web/script.js  | 15 +++++++++---
 buscribe-web/style.less | 54 ++++++++++++++++++++---------------------
 2 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/buscribe-web/script.js b/buscribe-web/script.js
index a3cf54c..cb3eb7c 100644
--- a/buscribe-web/script.js
+++ b/buscribe-web/script.js
@@ -43,14 +43,21 @@ function fillResults(results) {
 
         line_div.classList.add("line");
 
-        line_div.innerHTML = `
-        <div class="line_time">
+        // 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_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)
     }
 }
\ No newline at end of file
diff --git a/buscribe-web/style.less b/buscribe-web/style.less
index f145016..2f1955a 100644
--- a/buscribe-web/style.less
+++ b/buscribe-web/style.less
@@ -35,45 +35,43 @@ button {
 }
 
 .line {
-  display: flex;
-  flex-direction: row;
+  display: grid;
 
-  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 {
-
-    text-align: right;
-
-    display: flex;
-    flex-direction: column;
+  .line_start_time {
+    color: lightgray;
+    font-family: monospace;
+    font-size: smaller;
 
-    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 {
-      color: lightgray;
-      font-family: monospace;
-      font-size: smaller;
-    }
+    text-align: right;
 
-    .line_start_bus_time {
-      font-family: sans-serif;
-      font-size: small;
+    grid-column: times;
 
-      display: flex;
-      flex-direction: column;
-      margin-bottom: 0.2em;
-      height: 1.36em; // try to align the baselines
-      justify-content: flex-end;
-      align-content: flex-end;
-    }
+    padding: 0.2em;
+    align-self: start;
   }
 
   .line_text {
-    display: flex;
-    margin-left: 0.5em;
+    padding: 0.2em;
+
+    margin-left: 0.3em;
+
+    grid-column: text;
+    grid-row: span 2;
   }
 }
\ No newline at end of file