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