diff options
| author | Luke Shumaker <lukeshu@lukeshu.com> | 2017-03-21 12:16:43 -0400 |
|---|---|---|
| committer | Luke Shumaker <lukeshu@lukeshu.com> | 2017-03-21 12:16:43 -0400 |
| commit | c636dc1fdd8b148c28269bde105b209fb32c6097 (patch) | |
| tree | a99c3b351b0ec69aeec4c0d73114fad529c8f825 | |
| parent | d1217e66c4d39e49074564cd6045b343fc310dd9 (diff) | |
better layout on bigger screens
| -rw-r--r-- | Makefile | 2 | ||||
| -rwxr-xr-x | index.html.gen | 10 | ||||
| -rw-r--r-- | jarmon-style/style.scss | 2 | ||||
| -rw-r--r-- | jarmon.html.in | 25 | ||||
| -rw-r--r-- | jarmon.html.part | 46 | ||||
| -rw-r--r-- | style.scss | 19 |
6 files changed, 48 insertions, 56 deletions
@@ -3,7 +3,7 @@ all: index.html style.css jarmon-style/jquerytools.tabs.tabs-no-images.css jarmo %: %.go util $(wildcard util/*.go) go build $< -index.html: tls.html.part crtsh.html.part diff.html.part jarmon.html.part +index.html: tls.html.part crtsh.html.part diff.html.part jarmon.html.in crtsh.pem: crtsh-getcerts config-domains.txt NET-crtsh ./crtsh-getcerts $$(sed 's/#.*//' config-domains.txt) > $@ diff --git a/index.html.gen b/index.html.gen index b6fd603..69377fb 100755 --- a/index.html.gen +++ b/index.html.gen @@ -1,5 +1,11 @@ #!/bin/sh +col() { + echo '<div>' + eval "$*" + echo '</div>' +} + echo '<!DOCTYPE html> <html lang="en"> <head> @@ -19,6 +25,8 @@ echo '<!DOCTYPE html> <script src="config-jarmon-winston.js"></script> </head> <body>' -cat jarmon.html.part tls.html.part crtsh.html.part diff.html.part +col sed 's/@name@/proton/' jarmon.html.in +col sed 's/@name@/winston/' jarmon.html.in +col cat tls.html.part crtsh.html.part diff.html.part echo '</body> </html>' diff --git a/jarmon-style/style.scss b/jarmon-style/style.scss index 0ca3d13..2aa3c5f 100644 --- a/jarmon-style/style.scss +++ b/jarmon-style/style.scss @@ -1,7 +1,5 @@ .jarmon { - width: 32%; border: solid 1px black; - padding: -1px; border-radius: 4px; .chartRangeControl { diff --git a/jarmon.html.in b/jarmon.html.in new file mode 100644 index 0000000..9d521f5 --- /dev/null +++ b/jarmon.html.in @@ -0,0 +1,25 @@ +<div> + <div class="jarmon @name@"> + <div class="chart-container"> + <h2 class="title"></h2> + <div class="error"></div> + <div class="chart"></div> + <div class="graph-legend"></div> + </div> + <div class="chartRangeControl"> + <form> + <div class="range-inputs"> + <input name="from" type="datetime-local" step="1" /> + <input name="to" type="datetime-local" step="1" /> + <select name="shortcuts" title="Time range shortcuts - click to select an alternative time range" ></select> + <select name="tzoffset" title="Timezone offset - click to choose a custom timezone offset" ></select> + <input name="action" value="Update" type="button" + title="Graph update - click to update all graphs" /> + </div> + <div class="range-preview" + title="Time range preview - click and drag to select a custom timerange" ></div> + </form> + </div> + <div class="tabbed-chart-interface"></div> + </div> +</div> diff --git a/jarmon.html.part b/jarmon.html.part deleted file mode 100644 index 65ddede..0000000 --- a/jarmon.html.part +++ /dev/null @@ -1,46 +0,0 @@ -<div class="jarmon proton"> - <div class="chart-container"> - <h2 class="title"></h2> - <div class="error"></div> - <div class="chart"></div> - <div class="graph-legend"></div> - </div> - <div class="chartRangeControl"> - <form> - <div class="range-inputs"> - <input name="from" type="datetime-local" step="1" /> - <input name="to" type="datetime-local" step="1" /> - <select name="shortcuts" title="Time range shortcuts - click to select an alternative time range" ></select> - <select name="tzoffset" title="Timezone offset - click to choose a custom timezone offset" ></select> - <input name="action" value="Update" type="button" - title="Graph update - click to update all graphs" /> - </div> - <div class="range-preview" - title="Time range preview - click and drag to select a custom timerange" ></div> - </form> - </div> - <div class="tabbed-chart-interface"></div> -</div> -<div class="jarmon winston"> - <div class="chart-container"> - <h2 class="title"></h2> - <div class="error"></div> - <div class="chart"></div> - <div class="graph-legend"></div> - </div> - <div class="chartRangeControl"> - <form> - <div class="range-inputs"> - <input name="from" type="datetime-local" step="1" /> - <input name="to" type="datetime-local" step="1" /> - <select name="shortcuts" title="Time range shortcuts - click to select an alternative time range" ></select> - <select name="tzoffset" title="Timezone offset - click to choose a custom timezone offset" ></select> - <input name="action" value="Update" type="button" - title="Graph update - click to update all graphs" /> - </div> - <div class="range-preview" - title="Time range preview - click and drag to select a custom timerange" ></div> - </form> - </div> - <div class="tabbed-chart-interface"></div> -</div> @@ -9,12 +9,16 @@ body { margin: 0; display: flex; - flex-direction: column; - flex-wrap: wrap; + flex-direction: row; align-items: center; -} -body > * { - margin: auto; + & > * { + flex-direction: column; + align-items: center; + margin: auto; + & > * { + margin: auto; + } + } } * { box-sizing: border-box; @@ -63,7 +67,10 @@ table { color: black; } } -/* generic time formatting */ +/* generic time formatting - for datetimes that we want to render as + just a date, but still want to be sortable, we a construct like + `<time>DATE<span class=time>TIME</span></time>`, then use this to + hide the TIME part of it. */ time .time { display: none } |