From 10e0c5de7c727a1588f4923a6a5ffdd1af741e86 Mon Sep 17 00:00:00 2001 From: kolchfa-aws <105444904+kolchfa-aws@users.noreply.github.com> Date: Tue, 27 Dec 2022 11:45:32 -0500 Subject: [PATCH] Updates site UI changes (#2264) * Updates site UI changes Signed-off-by: Fanit Kolchina * Addresses code review feedback, removes feedback Signed-off-by: Fanit Kolchina * Adds back feedback mechanism Signed-off-by: Fanit Kolchina * Makes back to top button non-transparent Signed-off-by: Fanit Kolchina * Small change in style Signed-off-by: Fanit Kolchina * Adds margin to copy button wrap Signed-off-by: Fanit Kolchina Signed-off-by: Fanit Kolchina --- _layouts/default.html | 10 ++++----- _sass/custom/custom.scss | 10 ++++++--- assets/js/{copy.js => copy-button.js} | 14 ++++-------- assets/js/feedback.js | 32 --------------------------- assets/js/link-feedback.js | 13 ----------- assets/js/listener.js | 30 +++++++++++++++++++++++++ 6 files changed, 45 insertions(+), 64 deletions(-) rename assets/js/{copy.js => copy-button.js} (83%) delete mode 100644 assets/js/feedback.js delete mode 100644 assets/js/link-feedback.js create mode 100644 assets/js/listener.js diff --git a/_layouts/default.html b/_layouts/default.html index 5397d994..dda0586b 100755 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -96,7 +96,7 @@ layout: table_wrappers {% endif %} {% endfor %} {% endif %} - +
@@ -154,7 +154,7 @@ layout: table_wrappers {% if page.has_children == true and page.has_toc != false %}
-

Table of contents

+

Related articles

    {% for child in toc_list %}
  • @@ -208,7 +208,6 @@ layout: table_wrappers
{% include feedback.html %}
- {% comment %}{% include feedback.html %}{% endcomment %} {% if site.search_enabled != false %} {% if site.search.button %} @@ -231,9 +230,8 @@ layout: table_wrappers {% if site.search_enabled == false and site.use_custom_search == true %} {% endif %} - + - - + diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss index c5afe8a0..b2fd92f8 100755 --- a/_sass/custom/custom.scss +++ b/_sass/custom/custom.scss @@ -49,8 +49,6 @@ code { .site-nav { padding-top: 1rem; - - display: static; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); @@ -229,11 +227,12 @@ img { width: 2.5rem; height: 2.5rem; color: $blue-dk-100; + background-color: white; border-width:2px; border-style:solid; border-color: $grey-lt-300; border-radius: 10px; - box-shadow: 1px 2px 3px $grey-lt-300; + box-shadow: 1px 1px 1px $grey-lt-300; padding: 0.2rem; position: fixed; bottom: 30px; @@ -252,6 +251,7 @@ img { .copy-button-wrap { background-color: $sidebar-color; padding: 0 2rem 0.5rem 2rem; + margin-bottom: 0.75rem; display: flex; justify-content: flex-end; } @@ -560,6 +560,10 @@ main { .container { box-sizing: content-box; + @include mq(xs) { + padding: 0 calc(#{$top-button-margin} + 1rem); + } + @include mq(md) { margin: 0 auto; max-width: 1400px; diff --git a/assets/js/copy.js b/assets/js/copy-button.js similarity index 83% rename from assets/js/copy.js rename to assets/js/copy-button.js index 90d47c90..c26cedfd 100644 --- a/assets/js/copy.js +++ b/assets/js/copy-button.js @@ -30,16 +30,10 @@ function createButton(textToCopy, buttonText, buttonAriaLabel, curl) { copyButton.ariaLabel = buttonAriaLabel; if (curl) { - copyButton.addEventListener('click', function onClick() { - // Copy snippet as curl - window.navigator.clipboard.writeText(addCurl(textToCopy)); - }); + copyButton.setAttribute('data-text', addCurl(textToCopy)); } else { - copyButton.addEventListener('click', function onClick() { - // Copy snippet to clipboard - window.navigator.clipboard.writeText(textToCopy); - }); + copyButton.setAttribute('data-text', textToCopy); } return copyButton; @@ -50,8 +44,8 @@ function addCurl(textToCopy) { const httpMethod = textToCopy.substring(0, firstSpaceIndex); const firstCurlyIndex = textToCopy.indexOf("{"); - var body; - var path; + let body; + let path; if (firstCurlyIndex == -1) { body = ""; path = textToCopy.substring(firstSpaceIndex + 1); diff --git a/assets/js/feedback.js b/assets/js/feedback.js deleted file mode 100644 index e99eaaf6..00000000 --- a/assets/js/feedback.js +++ /dev/null @@ -1,32 +0,0 @@ -const feedbackButtons = document.querySelectorAll('.feedback-button'); - -feedbackButtons.forEach((button) => { - button.addEventListener('click', function onClick(event) { - gtag('event', 'feedback_click', { - 'helpful': button.value - }); - // find the hidden feedback text - sibling = button.nextElementSibling; - - while (!(sibling.classList.contains('text-small') && sibling.classList.contains('hidden'))) { - sibling = sibling.nextElementSibling; - } - // show the hidden feedback text - if (sibling != null) { - sibling.classList.remove('hidden'); - } - - // disable the feedback buttons - button.disabled = true; - var buttonSibling; - if (button.id === 'yes') { - buttonSibling = button.nextElementSibling; - } - else { - buttonSibling = button.previousElementSibling; - } - if (buttonSibling != null) { - buttonSibling.disabled = true; - } - }); -}); diff --git a/assets/js/link-feedback.js b/assets/js/link-feedback.js deleted file mode 100644 index dc7c44ff..00000000 --- a/assets/js/link-feedback.js +++ /dev/null @@ -1,13 +0,0 @@ -const feedbackIssueLinks = document.querySelectorAll('.feedback-issue'); -addLinkListener(feedbackIssueLinks, 'submit_issue_click'); - -const feedbackEditLinks = document.querySelectorAll('.feedback-edit'); -addLinkListener(feedbackEditLinks, 'edit_page_click'); - -function addLinkListener(links, eventName) { - links.forEach((link) => { - link.addEventListener('click', function onClick(event) { - gtag('event', eventName); - }); - }); -} diff --git a/assets/js/listener.js b/assets/js/listener.js new file mode 100644 index 00000000..4ae4f3bf --- /dev/null +++ b/assets/js/listener.js @@ -0,0 +1,30 @@ +document.addEventListener('click', function(event) { + const { target } = event; + if (target.matches('.feedback-issue')) { + gtag('event', 'submit_issue_click'); + } + else if (target.matches('.feedback-edit')) { + gtag('event', 'edit_page_click'); + } + else if (target.matches('.feedback-button')) { + sendFeedback(target); + } + else if (target.matches('.copy-button')) { + window.navigator.clipboard.writeText(target.getAttribute('data-text')); + } +}); + +function sendFeedback(button) { + gtag('event', 'feedback_click', { + 'helpful': button.value + }); + // show the hidden feedback text + const parent = button.parentElement; + const index = [...parent.children].indexOf(button) + 1; + const sibling = parent.querySelector(`:nth-child(${index}) ~ .text-small.hidden`); + sibling?.classList.remove('hidden'); + + // disable the feedback buttons + button.disabled = true; + button[button.id === 'yes' ? 'nextElementSibling' : 'previousElementSibling']?.setAttribute('disabled', true); +}