Skip to content

Commit 2d1e643

Browse files
alina-derkach-oazaalina-derkach-oaza
authored
PS-10248 Test and implement the feedback form (8.4) (#597)
modified: _resourcepdf/overrides/main.html new file: _resourcepdf/overrides/partials/rating.html new file: docs/css/rating.css new file: docs/js/rating.js modified: mkdocs-base.yml modified: mkdocs.yml
1 parent dc90e67 commit 2d1e643

File tree

6 files changed

+407
-13
lines changed

6 files changed

+407
-13
lines changed

‎_resourcepdf/overrides/main.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@
4949
{% endif %}
5050
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" {{ hidden }}>
5151
<div class="md-sidebar__scrollwrap">
52+
<div class="md-sidebar__inner">
53+
{% include "partials/rating.html" %}
54+
</div>
5255
<div class="md-sidebar__inner">
5356
{% include "partials/edit.html" %}
5457
</div>

‎_resourcepdf/overrides/partials/rating.html‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
<!-- Feedback Widget -->
2+
<div class="rating-widget" style="
3+
background: var(--md-default-bg-color);
4+
border: 0.05rem solid var(--md-default-fg-color--lightest);
5+
padding: 10px 15px;
6+
border-radius: 0.2rem;
7+
margin-bottom: 16px;
8+
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
9+
font-size: 16px;
10+
text-align: center;
11+
transition: all 0.2s ease-out;
12+
">
13+
14+
<div class="rating-title" style="
15+
margin-bottom: 4px;
16+
font-size: 15px;
17+
font-weight: bold;
18+
/* Removed inline color to use CSS */
19+
">
20+
Rate this page
21+
</div>
22+
23+
<div class="rating-stars" style="display: inline-block;">
24+
{% for i in range(1,6) %}
25+
<span class="star" data-rating="{{ i }}" style="
26+
font-size: 24px;
27+
cursor: pointer;
28+
margin: 0 2px;
29+
display: inline-block;
30+
">☆</span>
31+
{% endfor %}
32+
</div>
33+
34+
<div id="feedback-notification" style="
35+
display: none;
36+
margin-top: 10px;
37+
color: var(--md-typeset-a-color);
38+
font-weight: 500;
39+
font-size: 14px;
40+
">Thanks for your feedback</div>
41+
42+
<div id="feedback-submit-notification" style="
43+
display: none;
44+
margin-top: 10px;
45+
color: var(--md-typeset-a-color);
46+
font-weight: 500;
47+
font-size: 14px;
48+
">Thank you! The feedback has been submitted.</div>
49+
50+
<div id="feedback-form" style="
51+
display: none;
52+
margin-top: 12px;
53+
text-align: left;
54+
position: relative;
55+
border: 0.05rem solid var(--md-default-fg-color--lightest);
56+
padding: 12px;
57+
border-radius: 6px;
58+
background: var(--md-default-bg-color);
59+
width: 100%;
60+
box-sizing: border-box;
61+
transition: all 0.2s ease-out;
62+
">
63+
<button id="close-feedback" title="Close" style="
64+
position: absolute;
65+
top: -10px;
66+
right: -10px;
67+
background: var(--md-default-bg-color);
68+
border: 0.05rem solid var(--md-default-fg-color--lightest);
69+
border-radius: 50%;
70+
width: 24px;
71+
height: 24px;
72+
font-size: 18px;
73+
font-weight: bold;
74+
cursor: pointer;
75+
color: var(--md-default-fg-color--light);
76+
line-height: 1;
77+
display: flex;
78+
align-items: center;
79+
justify-content: center;
80+
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
81+
">
82+
×
83+
</button>
84+
85+
<textarea id="feedback-text" rows="3" placeholder="Write your feedback here..." style="
86+
width: 100%;
87+
font-size: 14px;
88+
padding: 6px;
89+
margin-bottom: 12px;
90+
resize: vertical;
91+
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
92+
color: var(--md-default-fg-color);
93+
background: var(--md-default-bg-color);
94+
border: 0.05rem solid var(--md-default-fg-color--lightest);
95+
"></textarea>
96+
97+
<label for="feedback-email" style="
98+
display: block;
99+
font-size: 15px;
100+
margin-bottom: 4px;
101+
">
102+
Email <span style="color: var(--md-default-fg-color--light);">(optional)</span>
103+
</label>
104+
105+
<input type="email" id="feedback-email" placeholder="[email protected]" style="
106+
width: 100%;
107+
font-size: 14px;
108+
padding: 6px;
109+
margin-bottom: 12px;
110+
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
111+
color: var(--md-default-fg-color);
112+
background: var(--md-default-bg-color);
113+
border: 0.05rem solid var(--md-default-fg-color--lightest);
114+
" />
115+
116+
<button id="submit-feedback" style="
117+
padding: 5px 10px;
118+
font-size: 14px;
119+
background-color: var(--md-typeset-a-color);
120+
border: none;
121+
border-radius: 3px;
122+
cursor: pointer;
123+
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
124+
">
125+
Send
126+
</button>
127+
128+
<div id="feedback-status" style="
129+
margin-top: 8px;
130+
font-size: 13px;
131+
"></div>
132+
</div>
133+
</div>
134+
135+
<style>
136+
/* Hover shadow like data-banner */
137+
.rating-widget:hover,
138+
#feedback-form:hover {
139+
box-shadow:
140+
0px 1px 10px 0px rgba(0, 0, 0, 0.12),
141+
0px 4px 5px 0px rgba(0, 0, 0, 0.14),
142+
0px 2px 4px -1px rgba(0, 0, 0, 0.20);
143+
}
144+
145+
/* Default star colors */
146+
.rating-stars .star {
147+
color: var(--md-default-fg-color);
148+
transition: color 0.2s ease-out;
149+
}
150+
151+
/* Active/hovered stars */
152+
.rating-stars .star.active,
153+
.rating-stars .star.hovered {
154+
color: var(--md-typeset-a-color, #0E5FB5);
155+
}
156+
157+
/* Rate this page text color matches stars in light mode */
158+
.rating-widget .rating-title {
159+
color: var(--md-typeset-a-color, #0E5FB5);
160+
}
161+
162+
/* Dark mode */
163+
@media (prefers-color-scheme: dark) {
164+
/* Rate this page text */
165+
.rating-widget .rating-title {
166+
color: var(--md-typeset-a-color, #93C7FF) !important;
167+
}
168+
/* Stars active and hovered fill color */
169+
.rating-stars .star.active,
170+
.rating-stars .star.hovered {
171+
color: var(--md-typeset-a-color, #93C7FF) !important;
172+
}
173+
174+
/* Feedback form text */
175+
#feedback-form,
176+
#feedback-form textarea,
177+
#feedback-form input,
178+
#feedback-form label,
179+
#feedback-form button,
180+
#feedback-form div {
181+
color: var(--md-typeset-a-color, #93C7FF) !important;
182+
border-color: #666 !important;
183+
background: var(--md-default-bg-color) !important;
184+
}
185+
186+
/* Close button color */
187+
#close-feedback {
188+
color: var(--md-typeset-a-color, #93C7FF) !important;
189+
}
190+
}
191+
</style>

‎docs/css/rating.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
.rating-widget:hover,
2+
#feedback-form:hover {
3+
box-shadow:
4+
0px 1px 10px 0px rgba(0, 0, 0, 0.12),
5+
0px 4px 5px 0px rgba(0, 0, 0, 0.14),
6+
0px 2px 4px -1px rgba(0, 0, 0, 0.20);
7+
}
8+
9+
/* Title color */
10+
.rating-widget .rating-title {
11+
color: var(--md-typeset-a-color, #0E5FB5);
12+
}
13+
14+
/* Dark mode title */
15+
@media (prefers-color-scheme: dark) {
16+
.rating-widget .rating-title {
17+
color: var(--md-typeset-a-color, #93C7FF) !important;
18+
}
19+
}
20+
21+
/* Feedback status */
22+
#feedback-status {
23+
color: var(--md-typeset-a-color);
24+
}
25+
26+
@media (prefers-color-scheme: dark) {
27+
#feedback-status {
28+
color: var(--md-typeset-a-color, #93C7FF) !important;
29+
}
30+
}
31+
32+
/* Light mode: Send button */
33+
#submit-feedback {
34+
color: white !important;
35+
}
36+
37+
/* Dark mode: Send button */
38+
@media (prefers-color-scheme: dark) {
39+
#submit-feedback {
40+
background-color: var(--md-typeset-a-color, #93C7FF) !important;
41+
color: #999 !important;
42+
}
43+
}

0 commit comments

Comments
 (0)