Usage instructions in "My Checks" page

static/css/my_checks.css

@@ -61,3 +61,11 @@
     background-color: #eee;
     color: #555;
 }
+
+#show-usage-modal  .modal-dialog {
+    width: 1100px;
+}
+
+#show-usage-modal .tab-content {
+    margin-top: 15px;
+}

static/css/my_checks_desktop.css

@@ -39,11 +39,6 @@ table.table tr > th.th-name {
     border: 1px dotted #AAA;
 }
 
-.url-cell {
-    font-size: small;
-    position: relative;
-}
-
 #checks-table > tbody > tr > th.th-period {
     padding-left: 15px;
 }
@@ -79,18 +74,11 @@ tr:hover .check-menu {
     white-space: nowrap;
 }
 
-#checks-table .placeholder, #checks-table .my-checks-url.off, #checks-table .my-checks-email.off {
+.my-checks-url {
     font-family: "Lucida Console", Monaco, monospace;
     font-size: 11.7px;
-    height: 0;
-    overflow: hidden;
+    position: relative;
+    line-height: 36px;
+    color: #333;
 }
 
-#checks-table .selectable {
-    font-family: "Lucida Console", Monaco, monospace;
-    font-size: 11.7px;
-    width: 100%;
-    border: 0;
-    cursor: text;
-    background: transparent;
-}

static/js/checks.js

@@ -139,11 +139,6 @@ $(function () {
         $(".my-checks-email").removeClass("off");
     });
 
-    $(".selectable").click(function() {
-        $(this).tooltip("hide");
-        this.select();
-    });
-
     $("#my-checks-tags button").click(function() {
         // .active has not been updated yet by bootstrap code,
         // so cannot use it
@@ -181,4 +176,18 @@ $(function () {
 
     });
 
+    $(".my-checks-url").click(function(e) {
+        var a = e.target;
+        var url = a.getAttribute("href");
+        var email = a.getAttribute("data-email");
+
+        $(".ex", "#show-usage-modal").text(url);
+        $(".em", "#show-usage-modal").text(email);
+
+        $(a).tooltip("hide");
+        $("#show-usage-modal").modal("show");
+
+        return false;
+    });
+
 });

templates/front/my_checks.html

@@ -196,6 +196,84 @@
     </div>
 </div>
 
+<div id="show-usage-modal" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal">&times;</button>
+                <ul class="nav nav-pills" role="tablist">
+                    <li class="active">
+                        <a href="#crontab" data-toggle="tab">Crontab</a>
+                    </li>
+                    <li>
+                        <a href="#bash" data-toggle="tab">Bash</a>
+                    </li>
+                    <li>
+                        <a href="#python" data-toggle="tab">Python</a>
+                    </li>
+                    <li class="hidden-xs">
+                        <a href="#node" data-toggle="tab">Node.js</a>
+                    </li>
+                    <li class="hidden-xs">
+                        <a href="#php" data-toggle="tab">PHP</a>
+                    </li>
+                    <li class="hidden-xs">
+                        <a href="#browser" data-toggle="tab">Browser</a>
+                    </li>
+                    <li class="hidden-xs">
+                        <a href="#powershell" data-toggle="tab">PowerShell</a>
+                    </li>
+                    <li class="hidden-xs">
+                        <a href="#email" data-toggle="tab">Email</a>
+                    </li>
+                </ul>
+
+            </div>
+            <div class="modal-body">
+
+
+                <div class="tab-content">
+                    {% with ping_url="<span class='ex'></span>" %}
+                    <div role="tabpanel" class="tab-pane active" id="crontab">
+                        {% include "front/snippets/crontab.html" %}
+                    </div>
+                    <div role="tabpanel" class="tab-pane" id="bash">
+                        {% include "front/snippets/bash.html" %}
+                    </div>
+                    <div role="tabpanel" class="tab-pane" id="python">
+                        {% include "front/snippets/python.html" %}
+                    </div>
+                    <div role="tabpanel" class="tab-pane" id="node">
+                        {% include "front/snippets/node.html" %}
+                    </div>
+                    <div role="tabpanel" class="tab-pane" id="php">
+                        {% include "front/snippets/php.html" %}
+                    </div>
+                    <div class="tab-pane" id="browser">
+                        {% include "front/snippets/browser.html" %}
+                    </div>
+                    <div class="tab-pane" id="powershell">
+                        {% include "front/snippets/powershell.html" %}
+                    </div>
+                    <div class="tab-pane" id="email">
+                            As an alternative to HTTP/HTTPS requests,
+                            you can "ping" this check by sending an
+                            email message to
+                            <div class="email-address">
+                                <code class="em"></code>
+                            </div>
+                    </div>
+                    {% endwith %}
+                </div>
+
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Got It!</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 
 {% endblock %}
 

templates/front/my_checks_desktop.html

@@ -4,10 +4,7 @@
     <tr>
         <th></th>
         <th class="th-name">Name</th>
-        <th>
-            <a id="show-urls" class="active" href="#">URL</a>
-            <a id="show-emails" href="#">Email</a>
-        </th>
+        <th>Ping URL</th>
         <th class="th-period">
             Period <br />
             <span class="checks-subline">Grace</span>
@@ -42,23 +39,14 @@
             </div>
         </td>
         <td class="url-cell">
-            <div class="placeholder">{{ check.url }}</div>
-            <div class="my-checks-url">
-                <input
-                    data-toggle="tooltip"
-                    title="Click to select"
-                    class="selectable"
-                    type="text"
-                    value="{{ check.url }}"
-                    readonly />
-            </div>
-            <div class="my-checks-email off">
-                <input
-                    class="selectable"
-                    type="text"
-                    value="{{ check.email }}"
-                    readonly />
-            </div>
+            <a
+                href="{{ check.url }}"
+                class="my-checks-url"
+                title="Click to show usage examples"
+                data-email="{{ check.email }}"
+                data-toggle="tooltip">
+                {{ check.url }}
+            </a>
         </td>
         <td class="timeout-cell">
             <span

templates/front/snippets/bash.html

@@ -1,4 +1,5 @@
 <div class="highlight"><pre><span></span><span class="c1"># using curl:</span>
+<span class="c1"># (make sure it is installed on your system!)</span>
 curl --retry <span class="m">3</span> {{ ping_url }}
 
 <span class="c1"># using wget:</span>

templates/front/snippets/bash.txt

@@ -1,4 +1,5 @@
 # using curl:
+# (make sure it is installed on your system!)
 curl --retry 3 PING_URL
 
 # using wget: