archive/healthchecks_healthchecks
0
0
Fork 0
mirror of https://github.com/healthchecks/healthchecks.git synced 2025-04-03 04:15:29 +00:00
Code Issues Projects Releases Wiki Activity

Proposing addition of a visual indication to favicon on down ()

Browse source 
Implement dynamic favicon in the "Checks" and "Details" pages

Fixes:
This commit is contained in:
Prince Khunt 2024-03-26 20:35:23 +05:30 • committed by GitHub
parent bc5e9fde80
commit 249b9e163d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 36 additions and 3 deletions

6
static/img/favicon.svg Normal file
View file

@ -0,0 +1,6 @@
<svg width="120mm" height="120mm" version="1.1" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-27.502 -156.01)">
<path d="m38.253 241.39 2.9915-19.772 23.014-0.13391 11.092-63.965 18.257-2e-3 7.7596 46.333-13.449 0.0645-9.8934 57.109-18.286-9e-3 -3.23-19.585z" fill="#33333f"/>
<path d="m94.923 274.5-9.4557-56.483 1.4735-8.4919 16.484 0.0429 2.4469 12.936 30.88 0.0734-2.1276 19.624-16.084 0.0801-5.347 32.207z" fill="#5cb85f"/>
</g>
</svg>
Side by side

After

(image error) Size: 484 B

6
static/img/favicon_down.svg Normal file
View file

@ -0,0 +1,6 @@
<svg width="120mm" height="120mm" version="1.1" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-27.502 -156.01)">
<path transform="matrix(.26458 0 0 .26458 27.502 156.01)" d="m249.85 5.6953-69.002 0.0078125-41.924 241.76-86.982 0.50586-11.307 74.727 68.996 0.1543 12.207 74.021 69.113 0.0332 4.1894-24.182a133.82 133.82 0 0 1-10.164-50.982 133.82 133.82 0 0 1 34.521-89.625l8.8457-51.057 50.832-0.24414-29.326-175.12z" fill="#33333f"/>
<path d="m138.68 241.13a26.829 26.829 0 0 1-26.829 26.829 26.829 26.829 0 0 1-26.829-26.829 26.829 26.829 0 0 1 26.829-26.829 26.829 26.829 0 0 1 26.829 26.829z" color="#000000" fill="#ff2424" style="-inkscape-stroke:none;paint-order:stroke fill markers"/>
</g>
</svg>
Side by side

After

(image error) Size: 745 B

14
static/js/checks.js
View file

@ -240,6 +240,17 @@ $(function () {
}
});
if(data.title.includes('down')){
// Get the favicon element
var favicon = document.querySelector('link[rel="icon"]');
//replace the favicon with the down favicon
favicon.href = base + "/static/img/favicon_down.svg";
}
else{
var favicon = document.querySelector('link[rel="icon"]');
favicon.href = base + "/static/img/favicon.svg";
}
if (document.title != data.title) {
document.title = data.title;
}
@ -280,5 +291,4 @@ $(function () {
$(".tooltip-inner").text("Copied!");
});
});
});

11
static/js/details.js
View file

@ -110,6 +110,17 @@ $(function () {
$("#downtimes").html(data.downtimes);
}
if(data.status == "down"){
// Get the favicon element
var favicon = document.querySelector('link[rel="icon"]');
//replace the favicon with the down favicon
favicon.href = "/static/img/favicon_down.svg";
}
else{
var favicon = document.querySelector('link[rel="icon"]');
favicon.href = "/static/img/favicon.svg";
}
if (document.title != data.title) {
document.title = data.title;
}

2
templates/base.html
View file

@ -15,7 +15,7 @@
{% if request.user.is_authenticated and request.profile.theme == 'dark' %}
<meta name="theme-color" content="#18181b">
{% endif %}
<link rel="icon" type="image/x-icon" href="{% static 'img/favicon.ico' %}">
<link rel="icon" type="image/svg+xml" href="{% static 'img/favicon.svg' %}">
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'img/apple-touch-180.png' %}">
{% block head %}{% endblock %}
{% compress css %}