Updates site UI changes (#2264)

* Updates site UI changes

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* Addresses code review feedback, removes feedback

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* Adds back feedback mechanism

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* Makes back to top button non-transparent

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* Small change in style

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* Adds margin to copy button wrap

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

_layouts/default.html

@@ -96,7 +96,7 @@ layout: table_wrappers
             {% endif %}
           {% endfor %}
         {% endif %}
-      </nav>
+        </nav>
     </div>
     <div class="copy-banner">
       <div class="container">
@@ -154,7 +154,7 @@ layout: table_wrappers
 
           {% if page.has_children == true and page.has_toc != false %}
             <hr>
-            <h2 class="text-delta">Table of contents</h2>
+            <h2>Related articles</h2>
             <ul>
               {% for child in toc_list %}
                 <li>
@@ -208,7 +208,6 @@ layout: table_wrappers
           </div>
           {% include feedback.html %}
         </div>
-        {% comment %}{% include feedback.html %}{% endcomment %}
       </div>
       {% 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 %}
   <script src="{{ '/assets/js/search.js' | relative_url }}"></script>
   {% endif %}
-  <script src="{{ '/assets/js/copy.js' | relative_url }}"></script>
+  <script src="{{ '/assets/js/copy-button.js' | relative_url }}"></script>
   <script src="{{ '/assets/js/nav-scroll.js' | relative_url }}"></script>
-  <script src="{{ '/assets/js/feedback.js' | relative_url }}"></script>
-  <script src="{{ '/assets/js/link-feedback.js' | relative_url }}"></script>
+  <script src="{{ '/assets/js/listener.js' | relative_url }}"></script>
 </body>
 </html>

_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;

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);

assets/js/feedback.js

@@ -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;
-        }
-    });
-});

assets/js/link-feedback.js

@@ -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);
-        });
-    });
-}

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);
+}