From c2cc4d2a86d458ad5197e054ac07f7ba5843e45c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Tue, 22 Dec 2015 20:07:30 +0200
Subject: [PATCH] Sizing tweaks for "My Checks" table. Select ping urls by
 clicking on them.

---
 static/css/my_checks_desktop.css       | 23 ++++++++++++++++++++---
 static/js/checks.js                    | 13 +++++++++----
 templates/front/my_checks_desktop.html | 19 +++++++++++++++++--
 3 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/static/css/my_checks_desktop.css b/static/css/my_checks_desktop.css
index b1f0f6d1..32045ed0 100644
--- a/static/css/my_checks_desktop.css
+++ b/static/css/my_checks_desktop.css
@@ -60,6 +60,7 @@ table.table tr > th.th-name {
 
 .checks-subline {
     color: #888;
+    white-space: nowrap;
 }
 
 .check-menu {
@@ -74,6 +75,22 @@ tr:hover .check-menu {
     color: #333;
 }
 
-.my-checks-email {
-    display: none;
-}
\ No newline at end of file
+#checks-table .url-cell {
+    white-space: nowrap;
+}
+
+#checks-table .placeholder, #checks-table .my-checks-url.off, #checks-table .my-checks-email.off {
+    font-family: "Lucida Console", Monaco, monospace;
+    font-size: 11.7px;
+    height: 0;
+    overflow: hidden;
+}
+
+#checks-table .selectable {
+    font-family: "Lucida Console", Monaco, monospace;
+    font-size: 11.7px;
+    width: 100%;
+    border: 0;
+    cursor: text;
+    background: transparent;
+}
diff --git a/static/js/checks.js b/static/js/checks.js
index e5dd286a..73e4d4a2 100644
--- a/static/js/checks.js
+++ b/static/js/checks.js
@@ -109,18 +109,23 @@ $(function () {
 
     $("#show-urls").click(function() {
         $("#show-urls").addClass("active");
-        $(".my-checks-url").show();
+        $(".my-checks-url").removeClass("off");
 
         $("#show-emails").removeClass("active");
-        $(".my-checks-email").hide();
+        $(".my-checks-email").addClass("off");
     });
 
     $("#show-emails").click(function() {
         $("#show-urls").removeClass("active");
-        $(".my-checks-url").hide();
+        $(".my-checks-url").addClass("off");
 
         $("#show-emails").addClass("active");
-        $(".my-checks-email").show();
+        $(".my-checks-email").removeClass("off");
+    });
+
+    $(".selectable").click(function() {
+        $(this).tooltip("hide");
+        this.select();
     });
 
     $("#my-checks-tags button").click(function() {
diff --git a/templates/front/my_checks_desktop.html b/templates/front/my_checks_desktop.html
index 57dbf2aa..1c5047c2 100644
--- a/templates/front/my_checks_desktop.html
+++ b/templates/front/my_checks_desktop.html
@@ -42,8 +42,23 @@
             </div>
         </td>
         <td class="url-cell">
-            <code class="my-checks-url">{{ check.url }}</code>
-            <code class="my-checks-email">{{ check.email }}</code>
+            <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>
         </td>
         <td class="timeout-cell">
             <span