From 8e2d131839a5a1b904daeefbb4cc1e7d628c9d9b Mon Sep 17 00:00:00 2001 From: Hunter Long Date: Tue, 26 Jun 2018 23:45:00 -0700 Subject: [PATCH] scss --- .gitignore | 3 +- html/css/base.css | 303 +++++++++++++++----------------------- html/scss/base.scss | 255 ++++++++++++++++++++++++++++++++ html/scss/light-base.scss | 251 +++++++++++++++++++++++++++++++ html/tmpl/index.html | 60 ++++---- services.go | 5 +- 6 files changed, 658 insertions(+), 219 deletions(-) create mode 100644 html/scss/base.scss create mode 100644 html/scss/light-base.scss diff --git a/.gitignore b/.gitignore index 1df8e3c9..22e0cafc 100644 --- a/.gitignore +++ b/.gitignore @@ -5,4 +5,5 @@ statup.db plugins/*.so data build -vendor \ No newline at end of file +vendor +html/scss/.sass-cache \ No newline at end of file diff --git a/html/css/base.css b/html/css/base.css index a857967d..fd0c9bb5 100644 --- a/html/css/base.css +++ b/html/css/base.css @@ -1,255 +1,196 @@ -HTML,BODY { - background-color: #efefef; -} +HTML, BODY { + background-color: #fcfcfc; } .container { - padding-top: 20px; - padding-bottom: 20px; - max-width: 860px; -} + padding-top: 20px; + padding-bottom: 20px; + max-width: 860px; } .online_list .badge { - margin-top: 0.2rem; -} + margin-top: 0.2rem; } .navbar { - margin-bottom: 30px; -} + margin-bottom: 30px; } .btn-sm { - line-height: 1.3; - font-size: 0.75rem; -} + line-height: 1.3; + font-size: 0.75rem; } .view_service_btn { - position: absolute; - bottom: -40px; - right: 40px; -} + position: absolute; + bottom: -40px; + right: 40px; } .service_lower_info { - position: absolute; - bottom: -40px; - left: 40px; - color: #d1ffca; - font-size: 0.85rem; -} + position: absolute; + bottom: -40px; + left: 40px; + color: #d1ffca; + font-size: 0.85rem; } .failing_bg { - background-color: #ff4e4e !important; - font-weight: bold; -} + background-color: #ff4e4e !important; + font-weight: bold; } .lg_number { - font-size: 26pt; - font-weight: bold; - display: block; - color: #3e3e3e; -} + font-size: 26pt; + font-weight: bold; + display: block; + color: #3e3e3e; } .text_perfect { - color: #33b418; - text-shadow: 0px 1px 0 #0e6702; -} + color: #33b418; + text-shadow: 0px 1px 0 #0e6702; } .text_good { - color: #33b418; - text-shadow: 0px 1px 0 #0e6702; -} + color: #33b418; + text-shadow: 0px 1px 0 #0e6702; } .text_ok { - color: #33b418; - text-shadow: 0px 1px 0 #0e6702; -} + color: #33b418; + text-shadow: 0px 1px 0 #0e6702; } .text_bad { - color: #33b418; - text-shadow: 0px 1px 0 #0e6702; -} + color: #33b418; + text-shadow: 0px 1px 0 #0e6702; } .stats_area { - text-align: center; - color: #a5a5a5; -} + text-align: center; + color: #a5a5a5; } .offline_bg { - background-color: white !important; - padding-bottom: 70px !important; -} - -.online_list { - -} + background-color: white !important; + padding-bottom: 70px !important; } .lower_canvas { - position: absolute; - bottom: -60px; - height: 60px; - left: 15px; - width: 800px; - background-color: #48d338; - padding: 17px 10px; -} + height: 55px; + width: 100%; + background-color: #48d338; + padding: 17px 10px; } .lower_canvas SPAN { - font-size: 0.85rem; -} + font-size: 1rem; } .offline_lower_canvas { - position: absolute; - bottom: -120px; - height: 60px; - left: -25px; - width: 805px; - padding: 17px 10px; -} + position: absolute; + bottom: -120px; + height: 60px; + left: -25px; + width: 805px; + padding: 17px 10px; } .offline_lower_canvas SPAN { - font-weight: bold; - font-size: 0.85rem; -} + font-weight: bold; + font-size: 0.85rem; } .offline_lower_canvas A { - background-color: #c51b1a; - border: 1px solid #bb1727; -} + background-color: #c51b1a; + border: 1px solid #bb1727; } .footer { - text-decoration: none; - margin-top: 20px; -} + text-decoration: none; + margin-top: 20px; } .footer A { - color: #aaaaaa; - text-decoration: none; -} + color: #aaaaaa; + text-decoration: none; } .footer A:HOVER { - color: #6d6d6d; -} + color: #6d6d6d; } .online_badge { - color: #fff; - background-color: #35b317; -} + color: #fff; + background-color: #35b317; } .offline_badge { - color: #fff; - background-color: #c51919; -} + color: #fff; + background-color: #c51919; } .progress { - margin-top: -20px; - margin-left: -20px; - margin-bottom: 15px; - width: calc(100% + 40px); - height: 3px; - border-radius: 0; -} + margin-top: -20px; + margin-left: -20px; + margin-bottom: 15px; + width: calc(100% + 40px); + height: 3px; + border-radius: 0; } .card-body { - overflow: hidden; -} + overflow: hidden; } .card-body H4 A { - color: #239e07; - text-decoration: none; -} + color: #239e07; + text-decoration: none; } .chart-container { - position: relative; - height: 20vh; - width: 93vh; - margin-left: -52px; - margin-bottom: -30px; -} - + position: relative; + height: 170px; + width: 100%; } .btn-primary { - background-color: white; - border: 1px solid #b9b9b9; - color: #353535; - height: 35px; - padding: 5px 15px; -} - -.card-body { - padding-bottom: 85px; -} + background-color: white; + border: 1px solid #b9b9b9; + color: #353535; + height: 35px; + padding: 5px 15px; } @media (max-width: 767px) { + .sm-container { + margin-top: 40px !important; + padding: 0 !important; } - .sm-container { - margin-top: 40px !important; - padding: 0 !important; - } + .list-group-item H5 { + font-size: 0.9rem; } - .list-group-item H5 { - font-size: 0.9rem; - } + .container { + padding: 0 !important; } - .chart-container { - position: relative; - height: 20vh; - width: 100vw; - } + .navbar { + margin-left: 0px; + margin-top: 0px; + width: 100%; + margin-bottom: 0; } - .container { - padding: 0 !important; - } + .card-body { + font-size: 6pt; + padding: 5px 5px; } - .navbar { - margin-left: 0px; - margin-top: 0px; - width: 100%; - margin-bottom: 0; - } + .lg_number { + font-size: 1.5rem; } - .card-body { - font-size: 6pt; - padding: 5px 10px; - height: 350px; - } + .stats_area { + margin-top: 35px !important; + margin-bottom: 35px !important; } - .lg_number { - font-size: 1.4rem; - } + .stats_area .col-4 { + padding-left: 0; + padding-right: 0; } - .stats_area { - margin-top: 25px !important; - margin-bottom: 20px !important; - } + .lower_canvas SPAN { + font-size: 0.9rem; + float: left; } - .stats_area .col-4 { - padding-left: 0; - padding-right: 0; - } + .btn-sm { + line-height: 0.9rem; + font-size: 0.65rem; } - .lower_canvas { - bottom: -3.65rem; - width: 98vw; - } + .full-col-12 { + padding-left: 0px; + padding-right: 0px; } - .lower_canvas SPAN { - font-size: 0.75rem; - float: left; - } + .card { + border: 0; + border-radius: 0; } - .btn-sm { - line-height: 0.75rem; - font-size: 0.65rem; - } + .list-group-item { + border-top: 1px solid #e4e4e4; + border: 0px; } - .offline_bg { - padding-bottom: 0 !important; - height: 240px !important; - } + .list-group-item:first-child { + border-top-left-radius: 0; + border-top-right-radius: 0; } - .offline_lower_canvas { - width: 100vw; - } - .col-12 { - padding-left: 5px; - padding-right: 5px; - } -} \ No newline at end of file + .list-group-item:last-child { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; } } + +/*# sourceMappingURL=base.css.map */ diff --git a/html/scss/base.scss b/html/scss/base.scss new file mode 100644 index 00000000..30d6fe51 --- /dev/null +++ b/html/scss/base.scss @@ -0,0 +1,255 @@ +$background-color: #262626; +$max-width: 860px; +$card-background: #121212; +$card-stats-color: #dfdfdf; + + +HTML,BODY { + background-color: $background-color; +} + +.container { + padding-top: 20px; + padding-bottom: 20px; + max-width: $max-width; +} + +.online_list .badge { + margin-top: 0.2rem; +} + +.navbar { + margin-bottom: 30px; +} + +.btn-sm { + line-height: 1.3; + font-size: 0.75rem; +} + +.view_service_btn { + position: absolute; + bottom: -40px; + right: 40px; +} + +.service_lower_info { + position: absolute; + bottom: -40px; + left: 40px; + color: #d1ffca; + font-size: 0.85rem; +} + +.failing_bg { + background-color: #ff4e4e !important; + font-weight: bold; +} + +.lg_number { + font-size: 26pt; + font-weight: bold; + display: block; + color: $card-stats-color; +} + +.text_perfect { + color: #33b418; + text-shadow: 0px 1px 0 #0e6702; +} + +.text_good { + color: #33b418; + text-shadow: 0px 1px 0 #0e6702; +} + +.text_ok { + color: #33b418; + text-shadow: 0px 1px 0 #0e6702; +} + +.text_bad { + color: #33b418; + text-shadow: 0px 1px 0 #0e6702; +} + +.stats_area { + text-align: center; + color: #a5a5a5; +} + +.offline_bg { + background-color: white !important; + padding-bottom: 70px !important; +} + +.online_list { + +} + +.lower_canvas { + height: 55px; + width: 100%; + background-color: #48d338; + padding: 17px 10px; +} + +.lower_canvas SPAN { + font-size: 1rem; +} + +.offline_lower_canvas { + position: absolute; + bottom: -120px; + height: 60px; + left: -25px; + width: 805px; + padding: 17px 10px; +} + +.offline_lower_canvas SPAN { + font-weight: bold; + font-size: 0.85rem; +} + +.offline_lower_canvas A { + background-color: #c51b1a; + border: 1px solid #bb1727; +} + +.footer { + text-decoration: none; + margin-top: 20px; +} + +.footer A { + color: #aaaaaa; + text-decoration: none; +} + +.footer A:HOVER { + color: #6d6d6d; +} + +.online_badge { + color: #fff; + background-color: #35b317; +} + +.offline_badge { + color: #fff; + background-color: #c51919; +} + +.progress { + margin-top: -20px; + margin-left: -20px; + margin-bottom: 15px; + width: calc(100% + 40px); + height: 3px; + border-radius: 0; +} + +.card { + background-color: $card-background; +} + +.card-body { + overflow: hidden; +} + +.card-body H4 A { + color: #239e07; + text-decoration: none; +} + +.chart-container { + position: relative; + height: 170px; + width: 100%; +} + +.btn-primary { + background-color: white; + border: 1px solid #b9b9b9; + color: #353535; + height: 35px; + padding: 5px 15px; +} + +@media (max-width: 767px) { + + .sm-container { + margin-top: 40px !important; + padding: 0 !important; + } + + .list-group-item H5 { + font-size: 0.9rem; + } + + .container { + padding: 0 !important; + } + + .navbar { + margin-left: 0px; + margin-top: 0px; + width: 100%; + margin-bottom: 0; + } + + .card-body { + font-size: 6pt; + padding: 5px 5px; + } + + .lg_number { + font-size: 1.5rem; + } + + .stats_area { + margin-top: 35px !important; + margin-bottom: 35px !important; + } + + .stats_area .col-4 { + padding-left: 0; + padding-right: 0; + } + + .lower_canvas SPAN { + font-size: 0.9rem; + float: left; + } + + .btn-sm { + line-height: 0.9rem; + font-size: 0.65rem; + } + + .full-col-12 { + padding-left: 0px; + padding-right: 0px; + } + + .card { + border: 0; + border-radius: 0; + } + + .list-group-item { + border-top: 1px solid #e4e4e4; + border: 0px; + } + + .list-group-item:first-child { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + + .list-group-item:last-child { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } +} \ No newline at end of file diff --git a/html/scss/light-base.scss b/html/scss/light-base.scss new file mode 100644 index 00000000..c4e7a6c4 --- /dev/null +++ b/html/scss/light-base.scss @@ -0,0 +1,251 @@ +$background-color: #fcfcfc; +$max-width: 860px; +$primary-color: #333; +$card-background: #fff; + + +HTML,BODY { + background-color: $background-color; +} + +.container { + padding-top: 20px; + padding-bottom: 20px; + max-width: $max-width; +} + +.online_list .badge { + margin-top: 0.2rem; +} + +.navbar { + margin-bottom: 30px; +} + +.btn-sm { + line-height: 1.3; + font-size: 0.75rem; +} + +.view_service_btn { + position: absolute; + bottom: -40px; + right: 40px; +} + +.service_lower_info { + position: absolute; + bottom: -40px; + left: 40px; + color: #d1ffca; + font-size: 0.85rem; +} + +.failing_bg { + background-color: #ff4e4e !important; + font-weight: bold; +} + +.lg_number { + font-size: 26pt; + font-weight: bold; + display: block; + color: #3e3e3e; +} + +.text_perfect { + color: #33b418; + text-shadow: 0px 1px 0 #0e6702; +} + +.text_good { + color: #33b418; + text-shadow: 0px 1px 0 #0e6702; +} + +.text_ok { + color: #33b418; + text-shadow: 0px 1px 0 #0e6702; +} + +.text_bad { + color: #33b418; + text-shadow: 0px 1px 0 #0e6702; +} + +.stats_area { + text-align: center; + color: #a5a5a5; +} + +.offline_bg { + background-color: white !important; + padding-bottom: 70px !important; +} + +.online_list { + +} + +.lower_canvas { + height: 55px; + width: 100%; + background-color: #48d338; + padding: 17px 10px; +} + +.lower_canvas SPAN { + font-size: 1rem; +} + +.offline_lower_canvas { + position: absolute; + bottom: -120px; + height: 60px; + left: -25px; + width: 805px; + padding: 17px 10px; +} + +.offline_lower_canvas SPAN { + font-weight: bold; + font-size: 0.85rem; +} + +.offline_lower_canvas A { + background-color: #c51b1a; + border: 1px solid #bb1727; +} + +.footer { + text-decoration: none; + margin-top: 20px; +} + +.footer A { + color: #aaaaaa; + text-decoration: none; +} + +.footer A:HOVER { + color: #6d6d6d; +} + +.online_badge { + color: #fff; + background-color: #35b317; +} + +.offline_badge { + color: #fff; + background-color: #c51919; +} + +.progress { + margin-top: -20px; + margin-left: -20px; + margin-bottom: 15px; + width: calc(100% + 40px); + height: 3px; + border-radius: 0; +} + +.card-body { + overflow: hidden; +} + +.card-body H4 A { + color: #239e07; + text-decoration: none; +} + +.chart-container { + position: relative; + height: 170px; + width: 100%; +} + +.btn-primary { + background-color: white; + border: 1px solid #b9b9b9; + color: #353535; + height: 35px; + padding: 5px 15px; +} + +@media (max-width: 767px) { + + .sm-container { + margin-top: 40px !important; + padding: 0 !important; + } + + .list-group-item H5 { + font-size: 0.9rem; + } + + .container { + padding: 0 !important; + } + + .navbar { + margin-left: 0px; + margin-top: 0px; + width: 100%; + margin-bottom: 0; + } + + .card-body { + font-size: 6pt; + padding: 5px 5px; + } + + .lg_number { + font-size: 1.5rem; + } + + .stats_area { + margin-top: 35px !important; + margin-bottom: 35px !important; + } + + .stats_area .col-4 { + padding-left: 0; + padding-right: 0; + } + + .lower_canvas SPAN { + font-size: 0.9rem; + float: left; + } + + .btn-sm { + line-height: 0.9rem; + font-size: 0.65rem; + } + + .full-col-12 { + padding-left: 0px; + padding-right: 0px; + } + + .card { + border: 0; + border-radius: 0; + } + + .list-group-item { + border-top: 1px solid #e4e4e4; + border: 0px; + } + + .list-group-item:first-child { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + + .list-group-item:last-child { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } +} \ No newline at end of file diff --git a/html/tmpl/index.html b/html/tmpl/index.html index 2c5b74c5..1b0a26c4 100644 --- a/html/tmpl/index.html +++ b/html/tmpl/index.html @@ -26,10 +26,10 @@
{{ .Core.Description }}
{{ end }} -
+
{{ range .Services }} - + {{ .Name }} {{if .Online}} ONLINE @@ -42,12 +42,11 @@
-
- +
{{ range .Services }} {{template "footer"}} @@ -146,8 +133,8 @@ var chartdata = new Chart(ctx, { }, responsiveAnimationDuration: 0, animation: { - "duration": 0, - "onComplete": function() { + duration: 3500, + onComplete: function() { var chartInstance = this.chart, ctx = chartInstance.ctx; @@ -208,8 +195,11 @@ var chartdata = new Chart(ctx, { ctx.fillStyle = '#ffa7a2'; ctx.fillText(highestNum+"ms", hxH - 40, hyH + 15); - ctx.fillStyle = '#54944b'; - ctx.fillText(lowestnum+"ms", hxL, hyL - 5); + ctx.fillStyle = '#45d642'; + ctx.fillText(lowestnum+"ms", hxL, hyL + 10); + + console.log("done service_id_{{.Id}}") + }); } }, @@ -225,7 +215,7 @@ var chartdata = new Chart(ctx, { ticks: { fontSize: 20, display: false, - beginAtZero: true + beginAtZero: false }, gridLines: { display:false diff --git a/services.go b/services.go index e3aeee4a..5c789d26 100644 --- a/services.go +++ b/services.go @@ -107,8 +107,9 @@ type DateScan struct { func (s *Service) GraphData() string { var d []DateScan - since := time.Now().Add(time.Hour*-24 + time.Minute*0 + time.Second*0) - sql := fmt.Sprintf("SELECT date_trunc('minute', created_at), AVG(latency)*1000 AS value FROM hits WHERE service=%v AND created_at > '%v' GROUP BY 1 ORDER BY date_trunc ASC;", s.Id, since.Format(time.RFC3339)) + increment := "minute" + since := time.Now().Add(time.Hour*-12 + time.Minute*0 + time.Second*0) + sql := fmt.Sprintf("SELECT date_trunc('%v', created_at), AVG(latency)*1000 AS value FROM hits WHERE service=%v AND created_at > '%v' GROUP BY 1 ORDER BY date_trunc ASC;", increment, s.Id, since.Format(time.RFC3339)) dated, err := dbSession.Query(db.Raw(sql)) if err != nil { fmt.Println(err)