Skip to content

Commit c23f45a

Browse files
aaronshekeyaaronshekey
authored
Additional feedback refinements (#800)
1 parent 3d63f4e commit c23f45a

File tree

4 files changed

+74
-20
lines changed

4 files changed

+74
-20
lines changed

‎docs/_includes/layouts/page.html‎

Lines changed: 38 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -41,28 +41,49 @@ <h1 class="stacks-h1">{{ title }}</h1>
4141
{% endif %}
4242
{{ content }}
4343

44-
<form class="my48" name="feedback-{{ title | downcase | replace: ' ', '-' }}" method="POST" data-netlify="true" action="{{ "/success" | relative_url }}">
45-
<label class="d-inline-block c-pointer" for="feedback-form">
46-
<div class="fs-title fw-bold mb0">Got any feedback?</div>
47-
<div class="stacks-copy mb12">Did we mess something up? Is there a typo? Send us your feedback anonymously using this form.</div>
48-
</label>
44+
<div class="d-flex my48">
45+
<div class="flex--item mr8">
46+
<form class="js-feedback-form" name="quick-positive-feedback-{{ title | downcase | replace: ' ', '-' }}" method="POST" data-netlify="true" action="{{ "/success" | relative_url }}">
47+
<button class="d-block s-btn s-btn__muted p4" type="submit" data-controller="s-tooltip" title="Quickly let the team know that this page is workin’" data-s-tooltip-placement="right">{% icon "ArrowUpLg" %}</button>
48+
</form>
4949

50-
<textarea class="s-textarea s-textarea__md hmn1 mb12" id="feedback-form" name="additional-feedback" placeholder="Tell us how we can improve this page…"></textarea>
51-
52-
<div class="d-flex gs8 ai-center">
53-
<button type="submit" class="flex--item s-btn s-btn__outlined s-btn__muted">Send feedback</button>
54-
<a href="https://github.com/StackExchange/Stacks/edit/develop/docs/{{ page.inputPath }}" class="ml-auto flex--item s-btn s-btn__icon s-btn__muted">
55-
{% icon "Pencil" %}
56-
Edit on GitHub
57-
</a>
58-
<a href="https://github.com/StackExchange/Stacks/issues/new/choose" class="flex--item s-btn s-btn__icon s-btn__muted">
59-
File an issue on GitHub
60-
</a>
50+
<form class="js-feedback-form" name="quick-negative-feedback-{{ title | downcase | replace: ' ', '-' }}" method="POST" data-netlify="true" action="{{ "/success" | relative_url }}">
51+
<button class="d-block s-btn s-btn__muted p4" type="submit" data-controller="s-tooltip" title="Quickly let us know that this page needs improvement" data-s-tooltip-placement="right">{% icon "ArrowDownLg" %}</button>
52+
</form>
6153
</div>
62-
</form>
54+
55+
<form class="flex--item fl-grow1 mtn4 pt24 js-feedback-form" name="feedback-{{ title | downcase | replace: ' ', '-' }}" method="POST" data-netlify="true" action="{{ "/success" | relative_url }}">
56+
<label class="d-inline-block c-pointer" for="feedback-form">
57+
<div class="fs-title fw-bold mb0">How’d we do?</div>
58+
<div class="stacks-copy mb12">Anonymously upvote, downvote, or send additional feedback below.</div>
59+
</label>
60+
61+
<textarea class="s-textarea s-textarea__md hmn1 mb12" id="feedback-form" name="additional-feedback" placeholder="Tell us how we can improve this page…" required></textarea>
62+
63+
<div class="d-flex gs8 ai-center sm:fd-column sm:ai-stretch">
64+
<button type="submit" class="flex--item s-btn s-btn__outlined s-btn__muted">Send feedback</button>
65+
<a href="https://github.com/StackExchange/Stacks/edit/develop/docs/{{ page.inputPath }}" class="ml-auto sm:ml4 flex--item s-btn s-btn__icon s-btn__muted">
66+
{% icon "Pencil" %}
67+
Edit on GitHub
68+
</a>
69+
<a href="https://github.com/StackExchange/Stacks/issues/new/choose" class="flex--item s-btn s-btn__icon s-btn__muted">
70+
File an issue on GitHub
71+
</a>
72+
</div>
73+
</form>
74+
</div>
6375
</div>
6476
</main>
6577
</div>
78+
79+
<div class="s-toast js-feedback-toast" aria-hidden="true" role="alertdialog">
80+
<aside class="s-notice s-notice__success d-flex p8 pl16">
81+
<div class="flex--item mr8">{% icon "Checkmark", "mt2 fc-green-500" %}</div>
82+
<div class="flex--item lh-lg">
83+
Thanks! We’ve received your feedback.
84+
</div>
85+
</aside>
86+
</div>
6687
{% include scripts.html %}
6788
</body>
6889
</html>

‎docs/_includes/scripts.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<script src="{{ "/assets/js/search.js" | relative_url }}"></script>
66
<script src="{{ "/assets/js/hamburger.js" | relative_url }}"></script>
77
<script src="{{ "/assets/js/navigation.js" | relative_url }}"></script>
8+
<script src="{{ "/assets/js/feedback.js" | relative_url }}"></script>
89

910
<!-- Stacks Library JS -->
1011
<script src="{{ "/assets/js/stacks.min.js" | relative_url }}?{{page.date | date: '%s%N'}}"></script>

‎docs/assets/js/feedback.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
var feedbackForms = document.querySelectorAll('.js-feedback-form');
2+
var feedbackToast = document.querySelector('.js-feedback-toast');
3+
4+
for (var form of feedbackForms) {
5+
form.addEventListener('submit', handleFeedback)
6+
}
7+
8+
function handleFeedback(evt) {
9+
evt.preventDefault();
10+
11+
var formData = new FormData(evt.target);
12+
fetch('/', {
13+
method: 'POST',
14+
headers: { "Content-Type": "application/x-www-form-urlencoded" },
15+
body: new URLSearchParams(formData).toString()
16+
})
17+
.then(() => openToast())
18+
.catch((error) => alert(error))
19+
}
20+
21+
function openToast() {
22+
feedbackToast.setAttribute("aria-hidden", "false");
23+
24+
for (var form of feedbackForms) {
25+
form.classList.add("pe-none", "o50");
26+
}
27+
28+
setTimeout(function () {
29+
feedbackToast.setAttribute("aria-hidden", "true");
30+
31+
for (var form of feedbackForms) {
32+
form.classList.remove("pe-none", "o50");
33+
}
34+
}, 5000);
35+
}

‎docs/product/base/colors.html‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -689,6 +689,3 @@
689689
</table>
690690
</div>
691691
</section>
692-
693-
<!-- Additional javascript -->
694-
<script src="{{ "/assets/js/colors.js" | relative_url }}" defer></script>

0 commit comments

Comments
 (0)