Skip to content

Commit db32a2d

Browse files
Jen-UnoJen-Uno
committed
doc: added send feedback
1 parent fea916a commit db32a2d

File tree

6 files changed

+215
-5
lines changed

6 files changed

+215
-5
lines changed

‎doc/templates/uno/component/affix.js‎

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,64 @@ function renderAffix() {
2121
});
2222

2323
const contribution = $('.contribution');
24+
25+
if (contribution.length > 0) {
26+
const contributionList = contribution.find('ul');
27+
if (contributionList.length > 0) {
28+
const pageUrl = encodeURIComponent(window.location.href);
29+
const issueTitle = encodeURIComponent(`[Docs] Feedback: ${document.title}`);
30+
const issueUrl = `https://github.com/unoplatform/uno/issues/new?template=documentation-issue.yml&title=${issueTitle}&docs-issue-location=${pageUrl}`;
31+
32+
// Add icon to "Edit this page"
33+
const editLink = contributionList.find('li a.contribution-link');
34+
if (editLink.length > 0) {
35+
editLink.prepend('<i class="fa fa-edit"></i> ');
36+
}
37+
38+
// Add "Send feedback" link
39+
const feedbackLink = $('<li></li>').append(
40+
$('<a></a>')
41+
.attr('href', issueUrl)
42+
.attr('target', '_blank')
43+
.attr('rel', 'noopener noreferrer')
44+
.addClass('contribution-link')
45+
.html('<i class="fa fa-comments"></i> Send feedback')
46+
);
47+
contributionList.append(feedbackLink);
48+
}
49+
50+
// Add styling classes for the feedback box
51+
contribution.addClass('feedback-box');
52+
}
53+
2454
const contributionDiv = contribution.get(0).outerHTML;
2555
contribution.remove();
26-
$('.sideaffix').append(contributionDiv);
56+
57+
// Append feedback box directly to body instead of .sideaffix for better mobile visibility
58+
$('body').append(contributionDiv);
59+
60+
// Add scroll behavior for reduced widths - hide box while scrolling, show when stopped
61+
let scrollTimer;
62+
$(window).on('scroll', function() {
63+
const feedbackBox = $('.feedback-box');
64+
if (feedbackBox.length === 0) return;
65+
66+
// Only apply scroll hiding on reduced widths (< 992px)
67+
if ($(window).width() < 992) {
68+
feedbackBox.addClass('scrolling');
69+
70+
// Clear existing timer
71+
clearTimeout(scrollTimer);
72+
73+
// Set new timer to remove scrolling class after scrolling stops
74+
scrollTimer = setTimeout(function() {
75+
feedbackBox.removeClass('scrolling');
76+
}, 300); // Show box 300ms after scrolling stops
77+
} else {
78+
// Remove scrolling class on larger screens
79+
feedbackBox.removeClass('scrolling');
80+
}
81+
});
2782

2883
}
2984

‎doc/templates/uno/component/affix.scss‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,125 @@
1414
}
1515
}
1616

17+
// Feedback box styling - positioned at bottom of viewport
18+
// Moved outside .sideaffix because JavaScript appends to body
19+
div.contribution.feedback-box {
20+
position: fixed !important;
21+
display: block !important;
22+
bottom: 20px;
23+
right: 20px;
24+
width: 240px;
25+
min-width: 240px;
26+
max-width: calc(100vw - 40px);
27+
background: #ffffff;
28+
border: 1px solid #e1e4e8;
29+
border-radius: 8px;
30+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
31+
padding: 16px;
32+
z-index: 1000;
33+
transition: all 0.3s ease;
34+
visibility: visible !important;
35+
opacity: 1 !important;
36+
37+
// Hide box while scrolling on reduced widths
38+
&.scrolling {
39+
@media (max-width: 991px) {
40+
opacity: 0 !important;
41+
transform: translateY(20px);
42+
pointer-events: none;
43+
}
44+
}
45+
46+
// Adjust positioning and padding on smaller screens
47+
@media (max-width: 991px) {
48+
bottom: 15px;
49+
right: 15px;
50+
padding: 14px;
51+
}
52+
53+
@media (max-width: 576px) {
54+
bottom: 10px;
55+
right: 10px;
56+
padding: 12px;
57+
border-radius: 6px;
58+
}
59+
60+
@media (max-width: 400px) {
61+
bottom: 8px;
62+
right: 8px;
63+
padding: 10px;
64+
font-size: 13px;
65+
border-radius: 4px;
66+
}
67+
68+
> ul {
69+
list-style: none;
70+
padding: 0;
71+
margin: 0;
72+
73+
> li {
74+
margin-bottom: 10px;
75+
76+
&:last-child {
77+
margin-bottom: 0;
78+
}
79+
80+
@media (max-width: 576px) {
81+
margin-bottom: 8px;
82+
}
83+
84+
@media (max-width: 400px) {
85+
margin-bottom: 6px;
86+
}
87+
}
88+
}
89+
90+
ul > li > a.contribution-link {
91+
font-family: 'Open Sans';
92+
font-style: normal;
93+
font-weight: 400;
94+
font-size: 14px;
95+
line-height: 20px;
96+
letter-spacing: 0.25px;
97+
display: block;
98+
padding: 8px 0;
99+
color: #0366d6;
100+
text-decoration: none;
101+
transition: color 0.2s ease;
102+
103+
&:hover {
104+
color: #0052a3;
105+
text-decoration: none;
106+
}
107+
108+
i.fa {
109+
margin-right: 8px;
110+
font-size: 14px;
111+
width: 16px;
112+
text-align: center;
113+
114+
@media (max-width: 400px) {
115+
margin-right: 6px;
116+
font-size: 12px;
117+
width: 14px;
118+
}
119+
}
120+
121+
// Responsive font sizes
122+
@media (max-width: 576px) {
123+
font-size: 13px;
124+
line-height: 18px;
125+
padding: 6px 0;
126+
}
127+
128+
@media (max-width: 400px) {
129+
font-size: 12px;
130+
line-height: 16px;
131+
padding: 5px 0;
132+
}
133+
}
134+
}
135+
17136
.sideaffix {
18137
overflow: auto;
19138
padding-top:36px;
@@ -29,6 +148,42 @@
29148
font-size: 14px;
30149
line-height: 20px;
31150
letter-spacing: 0.25px;
151+
display: block;
152+
padding: 8px 0;
153+
color: #0366d6;
154+
text-decoration: none;
155+
transition: color 0.2s ease;
156+
157+
&:hover {
158+
color: #0052a3;
159+
text-decoration: none;
160+
}
161+
162+
i.fa {
163+
margin-right: 8px;
164+
font-size: 14px;
165+
width: 16px;
166+
text-align: center;
167+
168+
@media (max-width: 400px) {
169+
margin-right: 6px;
170+
font-size: 12px;
171+
width: 14px;
172+
}
173+
}
174+
175+
// Responsive font sizes
176+
@media (max-width: 576px) {
177+
font-size: 13px;
178+
line-height: 18px;
179+
padding: 6px 0;
180+
}
181+
182+
@media (max-width: 400px) {
183+
font-size: 12px;
184+
line-height: 16px;
185+
padding: 5px 0;
186+
}
32187
}
33188

34189
#affix {

‎doc/templates/uno/styles/docfx.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎doc/templates/uno/styles/docfx.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)