diff --git a/kfet/open/static/kfetopen/kfet-open.css b/kfet/open/static/kfetopen/kfet-open.css index d44318cd..a7068626 100644 --- a/kfet/open/static/kfetopen/kfet-open.css +++ b/kfet/open/static/kfetopen/kfet-open.css @@ -14,10 +14,16 @@ .kfetopen .base { height: 50px; - padding: 15px; + max-width: 16px; - display: inline-flex; + margin-left: 5px; + margin-right: 5px; + + display: flex; + flex-wrap: wrap; + align-content: center; align-items: center; + justify-content: center; } .kfetopen .details { @@ -34,10 +40,23 @@ height: 10px; border-radius: 50%; transition: background 0.15s; + margin: 3px; } .kfetopen .warning { - margin-left: 15px; + display: none; +} + +@media (min-width: 576px) { + .kfetopen .base { + max-width: none; + margin-left: 15px; + margin-right: 15px; + } + + .kfetopen .warning { + margin-left: 15px; + } } .kfetopen .status-text { diff --git a/kfet/open/static/kfetopen/kfet-open.js b/kfet/open/static/kfetopen/kfet-open.js index b86cc5bc..74f18d8a 100644 --- a/kfet/open/static/kfetopen/kfet-open.js +++ b/kfet/open/static/kfetopen/kfet-open.js @@ -74,10 +74,10 @@ OpenKfet.prototype = { if (this.admin) { this.add_class(this.admin_status); if (this.force_close) { - this.dom.warning.addClass('in'); + this.dom.warning.show().addClass('in'); this.dom.force_close_btn.html(this.force_text['deactivate']); } else { - this.dom.warning.removeClass('in'); + this.dom.warning.removeClass('in').hide(); this.dom.force_close_btn.html(this.force_text['activate']); } }