extern/gatus
1
0
Fork 0
mirror of https://github.com/TwiN/gatus.git synced 2024-11-22 07:53:38 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve mobile-friendliness and add logo

Browse Source
This commit is contained in:
TwinProduction 2020-08-21 22:07:46 -04:00
parent e1721fa237
commit 04d6c8bb82
6 changed files with 29 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -1,4 +1,4 @@
# gatus ![Gatus](static/logo-with-name.png)
![build](https://github.com/TwinProduction/gatus/workflows/build/badge.svg?branch=master) ![build](https://github.com/TwinProduction/gatus/workflows/build/badge.svg?branch=master)
[![Go Report Card](https://goreportcard.com/badge/github.com/TwinProduction/gatus)](https://goreportcard.com/report/github.com/TwinProduction/gatus) [![Go Report Card](https://goreportcard.com/badge/github.com/TwinProduction/gatus)](https://goreportcard.com/report/github.com/TwinProduction/gatus)

36
static/index.html
View File

@ -31,11 +31,18 @@
} }
.status { .status {
cursor: pointer; cursor: pointer;
transition: opacity 500ms ease-in-out; transition: all 500ms ease-in-out;
overflow-x: hidden;
padding: .25em 0;
color: white;
}
.title {
font-size: 2.5rem;
} }
.status:hover { .status:hover {
opacity: 0.7; opacity: 0.7;
transition: opacity 100ms ease-in-out; transition: opacity 100ms ease-in-out;
color: black;
} }
.status-over-time { .status-over-time {
overflow: auto; overflow: auto;
@ -48,6 +55,9 @@
opacity: 0.5; opacity: 0.5;
margin-top: 5px; margin-top: 5px;
} }
.status-min-max-ms {
overflow-x: hidden;
}
#tooltip { #tooltip {
position: fixed; position: fixed;
top: 0; top: 0;
@ -76,9 +86,16 @@
</style> </style>
</head> </head>
<body> <body>
<div class="container my-3 rounded p-4 border shadow"> <div class="container my-3 rounded p-3 border shadow">
<div class="mb-5"> <div class="mb-2">
<div class="display-4">Health Status</div> <div class="row">
<div class="col-8 text-left my-auto">
<div class="title display-4">Health Status</div>
</div>
<div class="col-4 text-right">
<img src="logo.png" alt="GaTuS" style="position: relative; min-width: 50px; max-width: 200px; width: 20%;"/>
</div>
</div>
</div> </div>
<div id="results"></div> <div id="results"></div>
</div> </div>
@ -136,6 +153,9 @@
let tooltipBoundingClientRect = document.querySelector('#tooltip').getBoundingClientRect(); let tooltipBoundingClientRect = document.querySelector('#tooltip').getBoundingClientRect();
if (targetLeftPosition + window.scrollX + tooltipBoundingClientRect.width + 50 > document.body.getBoundingClientRect().width) { if (targetLeftPosition + window.scrollX + tooltipBoundingClientRect.width + 50 > document.body.getBoundingClientRect().width) {
targetLeftPosition = element.getBoundingClientRect().x - tooltipBoundingClientRect.width + element.getBoundingClientRect().width; targetLeftPosition = element.getBoundingClientRect().x - tooltipBoundingClientRect.width + element.getBoundingClientRect().width;
if (targetLeftPosition < 0) {
targetLeftPosition += -targetLeftPosition;
}
} }
if (targetTopPosition + window.scrollY + tooltipBoundingClientRect.height + 50 > document.body.getBoundingClientRect().height) { if (targetTopPosition + window.scrollY + tooltipBoundingClientRect.height + 50 > document.body.getBoundingClientRect().height) {
targetTopPosition = element.getBoundingClientRect().y - (tooltipBoundingClientRect.height + 10) targetTopPosition = element.getBoundingClientRect().y - (tooltipBoundingClientRect.height + 10)
@ -198,11 +218,11 @@
output += "" output += ""
+ "<div class='container py-3 border-left border-right border-top border-black'>" + "<div class='container py-3 border-left border-right border-top border-black'>"
+ " <div class='row mb-2'>" + " <div class='row mb-2'>"
+ " <div class='col-10'>" + " <div class='col-md-10'>"
+ " <span class='font-weight-bold'>" + serviceName + "</span> <span class='text-secondary font-weight-lighter'>- " + hostname + "</span>" + " <span class='font-weight-bold'>" + serviceName + "</span> <span class='text-secondary font-weight-lighter'>- " + hostname + "</span>"
+ " </div>" + " </div>"
+ " <div class='col-2 text-right'>" + " <div class='col-md-2 text-right'>"
+ " <span class='font-weight-lighter'>" + (minResponseTime === maxResponseTime ? minResponseTime : (minResponseTime + "-" + maxResponseTime)) + "ms</span>" + " <span class='font-weight-lighter status-min-max-ms'>" + (minResponseTime === maxResponseTime ? minResponseTime : (minResponseTime + "-" + maxResponseTime)) + "ms</span>"
+ " </div>" + " </div>"
+ " </div>" + " </div>"
+ " <div class='row'>" + " <div class='row'>"
@ -231,7 +251,7 @@
let hh = ((date.getHours())<10?"0":"")+""+(date.getHours()); let hh = ((date.getHours())<10?"0":"")+""+(date.getHours());
let mm = ((date.getMinutes())<10?"0":"")+""+(date.getMinutes()); let mm = ((date.getMinutes())<10?"0":"")+""+(date.getMinutes());
let ss = ((date.getSeconds())<10?"0":"")+""+(date.getSeconds()); let ss = ((date.getSeconds())<10?"0":"")+""+(date.getSeconds());
return YYYY+"-"+MM+"-"+DD+" "+hh+":"+mm+":"+ss; return YYYY + "-" + MM + "-" + DD + " " + hh + ":" + mm + ":" + ss;
} }
function generatePrettyTimeAgo(t) { function generatePrettyTimeAgo(t) {

BIN
static/logo-256px.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
static/logo-candidate.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

BIN
static/logo-with-name.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
static/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB