diff options
-rw-r--r-- | content/assets/javascripts/clipboardjs.js | 37 | ||||
-rw-r--r-- | content/assets/stylesheets/_variables.scss | 3 | ||||
-rw-r--r-- | content/assets/stylesheets/highlight.scss | 4 | ||||
-rw-r--r-- | content/assets/stylesheets/stylesheet.scss | 49 | ||||
-rw-r--r-- | layouts/default.html | 5 | ||||
-rw-r--r-- | layouts/instantsearch.html | 2 |
6 files changed, 88 insertions, 12 deletions
diff --git a/content/assets/javascripts/clipboardjs.js b/content/assets/javascripts/clipboardjs.js new file mode 100644 index 00000000..15f9ebf9 --- /dev/null +++ b/content/assets/javascripts/clipboardjs.js @@ -0,0 +1,37 @@ +// add a copy button to every code // working +$('pre').append($('<button class="clip-btn" title="Click to copy" data-selector="true"><i class="fa fa-clipboard" aria-hidden="true"></i></button>')); + +// Tooltip +$('button').tooltip({ + trigger: 'click', + placement: 'auto left' +}); + +function setTooltip(btn, message) { + $(btn).tooltip('hide') + .attr('data-original-title', message) + .tooltip('show'); +} + +function hideTooltip(btn) { + setTimeout(function() { + $(btn).tooltip('hide'); + }, 1000); +} + +// trigger clipboardjs +var clipboard = new ClipboardJS('.clip-btn', { + target: function(trigger) { + return trigger.previousElementSibling; + } +}); + +clipboard.on('success', function(e) { + setTooltip(e.trigger, 'Copied!'); + hideTooltip(e.trigger); +}); + +clipboard.on('error', function(e) { + setTooltip(e.trigger, 'Failed!'); + hideTooltip(e.trigger); +}); diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss index c8441744..382618a0 100644 --- a/content/assets/stylesheets/_variables.scss +++ b/content/assets/stylesheets/_variables.scss @@ -18,6 +18,9 @@ $link-code-color: rgb(55, 119, 176); $code-color: rgb(95, 131, 65); $code-background-color: rgba(95, 131, 65, .1); +//copy button bkg color == pre code color +$pre-code-color: #2b303b; + // Home page colors $landing-background: #34373c; $topic-border: rgb(215, 215, 215); diff --git a/content/assets/stylesheets/highlight.scss b/content/assets/stylesheets/highlight.scss index ec916705..ad7deb9a 100644 --- a/content/assets/stylesheets/highlight.scss +++ b/content/assets/stylesheets/highlight.scss @@ -8,16 +8,18 @@ pre.highlight { border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15); border-radius: 3px; - overflow-x: auto; + overflow-x: hidden; margin: 20px 0; background: #2b303b; color: #eff1f5; // Code itself code { + display: block; border-color: transparent; color: inherit; background-color: transparent; + overflow-x: scroll; } .hll { background-color: #4f5b66 } diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss index d4ef0b0a..395c180f 100644 --- a/content/assets/stylesheets/stylesheet.scss +++ b/content/assets/stylesheets/stylesheet.scss @@ -1,5 +1,5 @@ --- -version: 33 +version: 34 --- @import "variables"; @@ -81,22 +81,48 @@ blockquote { pre { background-color: $pre-background-color; + position: relative; code { + color: $code-color; + background-color: $code-background-color; word-wrap: normal; word-break: normal; white-space: pre; } -} -hr { - border: 0; - border-top: 1px solid $hr-border-color; -} + .clip-btn { + display: inline-block; + padding: 5px; + padding-left: 10px; + right: 5px; + top: 5px; + cursor: pointer; + position: absolute; + color: $white; + background-color: $pre-code-color; + border: 0; + outline: 0; -code { - color: $code-color; - background-color: $code-background-color; + i { + opacity: .5; + transition: opacity .3s ease-in; + } + + @media all and (max-width: $mobile-width) { + display: none; + } + } + + &:hover { + .clip-btn { + background-color: $pre-code-color; + + i { + opacity: 1; + } + } + } } code, code span { @@ -112,6 +138,11 @@ a > code { color: $link-code-color; } +hr { + border: 0; + border-top: 1px solid $hr-border-color; +} + // Make code in headers match the font size of the given header. h2, h3, h4, h5, h6 { border-bottom: solid 1px $h-border-bottom; diff --git a/layouts/default.html b/layouts/default.html index b08da70f..3b2e22bc 100644 --- a/layouts/default.html +++ b/layouts/default.html @@ -59,7 +59,10 @@ </div> <div class="clear"></div> </div> - + <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script> + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> + <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script> + <script type="application/javascript" src="/assets/javascripts/clipboardjs.js"></script> <%= render '/footer.*' %> <%= render '/docsearch.*' %> <%= render '/analytics.*' %> diff --git a/layouts/instantsearch.html b/layouts/instantsearch.html index 76347e10..ca5e9a15 100644 --- a/layouts/instantsearch.html +++ b/layouts/instantsearch.html @@ -8,7 +8,6 @@ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.5.0/dist/instantsearch-theme-algolia.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.5.0/dist/instantsearch.min.css"> <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.5.0"></script> - <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script> <!-- end of instantsearch --> </head> <body> @@ -21,6 +20,7 @@ <hr> <div class="clear"></div> </div> + <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script> <script type="application/javascript" src="/assets/javascripts/instantsearch.js"></script> <%= render '/footer.*' %> <%= render '/analytics.*' %> |