From cbdfc0e52526fb327397132a87e3dead3f8d12f1 Mon Sep 17 00:00:00 2001 From: Scott Anderson Date: Fri, 13 May 2022 15:35:01 -0700 Subject: [PATCH] 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> --- assets/js/influxdb-url.js | 17 +- assets/js/modals.js | 20 + assets/js/page-feedback.js | 97 +++++ assets/styles/layouts/_global.scss | 3 + assets/styles/layouts/_loading-spinner.scss | 26 ++ assets/styles/layouts/_modals.scss | 127 ++++++ assets/styles/layouts/_url-selector.scss | 405 ------------------ assets/styles/layouts/article/_feedback.scss | 77 ++++ .../styles/layouts/modals/_page-feedback.scss | 112 +++++ .../styles/layouts/modals/_url-selector.scss | 292 +++++++++++++ assets/styles/styles-default.scss | 3 +- config.toml | 2 +- layouts/partials/article/feedback.html | 17 +- layouts/partials/footer.html | 2 +- layouts/partials/footer/javascript.html | 4 +- layouts/partials/footer/modals.html | 11 + .../influxdb-url.html} | 43 +- .../partials/footer/modals/page-feedback.html | 26 ++ 18 files changed, 839 insertions(+), 445 deletions(-) create mode 100644 assets/js/modals.js create mode 100644 assets/js/page-feedback.js create mode 100644 assets/styles/layouts/_loading-spinner.scss create mode 100644 assets/styles/layouts/_modals.scss delete mode 100644 assets/styles/layouts/_url-selector.scss create mode 100644 assets/styles/layouts/modals/_page-feedback.scss create mode 100644 assets/styles/layouts/modals/_url-selector.scss create mode 100644 layouts/partials/footer/modals.html rename layouts/partials/footer/{influxdb-url-modal.html => modals/influxdb-url.html} (77%) create mode 100644 layouts/partials/footer/modals/page-feedback.html diff --git a/assets/js/influxdb-url.js b/assets/js/influxdb-url.js index 81be1af65..7d5c75717 100644 --- a/assets/js/influxdb-url.js +++ b/assets/js/influxdb-url.js @@ -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")) { diff --git a/assets/js/modals.js b/assets/js/modals.js new file mode 100644 index 000000000..113e69de7 --- /dev/null +++ b/assets/js/modals.js @@ -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() +}) \ No newline at end of file diff --git a/assets/js/page-feedback.js b/assets/js/page-feedback.js new file mode 100644 index 000000000..32360528e --- /dev/null +++ b/assets/js/page-feedback.js @@ -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(); +}) \ No newline at end of file diff --git a/assets/styles/layouts/_global.scss b/assets/styles/layouts/_global.scss index f7c642605..efe385736 100644 --- a/assets/styles/layouts/_global.scss +++ b/assets/styles/layouts/_global.scss @@ -21,6 +21,9 @@ a { flex-grow: 1; } +// Used to hide honeypot form fields +.bowlofsweets {display: none;} + //////////////////////////////////////////////////////////////////////////////// ///////////////////////////////// MEDIA QUERIES //////////////////////////////// //////////////////////////////////////////////////////////////////////////////// diff --git a/assets/styles/layouts/_loading-spinner.scss b/assets/styles/layouts/_loading-spinner.scss new file mode 100644 index 000000000..698957938 --- /dev/null +++ b/assets/styles/layouts/_loading-spinner.scss @@ -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); + } +} \ No newline at end of file diff --git a/assets/styles/layouts/_modals.scss b/assets/styles/layouts/_modals.scss new file mode 100644 index 000000000..63c8b8250 --- /dev/null +++ b/assets/styles/layouts/_modals.scss @@ -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; + } + } +} diff --git a/assets/styles/layouts/_url-selector.scss b/assets/styles/layouts/_url-selector.scss deleted file mode 100644 index 3f5a53c04..000000000 --- a/assets/styles/layouts/_url-selector.scss +++ /dev/null @@ -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; } - } -} diff --git a/assets/styles/layouts/article/_feedback.scss b/assets/styles/layouts/article/_feedback.scss index 771f268da..a3339886e 100644 --- a/assets/styles/layouts/article/_feedback.scss +++ b/assets/styles/layouts/article/_feedback.scss @@ -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) { diff --git a/assets/styles/layouts/modals/_page-feedback.scss b/assets/styles/layouts/modals/_page-feedback.scss new file mode 100644 index 000000000..04027eaf2 --- /dev/null +++ b/assets/styles/layouts/modals/_page-feedback.scss @@ -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; + } +} diff --git a/assets/styles/layouts/modals/_url-selector.scss b/assets/styles/layouts/modals/_url-selector.scss new file mode 100644 index 000000000..b11c8ab11 --- /dev/null +++ b/assets/styles/layouts/modals/_url-selector.scss @@ -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; } + } +} diff --git a/assets/styles/styles-default.scss b/assets/styles/styles-default.scss index 899646c58..5ebceb94b 100644 --- a/assets/styles/styles-default.scss +++ b/assets/styles/styles-default.scss @@ -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", diff --git a/config.toml b/config.toml index 49cd97863..b76bbbe4c 100644 --- a/config.toml +++ b/config.toml @@ -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" diff --git a/layouts/partials/article/feedback.html b/layouts/partials/article/feedback.html index 50c2ed372..e9db95e81 100644 --- a/layouts/partials/article/feedback.html +++ b/layouts/partials/article/feedback.html @@ -29,6 +29,21 @@ ` }} {{ $pageGithubIssueLink := print "https://github.com/influxdata/docs-v2/issues/new?body=" $docsIssueLinkBody }} +
+
+

Was this page helpful?

+
+ + + +
+
+

Thank you for your feedback!

+
+
+
+
+
@@ -36,7 +51,7 @@

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:

  • InfluxData Community
    • diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index e2d2353aa..2374bac63 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -3,7 +3,7 @@ {{ $currentVersion := index $productPathData 1 | default "v2.0"}} - {{ partial "footer/influxdb-url-modal.html" . }} + {{ partial "footer/modals.html" . }} {{ partial "footer/feature-callout.html" . }} {{ partial "footer/fullscreen-code.html" . }} diff --git a/layouts/partials/footer/javascript.html b/layouts/partials/footer/javascript.html index 910bdcf58..213411bf6 100644 --- a/layouts/partials/footer/javascript.html +++ b/layouts/partials/footer/javascript.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 }} diff --git a/layouts/partials/footer/modals.html b/layouts/partials/footer/modals.html new file mode 100644 index 000000000..e017a2968 --- /dev/null +++ b/layouts/partials/footer/modals.html @@ -0,0 +1,11 @@ +
    +
    +
    +
    + + + {{ partial "footer/modals/influxdb-url.html" . }} + {{ partial "footer/modals/page-feedback.html" . }} +
    +
    +
    \ No newline at end of file diff --git a/layouts/partials/footer/influxdb-url-modal.html b/layouts/partials/footer/modals/influxdb-url.html similarity index 77% rename from layouts/partials/footer/influxdb-url-modal.html rename to layouts/partials/footer/modals/influxdb-url.html index 896129750..95c43c750 100644 --- a/layouts/partials/footer/influxdb-url-modal.html +++ b/layouts/partials/footer/modals/influxdb-url.html @@ -96,30 +96,23 @@
{{ end }} -
-
-
-
- -
-

{{ $modalTitle }}

-

{{ $modalMessage | markdownify }}

-
- {{ if not $isInfluxDB }} -
    -
  • InfluxDB Cloud
    • -
  • InfluxDB OSS or Enterprise
    • -
- {{ 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 }} -
-

For more information, see {{ $modalRefLinks | markdownify }}.

-
-
+
+

{{ $modalTitle }}

+

{{ $modalMessage | markdownify }}

+
+ {{ if not $isInfluxDB }} +
    +
  • InfluxDB Cloud
    • +
  • InfluxDB OSS or Enterprise
    • +
+ {{ 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 }}
+

For more information, see {{ $modalRefLinks | markdownify }}.

+ diff --git a/layouts/partials/footer/modals/page-feedback.html b/layouts/partials/footer/modals/page-feedback.html new file mode 100644 index 000000000..0b69f4baf --- /dev/null +++ b/layouts/partials/footer/modals/page-feedback.html @@ -0,0 +1,26 @@ +
+

Thank you for your feedback!

+

Let us know what we can do better:

+ +
+ +
+ +
+

Thank you!

+
+
+
+
+
+
+
+ No thanks +
+
+ +
+
+
+ +