Learn to use OpenSearch, the highly scalable and extensible open-source software suite for search, analytics, observability, and other data-intensive applications.
diff --git a/_includes/feedback.html b/_includes/feedback.html
index 9b0003af..3d99e780 100644
--- a/_includes/feedback.html
+++ b/_includes/feedback.html
@@ -1,9 +1,15 @@
-
-
✔ Yes
-
✖ No
-
Thank you for your feedback!
+
+ ✔ Yes
+ ✖ No
+
+
+
350 characters left
+
Send
+
Thank you for your feedback!
Want to contribute? Edit this page or create an issue .
\ No newline at end of file
diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
index fbc8329c..0a30c9fe 100755
--- a/_sass/custom/custom.scss
+++ b/_sass/custom/custom.scss
@@ -201,25 +201,38 @@ img {
@include btn-color($white, $green-300);
}
-.btn-general {
+@mixin btn-default {
color: $blue-100;
background-color: white;
font-size: 0.9rem;
font-weight: 510;
- border-width:1px;
- border-style:solid;
- border-color: $blue-100;
+ border-width: 1px;
+ border-style: solid;
border-radius: 5px;
box-shadow: 1px 1px $grey-lt-300;
+ cursor: pointer;
+}
+
+@mixin elt-disabled {
+ color: mix(black, $base-button-color, 40%);
+ border-color: $base-button-color;
+ cursor: default;
+ background-color: mix(white, $base-button-color, 50%);
+ box-shadow: none;
+}
+
+.btn-general {
+ @include btn-default;
+ border-color: $blue-100;
padding: 0.5rem 1rem;
margin-left: 0.4rem;
margin-right: 0.4rem;
&:hover {
&:not([disabled]) {
- background-color: $blue-lt-000;
+ background-color: $blue-lt-100;
box-shadow: 1px 2px 4px $grey-lt-300;
transform: translateY(-1px);
- text-decoration:underline;
+ text-decoration: underline;
text-underline-offset: 2px;
}
&:active {
@@ -227,11 +240,7 @@ img {
}
}
&:disabled {
- color: mix(black, $base-button-color, 25%);
- border: none;
- cursor: default;
- background-color: mix(white, $base-button-color, 75%);
- box-shadow: none;
+ @include elt-disabled;
}
}
@@ -282,22 +291,82 @@ img {
@extend .copy-button;
}
-// Feedback buttons
-.feedback-button {
+.send-button {
@extend .btn-general;
- margin-left: 0.2rem;
- margin-right: 0.2rem;
}
// Feedback question
.feedback-header {
@extend %toc-font;
letter-spacing: 0.08em;
- margin-top: 1rem;
- margin-bottom: 1rem;
+ margin: 1rem 0;
}
-// Feedback confirmation
+.feedback-text-header {
+ text-align: left;
+ font-size: 0.8rem;
+ font-weight: 500;
+ margin-top: 1rem;
+}
+
+.feedback-radio-div {
+ display: flex;
+ justify-content: space-between;
+}
+
+// hide the browser-rendered radio button
+.feedback-radio-div input[type="radio"] {
+ display: none;
+}
+
+.feedback-radio {
+ @include btn-default;
+ border-color: $grey-lt-100;
+ margin: 0;
+ padding: 0.5rem 1.2rem;
+ border-color: $grey-lt-100;
+ &:hover {
+ &:not([disabled]) {
+ background-color: mix(white, $blue-lt-000, 50%);
+ box-shadow: 1px 2px 4px $grey-lt-300;
+ }
+ }
+}
+
+.feedback-radio-div input[type="radio"]:checked+label {
+ border-color: $blue-100;
+ background-color: $blue-lt-100;
+ box-shadow: inset 1px 1px 3px $blue-dk-100;
+}
+
+.feedback-radio-div input[type="radio"]:disabled+label {
+ @include elt-disabled;
+}
+
+// Feedback text area
+textarea {
+ @extend .panel, .img-border;
+ width: 100%;
+ height: 5rem;
+ color: $grey-dk-300;
+ background-color: mix(white, $grey-lt-000, 50%);
+ font-size: 0.9rem;
+ resize: vertical;
+ &:focus {
+ outline: none;
+ border: 1px solid $blue-100;
+ background-color: white;
+ }
+ &:disabled {
+ @include elt-disabled;
+ }
+}
+
+.num-chars {
+ margin-bottom: 0.5rem;
+ text-align: left;
+ color: mix(white, $grey-dk-300, 40%);
+}
.hidden {
visibility: hidden;
diff --git a/assets/js/listener.js b/assets/js/listener.js
index 7f12c3c5..a0f28829 100644
--- a/assets/js/listener.js
+++ b/assets/js/listener.js
@@ -1,3 +1,12 @@
+const yesButton = document.getElementById('yes');
+const noButton = document.getElementById('no');
+const numCharsLabel = document.getElementById('num-chars');
+const sendButton = document.getElementById('send');
+const commentTextArea = document.getElementById('comment');
+const thankYouText = document.getElementById('thank-you');
+
+document.addEventListener('DOMContentLoaded', updateTextArea);
+
document.addEventListener('click', function(event) {
const { target } = event;
if (target.matches('.feedback-issue')) {
@@ -7,7 +16,10 @@ document.addEventListener('click', function(event) {
gtag('event', 'edit_page_click');
}
else if (target.matches('.feedback-button')) {
- sendFeedback(target);
+ sendButton.disabled = false;
+ }
+ else if (target.matches('.send-button')) {
+ sendFeedback();
}
else if (target.matches('.copy-button')) {
window.navigator.clipboard.writeText(target.getAttribute('data-text'));
@@ -17,17 +29,51 @@ document.addEventListener('click', function(event) {
}
});
-function sendFeedback(button) {
+commentTextArea.addEventListener('input', updateTextArea);
+
+function updateTextArea() {
+ const text = commentTextArea.value.trim();
+
+ if (!yesButton.checked && !noButton.checked) {
+ text.length > 0 ? sendButton.disabled = false : sendButton.disabled = true;
+ }
+
+ // calculate the number of characters remaining
+ counter = 350 - commentTextArea.value.length;
+ numCharsLabel.innerText = counter + " characters left";
+}
+
+function sendFeedback() {
+ let helpful = 'none';
+ if (yesButton.checked) {
+ helpful = 'yes';
+ }
+ else if (noButton.checked) {
+ helpful = 'no';
+ }
+
+ let comment = commentTextArea.value.trim();
+ if(comment.length == 0) {
+ comment = 'none';
+ }
+
+ if (helpful === 'none' && comment === 'none') return;
+
gtag('event', 'feedback_click', {
- 'helpful': button.value
+ 'helpful': helpful,
+ 'comment': comment
});
+
// 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');
+ thankYouText.classList.remove('hidden');
// disable the feedback buttons
- button.disabled = true;
- button[button.id === 'yes' ? 'nextElementSibling' : 'previousElementSibling']?.setAttribute('disabled', true);
-}
\ No newline at end of file
+ yesButton.disabled = true;
+ noButton.disabled = true;
+
+ // disable the text area
+ commentTextArea.disabled = true;
+
+ // disable the send button
+ sendButton.disabled = true;
+}
diff --git a/images/graphic-bg.jpg b/images/graphic-bg.jpg
deleted file mode 100644
index 5d11b962..00000000
Binary files a/images/graphic-bg.jpg and /dev/null differ
diff --git a/images/graphic-bg.png b/images/graphic-bg.png
new file mode 100644
index 00000000..3267f59f
Binary files /dev/null and b/images/graphic-bg.png differ