diff options
author | Puru Vijay <47742487+PuruVJ@users.noreply.github.com> | 2022-03-09 18:32:58 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-03-09 18:32:58 +0300 |
commit | 645f95584551409660fcd9b990fc24caa0327df5 (patch) | |
tree | 7c2e06398708c563cecd43c5b9df2d01188093fc /site/assets | |
parent | 7e5a8016ba557641ee93b38aed4482a1360b64af (diff) |
docs: add a StackBlitz "Try It" button in code examples (#35644)
Co-authored-by: GeoSot <geo.sotis@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Diffstat (limited to 'site/assets')
-rw-r--r-- | site/assets/js/application.js | 27 | ||||
-rw-r--r-- | site/assets/scss/_clipboard-js.scss | 11 |
2 files changed, 26 insertions, 12 deletions
diff --git a/site/assets/js/application.js b/site/assets/js/application.js index b267bfb6f2..1719ed9f2a 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -125,17 +125,24 @@ element.insertAdjacentHTML('beforebegin', btnHtml) }) - document.querySelectorAll('.btn-clipboard') - .forEach(function (btn) { - var tooltipBtn = new bootstrap.Tooltip(btn, { title: btnTitle }) - - btn.addEventListener('mouseleave', function () { - // Explicitly hide tooltip, since after clicking it remains - // focused (as it's a button), so tooltip would otherwise - // remain visible until focus is moved away - tooltipBtn.hide() - }) + /** + * + * @param {HTMLButtonElement} btn + * @param {string} title + */ + function snippetButtonTooltip(btn, title) { + var tooltipBtn = new bootstrap.Tooltip(btn, { title: title }) + + btn.addEventListener('mouseleave', function () { + // Explicitly hide tooltip, since after clicking it remains + // focused (as it's a button), so tooltip would otherwise + // remain visible until focus is moved away + tooltipBtn.hide() }) + } + + snippetButtonTooltip(document.querySelector('.btn-clipboard'), 'Copy to clipboard') + snippetButtonTooltip(document.querySelector('.btn-edit'), 'Edit on Stackblitz') var clipboard = new ClipboardJS('.btn-clipboard', { target: function (trigger) { diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss index 83b9a8b9e5..b2b0854dc4 100644 --- a/site/assets/scss/_clipboard-js.scss +++ b/site/assets/scss/_clipboard-js.scss @@ -2,7 +2,8 @@ // // JS-based `Copy` buttons for code snippets. -.bd-clipboard { +.bd-clipboard, +.bd-edit { position: relative; display: none; float: right; @@ -16,7 +17,8 @@ } } -.btn-clipboard { +.btn-clipboard, +.btn-edit { position: absolute; top: .65rem; right: .65rem; @@ -25,6 +27,7 @@ padding: .25rem .5rem; @include font-size(.65em); color: $primary; + white-space: nowrap; background-color: $white; border: 1px solid; @include border-radius(); @@ -35,3 +38,7 @@ background-color: $primary; } } + +.btn-edit { + right: 3.65rem; +} |