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 = `
-
+ // line_div.innerHTML = `
+ //
+ //
${line.start_bus_time}
+ //
${line.start_time}
+ //
+ //
${line.text}
+ // `;
+
+ line_div.innerHTML = `
${line.start_bus_time}
+
${line.text}
${line.start_time}
-
- ${line.text}
`;
+
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