From e18fcf424f1ed09c81265b7d6f5b09be5789e838 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Thu, 16 Jul 2015 09:55:29 +0300
Subject: [PATCH] Style tweaks in timeout dialog, fix trigger.

---
 hc/api/management/commands/ensuretriggers.py |  2 +-
 static/css/style.css                         | 25 +++++++++++++++++++-
 templates/front/my_checks.html               | 24 +++++++++++++------
 3 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/hc/api/management/commands/ensuretriggers.py b/hc/api/management/commands/ensuretriggers.py
index e180fa5b..f9406aea 100644
--- a/hc/api/management/commands/ensuretriggers.py
+++ b/hc/api/management/commands/ensuretriggers.py
@@ -22,6 +22,6 @@ $update_alert_after$ LANGUAGE plpgsql;
 DROP TRIGGER IF EXISTS update_alert_after ON api_check;
 
 CREATE TRIGGER update_alert_after
-BEFORE INSERT OR UPDATE OF last_ping, timeout  ON api_check
+BEFORE INSERT OR UPDATE OF last_ping, timeout, grace  ON api_check
 FOR EACH ROW EXECUTE PROCEDURE update_alert_after();
         """)
diff --git a/static/css/style.css b/static/css/style.css
index 71c577b6..9d4a7a93 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -175,6 +175,10 @@ tr:hover .check-menu {
 }
 
 
+#update-timeout-modal .modal-body {
+    padding-top: 40px;
+}
+
 .update-timeout-info {
     line-height: 22px;
 }
@@ -205,9 +209,28 @@ tr:hover .check-menu {
 }
 
 #grace-slider {
-    margin: 20px 50px 60px 50px;
+    margin: 20px 50px 110px 50px;
 }
 
 #grace-slider.noUi-connect {
   background: #f0ad4e;
 }
+
+#frequency-slider .noUi-value, #grace-slider .noUi-value {
+    width: 60px;
+    margin-left: -30px;
+}
+
+.update-timeout-terms {
+    color: #999;
+}
+
+.update-timeout-terms p {
+    margin: 0;
+}
+
+
+.update-timeout-terms span {
+    font-weight: bold;
+}
+
diff --git a/templates/front/my_checks.html b/templates/front/my_checks.html
index 6584bf53..24fc3316 100644
--- a/templates/front/my_checks.html
+++ b/templates/front/my_checks.html
@@ -114,9 +114,11 @@
             <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal">&times;</span></button>
-                    <h4 class="update-timeout-title">Update Name</h4>
-                </div>                <div class="modal-body">
-                    <p>Name:</p>
+                    <h4 class="update-timeout-title">Name</h4>
+                </div>
+                <div class="modal-body">
+                    <p>Give this check a human-friendly name, so you can
+                    easily recognize it later:</p>
                     <input
                         id="update-name-input"
                         name="name"
@@ -141,10 +143,6 @@
             <input type="hidden" name="timeout" id="update-timeout-timeout" />
             <input type="hidden" name="grace" id="update-timeout-grace" />
             <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal">&times;</span></button>
-                    <h4 class="update-timeout-title">Update Frequency and Grace Period</h4>
-                </div>
                 <div class="modal-body">
                     <div class="update-timeout-info text-center">
                         <span
@@ -176,6 +174,18 @@
                     </div>
 
                     <div id="grace-slider"></div>
+
+                    <div class="update-timeout-terms">
+                        <p>
+                            <span>Frequency</span>
+                            Expected time between pings.
+                        </p>
+                        <p>
+                            <span>Grace Period</span>
+                            When a check is late, how much time to wait until alert is sent.
+                        </p>
+                    </div>
+
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>