Skip to content

PS-10248 Test and implement the feedback form 8.0 #587

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Oct 31, 2025
Merged

PS-10248 Test and implement the feedback form 8.0 #587

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c4f41a1
DOCS-217 Test and implement the feedback form
alina-derkach-oaza Oct 15, 2025
15302fa
Move the feedback banner to the top
alina-derkach-oaza Oct 21, 2025
5781b81
submit feedback in the background using fetch or a hidden form
alina-derkach-oaza Oct 22, 2025
f63d0e7
Fix the dark mode
alina-derkach-oaza Oct 22, 2025
88a2e7e
Remove the field title and add a thanks notification
alina-derkach-oaza Oct 28, 2025
f34812b
Fix the messages and change the link to the form
alina-derkach-oaza Oct 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions _resourcepdf/overrides/main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/rating.html" %}
</div>
<div class="md-sidebar__inner">
{% include "partials/edit.html" %}
</div>
Expand Down
191 changes: 191 additions & 0 deletions _resourcepdf/overrides/partials/rating.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
<!-- Feedback Widget -->
<div class="rating-widget" style="
background: var(--md-default-bg-color);
border: 0.05rem solid var(--md-default-fg-color--lightest);
padding: 10px 15px;
border-radius: 0.2rem;
margin-bottom: 16px;
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
font-size: 16px;
text-align: center;
transition: all 0.2s ease-out;
">

<div class="rating-title" style="
margin-bottom: 4px;
font-size: 15px;
font-weight: bold;
/* Removed inline color to use CSS */
">
Rate this page
</div>

<div class="rating-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;
display: inline-block;
">☆</span>
{% endfor %}
</div>

<div id="feedback-notification" style="
display: none;
margin-top: 10px;
color: var(--md-typeset-a-color);
font-weight: 500;
font-size: 14px;
">Thanks for your feedback</div>

<div id="feedback-submit-notification" style="
display: none;
margin-top: 10px;
color: var(--md-typeset-a-color);
font-weight: 500;
font-size: 14px;
">Thank you! The feedback has been submitted.</div>

<div id="feedback-form" style="
display: none;
margin-top: 12px;
text-align: left;
position: relative;
border: 0.05rem solid var(--md-default-fg-color--lightest);
padding: 12px;
border-radius: 6px;
background: var(--md-default-bg-color);
width: 100%;
box-sizing: border-box;
transition: all 0.2s ease-out;
">
<button id="close-feedback" title="Close" style="
position: absolute;
top: -10px;
right: -10px;
background: var(--md-default-bg-color);
border: 0.05rem solid var(--md-default-fg-color--lightest);
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
color: var(--md-default-fg-color--light);
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
">
×
</button>

<textarea id="feedback-text" rows="3" placeholder="Write your feedback here..." style="
width: 100%;
font-size: 14px;
padding: 6px;
margin-bottom: 12px;
resize: vertical;
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
color: var(--md-default-fg-color);
background: var(--md-default-bg-color);
border: 0.05rem solid var(--md-default-fg-color--lightest);
"></textarea>

<label for="feedback-email" style="
display: block;
font-size: 15px;
margin-bottom: 4px;
">
Email <span style="color: var(--md-default-fg-color--light);">(optional)</span>
</label>

<input type="email" id="feedback-email" placeholder="[email protected]" style="
width: 100%;
font-size: 14px;
padding: 6px;
margin-bottom: 12px;
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
color: var(--md-default-fg-color);
background: var(--md-default-bg-color);
border: 0.05rem solid var(--md-default-fg-color--lightest);
" />

<button id="submit-feedback" style="
padding: 5px 10px;
font-size: 14px;
background-color: var(--md-typeset-a-color);
border: none;
border-radius: 3px;
cursor: pointer;
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
">
Send
</button>

<div id="feedback-status" style="
margin-top: 8px;
font-size: 13px;
"></div>
</div>
</div>

<style>
/* Hover shadow like data-banner */
.rating-widget:hover,
#feedback-form: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);
}

/* Default star colors */
.rating-stars .star {
color: var(--md-default-fg-color);
transition: color 0.2s ease-out;
}

/* Active/hovered stars */
.rating-stars .star.active,
.rating-stars .star.hovered {
color: var(--md-typeset-a-color, #0E5FB5);
}

/* Rate this page text color matches stars in light mode */
.rating-widget .rating-title {
color: var(--md-typeset-a-color, #0E5FB5);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
/* Rate this page text */
.rating-widget .rating-title {
color: var(--md-typeset-a-color, #93C7FF) !important;
}
/* Stars active and hovered fill color */
.rating-stars .star.active,
.rating-stars .star.hovered {
color: var(--md-typeset-a-color, #93C7FF) !important;
}

/* Feedback form text */
#feedback-form,
#feedback-form textarea,
#feedback-form input,
#feedback-form label,
#feedback-form button,
#feedback-form div {
color: var(--md-typeset-a-color, #93C7FF) !important;
border-color: #666 !important;
background: var(--md-default-bg-color) !important;
}

/* Close button color */
#close-feedback {
color: var(--md-typeset-a-color, #93C7FF) !important;
}
}
</style>
43 changes: 43 additions & 0 deletions docs/css/rating.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
.rating-widget:hover,
#feedback-form: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);
}

/* Title color */
.rating-widget .rating-title {
color: var(--md-typeset-a-color, #0E5FB5);
}

/* Dark mode title */
@media (prefers-color-scheme: dark) {
.rating-widget .rating-title {
color: var(--md-typeset-a-color, #93C7FF) !important;
}
}

/* Feedback status */
#feedback-status {
color: var(--md-typeset-a-color);
}

@media (prefers-color-scheme: dark) {
#feedback-status {
color: var(--md-typeset-a-color, #93C7FF) !important;
}
}

/* Light mode: Send button */
#submit-feedback {
color: white !important;
}

/* Dark mode: Send button */
@media (prefers-color-scheme: dark) {
#submit-feedback {
background-color: var(--md-typeset-a-color, #93C7FF) !important;
color: #999 !important;
}
}
Loading
Loading