From 67560c96e1ae54f99349e39306a37ab3a24657e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C4=93teris=20Caune?= Date: Wed, 3 Feb 2021 10:44:35 +0200 Subject: [PATCH] Change icon CSS class prefix to work around Fanboy's filter list Problem: if you use uBlock Origin, and enable the "Fanboy's Social" filter list, Healthchecks does not show Telegram or WhatsApp icons. This is because the filter list contains "##.icon-telegram" and "##.icon-whatsapp" entries. This commit changes the CSS class prefix to "ic-". So we're now using icon classes like "ic-telegram" and "ic-whatsapp". As a bonus, we save 2 bytes in HTML per displayed icon :-) --- CHANGELOG.md | 1 + hc/api/admin.py | 2 +- hc/front/tests/test_channels.py | 2 +- hc/front/tests/test_my_checks.py | 6 +- static/css/base.css | 8 +-- static/css/channels.css | 2 +- static/css/icomoon.css | 91 ++++++++++++------------- static/css/settings.css | 2 +- static/fonts/icomoon.ttf | Bin 13896 -> 13896 bytes static/fonts/icomoon.woff | Bin 13972 -> 13972 bytes static/js/checks.js | 8 +-- static/js/details.js | 2 +- static/js/snippet-copy.js | 2 +- templates/accounts/project.html | 4 +- templates/base.html | 2 +- templates/front/channels.html | 2 +- templates/front/details.html | 4 +- templates/front/details_events.html | 4 +- templates/front/last_ping_cell.html | 2 +- templates/front/log.html | 4 +- templates/front/my_checks_desktop.html | 16 ++--- templates/front/projects.html | 2 +- templates/front/welcome.html | 8 +-- 23 files changed, 87 insertions(+), 87 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e650f8f6..c98348d9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,7 @@ All notable changes to this project will be documented in this file. ## Bug Fixes - Fix unwanted HTML escaping in SMS and WhatsApp notifications - Fix a crash when adding an integration for an empty Trello account +- Change icon CSS class prefix to 'ic-' to work around Fanboy's filter list ## v1.18.0 - 2020-12-09 diff --git a/hc/api/admin.py b/hc/api/admin.py index bcc766f1..a95fa850 100644 --- a/hc/api/admin.py +++ b/hc/api/admin.py @@ -199,7 +199,7 @@ class ChannelsAdmin(admin.ModelAdmin): if obj.kind == "email" and not obj.email_verified: note = " (not verified)" - return f'   {obj.kind}{note}' + return f'   {obj.kind}{note}' def ok(self, obj): return False if obj.last_error else True diff --git a/hc/front/tests/test_channels.py b/hc/front/tests/test_channels.py index c0613df3..84db5671 100644 --- a/hc/front/tests/test_channels.py +++ b/hc/front/tests/test_channels.py @@ -119,5 +119,5 @@ class ChannelsTestCase(BaseTestCase): r = self.client.get(self.channels_url) self.assertNotContains(r, "Add Integration", status_code=200) - self.assertNotContains(r, "icon-delete") + self.assertNotContains(r, "ic-delete") self.assertNotContains(r, "edit_webhook") diff --git a/hc/front/tests/test_my_checks.py b/hc/front/tests/test_my_checks.py index 83f1dbfb..3b17312f 100644 --- a/hc/front/tests/test_my_checks.py +++ b/hc/front/tests/test_my_checks.py @@ -55,7 +55,7 @@ class MyChecksTestCase(BaseTestCase): self.client.login(username="alice@example.org", password="password") r = self.client.get(self.url) - self.assertContains(r, "icon-up") + self.assertContains(r, "ic-up") def test_it_shows_red_check(self): self.check.last_ping = timezone.now() - td(days=3) @@ -64,7 +64,7 @@ class MyChecksTestCase(BaseTestCase): self.client.login(username="alice@example.org", password="password") r = self.client.get(self.url) - self.assertContains(r, "icon-down") + self.assertContains(r, "ic-down") def test_it_shows_amber_check(self): self.check.last_ping = timezone.now() - td(days=1, minutes=30) @@ -73,7 +73,7 @@ class MyChecksTestCase(BaseTestCase): self.client.login(username="alice@example.org", password="password") r = self.client.get(self.url) - self.assertContains(r, "icon-grace") + self.assertContains(r, "ic-grace") def test_it_hides_add_check_button(self): self.profile.check_limit = 0 diff --git a/static/css/base.css b/static/css/base.css index 435713c2..e9af141f 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -99,10 +99,10 @@ body { width: 24px; } -.status.icon-up, .status.icon-started { color: #5cb85c; } -.status.icon-new, .status.icon-paused { color: #CCC; } -.status.icon-grace { color: #f0ad4e; } -.status.icon-down { color: #d9534f; } +.status.ic-up, .status.ic-started { color: #5cb85c; } +.status.ic-new, .status.ic-paused { color: #CCC; } +.status.ic-grace { color: #f0ad4e; } +.status.ic-down { color: #d9534f; } .label.label-start { background-color: #FFF; diff --git a/static/css/channels.css b/static/css/channels.css index 9142a094..7218e447 100644 --- a/static/css/channels.css +++ b/static/css/channels.css @@ -228,7 +228,7 @@ table.channels-table > tbody > tr > th { margin-bottom: 0; } -.page-channels .icon-delete { +.page-channels .ic-delete { font-size: 16px; } diff --git a/static/css/icomoon.css b/static/css/icomoon.css index 5e1e896b..a92052df 100644 --- a/static/css/icomoon.css +++ b/static/css/icomoon.css @@ -1,15 +1,14 @@ @font-face { font-family: 'icomoon'; - src: url('../fonts/icomoon.eot?y9u69e'); - src: url('../fonts/icomoon.eot?y9u69e#iefix') format('embedded-opentype'), - url('../fonts/icomoon.ttf?y9u69e') format('truetype'), - url('../fonts/icomoon.woff?y9u69e') format('woff'), - url('../fonts/icomoon.svg?y9u69e#icomoon') format('svg'); + src: + url('../fonts/icomoon.ttf?ed2ba') format('truetype'), + url('../fonts/icomoon.woff?ed2ba') format('woff'), + url('../fonts/icomoon.svg?ed2ba#icomoon') format('svg'); font-weight: normal; font-style: normal; } -[class^="icon-"], [class*=" icon-"] { +[class^="ic-"], [class*=" ic-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: never; @@ -24,147 +23,147 @@ -moz-osx-font-smoothing: grayscale; } -.icon-signal:before { +.ic-signal:before { content: "\e91c"; color: #2592e9; } -.icon-linenotify:before { +.ic-linenotify:before { content: "\e91b"; color: #00c300; } -.icon-call:before { +.ic-call:before { content: "\e91a"; color: #e81a34; } -.icon-spike:before { +.ic-spike:before { content: "\e919"; color: #007bff; } -.icon-zulip:before { +.ic-zulip:before { content: "\e918"; color: #1e9459; } -.icon-pd:before { +.ic-pd:before { content: "\e90b"; color: #04ac38; } -.icon-shell:before { +.ic-shell:before { content: "\e917"; } -.icon-msteams:before { +.ic-msteams:before { content: "\e916"; color: #4e56be; } -.icon-opsgenie:before { +.ic-opsgenie:before { content: "\e910"; color: #2684ff; } -.icon-mattermost:before { +.ic-mattermost:before { content: "\e907"; color: #045acc; } -.icon-pagerteam:before { +.ic-pagerteam:before { content: "\e914"; color: #cd2a00; } -.icon-apprise:before { +.ic-apprise:before { content: "\e915"; color: #236b6b; } -.icon-matrix:before { +.ic-matrix:before { content: "\e900"; } -.icon-started:before { +.ic-started:before { content: "\e038"; } -.icon-pagertree:before { +.ic-pagertree:before { content: "\e90d"; color: #33ade2; } -.icon-po:before { +.ic-po:before { content: "\e90e"; color: #249df1; } -.icon-victorops:before { +.ic-victorops:before { content: "\e90f"; color: #f9af4a; } -.icon-email:before { +.ic-email:before { content: "\e90a"; color: #4f5d73; } -.icon-webhook:before { +.ic-webhook:before { content: "\e908"; color: #c73a63; } -.icon-sms:before { +.ic-sms:before { content: "\e904"; color: #95c144; } -.icon-pushbullet:before { +.ic-pushbullet:before { content: "\e909"; color: #67bf79; } -.icon-discord:before { +.ic-discord:before { content: "\e90c"; color: #7289da; } -.icon-hipchat:before { +.ic-hipchat:before { content: "\e901"; color: #0052cc; } -.icon-slack:before { +.ic-slack:before { content: "\e905"; color: #56b68b; } -.icon-telegram:before { +.ic-telegram:before { content: "\e906"; color: #2ca5e0; } -.icon-trello:before { +.ic-trello:before { content: "\e911"; color: #0079bf; } -.icon-whatsapp:before { +.ic-whatsapp:before { content: "\e902"; color: #25d366; } -.icon-clippy:before { +.ic-clippy:before { content: "\e903"; } -.icon-cancel:before { +.ic-cancel:before { content: "\e5c9"; } -.icon-up:before, .icon-new:before, .icon-ok:before { +.ic-up:before, .ic-new:before, .ic-ok:before { content: "\e86c"; } -.icon-grace:before { +.ic-grace:before { content: "\e000"; } -.icon-missing:before { +.ic-missing:before { content: "\e001"; } -.icon-desc:before { +.ic-desc:before { content: "\e313"; } -.icon-asc:before { +.ic-asc:before { content: "\e316"; } -.icon-dots:before { +.ic-dots:before { content: "\e5d3"; } -.icon-down:before { +.ic-down:before { content: "\e7f7"; } -.icon-paused:before { +.ic-paused:before { content: "\e7f6"; } -.icon-settings:before { +.ic-settings:before { content: "\e912"; } -.icon-delete:before { +.ic-delete:before { content: "\e913"; } -.icon-timer:before { +.ic-timer:before { content: "\e425"; } diff --git a/static/css/settings.css b/static/css/settings.css index 7bc0ccc1..410d0fbc 100644 --- a/static/css/settings.css +++ b/static/css/settings.css @@ -11,7 +11,7 @@ padding-bottom: 24px; } -.page-project .icon-ok { +.page-project .ic-ok { color: #5cb85c; } diff --git a/static/fonts/icomoon.ttf b/static/fonts/icomoon.ttf index 06389143dfc987665d2541ae2e774004624e2169..f783366ae784894736040d472938aefb43db189e 100644 GIT binary patch delta 51 ycmX?+b0TL#AoGhjxs4$wjpP{_7#=_UT^!GE^Ob>{g#iTaIPlzt(VK0Id6)tCS`h32 delta 51 zcmX?+b0TL#AoJ3iYa2sO8p$&-Fg(fL#~jaZ^Ob>{1;}GyxFauP4x=~Q81pa#0Nuh4 A?f?J) diff --git a/static/fonts/icomoon.woff b/static/fonts/icomoon.woff index 6b419e8fa185224b69a4665687e1596cf3214197..d87da2e2be4010dd0ec7fef5b95fc46c3c65c981 100644 GIT binary patch delta 60 zcmbP|J0*95C?n(KkBlM{wUU`%#K~=(aMMVhk%8gy)8EDM{5D@1xLFuL;En^&Z5X|| I! -1) + if (cssClasses.indexOf("ic-new") > -1) return "New. Has never received a ping."; - if (cssClasses.indexOf("icon-paused") > -1) + if (cssClasses.indexOf("ic-paused") > -1) return "Monitoring paused. Ping to resume."; if (cssClasses.indexOf("sort-name") > -1) @@ -215,7 +215,7 @@ $(function () { for(var i=0, el; el=data.details[i]; i++) { if (lastStatus[el.code] != el.status) { lastStatus[el.code] = el.status; - $("#" + el.code + " span.status").attr("class", "status icon-" + el.status); + $("#" + el.code + " span.status").attr("class", "status ic-" + el.status); } if (lastStarted[el.code] != el.started) { diff --git a/static/js/details.js b/static/js/details.js index ae87a06f..611d82e7 100644 --- a/static/js/details.js +++ b/static/js/details.js @@ -85,7 +85,7 @@ $(function () { success: function(data) { if (data.status_text != lastStatusText) { lastStatusText = data.status_text; - $("#log-status-icon").attr("class", "status icon-" + data.status); + $("#log-status-icon").attr("class", "status ic-" + data.status); $("#log-status-text").html(data.status_text); $('#pause-btn').prop('disabled', data.status == "paused"); diff --git a/static/js/snippet-copy.js b/static/js/snippet-copy.js index 7f5efb9c..285a6c3a 100644 --- a/static/js/snippet-copy.js +++ b/static/js/snippet-copy.js @@ -5,7 +5,7 @@ $(function() { } var markup = ''; diff --git a/templates/accounts/project.html b/templates/accounts/project.html index b4318cbe..d5dcad86 100644 --- a/templates/accounts/project.html +++ b/templates/accounts/project.html @@ -110,7 +110,7 @@ {% else %}
- + API access is enabled. {% csrf_token %} @@ -123,7 +123,7 @@
{% endif %} {% else %} - + API access is disabled.
{% csrf_token %} diff --git a/templates/base.html b/templates/base.html index ef3c8736..5e5a0e9d 100644 --- a/templates/base.html +++ b/templates/base.html @@ -106,7 +106,7 @@
  • {% trans "Integrations" %} - {% if b %}{% endif %} + {% if b %}{% endif %}
    • {% endwith %} diff --git a/templates/front/channels.html b/templates/front/channels.html index 6fb698ca..8009017d 100644 --- a/templates/front/channels.html +++ b/templates/front/channels.html @@ -159,7 +159,7 @@ data-url="{% url 'hc-remove-channel' ch.code %}" class="btn btn-sm btn-default channel-remove" type="button"> - + {% endif %} diff --git a/templates/front/details.html b/templates/front/details.html index fa130d81..86e6bf67 100644 --- a/templates/front/details.html +++ b/templates/front/details.html @@ -117,7 +117,7 @@ diff --git a/templates/front/details_events.html b/templates/front/details_events.html index 586c8a0b..df2dafc6 100644 --- a/templates/front/details_events.html +++ b/templates/front/details_events.html @@ -25,7 +25,7 @@ diff --git a/templates/front/last_ping_cell.html b/templates/front/last_ping_cell.html index 7b24b5f6..14d89ea7 100644 --- a/templates/front/last_ping_cell.html +++ b/templates/front/last_ping_cell.html @@ -7,7 +7,7 @@ {% elif check.clamped_last_duration %}
    - {{ check.clamped_last_duration|hms }} + {{ check.clamped_last_duration|hms }} {% endif %} {% else %} diff --git a/templates/front/log.html b/templates/front/log.html index f2cfed21..0e8f1edc 100644 --- a/templates/front/log.html +++ b/templates/front/log.html @@ -66,7 +66,7 @@ diff --git a/templates/front/my_checks_desktop.html b/templates/front/my_checks_desktop.html index 5da9824f..477605d6 100644 --- a/templates/front/my_checks_desktop.html +++ b/templates/front/my_checks_desktop.html @@ -9,11 +9,11 @@ diff --git a/templates/front/projects.html b/templates/front/projects.html index f2ec0416..eb466774 100644 --- a/templates/front/projects.html +++ b/templates/front/projects.html @@ -16,7 +16,7 @@
    -
    +

    {{ project }}

    diff --git a/templates/front/welcome.html b/templates/front/welcome.html index 44f83a0c..4fc9f88a 100644 --- a/templates/front/welcome.html +++ b/templates/front/welcome.html @@ -229,7 +229,7 @@
    - +

    {% include "front/log_status_text.html" %}

    @@ -215,7 +215,7 @@     		- + {{ channel }}
    {% if event.delta %}
    - + {{ event.delta|hms }}
    {% endif %} @@ -50,7 +50,7 @@ {% if event.check_status %}
    - + {% if event.delta %}
    - + {{ event.delta|hms }}
    {% endif %} @@ -100,7 +100,7 @@ {% if event.check_status %}
    - + {% if sort == "name" %} - Name + Name {% elif sort == "-name" %} - Name + Name {% else %} @@ -33,11 +33,11 @@ - + {% if rw %} {% endif %}
    - + {% blocktrans trimmed %} @@ -240,7 +240,7 @@
    - + {% blocktrans trimmed %} @@ -251,7 +251,7 @@
    - + {% blocktrans trimmed %} @@ -263,7 +263,7 @@
    - + {% blocktrans trimmed %}