From 913b82eb23452b3859b9cdb4357fc76f0eaff9e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C4=93teris=20Caune?= Date: Sat, 1 Oct 2016 17:48:17 +0300 Subject: [PATCH] Use icon in the "copy" button. Add "copy" buttons dynamically, in JS. CSS tweaks. --- static/css/base.css | 4 ++ static/css/docs.css | 7 +--- static/css/icomoon.css | 13 +++--- static/css/my_checks.css | 24 +++++------ static/css/snippet-copy.css | 43 ++++--------------- static/css/welcome.css | 43 ++++++++----------- static/fonts/icomoon.eot | Bin 2728 -> 2968 bytes static/fonts/icomoon.svg | 1 + static/fonts/icomoon.ttf | Bin 2564 -> 2804 bytes static/fonts/icomoon.woff | Bin 2640 -> 2880 bytes static/js/snippet-copy.js | 33 +++++++++++---- templates/front/docs.html | 55 ++++++------------------ templates/front/docs_api.html | 21 +++------- templates/front/my_checks.html | 58 +++++++------------------- templates/front/snippets/browser.html | 3 +- templates/front/snippets/browser.txt | 1 + templates/front/welcome.html | 56 ++++++------------------- 17 files changed, 123 insertions(+), 239 deletions(-) diff --git a/static/css/base.css b/static/css/base.css index 825e77f5..2fa9f07e 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -74,4 +74,8 @@ body { .dialog-body { margin: 24px 0; +} + +pre { + border: 0; } \ No newline at end of file diff --git a/static/css/docs.css b/static/css/docs.css index c50fc5dd..ff2188e0 100644 --- a/static/css/docs.css +++ b/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; -} diff --git a/static/css/icomoon.css b/static/css/icomoon.css index a62470b5..287b9c92 100644 --- a/static/css/icomoon.css +++ b/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"; } diff --git a/static/css/my_checks.css b/static/css/my_checks.css index c9f5924d..89344664 100644 --- a/static/css/my_checks.css +++ b/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; - } diff --git a/static/css/snippet-copy.css b/static/css/snippet-copy.css index 2e53acfc..315aa3fb 100644 --- a/static/css/snippet-copy.css +++ b/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 } diff --git a/static/css/welcome.css b/static/css/welcome.css index 7834726d..625483e3 100644 --- a/static/css/welcome.css +++ b/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 { diff --git a/static/fonts/icomoon.eot b/static/fonts/icomoon.eot index 2d318da4a533e953f541f58e4e435764be81aaaa..870829768b694e8d3b23cbff6b4d08e02b2d621c 100644 GIT binary patch delta 598 zcmXAmO=uHA6vyAp!EQ(){&8BEo#v&e?;;9~51YOgQ2#E=%hYCu@ zi}$#f3Lbh;C|-N%p~xJ(2zseKdN7AzdMQ*?1WoGOIPiGy_y0fMe61U+sqkt7;72Pw z9%}E^8vedE(wZqX{{p}k#=TP2t3Mlh`U`+$kY6o%jXLIGB3|UhGTaK0r(h{HnK7hhrDu z4hrW`7=7qf7hX=q{vc1|CeQ1&#xgK;Aifj$z}U7wPp;8j@L!V&OQM*;^D#IC1V+D- z_H5@v=TqnNx8L1r_fdCq7hcdz(4Cy;{LLW&wX0C9RSmZKsas@YEaB@il)c})*nJ+NMwX*JE z;+ihOl9+}WwG4-;!p`;X4V8Ly-SafaP!^-B8;?(~GY<|M(gAh_-?*RxRg%Ef@f`O}1+iTw)y7Che zp#kq05A@()0gFLqZ<+F^wTndepJ*b)B!IuAjU8b#gAqE+!Qj1s`q$~v4HkPt{sE2h BjKTl_ delta 377 zcmbOszCx6B1s4MY%S2XlmSFjJN|PUQicAbiuHVhTz_1616OwZi3pV{o`pCe*C;0MY_L{sth;k)BhTmJs5;6v*Gfz`%MWBQ-IFYqrb@1_t&TpuAZIP=Gy$`67_N z1;|&)$StWbV_@9}Y`6DtZBMD-YAfC4r^0foH8+|-#~ zoWFs5pcrFYL4I)w12a&Df%6GSo`IS9=HwJcJEj*qCNE*MwygjPN&(%+%)rIK$e{3m z@nPiClTXh+z5M*gi`*AQFLwO@`~N>kJ5Y`RF8BRK4oGgY0+SRAP%GnPM<(gbu}o)J zwHd)`8I<112gmc + \ No newline at end of file diff --git a/static/fonts/icomoon.ttf b/static/fonts/icomoon.ttf index 21cc60cc7539fbe122c26602b1b13df3800ee737..cea03cff95d47ce7aa6facb6ef67d3b1a43e3436 100644 GIT binary patch delta 618 zcmXAnO=uHA6oB9CB+Z|aZrjbqF_vuBEQ(4cn_bap8H;#mL=P53Db%&LjgXjNdZ-7< z2;$x5B=pdWPz3SNOAjJ*@Zv!awFeI#ED}sEf}$eSB)*NqJl^}>d-G=A%sd+VsWpHA zKnw&>ICNV8E$XlqxOXd5Ei^kMJWC<{| zQCjeBM}H(wV5o#~w}g&RnQkMmBOfkRmRC-T;A`YJ$QR1h`SV`nQ|uN%B`WDofgZt}QRtuNz2aYT3gI8eI%L{2IlSS1Bhpeu!^qp%OVN`EH1 z*IRE}?^++e{%Kd*_u5+>XwH&UrUU(MzYnDUB^?-l!6sROxyey|U0>6$>Hc!k{2m!y zjRtUTz9jF1jSyA_DyW2UI0Xfmf{QQ>mjSYdYG}5aw~mp#WoCvnU(~ULZRFf@#3W~k zopYVMYv&RgdVNf2M&6~iV`iQG#4#L#CNVT4WNNk|yFwA%VzTHsMae9SDS}xI-h;$2 z^O0Fcl1Ww9kMbKpw_}O0&3k-NiyQBKA4QLEBeNJU_BQ!zO=Eo2ZPyx_PhBG5{ VW>7+f8!)&pQ2cA$oC`lA{{W>zk?sHh delta 349 zcmew&+9FcVz{tSBz|GLWz|3IaAFOZ0FT}bVD6$8L6OwZi3pV{o`pCe*C; z0MY_L{sth;k)BhTmJs5;6v*Gfz`%MWBQ-IFYqrb@1_t&TpuAZIP=Gy$`67_N1;|&) z$StWbV_@9}j zP>ivyAiuZ-=ujZwd;*eZU}nBK@qiuEiye~~traVPLQ+82F*9%heWmb#@nPiClTXh+ zz5M*gi`*AQFLq3hW0aX(!zjf9RKhrUA*00RZH(txwLu{O1WNDZgX8&azA|vLfcckS xzOe=|U^Me8=FrJgIP@6>CLiH&n9RYcBm|TNX%=9JVu0vj0-7qk*`ISMBLIGrRYL#( diff --git a/static/fonts/icomoon.woff b/static/fonts/icomoon.woff index 642be6a5abbf1b8dc552592f32a413926fe8af04..8c57375ea73c29a3ece30862357969c224135cf3 100644 GIT binary patch delta 637 zcmXw%PiPZC6vp4%O`D{NG>h469Ba&Wn?)%iWV0(8EkltU8mX6pD1yZPi;$RN3f6;U zym;5WDD>d52%hSpr?OWMid2sx7AdA69;Av;llUgB13%_{-+a882lGA|q>}fqmP&v? zE5;!v_o2Nf$??|T*?MIO0ITGzN*)bA{JmIdlBa}7M-E9W)*dX77Y7(zlPs8%$E)*| zIf}fdj3*iTnLbk`lf3Vw$0XsJx>c<&uK+|7q%TX(i-FBrW0rE$(V73j=%?82dS!(! zj#3!1eU8D+yOsJpdC%yPk0sBiqWepY<}yukkdaxH(yF@U$8kd01^)^bEkV`@BBicPR0^U_C+7sje_%}Ds4 z@#OkGz8h$TsUN694Il&Opa_#tf+?5=$eEg{J6gdW$AWE*4(bvunR3j$cL^=LfKJ|X z3!alt>Eue8(#?XWIZKeojw|Ey)2__}8 zPo>kEVVv$lE++&A^m;(vfgnKMB?2M1!l_`kTQ0jc>riDgp-|U@1~xlkb%ApcP__pg z1?QaRLxNVb@niee@Wo#clYaoCi;TwAnSKim MZa{ebX=D@s0nP7`*Z=?k delta 420 zcmX>gc0oj>+~3WOfsp|SxB?is!8FU{kBlOdm{=z22-ojU&P^;}U|`Gu%1i;_O+S)8 zrY9DI#Qp&J98fHfo>Q5|z`(@9z`%M0gcCyCmu93UrZ6zDp8%>c17WV&GAA;Cf)H&C zDnKz6_8jJm8M!4DKrs;C0ffyMSoh`RCj-^_aR3cqPy%7jI~;tui4{PLIXZxR1uzz6 zh{;RLO$Car06M4*glBqj{w~NbE&+PT0IrT1$YN%`Ihlvij_JjY$v%wMia;9~q!IZ${#SUw_%QP6$){(ZUVi@LMed6tpsH1jGIIa_{{PRw`2Vp2i`-f%J1J`^GYMhw z1>$qW!+{zZApym@nVIPvt2Q_gfew8q9~{qb^Ob>{1!w~U!{wK6tdVKvRm`E2A8_b1 i3QQK@beJ5%sU!rH25A;xh+=@~VFDT~ym>a~Qbqt`yJC9) diff --git a/static/js/snippet-copy.js b/static/js/snippet-copy.js index cc8225c2..7f5efb9c 100644 --- a/static/js/snippet-copy.js +++ b/static/js/snippet-copy.js @@ -1,11 +1,24 @@ $(function() { + if (/Mac/i.test(navigator.userAgent)) { + // No support for Safari :( + return; + } + + var markup = ''; + + + + $(".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) + }); }); diff --git a/templates/front/docs.html b/templates/front/docs.html index 7380450a..02e17114 100644 --- a/templates/front/docs.html +++ b/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.

-
- - {% include "front/snippets/crontab.html" %} -
+{% include "front/snippets/crontab.html" %}

With this simple modification, you monitor several failure scenarios:

@@ -113,41 +110,21 @@ thing: they fire off a HTTP GET method.

Ubuntu, for example, does not have curl installed out of the box.

-
- - {% include "front/snippets/bash_curl.html" %} -
- -
- - {% include "front/snippets/bash_wget.html" %} -
+{% include "front/snippets/bash_curl.html" %} +{% include "front/snippets/bash_wget.html" %}

Python

-
- - {% include "front/snippets/python_urllib2.html" %} -
-
- - {% include "front/snippets/python_requests.html" %} -
+{% include "front/snippets/python_urllib2.html" %} +{% include "front/snippets/python_requests.html" %}

Node

-
- - {% include "front/snippets/node.html" %} -
- +{% include "front/snippets/node.html" %}

PHP

-
- - {% include "front/snippets/php.html" %} -
+{% include "front/snippets/php.html" %}

Browser

@@ -156,10 +133,7 @@ thing: they fire off a HTTP GET method.

CORS header in its ping responses, so cross-domain AJAX requests should work.

-
- - {% include "front/snippets/browser.html" %} -
+{% include "front/snippets/browser.html" %}

PowerShell

@@ -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.

-
- - {% include "front/snippets/powershell.html" %} -
+{% include "front/snippets/powershell.html" %}

Save the above to e.g. C:\Scripts\healthchecks.ps1. Then use the following command in a Scheduled Task to run the script:

-
- -
- 
powershell.exe -ExecutionPolicy bypass -File C:\Scripts\healthchecks.ps1
-
+
+ 
powershell.exe -ExecutionPolicy bypass -File C:\Scripts\healthchecks.ps1
@@ -284,6 +252,7 @@ the following command in a Scheduled Task to run the script: {% block scripts %} {% compress js %} + {% endcompress %} diff --git a/templates/front/docs_api.html b/templates/front/docs_api.html index 9c61f2e1..4c823814 100644 --- a/templates/front/docs_api.html +++ b/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.

Example Request

-
- - {% include "front/snippets/list_checks_request.html" %} -
+{% include "front/snippets/list_checks_request.html" %}

Example Response

{% include "front/snippets/list_checks_response.html" %} @@ -170,16 +167,10 @@ The response may contain a JSON document with additional data.

Example Request

-
- - {% include "front/snippets/create_check_request_a.html" %} -
+{% include "front/snippets/create_check_request_a.html" %}

Or, alternatively:

-
- - {% include "front/snippets/create_check_request_b.html" %} -
+{% include "front/snippets/create_check_request_b.html" %}

Example Response

@@ -208,10 +199,7 @@ The response may contain a JSON document with additional data.

Example Request

-
- - {% include "front/snippets/pause_check_request.html" %} -
+{% include "front/snippets/pause_check_request.html" %}

Example Response

{% 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 %} + {% endcompress %} diff --git a/templates/front/my_checks.html b/templates/front/my_checks.html index 8da40727..072f6c2e 100644 --- a/templates/front/my_checks.html +++ b/templates/front/my_checks.html @@ -230,67 +230,37 @@
- -
{% with ping_url="" %}
-
- - {% include "front/snippets/crontab.html" %} -
+ {% include "front/snippets/crontab.html" %}
-
- - {% include "front/snippets/bash_curl.html" %} -
-
- - {% include "front/snippets/bash_wget.html" %} -
+ {% include "front/snippets/bash_curl.html" %} + {% include "front/snippets/bash_wget.html" %}
-
- - {% include "front/snippets/python_urllib2.html" %} -
-
- - {% include "front/snippets/python_requests.html" %} -
+ {% include "front/snippets/python_urllib2.html" %} + {% include "front/snippets/python_requests.html" %}
-
- - {% include "front/snippets/node.html" %} -
+ {% include "front/snippets/node.html" %}
-
- - {% include "front/snippets/php.html" %} -
+ {% include "front/snippets/php.html" %}
-
- - {% include "front/snippets/browser.html" %} -
+ {% include "front/snippets/browser.html" %}
-
- - {% include "front/snippets/powershell.html" %} -
+ {% include "front/snippets/powershell.html" %}
- As an alternative to HTTP/HTTPS requests, - you can "ping" this check by sending an - email message to - +

+ As an alternative to HTTP/HTTPS requests, + you can "ping" this check by sending an + email message to +

{% endwith %}
diff --git a/templates/front/snippets/browser.html b/templates/front/snippets/browser.html index 1f030cbd..131fc734 100644 --- a/templates/front/snippets/browser.html +++ b/templates/front/snippets/browser.html @@ -1,4 +1,5 @@ -
var xhr = new XMLHttpRequest();
+
// 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);
 

diff --git a/templates/front/snippets/browser.txt b/templates/front/snippets/browser.txt
index 93e083c0..1805a685 100644
--- a/templates/front/snippets/browser.txt
+++ b/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);
\ No newline at end of file
diff --git a/templates/front/welcome.html b/templates/front/welcome.html
index b9d4da42..00f46c98 100644
--- a/templates/front/welcome.html
+++ b/templates/front/welcome.html
@@ -59,64 +59,35 @@
             
             

                 

-                    

-                        
-                        {% include "front/snippets/crontab.html" %}
-                    

+                    {% include "front/snippets/crontab.html" %}
                 

                 

-                    

-                        
-                        {% include "front/snippets/bash_curl.html" %}
-                    

-                    

-                        
-                        {% include "front/snippets/bash_wget.html" %}
-                    

+                    {% include "front/snippets/bash_curl.html" %}
+                    {% include "front/snippets/bash_wget.html" %}
                 

                 

-                    

-                        
-                        {% include "front/snippets/python_urllib2.html" %}
-                    

-                    

-                        
-                        {% include "front/snippets/python_requests.html" %}
-                    

+                    {% include "front/snippets/python_urllib2.html" %}
+                    {% include "front/snippets/python_requests.html" %}
                 

                 

-                    

-                        
-                        {% include "front/snippets/node.html" %}
-                    

+                    {% include "front/snippets/node.html" %}
                 

                 

-                    

-                        
-                        {% include "front/snippets/php.html" %}
-                    

+                    {% include "front/snippets/php.html" %}
                 

                 

-                    

-                        
-                        {% include "front/snippets/browser.html" %}
-                    

+                    {% include "front/snippets/browser.html" %}
                 

                 

-                    

-                        
-                        {% include "front/snippets/powershell.html" %}
-                    

+                    {% include "front/snippets/powershell.html" %}
                 

                 

-                    

+                    

                         As an alternative to HTTP/HTTPS requests,
                         you can "ping" this check by sending an
                         email message to
-                        

-                    

+                        {{ check.email }}
+
@@ -360,9 +331,8 @@ {% block scripts %} {% compress js %} - - + {% endcompress %}