Move the feedback banner to the top

Author: alina-derkach-oaza

_resourcepdf/overrides/main.html

@@ -49,6 +49,9 @@
                 {% endif %}
                 <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" {{ hidden }}>
                   <div class="md-sidebar__scrollwrap">
+                    <div class="md-sidebar__inner">
+                      {% include "partials/feedback.html" %}
+                    </div>  
                     <div class="md-sidebar__inner">
                       {% include "partials/edit.html" %}
                     </div>

_resourcepdf/overrides/partials/feedback.html

@@ -0,0 +1,55 @@
+<div class="feedback-widget" style="
+  background: #fff;
+  border: 1px solid #ddd;
+  padding: 10px 15px;
+  border-radius: 0.2rem;
+  margin-bottom: 16px;
+  font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
+  font-size: 15px;
+  color: #000;
+  text-align: center;
+">
+  <div style="margin-bottom: 4px; font-weight: bold; color: #0E5FB5;">
+    Do you like Percona docs?
+  </div>
+  <div class="feedback-stars" style="display: inline-block;">
+    {% for i in range(1,6) %}
+      <span class="star" data-rating="{{ i }}" style="
+        font-size: 24px;
+        cursor: pointer;
+        margin: 0 2px;
+        color: #000;
+        display: inline-block;
+      ">☆</span>
+    {% endfor %}
+  </div>
+</div>
+
+<script>
+document.addEventListener("DOMContentLoaded", function () {
+  const stars = document.querySelectorAll(".feedback-stars .star");
+  stars.forEach((star) => {
+    const rating = parseInt(star.dataset.rating, 10);
+
+    star.addEventListener("mouseover", () => {
+      stars.forEach((s, index) => {
+        s.innerHTML = index < rating ? "★" : "☆";
+        s.style.color = index < rating ? "#0E5FB5" : "#000";
+      });
+    });
+
+    star.addEventListener("mouseleave", () => {
+      stars.forEach((s) => {
+        s.innerHTML = "☆";
+        s.style.color = "#000";
+      });
+    });
+
+    star.addEventListener("click", () => {
+      const formURL = "https://docs.google.com/forms/d/e/1FAIpQLSfhscELpzoXB4uyh9pXNmXSeqKc10IH_DxmAoaVGID85sO0Aw/viewform";
+      const ratingURL = `${formURL}?entry.303027158=${rating}`;
+      window.open(ratingURL, "_blank");
+    });
+  });
+});
+</script>

docs/css/extra.css

@@ -28,3 +28,10 @@
   fill: currentColor;
   vertical-align: middle;
 }
+
+.feedback-widget:hover {
+  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
+              0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+              0px 2px 4px -1px rgba(0, 0, 0, 0.20);
+  transition: all 0.2s ease-out;
+}

docs/js/feedback.js

@@ -70,7 +70,6 @@ extra_javascript:
   - js/version-select.js
   - js/promptremover.js
   - js/consent.js
-  - js/feedback.js
 
 markdown_extensions:
   attr_list: {}

mkdocs-base.yml

@@ -14,17 +14,5 @@ extra:
   analytics:
     provider: google
     property: G-J4J70BNH0G
-#    feedback:
-#      title: Was this page helpful?
-#      ratings:
-#        - icon: material/emoticon-happy-outline
-#          name: This page was helpful
-#          data: 1
-#          note: >-
-#            Thank you for your feedback!
-#        - icon: material/emoticon-sad-outline
-#          name: This page could be improved
-#          data: 0
-#          note: >- 
-#            Thanks for your feedback! Want to improve this page? Click <strong>Edit this page on GitHub</strong> above to submit a pull request.
+