diff options
| author | Shulhan <ms@kilabit.info> | 2025-08-07 00:58:33 +0700 |
|---|---|---|
| committer | Shulhan <ms@kilabit.info> | 2025-08-07 00:58:33 +0700 |
| commit | d34a7d3def91fb614fb657b81ff8265f19e078c8 (patch) | |
| tree | dee34fd1f82804135fcc42f926080bfe63dce562 | |
| parent | 7bc81d176ca46837c2dfd541e0a06704eaefbebb (diff) | |
| download | lilin-d34a7d3def91fb614fb657b81ff8265f19e078c8.tar.xz | |
_www: improve the layout a little bit
Add a background color for section "Service status" and "Down history"
to highlight it with other text.
Add background color for service that is down in "Service status".
| -rw-r--r-- | _www/index.tmpl | 36 | ||||
| -rw-r--r-- | server.go | 6 |
2 files changed, 26 insertions, 16 deletions
diff --git a/_www/index.tmpl b/_www/index.tmpl index 614b67c..8fcaa9a 100644 --- a/_www/index.tmpl +++ b/_www/index.tmpl @@ -6,7 +6,12 @@ <title>{{.Title}}</title> </head> <style> - .service-status { + h2 { + background-color: papayawhip; + padding-left: 1em; + } + .service-status, + .down-history { display: flex; flex-direction: column; row-gap: 1em; @@ -18,12 +23,16 @@ } .service.header { font-weight: bold; + border-bottom: 1px solid silver; + } + .service.DOWN { + background-color: burlywood; } .service .at { flex: 0 0 16em; } .service .name { - flex: 0 0 10em; + flex: 1 0 10em; } .service .status { flex: 0 0 5em; @@ -33,9 +42,9 @@ } </style> <body> - <h2>{{.Title}}</h2> + <h1>{{.Title}}</h1> - <h3>Service status</h3> + <h2>Service status</h2> <div class="service-status"> <div class="service header"> <span class="at">At</span> @@ -44,23 +53,18 @@ <span class="error">Error</span> </div> {{ range.Services }} - <div class="service"> - <span class="at"> {{if .Last.At}}{{.Last.At}}{{ end }}</span> + {{ $status := statusString .Last.Success }} + <div class="service {{ $status }}"> + <span class="at"> {{.Last.At}}</span> <span class="name"> {{.Name}} </span> - <span class="status"> - {{if .Last.Success}} - <span class="success"> UP </span> - {{else}} - <span class="fail"> DOWN </span> - {{ end }} - </span> - <span class="error">{{if .Last.Error}}{{ .Last.Error }}{{ end }}</span> + <span class="status">{{ $status }}</span> + <span class="error">{{ .Last.Error }}</span> </div> {{ end }} </div> - <h3>Down history</h3> - <div class="service-status"> + <h2>Down history</h2> + <div class="down-history"> <div class="service header"> <span class="at">At</span> <span class="name">Service</span> @@ -113,6 +113,12 @@ func (srv *Server) initTemplate() (err error) { } return ver }, + `statusString`: func(success bool) string { + if success { + return "UP" + } + return "DOWN" + }, }) var tmplraw []byte |