Improve layout in "My Checks" for checks with long ping URLs

Fixes: #745

CHANGELOG.md

@@ -1,6 +1,12 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## v2.6 - Unreleased
+
+### Improvements
+- Improve layout in "My Checks" for checks with long ping URLs (#745)
+
+
 ## v2.5 - 2022-12-14
 
 ### Improvements

static/css/my_checks_desktop.css

@@ -6,7 +6,7 @@
     background-color: var(--table-bg-hover);
 }
 
-.my-checks-name.unnamed, .url span.unavailable {
+.my-checks-name.unnamed, #checks-table span.unavailable {
     color: var(--text-muted);
     font-style: italic;
 }
@@ -87,43 +87,31 @@
     white-space: nowrap;
 }
 
-button.copy-link {
-    opacity: 0;
-
-    display: inline-block;
-    width: 50px;
-
-    background: none!important;
-    border: none;
-    padding: 0!important;
-    text-align: left;
-
-    font-family: "Open Sans", Arial, sans-serif;
-    color: var(--link-color);
-    cursor :pointer;
-    transition: opacity 0.1s linear;
+/* Name cell  */
+#checks-table td:nth-child(2) {
+    word-wrap: break-word;
+    overflow-wrap: anywhere;
 }
 
-button.copy-link:hover {
-    text-decoration: underline;
-}
-
-tr:hover .copy-link {
-    opacity: 1
+/* URL cell  */
+#checks-table td:nth-child(3) {
+    min-width: 420px;
+    max-width: 500px;
 }
 
 .my-checks-url {
     font-family: "Lucida Console", Monaco, monospace;
     font-size: 11.7px;
     position: relative;
-    line-height: 36px;
+    overflow-wrap: anywhere;
+    word-wrap: break-word;
+    padding: 4px 0; /* eliminate gaps between lines */
 }
 
 .my-checks-url .base {
     color: var(--text-muted);
 }
 
-#checks-table td.url,
 #checks-table .actions {
     white-space: nowrap;
 }
@@ -162,4 +150,4 @@ tr:hover .copy-link {
 
 #url-style-switcher a.active {
     text-decoration:  underline;
-}
+}

static/js/checks.js

@@ -244,24 +244,6 @@ $(function () {
         adaptiveSetInterval(refreshStatus);
     }
 
-    // Copy to clipboard
-    var clipboard = new ClipboardJS('button.copy-link');
-    $("button.copy-link").mouseout(function(e) {
-        setTimeout(function() {
-            e.target.textContent = "copy";
-        }, 300);
-    });
-
-    clipboard.on('success', function(e) {
-        e.trigger.textContent = "copied!";
-        e.clearSelection();
-    });
-
-    clipboard.on('error', function(e) {
-        var text = e.trigger.getAttribute("data-clipboard-text");
-        prompt("Press Ctrl+C to select:", text)
-    });
-
     // Configure Selectize for entering tags
     function divToOption() {
         return {value: this.textContent};
@@ -279,4 +261,16 @@ $(function () {
         options: $("#my-checks-tags div").map(divToOption).get()
     });
 
+    $('.my-checks-url').tooltip({title: "Click to copy"});
+    $('.my-checks-url').click(function(e) {
+        if (window.getSelection().toString()) {
+            // do nothing, selection not empty
+            return;
+        }
+
+        navigator.clipboard.writeText(this.textContent);
+        $(".tooltip-inner").text("Copied!");
+    });
+
 });
+

templates/front/my_checks.html

@@ -98,7 +98,6 @@
 <script src="{% static 'js/bootstrap-select.min.js' %}"></script>
 <script src="{% static 'js/selectize.min.js' %}"></script>
 <script src="{% static 'js/nouislider.min.js' %}"></script>
-<script src="{% static 'js/clipboard.min.js' %}"></script>
 <script src="{% static 'js/purify.min.js' %}"></script>
 <script src="{% static 'js/update-timeout-modal.js' %}"></script>
 <script src="{% static 'js/adaptive-setinterval.js' %}"></script>

templates/front/my_checks_desktop.html

@@ -21,7 +21,7 @@
             </a>
             {% endif %}
         </th>
-        <th class="hidden-xs hidden-sm">
+        <th class="hidden-xs hidden-sm hidden-md">
             <span class="visible-lg-inline">
                 Ping URL
             </span>
@@ -76,7 +76,7 @@
                 {% endfor %}
             </div>
         </td>
-        <td class="hidden-xs hidden-sm url">
+        <td class="hidden-xs hidden-sm hidden-md">
             {% if project.show_slugs and not check.slug %}
                 <span class="unavailable">unavailable, set name first</span>
             {% else %}
@@ -84,7 +84,6 @@
                 {% if project.show_slugs and check.slug in ambiguous %}
                 <small class="text-danger">(not unique)</small>
                 {% endif %}
-                <button class="copy-link" data-clipboard-text="{{ check.url }}">copy</button>
             {% endif %}
         </td>
         <td class="hidden-xs">