Skip to content

Commit c6fc9e1

Browse files
imtodorimtodor
committed
feat: Update API footer to use new feedback form
1 parent 89b3d83 commit c6fc9e1

File tree

2 files changed

+183
-117
lines changed

2 files changed

+183
-117
lines changed

‎_assetsApi/docfx-tmpl/src/partials/footer.tmpl.partial

Lines changed: 2 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,7 @@
11
<div id="footer" class="container-fluid pb-40">
2-
3-
<div class="row feedback-row mb-60">
4-
<div class="col-sm-8 col-sm-offset-4 col-md-offset-3 col-lg-8 col-lg-offset-2">
5-
<div class="row">
6-
<div class="col-md-10 col-md-offset-1">
7-
<div class="row feedback">
8-
<div class="col-xs-8">
9-
<h4>Was this article helpful?</h4>
10-
</div>
11-
<div class="col-xs-4 text-right">
12-
<button data-value="yes" id="yesButton">Yes</button>
13-
&nbsp;/&nbsp;
14-
<button data-value="no" id="noButton">No</button>
15-
</div>
16-
</div>
17-
</div>
18-
</div>
19-
</div>
20-
</div>
21-
22-
<div class="dialog-overlay">
23-
<div class="feedback-dialog dialog dialog-enter">
24-
<div id="feedback-container">
25-
<div id="feedback-window-container">
26-
<div id="feedback-form-window">
27-
<h3 class="mt-0 mb-5">Give article feedback</h3>
28-
<p>Tell us how we can improve this article</p>
29-
<span id="feedback-form-popup-container"></span>
30-
<form id="feedback-form">
31-
<div id="feedback-checkbox-area">
322
<input id="hidden-sheet-id" type="hidden" value="0c41d166-7ba6-3500-20d5-609d41442f92">
33-
<label>
34-
<input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
35-
</label>
36-
<span class="required-field" data-bind="visible: outdatedSample"></span>
37-
<textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
38-
data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
39-
</textarea>
40-
<label>
41-
<input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
42-
</label>
43-
<span class="required-field" data-bind="visible: otherMoreInformation"></span>
44-
<textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
45-
data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
46-
</textarea>
47-
<label>
48-
<input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
49-
</label>
50-
<span class="required-field" data-bind="visible: textErrors"></span>
51-
<textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
52-
data-bind="visible: textErrors, value: typosLinksElementsText">
53-
</textarea>
54-
<label>
55-
<input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
56-
</label>
57-
<span class="required-field" data-bind="visible: inaccurateContent"></span>
58-
<textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
59-
data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText">
60-
</textarea>
61-
<label>
62-
<input type="checkbox" data-bind="checked: otherFeedback" /> Other
63-
</label>
64-
<span class="required-field" data-bind="visible: otherFeedback"></span>
65-
<textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
66-
data-bind="visible: otherFeedback, value: textFeedback">
67-
</textarea>
68-
<input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
69-
class="feedback-extw__input input" data-bind="value: email" />
70-
<label>
71-
<input type="checkbox" data-bind="checked: acceptFeedbackContact" /> By checking this box you consent to Progress contacting you by email about your response on this page.
72-
</label>
73-
</div>
74-
</form>
75-
<div class="feedback-extw__foot">
76-
<p class="mt-30 mb-0" style="text-align: right;">
77-
<button class="button ghost dialog-hide">Cancel</button>
78-
<button class="button dialog-hide" type="submit">Submit</button>
79-
</p>
80-
</div>
81-
</div>
82-
</div>
83-
</div>
84-
</div>
85-
</div>
86-
87-
<script>
88-
$(document).ready(function() {
89-
initFeedbackForm({
90-
dialog: ".dialog-overlay",
91-
closeButtons: ".dialog-hide",
92-
container: ".feedback"
93-
});
94-
});
95-
</script>
96-
97-
<script>
98-
$(".read-prev").hover(function() {
99-
$(".title-prev").show();
100-
}, function() {
101-
$(".title-prev").hide();
102-
});
103-
104-
$(".read-next").hover(function() {
105-
$(".title-next").show();
106-
}, function() {
107-
$(".title-next").hide();
108-
});
109-
110-
$(".all-components").click(function() {
111-
$(".all-components").toggleClass("show-components");
112-
$('.sidetoggle').toggleClass("collapse");
113-
$('.sidetoc').toggleClass("show-components");
114-
$(".sidefilter").toggleClass("show-components");
115-
});
116-
</script>
117-
118-
119-
<div class="row">
3+
{{>partials/feedback}}
4+
<div class="row mt-60">
1205
<div class="col-lg-8 col-lg-offset-2">
1216
<div class="row">
1227
<div class="col-md-12 col-lg-10 col-lg-offset-1">

‎_assetsApi/docfx-tmpl/src/styles/main.css

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2006,13 +2006,194 @@ body .toc {
20062006

20072007
/* Feedback Styles */
20082008

2009+
.feedback-more-info {
2010+
max-height: 0;
2011+
overflow: hidden;
2012+
padding-left: 15px;
2013+
}
2014+
2015+
.feedback-more-info.show {
2016+
display: block;
2017+
-webkit-transition: max-height 0.2s ease-out;
2018+
transition: max-height 0.2s ease-out;
2019+
max-height: 205px;
2020+
}
2021+
2022+
.feedback-more-info.hide {
2023+
max-height: 50px;
2024+
overflow: hidden;
2025+
-webkit-transition: max-height 0.2s ease-out;
2026+
transition: max-height 0.2s ease-out;
2027+
}
2028+
2029+
.feedback-more-info .feedback-other-text-input {
2030+
color: #000000;
2031+
font-size: 14px;
2032+
font-weight: 400;
2033+
margin: 10px 0;
2034+
padding: 10px;
2035+
width: 100%;
2036+
max-width: 100%;
2037+
min-width: 100%;
2038+
height: 120px;
2039+
}
2040+
2041+
.feedback-more-info .feedback-other-text-input:focus {
2042+
outline: none;
2043+
}
2044+
2045+
.feedback-more-info .feedback-skip-button {
2046+
padding: 6px 0;
2047+
margin-left: 15px;
2048+
text-transform: none;
2049+
font-size: 14px;
2050+
font-weight: 400;
2051+
display: inline-block;
2052+
}
2053+
2054+
.feedback-more-info .feedback-skip-button:hover {
2055+
cursor: pointer;
2056+
text-decoration: underline;
2057+
}
2058+
2059+
.feedback-more-info .feedback-ab-submit-button {
2060+
padding: 6px 12px;
2061+
margin: 0;
2062+
background-color: #27A306;
2063+
border: 1px solid #FFFFFF;
2064+
color: #FFFFFF;
2065+
font-size: 14px;
2066+
font-weight: 400;
2067+
text-transform: none;
2068+
}
2069+
2070+
.feedback-more-info .feedback-ab-submit-button:hover, .feedback-more-info .feedback-ab-submit-button:active, .feedback-more-info .feedback-ab-submit-button:focus {
2071+
background-color: rgba(255, 255, 255, 0.2);
2072+
}
2073+
20092074
.feedback-row {
20102075
background-color: #27A306;
20112076
color: #ffffff;
20122077
padding-top: 14px;
20132078
padding-bottom: 13px;
20142079
font-size: 20px;
20152080
font-weight: 500;
2081+
z-index: 1100;
2082+
}
2083+
2084+
.feedback-row .close-button-container {
2085+
display: none;
2086+
position: fixed;
2087+
bottom: 6px;
2088+
right: 16px;
2089+
padding: 8px;
2090+
}
2091+
2092+
.feedback-row .close-button-container:hover {
2093+
cursor: pointer;
2094+
}
2095+
2096+
.feedback-row.vote-disabled {
2097+
display: none;
2098+
}
2099+
2100+
.feedback-row.vote-hide {
2101+
-webkit-animation-name: hideFeedback;
2102+
animation-name: hideFeedback;
2103+
-webkit-animation-duration: 0.2s;
2104+
animation-duration: 0.2s;
2105+
-webkit-animation-timing-function: ease-out;
2106+
animation-timing-function: ease-out;
2107+
-webkit-animation-fill-mode: forwards;
2108+
animation-fill-mode: forwards;
2109+
}
2110+
2111+
@-webkit-keyframes hideFeedback {
2112+
from {
2113+
opacity: 1;
2114+
}
2115+
to {
2116+
opacity: 0;
2117+
}
2118+
}
2119+
2120+
@keyframes hideFeedback {
2121+
from {
2122+
opacity: 1;
2123+
}
2124+
to {
2125+
opacity: 0;
2126+
}
2127+
}
2128+
2129+
.feedback-row.feedback-fixed {
2130+
position: fixed;
2131+
left: 0;
2132+
bottom: 0;
2133+
width: 100%;
2134+
margin: 0;
2135+
z-index: 1100;
2136+
}
2137+
2138+
.feedback-row.feedback-fixed .close-button-container {
2139+
display: block;
2140+
}
2141+
2142+
.feedback-row h4 {
2143+
color: #ffffff !important;
2144+
margin-top: 0;
2145+
margin-bottom: 0;
2146+
font-size: 21px;
2147+
}
2148+
2149+
.feedback-row button {
2150+
display: inline-block;
2151+
text-decoration: none;
2152+
text-transform: uppercase;
2153+
background: transparent;
2154+
border: none;
2155+
color: #f1f1f1;
2156+
cursor: pointer;
2157+
-webkit-transition-property: background-color, color;
2158+
transition-property: background-color, color;
2159+
-webkit-transition-duration: 0.2s;
2160+
transition-duration: 0.2s;
2161+
-webkit-transition-timing-function: ease;
2162+
transition-timing-function: ease;
2163+
}
2164+
2165+
.feedback-row button:hover, .feedback-row button:focus, .feedback-row button:active, .feedback-row button:visited {
2166+
color: #ffffff;
2167+
outline: none;
2168+
}
2169+
2170+
.feedback-row div.feedback>div {
2171+
line-height: 23px;
2172+
}
2173+
2174+
.feedback-row h4 {
2175+
color: #ffffff !important;
2176+
margin-top: 0;
2177+
margin-bottom: 0;
2178+
font-size: 21px;
2179+
}
2180+
2181+
.feedback-row button {
2182+
display: inline-block;
2183+
text-decoration: none;
2184+
text-transform: uppercase;
2185+
background: transparent;
2186+
border: none;
2187+
color: #f1f1f1;
2188+
cursor: pointer;
2189+
transition-property: background-color, color;
2190+
transition-duration: 0.2s;
2191+
transition-timing-function: ease;
2192+
}
2193+
2194+
.feedback-row button:hover, .feedback-row button:focus, .feedback-row button:active, .feedback-row button:visited {
2195+
color: #ffffff;
2196+
outline: none;
20162197
}
20172198

20182199
.feedback-row h4 {

0 commit comments

Comments
 (0)