diff --git a/buscribe-web/form.less b/buscribe-web/form.less new file mode 100644 index 0000000..f2a72bd --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/buscribe-web/index.html b/buscribe-web/index.html index 07f4057..730ce60 100644 --- a/buscribe-web/index.html +++ b/buscribe-web/index.html @@ -10,12 +10,15 @@
- -
- - - -
+
+ +
+
+ + + +
diff --git a/buscribe-web/line.less b/buscribe-web/line.less new file mode 100644 index 0000000..429264b --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/buscribe-web/style.less b/buscribe-web/style.less index 2f1955a..2ded3df 100644 --- a/buscribe-web/style.less +++ b/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; @@ -32,46 +18,4 @@ button { background: #fff; 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; - } } \ No newline at end of file