From dc0a5cb8d85e1487aab51fbc5cfa8a3e9a24b2ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Mon, 11 Jun 2018 22:26:55 +0300
Subject: [PATCH] Filtering by tags works properly again.

---
 static/css/my_checks.css       | 18 ++++++++++++++----
 static/js/checks.js            | 14 ++++++++------
 templates/front/my_checks.html |  2 +-
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/static/css/my_checks.css b/static/css/my_checks.css
index 1f93bd5e..e83fda83 100644
--- a/static/css/my_checks.css
+++ b/static/css/my_checks.css
@@ -1,22 +1,32 @@
-#my-checks-tags button.up {
+#my-checks-tags div {
+    margin-bottom: 4px;
+}
+
+#my-checks-tags .up {
     color: #333;
     background-color: #fff;
     border-color: #ccc;
 }
 
-#my-checks-tags button.grace {
+#my-checks-tags .grace {
     color: #fff;
     background-color: #f0ad4e;
     border-color: #eea236;
 }
 
-
-#my-checks-tags button.down {
+#my-checks-tags .down {
     color: #fff;
     background-color: #d9534f;
     border-color: #d43f3a;
 }
 
+#my-checks-tags .checked {
+    box-shadow: 0 0 3px #ddd;
+    background: #333;
+    color: #eee;
+    border-color: #000;
+}
+
 @media (min-width: 992px) {
     #update-timeout-modal .modal-dialog, #ping-details-modal .modal-dialog {
         width: 800px;
diff --git a/static/js/checks.js b/static/js/checks.js
index aa9fbafb..33780070 100644
--- a/static/js/checks.js
+++ b/static/js/checks.js
@@ -231,14 +231,14 @@ $(function () {
 
 
     // Filtering by tags
-    $("#my-checks-tags button").click(function() {
+    $("#my-checks-tags div").click(function() {
         // .active has not been updated yet by bootstrap code,
         // so cannot use it
         $(this).toggleClass('checked');
 
         // Make a list of currently checked tags:
         var checked = [];
-        $("#my-checks-tags button.checked").each(function(index, el) {
+        $("#my-checks-tags .checked").each(function(index, el) {
             checked.push(el.textContent);
         });
 
@@ -331,11 +331,13 @@ $(function () {
                     }
                 }
 
-                $("#my-checks-tags button").each(function(a) {
+                $("#my-checks-tags div").each(function(a) {
                     var status = data.tags[this.innerText];
-                    if (status) {
-                        this.setAttribute("class", "btn btn-xs " + status);
-                    }
+                    if (lastStatus[this.innerText] == status)
+                        return;
+
+                    $(this).removeClass("up grace down").addClass(status);
+                    lastStatus[this.innerText] = status;
                 });
 
                 if (document.title != data.title) {
diff --git a/templates/front/my_checks.html b/templates/front/my_checks.html
index 6915bed9..81cef31a 100644
--- a/templates/front/my_checks.html
+++ b/templates/front/my_checks.html
@@ -8,7 +8,7 @@
     {% if tags %}
     <div id="my-checks-tags" class="col-sm-12">
         {% for tag, status in tags %}
-            <button class="btn btn-xs {{ status }}" data-toggle="button">{{ tag }}</button>
+            <div class="btn btn-xs {{ status }}">{{ tag }}</div>
         {% endfor %}
     </div>
     {% endif %}