Collect user feedback per page and restructure modals (#4014)
* WIP feedback forms * WIP complete feedback lifecycles * finalize page feedback interactions Co-authored-by: kelseiv <47797004+kelseiv@users.noreply.github.com>pull/4017/head
Scott Anderson
GitHub
parent
1554f9b452
commit
cbdfc0e525
|
|
@ -264,10 +264,13 @@ $(window).focus(function() {
|
|||
////////////////////////// Modal window interactions ///////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// Toggle the URL selector modal window
|
||||
function toggleModal() {
|
||||
$(".modal").fadeToggle(200).toggleClass("open")
|
||||
}
|
||||
// General modal window interactions are controlled in modals.js
|
||||
|
||||
// Open the InfluxDB URL selector modal
|
||||
$(".url-trigger").click(function(e) {
|
||||
e.preventDefault()
|
||||
toggleModal('#influxdb-url-list')
|
||||
})
|
||||
|
||||
// Set the selected URL radio buttons to :checked
|
||||
function setRadioButtons() {
|
||||
|
|
@ -276,12 +279,6 @@ function setRadioButtons() {
|
|||
$('input[name="influxdb-oss-url"][value="' + currentUrls.oss + '"]').prop("checked", true)
|
||||
}
|
||||
|
||||
// Toggle modal window on click
|
||||
$("#modal-close, .modal-overlay, .url-trigger").click(function(e) {
|
||||
e.preventDefault()
|
||||
toggleModal()
|
||||
})
|
||||
|
||||
|
||||
// Add checked to fake-radio if cluster is selected on page load
|
||||
if ($("ul.clusters label input").is(":checked")) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
////////////////////////////////////////////////////////////////////////////////
|
||||
/////////////////////// General modal window interactions //////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// Toggle the URL selector modal window
|
||||
function toggleModal(modalID="") {
|
||||
if ($(".modal").hasClass("open")) {
|
||||
$(".modal").fadeOut(200).removeClass("open");
|
||||
$(".modal-content").delay(400).hide(0);
|
||||
} else {
|
||||
$(".modal").fadeIn(200).addClass("open");
|
||||
$(`${modalID}.modal-content`).show();
|
||||
}
|
||||
}
|
||||
|
||||
// Close modal window on click
|
||||
$("#modal-close, .modal-overlay").click(function(e) {
|
||||
e.preventDefault()
|
||||
toggleModal()
|
||||
})
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
/*
|
||||
* This file controls the interactions and life-cycles of the page feedback
|
||||
* buttons and modal.
|
||||
*/
|
||||
|
||||
// Collect data from the page path
|
||||
const pathArr = location.pathname.split('/').slice(1, -1)
|
||||
const pageData = {
|
||||
host: location.hostname,
|
||||
path: location.pathname,
|
||||
product: pathArr[0],
|
||||
version: (/^v\d/.test(pathArr[1]) || pathArr[1] === "cloud" ? pathArr[1].replace(/^v/, '') : "n/a"),
|
||||
}
|
||||
|
||||
// Hijack form submission and send feedback data to be stored.
|
||||
// Called by onSubmit in each feedback form.
|
||||
function submitFeedbackForm(formID) {
|
||||
|
||||
// Collect form data, structure as an object, and remove fname honeypot
|
||||
const formData = new FormData(document.forms[formID]);
|
||||
const formDataObj = Object.fromEntries(formData.entries());
|
||||
const {fname, ...feedbackData} = formDataObj;
|
||||
|
||||
// Build lp fields from form data
|
||||
let fields = "";
|
||||
for (let key in feedbackData) {
|
||||
// Strip out newlines and escape double quotes if the field key is "feedback"
|
||||
if (key == "feedback-text") {
|
||||
fields += key + '="' + feedbackData[key].replace(/(\r\n|\n+|\r+)/gm, " ").replace(/(\")/gm, '\\"') + '",';
|
||||
} else {
|
||||
fields += key + "=" + feedbackData[key] + ",";
|
||||
}
|
||||
}
|
||||
fields = fields.substring(0, fields.length -1);
|
||||
|
||||
// Build lp using page data and the fields string
|
||||
const lp = `feedback,host=${pageData.host},path=${pageData.path},product=${pageData.product},version=${pageData.version} ${fields}`
|
||||
|
||||
// Use a honeypot form field to detect a bot
|
||||
// If the value of the honeypot field is greater than 0, the submitter is a bot
|
||||
function isBot() {
|
||||
const honeypot = formData.get('fname');
|
||||
return (honeypot.length > 0)
|
||||
}
|
||||
|
||||
// If the submitter is not a bot, send the feedback data
|
||||
if (!isBot()) {
|
||||
xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', 'https://j32dswat7l.execute-api.us-east-1.amazonaws.com/prod');
|
||||
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
|
||||
xhr.setRequestHeader('Access-Control-Allow-Origin', `${location.protocol}//${location.host}`);
|
||||
xhr.setRequestHeader('Content-Type', 'text/plain; charset=utf-8');
|
||||
xhr.setRequestHeader('Accept', 'application/json');
|
||||
xhr.send(lp);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
/////////////////////////////// Click life-cycles //////////////////////////////
|
||||
|
||||
// Trigger the lifecycle of page feedback (yes/no) radio select buttons
|
||||
function submitLifeCycle() {
|
||||
$('.helpful .loader-wrapper').fadeIn(200);
|
||||
$('.helpful #thank-you').delay(800).fadeIn(200);
|
||||
$('.helpful .loader-wrapper').delay(1000).hide(0);
|
||||
}
|
||||
|
||||
// Submit the feedback form and close the feedback modal window.
|
||||
// Called by onclick in the page-feedback modal submit button.
|
||||
function submitLifeCycleAndClose() {
|
||||
submitFeedbackForm('pagefeedbacktext');
|
||||
$('.modal #page-feedback .loader-wrapper').css('display', 'flex').hide().fadeIn(200);
|
||||
$('.modal #page-feedback #thank-you').css('display', 'flex').hide().delay(800).fadeIn(200);
|
||||
$('.modal #page-feedback textarea').css('box-shadow', 'none')
|
||||
$('.modal #page-feedback .loader-wrapper').delay(1000).hide(0);
|
||||
setTimeout(function() {toggleModal()}, 1800);
|
||||
return false;
|
||||
}
|
||||
|
||||
//////////////////////////////// Event triggers ////////////////////////////////
|
||||
|
||||
// Submit page feedback (yes/no) on radio select and trigger life cycle
|
||||
$('#pagefeedback input[type=radio]').change(function() {
|
||||
$('form#pagefeedback').submit();
|
||||
submitLifeCycle()
|
||||
})
|
||||
|
||||
// Toggle the feedback modal when user selects that the page is not helpful
|
||||
$('#pagefeedback #not-helpful input[type=radio]').click(function() {
|
||||
setTimeout(function() {toggleModal('#page-feedback')}, 400);
|
||||
})
|
||||
|
||||
// Toggle the feedback modal when user selects that the page is not helpful
|
||||
$('.modal #no-thanks').click(function() {
|
||||
toggleModal();
|
||||
})
|
||||
|
|
@ -21,6 +21,9 @@ a {
|
|||
flex-grow: 1;
|
||||
}
|
||||
|
||||
// Used to hide honeypot form fields
|
||||
.bowlofsweets {display: none;}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
.loader,
|
||||
.loader:after {
|
||||
border-radius: 50%;
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
}
|
||||
.loader {
|
||||
font-size: 3px;
|
||||
position: relative;
|
||||
border-top: 1.1em solid rgba($article-text, 0.1);
|
||||
border-right: 1.1em solid rgba($article-text, 0.1);
|
||||
border-bottom: 1.1em solid rgba($article-text, 0.1);
|
||||
border-left: 1.1em solid $b-dodger;
|
||||
transform: translateZ(0);
|
||||
animation: load8 .6s infinite linear;
|
||||
}
|
||||
@keyframes load8 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
.modal {
|
||||
display: none;
|
||||
padding: 1rem;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
|
||||
.modal-overlay {
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include gradient($grad-Miyazakisky);
|
||||
opacity: .85;
|
||||
}
|
||||
|
||||
.modal-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
position: relative;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
max-width: 650px;
|
||||
max-height: 97.5vh;
|
||||
margin-top: 10vh;
|
||||
padding: .75rem 2rem 1.5rem;
|
||||
border-radius: $radius * 1.5;
|
||||
background: $article-bg;
|
||||
color: $article-text;
|
||||
font-size: 1rem;
|
||||
transition: margin .4s;
|
||||
}
|
||||
|
||||
&.open {
|
||||
.modal-body { margin-top: 0; }
|
||||
}
|
||||
|
||||
#modal-close {
|
||||
position: absolute;
|
||||
padding: .25rem;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
color: rgba($article-text, .5);
|
||||
transition: color .2s;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $article-text;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content{
|
||||
display: none;
|
||||
overflow: visible;
|
||||
width: 100%;
|
||||
|
||||
h3 {
|
||||
color: $article-heading;
|
||||
font-weight: $medium;
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: $article-heading;
|
||||
font-weight: $medium;
|
||||
margin: 1rem 0 .5rem $radius;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin: .5rem 0 0;
|
||||
color: $article-bold;
|
||||
}
|
||||
|
||||
p,li {
|
||||
margin: .25rem 0;
|
||||
line-height: 1.5rem;
|
||||
strong {
|
||||
font-weight: $medium;
|
||||
color: $article-bold;
|
||||
}
|
||||
&.note {
|
||||
padding-top: 1.25rem;
|
||||
margin-top: 1.5rem;
|
||||
color: rgba($article-text, .5);
|
||||
border-top: 1px solid rgba($article-text, .25);
|
||||
font-size: .9rem;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $article-link;
|
||||
font-weight: $medium;
|
||||
text-decoration: none;
|
||||
transition: color .2s;
|
||||
&:hover {
|
||||
color: $article-link-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import "modals/url-selector";
|
||||
@import "modals/page-feedback";
|
||||
|
||||
}
|
||||
|
||||
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
|
||||
|
||||
@include media(small) {
|
||||
.modal {
|
||||
padding: .5rem;
|
||||
overflow: scroll;
|
||||
|
||||
.modal-body {
|
||||
padding: .5rem 1.5rem 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,405 +0,0 @@
|
|||
.modal {
|
||||
display: none;
|
||||
padding: 1rem;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
|
||||
.modal-overlay {
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include gradient($grad-Miyazakisky);
|
||||
opacity: .85;
|
||||
}
|
||||
|
||||
.modal-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
position: relative;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
max-width: 650px;
|
||||
max-height: 97.5vh;
|
||||
margin-top: 10vh;
|
||||
padding: .75rem 2rem 1.5rem;
|
||||
border-radius: $radius * 1.5;
|
||||
background: $article-bg;
|
||||
color: $article-text;
|
||||
font-size: 1rem;
|
||||
transition: margin .4s;
|
||||
}
|
||||
|
||||
&.open {
|
||||
.modal-body { margin-top: 0; }
|
||||
}
|
||||
|
||||
#modal-close {
|
||||
position: absolute;
|
||||
padding: .25rem;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
color: rgba($article-text, .5);
|
||||
transition: color .2s;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $article-text;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content{
|
||||
overflow: auto;
|
||||
|
||||
h3 {
|
||||
color: $article-heading;
|
||||
font-weight: $medium;
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: $article-heading;
|
||||
font-weight: $medium;
|
||||
margin: 1rem 0 .5rem $radius;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin: .5rem 0 0;
|
||||
color: $article-bold;
|
||||
}
|
||||
|
||||
p,li {
|
||||
margin: .25rem 0;
|
||||
line-height: 1.5rem;
|
||||
strong {
|
||||
font-weight: $medium;
|
||||
color: $article-bold;
|
||||
}
|
||||
&.note {
|
||||
padding-top: 1.25rem;
|
||||
margin-top: 1.5rem;
|
||||
color: rgba($article-text, .5);
|
||||
border-top: 1px solid rgba($article-text, .25);
|
||||
font-size: .9rem;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $article-link;
|
||||
font-weight: $medium;
|
||||
text-decoration: none;
|
||||
transition: color .2s;
|
||||
&:hover {
|
||||
color: $article-link-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.products {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.product {
|
||||
|
||||
.providers{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: .5rem 1rem;
|
||||
background: rgba($article-text, .05);
|
||||
border-radius: $radius;
|
||||
|
||||
.provider {
|
||||
flex-grow: 1;
|
||||
&:not(:last-child) {margin-right: 1rem;}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: .5rem .5rem .5rem 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
&.clusters {
|
||||
padding-left: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
p.region {
|
||||
|
||||
.fake-radio {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 1.15em;
|
||||
width: 1.15em;
|
||||
margin: 0 0.3rem 0 0.1rem;
|
||||
border-radius: $radius;
|
||||
border: 1.5px solid transparent;
|
||||
background: rgba($article-text, 0.05);
|
||||
border: 1.5px solid rgba($article-text, 0.2);
|
||||
vertical-align: text-top;
|
||||
cursor: pointer;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: .5rem;
|
||||
width: .5rem;
|
||||
top: .23rem;
|
||||
left: .23rem;
|
||||
border-radius: 50%;
|
||||
background: rgba($article-text, .3);
|
||||
opacity: 0;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
|
||||
&.checked:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.custom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#custom-url {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding-left: .5rem;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
content: attr(data-message);
|
||||
position: absolute;
|
||||
top: -1.8rem;
|
||||
right: 0;
|
||||
font-size: .85rem;
|
||||
font-weight: $medium;
|
||||
color: $r-fire;
|
||||
}
|
||||
|
||||
&.error {
|
||||
&:after { display: block; }
|
||||
input#custom-url-field {
|
||||
border-color: $r-fire;
|
||||
&:focus {
|
||||
border-color: $r-fire;
|
||||
box-shadow: 1px 1px 10px rgba($r-fire,0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&#custom-url-field {
|
||||
font-family: $rubik;
|
||||
font-weight: $medium;
|
||||
background: $modal-field-bg;
|
||||
border-radius: $radius;
|
||||
border: 1px solid $sidebar-search-bg;
|
||||
padding: .5em;
|
||||
width: 100%;
|
||||
color: $sidebar-search-text;
|
||||
transition-property: border, box-shadow;
|
||||
transition-duration: .2s;
|
||||
box-shadow: 2px 2px 6px $sidebar-search-shadow;
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $sidebar-search-highlight;
|
||||
box-shadow: 1px 1px 10px rgba($sidebar-search-highlight, .5);
|
||||
border-radius: $radius;
|
||||
}
|
||||
&::placeholder {
|
||||
color: rgba($sidebar-search-text, .45);
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 1.15em;
|
||||
width: 1.15em;
|
||||
background: rgba($article-text, .05);
|
||||
margin: 0 .3rem 0 .1rem;
|
||||
vertical-align: text-top;
|
||||
border-radius: $radius;
|
||||
cursor: pointer;
|
||||
border: 1.5px solid rgba($article-text, .2);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
margin-right: -1.1rem ;
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
|
||||
& + .radio:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: .5rem;
|
||||
width: .5rem;
|
||||
border-radius: 50%;
|
||||
background: $article-link;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
opacity: 0;
|
||||
transform: scale(2) translate(-20%, -20%);
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
&:checked + .radio:after {
|
||||
opacity: 1;
|
||||
transform: scale(1) translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td,label,li {
|
||||
&:after {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
font-style: italic;
|
||||
font-weight: $medium;
|
||||
font-size: .75em;
|
||||
margin-left: .35rem;
|
||||
padding: .1rem .3rem .12rem .32rem;
|
||||
line-height: .75rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
&.beta:after {
|
||||
content: "beta";
|
||||
color: $g20-white;
|
||||
@include gradient($grad-blue);
|
||||
}
|
||||
}
|
||||
|
||||
label:after {
|
||||
margin-left: .15rem;
|
||||
}
|
||||
|
||||
/////////////////////////// InfluxDB Preference Tabs ///////////////////////////
|
||||
|
||||
#pref-tabs {
|
||||
padding: 0;
|
||||
margin: 0 0 -5px;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pref-tab {
|
||||
padding: .75rem 1.25rem;
|
||||
margin-right: 5px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
width: 49%;
|
||||
color: rgba($article-text, .7);
|
||||
background: rgba($article-text, .05);
|
||||
border-radius: $radius;
|
||||
cursor: pointer;
|
||||
transition: color .2s;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $article-link;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $g20-white;
|
||||
@include gradient($article-btn-gradient);
|
||||
}
|
||||
|
||||
span.ephemeral { display: inline; }
|
||||
span.abbr:after {
|
||||
display: none;
|
||||
content: ".";
|
||||
}
|
||||
}
|
||||
|
||||
.product {
|
||||
&.active { display: block; }
|
||||
&.inactive { display: none; }
|
||||
}
|
||||
|
||||
///////////////////////////// InfluxDB URL Triggers ////////////////////////////
|
||||
|
||||
.article--content {
|
||||
.select-url {
|
||||
margin: -2.5rem 0 1rem;
|
||||
text-align: right;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.url-trigger {
|
||||
padding: .25rem .5rem;
|
||||
display: inline-block;
|
||||
font-size: .85rem;
|
||||
font-style: italic;
|
||||
color: rgba($article-tab-code-text, .5);
|
||||
background: $article-code-bg;
|
||||
border-radius: 0 0 $radius $radius;
|
||||
|
||||
&:before {
|
||||
content: "\e924";
|
||||
display: inline-block;
|
||||
margin-right: .35rem;
|
||||
font-family: "icomoon-v2";
|
||||
font-style: normal;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $article-tab-code-text;
|
||||
}
|
||||
}
|
||||
li .url-trigger { padding: 0rem .5rem; }
|
||||
|
||||
.code-tab-content {
|
||||
.select-url{margin-top: -3.25rem}
|
||||
}
|
||||
}
|
||||
|
||||
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
|
||||
|
||||
@include media(small) {
|
||||
.modal {
|
||||
padding: .5rem;
|
||||
overflow: scroll;
|
||||
|
||||
.modal-body {
|
||||
padding: .5rem 1.5rem 1.5rem;
|
||||
}
|
||||
}
|
||||
.pref-tab {
|
||||
span.ephemeral { display: none; }
|
||||
span.abbr:after { display: inline; }
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
////////////////////////// Support and Feedback Block //////////////////////////
|
||||
|
||||
.feedback {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -61,6 +63,10 @@
|
|||
color: $article-text !important;
|
||||
background: $feedback-btn-bg !important;
|
||||
|
||||
&:after{
|
||||
@include gradient($article-btn-gradient);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $g20-white !important;
|
||||
}
|
||||
|
|
@ -84,6 +90,77 @@
|
|||
}
|
||||
}
|
||||
|
||||
///////////////////////////// Page Helpful Section /////////////////////////////
|
||||
|
||||
.helpful {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
p {margin-bottom: 0;}
|
||||
|
||||
label.radio-btns {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
min-width: 4rem;
|
||||
padding: .5rem 1rem;
|
||||
font-size: .95rem;
|
||||
font-weight: $medium;
|
||||
text-align: center;
|
||||
color: $article-bold;
|
||||
border-radius: 3px;
|
||||
background: rgba($article-text, .1);
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
|
||||
&:after{
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
min-width: 4rem;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
transition: opacity .2s, color .2s;
|
||||
}
|
||||
|
||||
&#helpful:after {@include gradient($grad-green-shade)}
|
||||
&#not-helpful:after {@include gradient($grad-red)}
|
||||
|
||||
&:hover {
|
||||
color: $g20-white;
|
||||
&:after {opacity: 1}
|
||||
}
|
||||
|
||||
}
|
||||
input[type='radio'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loader-wrapper, #thank-you {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $article-bg;
|
||||
}
|
||||
|
||||
.loader-wrapper {
|
||||
z-index: 5;
|
||||
.loader {margin: 0 auto;}
|
||||
}
|
||||
#thank-you {z-index: 10; p {text-align: center;}}
|
||||
}
|
||||
|
||||
///////////////////////////////// Media Queries ////////////////////////////////
|
||||
|
||||
@include media(medium) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,112 @@
|
|||
////////////////////// Styles for the page feedback modal //////////////////////
|
||||
|
||||
$button-padding: .65rem 1.1rem;
|
||||
|
||||
.form-buttons {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
font-family: $proxima;
|
||||
font-weight: $medium;
|
||||
background: $sidebar-search-bg;
|
||||
border-radius: $radius;
|
||||
border: 1px solid $sidebar-search-bg;
|
||||
margin-top: 1rem;
|
||||
padding: .5em;
|
||||
width: 100%;
|
||||
height: 8rem;
|
||||
color: $sidebar-search-text;
|
||||
transition-property: border, box-shadow;
|
||||
transition-duration: .2s;
|
||||
box-shadow: 2px 2px 6px $sidebar-search-shadow;
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $sidebar-search-highlight;
|
||||
box-shadow: 1px 1px 10px rgba($sidebar-search-highlight, .5);
|
||||
border-radius: $radius;
|
||||
}
|
||||
&::placeholder {
|
||||
color: rgba($sidebar-search-text, .45);
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='submit'] {
|
||||
padding: $button-padding;
|
||||
@include gradient($article-btn-gradient);
|
||||
border: none;
|
||||
border-radius: $radius;
|
||||
color: $g20-white;
|
||||
font-weight: $medium;
|
||||
opacity: 1;
|
||||
transition: opacity .2s;
|
||||
z-index: 1;
|
||||
|
||||
&:hover {opacity: 0;}
|
||||
}
|
||||
|
||||
.submit-wrapper {
|
||||
position: relative;
|
||||
@include gradient($article-btn-gradient-hover);
|
||||
border-radius: $radius;
|
||||
color: $g20-white;
|
||||
font-weight: $medium;
|
||||
&:before{
|
||||
content: "Submit";
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: $button-padding;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#no-thanks {
|
||||
margin-right: .5rem;
|
||||
padding: $button-padding;
|
||||
background: rgba($article-text, .1);
|
||||
color: rgba($article-bold, .65);
|
||||
border-radius: $radius;
|
||||
cursor: pointer;
|
||||
transition: color .2s;
|
||||
|
||||
&:hover {color: $article-bold;}
|
||||
}
|
||||
|
||||
.lifecycle-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.loader-wrapper, #thank-you {
|
||||
position: absolute;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $article-bg;
|
||||
}
|
||||
|
||||
.loader-wrapper {
|
||||
z-index: 5;
|
||||
.loader {margin: 0 auto;}
|
||||
}
|
||||
|
||||
#thank-you {
|
||||
z-index: 10;
|
||||
font-size: 1.2rem;
|
||||
font-style: italic;
|
||||
font-weight: $medium;
|
||||
color: rgba($article-text, .65);
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,292 @@
|
|||
/////////////////// Styes for the InfluxDB URL selector modal //////////////////
|
||||
|
||||
.products {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.product {
|
||||
|
||||
.providers{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: .5rem 1rem;
|
||||
background: rgba($article-text, .05);
|
||||
border-radius: $radius;
|
||||
|
||||
.provider {
|
||||
flex-grow: 1;
|
||||
&:not(:last-child) {margin-right: 1rem;}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: .5rem .5rem .5rem 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
&.clusters {
|
||||
padding-left: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
p.region {
|
||||
|
||||
.fake-radio {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 1.15em;
|
||||
width: 1.15em;
|
||||
margin: 0 0.3rem 0 0.1rem;
|
||||
border-radius: $radius;
|
||||
border: 1.5px solid transparent;
|
||||
background: rgba($article-text, 0.05);
|
||||
border: 1.5px solid rgba($article-text, 0.2);
|
||||
vertical-align: text-top;
|
||||
cursor: pointer;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: .5rem;
|
||||
width: .5rem;
|
||||
top: .23rem;
|
||||
left: .23rem;
|
||||
border-radius: 50%;
|
||||
background: rgba($article-text, .3);
|
||||
opacity: 0;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
|
||||
&.checked:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.custom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#custom-url {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding-left: .5rem;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
content: attr(data-message);
|
||||
position: absolute;
|
||||
top: -1.8rem;
|
||||
right: 0;
|
||||
font-size: .85rem;
|
||||
font-weight: $medium;
|
||||
color: $r-fire;
|
||||
}
|
||||
|
||||
&.error {
|
||||
&:after { display: block; }
|
||||
input#custom-url-field {
|
||||
border-color: $r-fire;
|
||||
&:focus {
|
||||
border-color: $r-fire;
|
||||
box-shadow: 1px 1px 10px rgba($r-fire,0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&#custom-url-field {
|
||||
font-family: $proxima;
|
||||
font-weight: $medium;
|
||||
background: $modal-field-bg;
|
||||
border-radius: $radius;
|
||||
border: 1px solid $sidebar-search-bg;
|
||||
padding: .5em;
|
||||
width: 100%;
|
||||
color: $sidebar-search-text;
|
||||
transition-property: border, box-shadow;
|
||||
transition-duration: .2s;
|
||||
box-shadow: 2px 2px 6px $sidebar-search-shadow;
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $sidebar-search-highlight;
|
||||
box-shadow: 1px 1px 10px rgba($sidebar-search-highlight, .5);
|
||||
border-radius: $radius;
|
||||
}
|
||||
&::placeholder {
|
||||
color: rgba($sidebar-search-text, .45);
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 1.15em;
|
||||
width: 1.15em;
|
||||
background: rgba($article-text, .05);
|
||||
margin: 0 .3rem 0 .1rem;
|
||||
vertical-align: text-top;
|
||||
border-radius: $radius;
|
||||
cursor: pointer;
|
||||
border: 1.5px solid rgba($article-text, .2);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
margin-right: -1.1rem ;
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
|
||||
& + .radio:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: .5rem;
|
||||
width: .5rem;
|
||||
border-radius: 50%;
|
||||
background: $article-link;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
opacity: 0;
|
||||
transform: scale(2) translate(-20%, -20%);
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
&:checked + .radio:after {
|
||||
opacity: 1;
|
||||
transform: scale(1) translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
td,label,li {
|
||||
&:after {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
font-style: italic;
|
||||
font-weight: $medium;
|
||||
font-size: .75em;
|
||||
margin-left: .35rem;
|
||||
padding: .1rem .3rem .12rem .32rem;
|
||||
line-height: .75rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
&.beta:after {
|
||||
content: "beta";
|
||||
color: $g20-white;
|
||||
@include gradient($grad-blue);
|
||||
}
|
||||
}
|
||||
|
||||
label:after {
|
||||
margin-left: .15rem;
|
||||
}
|
||||
|
||||
/////////////////////////// InfluxDB Preference Tabs ///////////////////////////
|
||||
|
||||
#pref-tabs {
|
||||
padding: 0;
|
||||
margin: 0 0 -5px;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pref-tab {
|
||||
padding: .75rem 1.25rem;
|
||||
margin-right: 5px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
width: 49%;
|
||||
color: rgba($article-text, .7);
|
||||
background: rgba($article-text, .05);
|
||||
border-radius: $radius;
|
||||
cursor: pointer;
|
||||
transition: color .2s;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $article-link;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $g20-white;
|
||||
@include gradient($article-btn-gradient);
|
||||
}
|
||||
|
||||
span.ephemeral { display: inline; }
|
||||
span.abbr:after {
|
||||
display: none;
|
||||
content: ".";
|
||||
}
|
||||
}
|
||||
|
||||
.product {
|
||||
&.active { display: block; }
|
||||
&.inactive { display: none; }
|
||||
}
|
||||
|
||||
///////////////////////////// InfluxDB URL Triggers ////////////////////////////
|
||||
|
||||
.article--content {
|
||||
.select-url {
|
||||
margin: -2.5rem 0 1rem;
|
||||
text-align: right;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.url-trigger {
|
||||
padding: .25rem .5rem;
|
||||
display: inline-block;
|
||||
font-size: .85rem;
|
||||
font-style: italic;
|
||||
color: rgba($article-tab-code-text, .5);
|
||||
background: $article-code-bg;
|
||||
border-radius: 0 0 $radius $radius;
|
||||
|
||||
&:before {
|
||||
content: "\e924";
|
||||
display: inline-block;
|
||||
margin-right: .35rem;
|
||||
font-family: "icomoon-v2";
|
||||
font-style: normal;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $article-tab-code-text;
|
||||
}
|
||||
}
|
||||
li .url-trigger { padding: 0rem .5rem; }
|
||||
|
||||
.code-tab-content {
|
||||
.select-url{margin-top: -3.25rem}
|
||||
}
|
||||
}
|
||||
|
||||
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
|
||||
|
||||
@include media(small) {
|
||||
.pref-tab {
|
||||
span.ephemeral { display: none; }
|
||||
span.abbr:after { display: inline; }
|
||||
}
|
||||
}
|
||||
|
|
@ -23,7 +23,8 @@
|
|||
"layouts/algolia-search-overrides",
|
||||
"layouts/landing",
|
||||
"layouts/error-page",
|
||||
"layouts/url-selector",
|
||||
"layouts/modals",
|
||||
"layouts/loading-spinner",
|
||||
"layouts/feature-callouts",
|
||||
"layouts/v1-overrides",
|
||||
"layouts/notifications",
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ hrefTargetBlank = true
|
|||
smartDashes = false
|
||||
|
||||
[taxonomies]
|
||||
"influxdb/v2.2/tag" = "influxdb/v2.1/tags"
|
||||
"influxdb/v2.2/tag" = "influxdb/v2.2/tags"
|
||||
"influxdb/v2.1/tag" = "influxdb/v2.1/tags"
|
||||
"influxdb/v2.0/tag" = "influxdb/v2.0/tags"
|
||||
"influxdb/cloud/tag" = "influxdb/cloud/tags"
|
||||
|
|
|
|||
|
|
@ -29,6 +29,21 @@
|
|||
` }}
|
||||
{{ $pageGithubIssueLink := print "https://github.com/influxdata/docs-v2/issues/new?body=" $docsIssueLinkBody }}
|
||||
|
||||
<hr/>
|
||||
<div class="helpful">
|
||||
<p>Was this page helpful?</p>
|
||||
<form onSubmit="return submitFeedbackForm('pagefeedback')" id="pagefeedback">
|
||||
<input type="text" name="fname" class="bowlofsweets" placeholder="First Name">
|
||||
<label class="radio-btns" id="helpful"><input type="radio" name="helpful" value=true />Yes</label>
|
||||
<label class="radio-btns" id="not-helpful"><input type="radio" name="helpful" value=false />No</label>
|
||||
</form>
|
||||
<div id="thank-you">
|
||||
<p>Thank you for your feedback!</p>
|
||||
</div>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="feedback block">
|
||||
<div class="support">
|
||||
|
|
@ -36,7 +51,7 @@
|
|||
<p>
|
||||
Thank you for being part of our community!
|
||||
We welcome and encourage your feedback and bug reports for {{ $productName }} and this documentation.
|
||||
To find support, the following resources are available:
|
||||
To find support, use the following resources:
|
||||
</p>
|
||||
<ul>
|
||||
<li><a class="community" href="https://community.influxdata.com/" target="_blank">InfluxData Community</a></li>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
{{ $currentVersion := index $productPathData 1 | default "v2.0"}}
|
||||
|
||||
<!-- Modals -->
|
||||
{{ partial "footer/influxdb-url-modal.html" . }}
|
||||
{{ partial "footer/modals.html" . }}
|
||||
{{ partial "footer/feature-callout.html" . }}
|
||||
{{ partial "footer/fullscreen-code.html" . }}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
{{ $contentInteractions := resources.Get "js/content-interactions.js" }}
|
||||
{{ $searchInteractions := resources.Get "js/search-interactions.js" }}
|
||||
{{ $listFilters := resources.Get "js/list-filters.js" }}
|
||||
{{ $modals := resources.Get "js/modals.js" }}
|
||||
{{ $influxdbURLs := resources.Get "js/influxdb-url.js" }}
|
||||
{{ $featureCallouts := resources.Get "js/feature-callouts.js" }}
|
||||
{{ $notifications := resources.Get "js/notifications.js" }}
|
||||
|
|
@ -9,8 +10,9 @@
|
|||
{{ $fluxGroupKeys := resources.Get "js/flux-group-keys.js" }}
|
||||
{{ $fluxCurrentTime := resources.Get "js/flux-current-time.js" }}
|
||||
{{ $fullscreenCode := resources.Get "js/fullscreen-code.js" }}
|
||||
{{ $pageFeedback := resources.Get "js/page-feedback.js" }}
|
||||
{{ $homepageInteractions := resources.Get "js/home-interactions.js" }}
|
||||
{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $listFilters $influxdbURLs $featureCallouts $notifications $keybindings $fullscreenCode $homepageInteractions | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }}
|
||||
{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $listFilters $modals $influxdbURLs $featureCallouts $notifications $keybindings $fullscreenCode $pageFeedback $homepageInteractions | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }}
|
||||
{{ $fluxGroupKeyjs := slice $fluxGroupKeys | resources.Concat "js/flux-group-keys.js" | resources.Fingerprint }}
|
||||
{{ $fluxCurrentTimejs := slice $fluxCurrentTime | resources.Concat "js/flux-current-time.js" | resources.Fingerprint }}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
<div class="modal">
|
||||
<div class="modal-overlay"></div>
|
||||
<div class="modal-wrapper">
|
||||
<div class="modal-body">
|
||||
<a id="modal-close"href="#"><span class="icon-remove"></span></a>
|
||||
<!-- Modal window content blocks-->
|
||||
{{ partial "footer/modals/influxdb-url.html" . }}
|
||||
{{ partial "footer/modals/page-feedback.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -96,30 +96,23 @@
|
|||
</div>
|
||||
{{ end }}
|
||||
|
||||
<div class="modal">
|
||||
<div class="modal-overlay"></div>
|
||||
<div class="modal-wrapper">
|
||||
<div id="influxdb-url-list" class="modal-body">
|
||||
<a id="modal-close"href="#"><span class="icon-remove"></span></a>
|
||||
<div class="modal-content">
|
||||
<h3>{{ $modalTitle }}</h3>
|
||||
<p>{{ $modalMessage | markdownify }}</p>
|
||||
<div class="products">
|
||||
{{ if not $isInfluxDB }}
|
||||
<ul id="pref-tabs">
|
||||
<li class="pref-tab active" id="pref-cloud"><span class="ephemeral">InfluxDB </span>Cloud</li>
|
||||
<li class="pref-tab" id="pref-oss"><span class="ephemeral">InfluxDB </span>OSS or <span class="abbr">Ent</span><span class="ephemeral">erprise</span></li>
|
||||
</ul>
|
||||
{{ template "productSection" dict "product" .Site.Data.influxdb_urls.cloud "formID" "cloud" "initialState" "active"}}
|
||||
{{ template "productSection" dict "product" .Site.Data.influxdb_urls.oss "formID" "oss" "initialState" "inactive"}}
|
||||
{{ else if $isCloud }}
|
||||
{{ template "productSection" dict "product" .Site.Data.influxdb_urls.cloud "formID" "cloud" }}
|
||||
{{ else if or $isOSS $isEnterprise }}
|
||||
{{ template "productSection" dict "product" .Site.Data.influxdb_urls.oss "formID" "oss" }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<p class="note">For more information, see {{ $modalRefLinks | markdownify }}.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-content" id="influxdb-url-list">
|
||||
<h3>{{ $modalTitle }}</h3>
|
||||
<p>{{ $modalMessage | markdownify }}</p>
|
||||
<div class="products">
|
||||
{{ if not $isInfluxDB }}
|
||||
<ul id="pref-tabs">
|
||||
<li class="pref-tab active" id="pref-cloud"><span class="ephemeral">InfluxDB </span>Cloud</li>
|
||||
<li class="pref-tab" id="pref-oss"><span class="ephemeral">InfluxDB </span>OSS or <span class="abbr">Ent</span><span class="ephemeral">erprise</span></li>
|
||||
</ul>
|
||||
{{ template "productSection" dict "product" .Site.Data.influxdb_urls.cloud "formID" "cloud" "initialState" "active"}}
|
||||
{{ template "productSection" dict "product" .Site.Data.influxdb_urls.oss "formID" "oss" "initialState" "inactive"}}
|
||||
{{ else if $isCloud }}
|
||||
{{ template "productSection" dict "product" .Site.Data.influxdb_urls.cloud "formID" "cloud" }}
|
||||
{{ else if or $isOSS $isEnterprise }}
|
||||
{{ template "productSection" dict "product" .Site.Data.influxdb_urls.oss "formID" "oss" }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<p class="note">For more information, see {{ $modalRefLinks | markdownify }}.</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<div class="modal-content" id="page-feedback">
|
||||
<h3>Thank you for your feedback!</h3>
|
||||
<p>Let us know what we can do better:</p>
|
||||
|
||||
<form id="pagefeedbacktext">
|
||||
<input type="text" name="fname" class="bowlofsweets" placeholder="First Name">
|
||||
<div class="lifecycle-wrapper">
|
||||
<textarea name="feedback-text" placeholder="Missing information? Unclear explanations? Help us improve this page!"></textarea>
|
||||
<div id="thank-you">
|
||||
<p>Thank you!</p>
|
||||
</div>
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-buttons">
|
||||
<div id="no-thanks">
|
||||
No thanks
|
||||
</div>
|
||||
<div class="submit-wrapper">
|
||||
<input type="submit" value="Submit" onclick="return submitLifeCycleAndClose();">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
Loading…
Reference in New Issue