Use icon in the "copy" button. Add "copy" buttons dynamically, in JS. CSS tweaks.

static/css/base.css

@@ -74,4 +74,8 @@ body {
 
 .dialog-body {
     margin: 24px 0;
+}
+
+pre {
+  border: 0;
 }

static/css/docs.css

@@ -55,11 +55,8 @@ a.section:hover  {
 .page-docs code {
     padding: 2px 4px;
     font-size: 90%;
-    color: #427d5e;
-    background-color: #f2f9f6;
+    color: #333;
+    background-color: #f5f5f5;
     border-radius: 4px;
 }
 
-.snippet pre {
-  border: 1px solid #cccccc;
-}

static/css/icomoon.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('../fonts/icomoon.eot?j2asdo');
-  src:  url('../fonts/icomoon.eot?j2asdo#iefix') format('embedded-opentype'),
-    url('../fonts/icomoon.ttf?j2asdo') format('truetype'),
-    url('../fonts/icomoon.woff?j2asdo') format('woff'),
-    url('../fonts/icomoon.svg?j2asdo#icomoon') format('svg');
+  src:  url('../fonts/icomoon.eot?cxijqz');
+  src:  url('../fonts/icomoon.eot?cxijqz#iefix') format('embedded-opentype'),
+    url('../fonts/icomoon.ttf?cxijqz') format('truetype'),
+    url('../fonts/icomoon.woff?cxijqz') format('woff'),
+    url('../fonts/icomoon.svg?cxijqz#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -24,6 +24,9 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-clippy:before {
+  content: "\e900";
+}
 .icon-cancel:before {
   content: "\e5c9";
 }

static/css/my_checks.css

@@ -63,20 +63,20 @@
     font-style: normal;
 }
 
-
 #show-usage-modal  .modal-dialog {
      width: 1100px;
- }
-
- #show-usage-modal .tab-content {
-     margin-top: 15px;
- }
+}
 
- .tab-pane {
-    border: none;
+#show-usage-modal .modal-body {
     padding: 0;
- }
+}
+
+#show-usage-modal pre {
+    margin: 0;
+    padding: 15px;
+}
+
+#show-usage-modal .highlight:nth-child(n+2) {
+    border-top: 1px solid #ddd;
+}
 
- .snippet {
-   margin-bottom: 15px;
- }

static/css/snippet-copy.css

@@ -1,44 +1,15 @@
-.snippet {
-  position: relative;
-  margin-bottom: 3px;
+.highlight {
+    position: relative;
 }
 
-.snippet:last-child {
-  margin-bottom: 0;
-}
-
-.snippet pre {
-  border: none;
-  background: #F6F6F6 !important;
-  margin: 0;
-}
-
-.snippet:hover .copy-snippet-link {
-    opacity: 1
-}
-
-button.copy-snippet-link {
+.highlight button {
     position: absolute;
-    top: 0;
-    right: 0;
-    margin-top: -1px;
-    margin-right: -1px;
-    z-index: 10;
-    display: block;
-    padding: 5px 8px !important;
-    font-size: 12px;
-    cursor: pointer;
-    border-radius: 0 0 0 4px;
+    top: 4px;
+    right: 4px;
     opacity: 0;
-    background: none!important;
-    border: none;
-    outline: none;
-    font-family: "Open Sans", Arial, sans-serif;
-    color: #0091ea;
-    cursor :pointer;
     transition: opacity 0.1s linear;
 }
 
-button.copy-snippet-link:hover {
-    text-decoration: underline;
+.highlight:hover button {
+    opacity: 1
 }

static/css/welcome.css

@@ -50,26 +50,6 @@
     margin-bottom: 0;
 }
 
-.page-welcome .highlight pre {
-    background: #FFF;
-    border-top: 0;
-    border-radius: 0;
-    border-color: #dddddd;
-}
-
-#email .instructions {
-    background: #FFF;
-    border: 1px solid #dddddd;
-    border-top: 0;
-    padding: 10px;
-}
-
-#email .email-address {
-    font-size: 18px;
-    padding-top: 10px;
-}
-
-
 #get-started {
     margin-top: 4em;
 }
@@ -88,11 +68,24 @@
     height: 22px;
 }
 
-.tab-pane {
-  border-left: 1px solid #DDD;
-  border-right: 1px solid #DDD;
-  border-bottom: 1px solid #DDD;
-  padding: 3px;
+.page-welcome .tab-content {
+    border: 1px solid #ddd;
+    border-top: 0;
+}
+
+.tab-pane p {
+    padding: 15px;
+    margin: 0;
+}
+
+.page-welcome .highlight:nth-child(n+2) {
+    border-top: 1px solid #ddd;
+}
+
+.page-welcome .tab-pane pre {
+    margin-bottom: 0;
+    background: transparent;
+    padding: 15px;
 }
 
 .tab-pane.tab-pane-email {

static/fonts/icomoon.svg

@@ -19,4 +19,5 @@
 <glyph unicode="&#xe86d;" glyph-name="ok" d="M426 212.667l384 384-60 62-324-324-152 152-60-60zM512 852.667c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426z" />
 <glyph unicode="&#xe872;" glyph-name="delete" d="M810 768.667v-86h-596v86h148l44 42h212l44-42h148zM256 128.667v512h512v-512c0-46-40-86-86-86h-340c-46 0-86 40-86 86z" />
 <glyph unicode="&#xe8b8;" glyph-name="settings" d="M512 276.667c82 0 150 68 150 150s-68 150-150 150-150-68-150-150 68-150 150-150zM830 384.667l90-70c8-6 10-18 4-28l-86-148c-6-10-16-12-26-8l-106 42c-22-16-46-32-72-42l-16-112c-2-10-10-18-20-18h-172c-10 0-18 8-20 18l-16 112c-26 10-50 24-72 42l-106-42c-10-4-20-2-26 8l-86 148c-6 10-4 22 4 28l90 70c-2 14-2 28-2 42s0 28 2 42l-90 70c-8 6-10 18-4 28l86 148c6 10 16 12 26 8l106-42c22 16 46 32 72 42l16 112c2 10 10 18 20 18h172c10 0 18-8 20-18l16-112c26-10 50-24 72-42l106 42c10 4 20 2 26-8l86-148c6-10 4-22-4-28l-90-70c2-14 2-28 2-42s0-28-2-42z" />
+<glyph unicode="&#xe900;" glyph-name="clippy" horiz-adv-x="896" d="M704 64h-640v576h640v-192h64v320c0 35-29 64-64 64h-192c0 71-57 128-128 128s-128-57-128-128h-192c-35 0-64-29-64-64v-704c0-35 29-64 64-64h640c35 0 64 29 64 64v128h-64v-128zM192 768c29 0 29 0 64 0s64 29 64 64 29 64 64 64 64-29 64-64 32-64 64-64 33 0 64 0 64-29 64-64h-512c0 39 28 64 64 64zM128 256h128v64h-128v-64zM576 384v128l-256-192 256-192v128h320v128h-320zM128 128h192v64h-192v-64zM448 576h-320v-64h320v64zM256 448h-128v-64h128v64z" />
 </font></defs></svg>

static/js/snippet-copy.js

@@ -1,11 +1,24 @@
 $(function() {
+    if (/Mac/i.test(navigator.userAgent)) {
+        // No support for Safari :(
+        return;
+    }
+
+    var markup = '<button class="btn btn-default hidden-sm">' +
+                 '<span class="icon-clippy"></span>' +
+                 '</button>';
+
+
+
+    $(".highlight").append(markup);
+
 
     var reBlankLines = new RegExp("^\\s*[\\r\\n]", "gm");
     var reTrailingWhitespace = new RegExp("\\s+$");
 
-    var clipboard = new Clipboard("button.copy-snippet-link", {
+    var clipboard = new Clipboard(".highlight button", {
         text: function (trigger) {
-            var snippetElement = $(trigger).next(".highlight").children().clone();
+            var snippetElement = $(trigger).parent().children().clone();
             /* remove pygmentize comment elements */
             snippetElement.find(".c, .cm, .cp, .c1, .cs").remove();
             /* remove blank lines and trailing whitespace */
@@ -14,13 +27,15 @@ $(function() {
     });
 
     clipboard.on("success", function(e) {
-        e.trigger.textContent = "copied!";
-        e.clearSelection();
+        $(e.trigger)
+            .tooltip({title: "Copied!", trigger: "hover"})
+            .tooltip("show")
+            .on("hidden.bs.tooltip", function(){
+                $(this).tooltip("destroy");
+            })
     });
 
-    $("button.copy-snippet-link").mouseout(function(e) {
-        setTimeout(function() {
-            e.target.textContent = "copy";
-        }, 300);
-    })
+    clipboard.on("error", function(e) {
+        prompt("Press Ctrl+C to select:", e.text)
+    });
 });

templates/front/docs.html

@@ -44,10 +44,7 @@ and your command runs. If it completes successfully (exit code 0),
 curl or wget runs a HTTP GET call to the ping URL.
 </p>
 
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/crontab.html" %}
-</div>
+{% include "front/snippets/crontab.html" %}
 
 <p>With this simple modification, you monitor several failure
 scenarios:</p>
@@ -113,41 +110,21 @@ thing: they fire off a HTTP GET method.</p>
     Ubuntu, for example, does not have curl installed out of the box.
 </p>
 
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/bash_curl.html" %}
-</div>
-
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/bash_wget.html" %}
-</div>
+{% include "front/snippets/bash_curl.html" %}
+{% include "front/snippets/bash_wget.html" %}
 
 <a name="python"></a>
 <h3>Python</h3>
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/python_urllib2.html" %}
-</div>
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/python_requests.html" %}
-</div>
+{% include "front/snippets/python_urllib2.html" %}
+{% include "front/snippets/python_requests.html" %}
 
 <a name="node"></a>
 <h3>Node</h3>
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/node.html" %}
-</div>
-
+{% include "front/snippets/node.html" %}
 
 <a name="php"></a>
 <h3>PHP</h3>
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/php.html" %}
-</div>
+{% include "front/snippets/php.html" %}
 
 <a name="browser"></a>
 <h3>Browser</h3>
@@ -156,10 +133,7 @@ thing: they fire off a HTTP GET method.</p>
     CORS header in its ping responses, so cross-domain AJAX requests
     should work.
 </p>
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/browser.html" %}
-</div>
+{% include "front/snippets/browser.html" %}
 
 <a name="powershell"></a>
 <h3>PowerShell</h3>
@@ -173,20 +147,14 @@ When scheduled to run with Task Scheduler, it will essentially
 just send regular "I'm alive" messages. You can of course extend it to
 do more things.</p>
 
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/powershell.html" %}
-</div>
+{% include "front/snippets/powershell.html" %}
 
 <p>Save the above to e.g. <code>C:\Scripts\healthchecks.ps1</code>. Then use
 the following command in a Scheduled Task to run the script:
 </p>
 
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    <div class="highlight">
-        <pre>powershell.exe -ExecutionPolicy bypass -File C:\Scripts\healthchecks.ps1</pre>
-    </div>
+<div class="highlight">
+    <pre>powershell.exe -ExecutionPolicy bypass -File C:\Scripts\healthchecks.ps1</pre>
 </div>
 
 <a name="email"></a>
@@ -284,6 +252,7 @@ the following command in a Scheduled Task to run the script:
 {% block scripts %}
 {% compress js %}
 <script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
+<script src="{% static 'js/bootstrap.min.js' %}"></script>
 <script src="{% static 'js/clipboard.min.js' %}"></script>
 <script src="{% static 'js/snippet-copy.js' %}"></script>
 {% endcompress %}

templates/front/docs_api.html

@@ -64,10 +64,7 @@ The response may contain a JSON document with additional data.
     a JSON document with all checks in user's account.
 </p>
 <h3 class="api-section">Example Request</h3>
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/list_checks_request.html" %}
-</div>
+{% include "front/snippets/list_checks_request.html" %}
 
 <h3 class="api-section">Example Response</h3>
 {% include "front/snippets/list_checks_response.html" %}
@@ -170,16 +167,10 @@ The response may contain a JSON document with additional data.
 </table>
 
 <h3 class="api-section">Example Request</h3>
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/create_check_request_a.html" %}
-</div>
+{% include "front/snippets/create_check_request_a.html" %}
 <br>
 <p>Or, alternatively:</p>
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/create_check_request_b.html" %}
-</div>
+{% include "front/snippets/create_check_request_b.html" %}
 
 
 <h3 class="api-section">Example Response</h3>
@@ -208,10 +199,7 @@ The response may contain a JSON document with additional data.
 
 <h3 class="api-section">Example Request</h3>
 
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/pause_check_request.html" %}
-</div>
+{% include "front/snippets/pause_check_request.html" %}
 
 <h3 class="api-section">Example Response</h3>
 {% include "front/snippets/pause_check_response.html" %}
@@ -222,6 +210,7 @@ The response may contain a JSON document with additional data.
 {% block scripts %}
 {% compress js %}
 <script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
+<script src="{% static 'js/bootstrap.min.js' %}"></script>
 <script src="{% static 'js/clipboard.min.js' %}"></script>
 <script src="{% static 'js/snippet-copy.js' %}"></script>
 {% endcompress %}

templates/front/my_checks.html

@@ -230,67 +230,37 @@
 
             </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">
-                        <div class="snippet">
-                            <button class="copy-snippet-link hidden-sm">copy</button>
-                            {% include "front/snippets/crontab.html" %}
-                        </div>
+                        {% include "front/snippets/crontab.html" %}
                     </div>
                     <div role="tabpanel" class="tab-pane" id="bash">
-                        <div class="snippet">
-                            <button class="copy-snippet-link hidden-sm">copy</button>
-                            {% include "front/snippets/bash_curl.html" %}
-                        </div>
-                        <div class="snippet">
-                            <button class="copy-snippet-link hidden-sm">copy</button>
-                            {% include "front/snippets/bash_wget.html" %}
-                        </div>
+                        {% include "front/snippets/bash_curl.html" %}
+                        {% include "front/snippets/bash_wget.html" %}
                     </div>
                     <div role="tabpanel" class="tab-pane" id="python">
-                        <div class="snippet">
-                            <button class="copy-snippet-link hidden-sm">copy</button>
-                            {% include "front/snippets/python_urllib2.html" %}
-                        </div>
-                        <div class="snippet">
-                            <button class="copy-snippet-link hidden-sm">copy</button>
-                            {% include "front/snippets/python_requests.html" %}
-                        </div>
+                        {% include "front/snippets/python_urllib2.html" %}
+                        {% include "front/snippets/python_requests.html" %}
                     </div>
                     <div role="tabpanel" class="tab-pane" id="node">
-                        <div class="snippet">
-                            <button class="copy-snippet-link hidden-sm">copy</button>
-                            {% include "front/snippets/node.html" %}
-                        </div>
+                        {% include "front/snippets/node.html" %}
                     </div>
                     <div role="tabpanel" class="tab-pane" id="php">
-                        <div class="snippet">
-                            <button class="copy-snippet-link hidden-sm">copy</button>
-                            {% include "front/snippets/php.html" %}
-                        </div>
+                        {% include "front/snippets/php.html" %}
                     </div>
                     <div class="tab-pane" id="browser">
-                        <div class="snippet">
-                            <button class="copy-snippet-link hidden-sm">copy</button>
-                            {% include "front/snippets/browser.html" %}
-                        </div>
+                        {% include "front/snippets/browser.html" %}
                     </div>
                     <div class="tab-pane" id="powershell">
-                        <div class="snippet">
-                            <button class="copy-snippet-link hidden-sm">copy</button>
-                            {% include "front/snippets/powershell.html" %}
-                        </div>
+                        {% 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>
+                        <p>
+                        As an alternative to HTTP/HTTPS requests,
+                        you can "ping" this check by sending an
+                        email message to <code class="em"></code>
+                        </p>
                     </div>
                     {% endwith %}
                 </div>

templates/front/snippets/browser.html

@@ -1,4 +1,5 @@
-<div class="highlight"><pre><span></span><span class="kd">var</span> <span class="nx">xhr</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">XMLHttpRequest</span><span class="p">();</span>
+<div class="highlight"><pre><span></span><span class="c1">// the server returns appropriate CORS headers so cross-domain AJAX requests should work:</span>
+<span class="kd">var</span> <span class="nx">xhr</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">XMLHttpRequest</span><span class="p">();</span>
 <span class="nx">xhr</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="s1">&#39;GET&#39;</span><span class="p">,</span> <span class="s1">&#39;{{ ping_url }}&#39;</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
 <span class="nx">xhr</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span>
 </pre></div>

templates/front/snippets/browser.txt

@@ -1,3 +1,4 @@
+// the server returns appropriate CORS headers so cross-domain AJAX requests should work:
 var xhr = new XMLHttpRequest();
 xhr.open('GET', 'PING_URL', true);
 xhr.send(null);

templates/front/welcome.html

@@ -59,64 +59,35 @@
             </ul>
             <div class="tab-content">
                 <div role="tabpanel" class="tab-pane active" id="crontab">
-                    <div class="snippet">
-                        <button class="copy-snippet-link hidden-sm">copy</button>
-                        {% include "front/snippets/crontab.html" %}
-                    </div>
+                    {% include "front/snippets/crontab.html" %}
                 </div>
                 <div role="tabpanel" class="tab-pane" id="bash">
-                    <div class="snippet">
-                        <button class="copy-snippet-link hidden-sm">copy</button>
-                        {% include "front/snippets/bash_curl.html" %}
-                    </div>
-                    <div class="snippet">
-                        <button class="copy-snippet-link hidden-sm">copy</button>
-                        {% include "front/snippets/bash_wget.html" %}
-                    </div>
+                    {% include "front/snippets/bash_curl.html" %}
+                    {% include "front/snippets/bash_wget.html" %}
                 </div>
                 <div role="tabpanel" class="tab-pane" id="python">
-                    <div class="snippet">
-                        <button class="copy-snippet-link hidden-sm">copy</button>
-                        {% include "front/snippets/python_urllib2.html" %}
-                    </div>
-                    <div class="snippet">
-                        <button class="copy-snippet-link hidden-sm">copy</button>
-                        {% include "front/snippets/python_requests.html" %}
-                    </div>
+                    {% include "front/snippets/python_urllib2.html" %}
+                    {% include "front/snippets/python_requests.html" %}
                 </div>
                 <div role="tabpanel" class="tab-pane" id="node">
-                    <div class="snippet">
-                        <button class="copy-snippet-link hidden-sm">copy</button>
-                        {% include "front/snippets/node.html" %}
-                    </div>
+                    {% include "front/snippets/node.html" %}
                 </div>
                 <div role="tabpanel" class="tab-pane" id="php">
-                    <div class="snippet">
-                        <button class="copy-snippet-link hidden-sm">copy</button>
-                        {% include "front/snippets/php.html" %}
-                    </div>
+                    {% include "front/snippets/php.html" %}
                 </div>
                 <div class="tab-pane" id="browser">
-                    <div class="snippet">
-                        <button class="copy-snippet-link hidden-sm">copy</button>
-                        {% include "front/snippets/browser.html" %}
-                    </div>
+                    {% include "front/snippets/browser.html" %}
                 </div>
                 <div class="tab-pane" id="powershell">
-                    <div class="snippet">
-                        <button class="copy-snippet-link hidden-sm">copy</button>
-                        {% include "front/snippets/powershell.html" %}
-                    </div>
+                    {% include "front/snippets/powershell.html" %}
                 </div>
                 <div class="tab-pane tab-pane-email" id="email">
-                    <div class="instructions">
+                    <p>
                         As an alternative to HTTP/HTTPS requests,
                         you can "ping" this check by sending an
                         email message to
-                        <div class="email-address">
-                            <code>{{ check.email }}</code>
-                        </div>
-                    </div>
+                        <a href="mailto:{{ check.email }}">{{ check.email }}</a>
+                    </p>
                 </div>
             </div>
         </div>
@@ -360,9 +331,8 @@
 
 {% block scripts %}
 {% compress js %}
-<script src="{% static 'js/collapse-native.js' %}"></script>
-<script src="{% static 'js/tab-native.js' %}"></script>
 <script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
+<script src="{% static 'js/bootstrap.min.js' %}"></script>
 <script src="{% static 'js/clipboard.min.js' %}"></script>
 <script src="{% static 'js/snippet-copy.js' %}"></script>
 {% endcompress %}