Backports final UI changes to 2.3 (#2293)

* Backports final UI changes to 2.3

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

* Removes previous version of script

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

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

_layouts/default.html

@@ -96,10 +96,7 @@
             {% endif %}
           {% endfor %}
         {% endif %}
-        <div class="site-footer">
-          <p class="text-small text-grey-dk-100">See a problem? Submit <a href="https://github.com/opensearch-project/documentation-website/issues">issues</a> or <a href="https://github.com/opensearch-project/documentation-website/edit/main/{{ page.path }}">edit this page</a> on <a href="https://github.com/opensearch-project/documentation-website/">GitHub</a>.</p>
-        </div>
-      </nav>
+        </nav>
     </div>
     <div class="copy-banner">
       <div class="container">
@@ -157,7 +154,7 @@ <h1><a href="#">Documentation</a></h1>
 
           {% 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>
@@ -166,10 +163,7 @@ <h2 class="text-delta">Table of contents</h2>
               {% endfor %}
             </ul>
           {% endif %}
-          <!--
-          <hr>
-          {% include feedback.html %}
-          -->
+
           {% capture footer_custom %}
             {%- include footer_custom.html -%}
           {% endcapture %}
@@ -214,7 +208,6 @@ <h2 class="text-delta">Table of contents</h2>
           </div>
           {% include feedback.html %}
         </div>
-        {% comment %}{% include feedback.html %}{% endcomment %}
       </div>
       {% if site.search_enabled != false %}
         {% if site.search.button %}
@@ -237,9 +230,8 @@ <h2 class="text-delta">Table of contents</h2>
   {% 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.js → 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/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);
+}