From 1bd866cd3607543b3d712340c1a1d75ee1dc3226 Mon Sep 17 00:00:00 2001 From: xeniape Date: Wed, 1 Apr 2026 14:32:30 +0200 Subject: [PATCH 01/10] add feedback form frontend for testing --- src/css/feedback.css | 63 ++++++++++++++++++++++++++++++++++ src/css/site.css | 1 + src/css/vars.css | 7 ++++ src/js/08-feedback.js | 54 +++++++++++++++++++++++++++++ src/partials/article.hbs | 1 + src/partials/feedback-form.hbs | 21 ++++++++++++ 6 files changed, 147 insertions(+) create mode 100644 src/css/feedback.css create mode 100644 src/js/08-feedback.js create mode 100644 src/partials/feedback-form.hbs diff --git a/src/css/feedback.css b/src/css/feedback.css new file mode 100644 index 0000000..90b5f25 --- /dev/null +++ b/src/css/feedback.css @@ -0,0 +1,63 @@ +.feedback-section { + background-color: #1880bd1f; + margin-top: 1rem; + padding: 0.75rem; + border-radius: 0.25rem; + font-family: var(--body-font-family); + font-weight: var(--body-font-weight); +} + +.feedback-section-title { + font-family: var(--header-font-family); + font-weight: var(--heading-font-weight); +} + +.feedback-form-button, +.feedback-form-submit-button { + margin: 20px 10px 20px 0; + height: 2rem; + width: 7.5rem; + color: var(--feedback-button-font-color); + background: var(--feedback-button-background); + border-radius: calc(1.75rem / 2); + border-style: solid; + border-color: var(--feedback-button-border-color); +} + +.feedback-form-submit-button { + width: 10rem; +} + +.feedback-form-button.selected, +.feedback-form-submit-button.selected { + color: var(--feedback-button-font-color-selected); + border-color: var(--feedback-button-border-color-selected); +} + +.feedback-form-text { + display: flex; + flex-direction: column; +} + +.feedback-form-text.hide { + display: none !important; +} + +.feedback-form-text textarea { + resize: vertical; + border-style: none; +} + +.feedback-form-submit { + display: flex; + flex-direction: row; + align-items: center; +} + +.feedback-form-thank-you { + color: var(--feedback-thank-you-font-color); +} + +.feedback-form-thank-you.hide { + display: none !important; +} diff --git a/src/css/site.css b/src/css/site.css index 3caccc1..9f0feeb 100644 --- a/src/css/site.css +++ b/src/css/site.css @@ -21,3 +21,4 @@ @import "vendor/fontawesome.css"; @import "@asciidoctor/tabs"; @import "tabs.css"; +@import "feedback.css"; diff --git a/src/css/vars.css b/src/css/vars.css index 5a7c2fe..593ba1c 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -108,6 +108,13 @@ --toc-heading-font-color: var(--doc-font-color); --toc-border-color: var(--panel-border-color); --toc-line-height: 1.2; + /* feedback */ + --feedback-button-background: var(--color-white); + --feedback-button-font-color: var(--color-brand-primary); + --feedback-button-font-color-selected: var(--color-brand-secondary); + --feedback-button-border-color: var(--color-white); + --feedback-button-border-color-selected: var(--color-brand-secondary); + --feedback-thank-you-font-color: var(--color-brand-primary); /* footer */ --footer-line-height: var(--doc-line-height); --footer-background: var(--color-white); diff --git a/src/js/08-feedback.js b/src/js/08-feedback.js new file mode 100644 index 0000000..7def8b3 --- /dev/null +++ b/src/js/08-feedback.js @@ -0,0 +1,54 @@ +;(function () { + 'use strict' + + var feedbackFormOptionButtons = document.querySelector('.feedback-form-options').querySelectorAll('button') + if (!feedbackFormOptionButtons) return + + feedbackFormOptionButtons.forEach((button) => { + button.addEventListener('click', selectFeedbackFormOptionButton) + }) + + function selectFeedbackFormOptionButton (e) { + e.stopPropagation() // trap event + feedbackFormOptionButtons.forEach((button) => { + if (button === this) { + this.classList.add('selected') + } else { + button.classList.remove('selected') + } + }) + + var feedbackFormText = document.querySelector('.feedback-form-text') + if (!feedbackFormText) return + + feedbackFormText.classList.remove('hide') + } + + var feedbackFormSubmitButton = document.querySelector('.feedback-form-submit-button') + if (!feedbackFormSubmitButton) return + + var feedbackFormTextArea = document.querySelector('.feedback-form-text textarea') + if (!feedbackFormTextArea) return + + feedbackFormSubmitButton.addEventListener('click', submitFeedback) + + function submitFeedback (e) { + e.stopPropagation() // trap event + feedbackFormSubmitButton.classList.add('selected') + + // TODO: Submit feedback to backend, alternatively let netlify handle it + + feedbackFormSubmitButton.innerText = 'Submitted' + feedbackFormSubmitButton.disabled = true + feedbackFormTextArea.disabled = true + + feedbackFormOptionButtons.forEach((button) => { + button.disabled = true + }) + + var feedbackFormThankYou = document.querySelector('.feedback-form-thank-you') + if (!feedbackFormThankYou) return + + feedbackFormThankYou.classList.remove('hide') + } +})() diff --git a/src/partials/article.hbs b/src/partials/article.hbs index ca6899b..6ff3bb2 100644 --- a/src/partials/article.hbs +++ b/src/partials/article.hbs @@ -24,5 +24,6 @@ data-pagefind-body

{{{this}}}

{{/with}} {{{page.contents}}} +{{> feedback-form}} {{> pagination}} diff --git a/src/partials/feedback-form.hbs b/src/partials/feedback-form.hbs new file mode 100644 index 0000000..f6bae60 --- /dev/null +++ b/src/partials/feedback-form.hbs @@ -0,0 +1,21 @@ +
+ +
+ + + +
+
\ No newline at end of file From f3c3aae39a77db5b4e1ccd2bea556770faef0213 Mon Sep 17 00:00:00 2001 From: xeniape Date: Wed, 1 Apr 2026 15:33:13 +0200 Subject: [PATCH 02/10] remove onsubmit parameter --- src/partials/feedback-form.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/partials/feedback-form.hbs b/src/partials/feedback-form.hbs index f6bae60..78235e9 100644 --- a/src/partials/feedback-form.hbs +++ b/src/partials/feedback-form.hbs @@ -1,6 +1,6 @@