From 1e39a5661bb66afcb00865bdc43aac22670244fc Mon Sep 17 00:00:00 2001 From: Samuel Gratzl Date: Wed, 6 Jan 2021 09:02:38 -0500 Subject: [PATCH 01/15] feat: simple feedback button/form --- config.toml | 5 ++ .../assets/css/components/_feedback.scss | 11 +++++ themes/delphi/assets/css/main.scss | 1 + themes/delphi/assets/js/feedback-button.js | 46 +++++++++++++++++++ themes/delphi/assets/js/main.js | 1 + themes/delphi/layouts/partials/footer.html | 11 +++++ 6 files changed, 75 insertions(+) create mode 100644 themes/delphi/assets/css/components/_feedback.scss create mode 100644 themes/delphi/assets/js/feedback-button.js diff --git a/config.toml b/config.toml index c63b3f4cd..fc63e140f 100644 --- a/config.toml +++ b/config.toml @@ -111,3 +111,8 @@ relativeURLs = false mission = "Develop the theory and practice of epidemiological forecasting, with a long-term vision of making this technology as universally accepted and useful as weather forecasting is today." apiUrl = "https://cmu-delphi.github.io/delphi-epidata" twitter = "CmuDelphi" + feedbackForm = "https://docs.google.com/forms/d/e/1FAIpQLSffGhrCsZmDSF4Lbeg9lB-Gp_Uf7z7D9ust-vXk1F5V1SElig/viewform?usp=pp_url&entry.1245962748=" + feedbackRequest = "Please provide feedback" + feedbackDelay = 6 # wait for initial 60sec to show the notification + feedbackDuration = 60 # show it for 60sec + feedbackInterval = 120 # wait for another 120sec to show another \ No newline at end of file diff --git a/themes/delphi/assets/css/components/_feedback.scss b/themes/delphi/assets/css/components/_feedback.scss new file mode 100644 index 000000000..4ebf2eded --- /dev/null +++ b/themes/delphi/assets/css/components/_feedback.scss @@ -0,0 +1,11 @@ +.feedback-modal { + padding-top: 1.5em; + height: 500px; + display: block; + position: relative; +} + +.feedback-modal > iframe { + width: 100%; + height: 100%; +} diff --git a/themes/delphi/assets/css/main.scss b/themes/delphi/assets/css/main.scss index 3ff6dfdf5..04021c1b0 100644 --- a/themes/delphi/assets/css/main.scss +++ b/themes/delphi/assets/css/main.scss @@ -23,6 +23,7 @@ @import "./components/card_grid"; @import "./components/latest_card"; @import "./components/toc"; +@import "./components/feedback"; // Page Designs @import "./pages/about"; diff --git a/themes/delphi/assets/js/feedback-button.js b/themes/delphi/assets/js/feedback-button.js new file mode 100644 index 000000000..b53a92cf6 --- /dev/null +++ b/themes/delphi/assets/js/feedback-button.js @@ -0,0 +1,46 @@ +(() => { + const btn = document.querySelector(".feedback-button"); + if (!btn) { + return; + } + + const delay = Number.parseInt(btn.dataset.delay, 10) * 1000; + const interval = Number.parseInt(btn.dataset.interval, 10) * 1000; + const duration = Number.parseInt(btn.dataset.duration, 10) * 1000; + const requestText = btn.dataset.request; + + const showForm = () => { + const url = `${btn.href}${encodeURIComponent(location.href)}&embedded=true`; + UIkit.modal.dialog( + `
` + ); + }; + + btn.addEventListener("click", (e) => { + e.preventDefault(); + showForm(); + }); + + const showFeedbackNotification = () => { + const elem = UIkit.notification({ + message: `${requestText}`, + status: "primary", + pos: "bottom-right", + timeout: duration, + }); + let clicked = false; + elem.$el.querySelector("a.feedback-button").addEventListener("click", (e) => { + e.preventDefault(); + elem.close(true); + clicked = true; + showForm(); + }); + elem.on("close", () => { + if (!clicked) { + setTimeout(showFeedbackNotification, interval); + } + }); + }; + // initial delay + setTimeout(showFeedbackNotification, delay); +})(); diff --git a/themes/delphi/assets/js/main.js b/themes/delphi/assets/js/main.js index 97b340962..dee102a9e 100644 --- a/themes/delphi/assets/js/main.js +++ b/themes/delphi/assets/js/main.js @@ -1,5 +1,6 @@ import UIkit from "uikit/dist/js/uikit.js"; import plugin from "uikit/dist/js/uikit-icons.js"; +import "./feedback-button"; UIkit.use(plugin); // re export for COVIDcast diff --git a/themes/delphi/layouts/partials/footer.html b/themes/delphi/layouts/partials/footer.html index fe94b349a..6574ad046 100644 --- a/themes/delphi/layouts/partials/footer.html +++ b/themes/delphi/layouts/partials/footer.html @@ -40,6 +40,17 @@
Contact
  • Twitter
    • +
  • + +
    • From c87dc81a16bf55e6138813b173005fb0aade3c93 Mon Sep 17 00:00:00 2001 From: Samuel Gratzl Date: Wed, 6 Jan 2021 09:05:02 -0500 Subject: [PATCH 02/15] feat: change to 60 delay --- config.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config.toml b/config.toml index fc63e140f..832d411d9 100644 --- a/config.toml +++ b/config.toml @@ -113,6 +113,6 @@ relativeURLs = false twitter = "CmuDelphi" feedbackForm = "https://docs.google.com/forms/d/e/1FAIpQLSffGhrCsZmDSF4Lbeg9lB-Gp_Uf7z7D9ust-vXk1F5V1SElig/viewform?usp=pp_url&entry.1245962748=" feedbackRequest = "Please provide feedback" - feedbackDelay = 6 # wait for initial 60sec to show the notification + feedbackDelay = 60 # wait for initial 60sec to show the notification feedbackDuration = 60 # show it for 60sec feedbackInterval = 120 # wait for another 120sec to show another \ No newline at end of file From c0f4e5c41cb3d1b7aff105e315a1830bdef2e218 Mon Sep 17 00:00:00 2001 From: Samuel Gratzl Date: Tue, 12 Jan 2021 09:34:10 +0100 Subject: [PATCH 03/15] feat: improve feedback design --- config.toml | 7 +++---- themes/delphi/assets/js/feedback-button.js | 1 - 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/config.toml b/config.toml index 832d411d9..4d68a99b4 100644 --- a/config.toml +++ b/config.toml @@ -112,7 +112,6 @@ relativeURLs = false apiUrl = "https://cmu-delphi.github.io/delphi-epidata" twitter = "CmuDelphi" feedbackForm = "https://docs.google.com/forms/d/e/1FAIpQLSffGhrCsZmDSF4Lbeg9lB-Gp_Uf7z7D9ust-vXk1F5V1SElig/viewform?usp=pp_url&entry.1245962748=" - feedbackRequest = "Please provide feedback" - feedbackDelay = 60 # wait for initial 60sec to show the notification - feedbackDuration = 60 # show it for 60sec - feedbackInterval = 120 # wait for another 120sec to show another \ No newline at end of file + feedbackRequest = "We'd love to hear from you" + feedbackDelay = 30 # wait for initial 30sec to show the notification + feedbackDuration = 60 # show it for 60sec \ No newline at end of file diff --git a/themes/delphi/assets/js/feedback-button.js b/themes/delphi/assets/js/feedback-button.js index b53a92cf6..895f6639e 100644 --- a/themes/delphi/assets/js/feedback-button.js +++ b/themes/delphi/assets/js/feedback-button.js @@ -5,7 +5,6 @@ } const delay = Number.parseInt(btn.dataset.delay, 10) * 1000; - const interval = Number.parseInt(btn.dataset.interval, 10) * 1000; const duration = Number.parseInt(btn.dataset.duration, 10) * 1000; const requestText = btn.dataset.request; From e9d90a1ce91187bf3e4e1a23d301651951e95679 Mon Sep 17 00:00:00 2001 From: Samuel Gratzl Date: Tue, 12 Jan 2021 11:47:13 +0100 Subject: [PATCH 04/15] feat: improve feedback popup styling --- content/covidcast/survey-results.md | 1 + .../assets/css/components/_feedback.scss | 31 ++++++ themes/delphi/assets/js/feedback-button.js | 97 ++++++++++++------- themes/delphi/layouts/partials/footer.html | 3 +- 4 files changed, 93 insertions(+), 39 deletions(-) diff --git a/content/covidcast/survey-results.md b/content/covidcast/survey-results.md index 80894e212..27f352c26 100644 --- a/content/covidcast/survey-results.md +++ b/content/covidcast/survey-results.md @@ -8,4 +8,5 @@ app_mode: survey-results order: 5 icon: solid/poll heroImage: /images/landing-page/hero-images/covidcast_survey.jpg +feedback: true --- diff --git a/themes/delphi/assets/css/components/_feedback.scss b/themes/delphi/assets/css/components/_feedback.scss index 4ebf2eded..11da2f345 100644 --- a/themes/delphi/assets/css/components/_feedback.scss +++ b/themes/delphi/assets/css/components/_feedback.scss @@ -9,3 +9,34 @@ width: 100%; height: 100%; } + +.feedback-message { + width: unset; + + .uk-notification-message { + background: #60a5fa; + color: white; + border-radius: 5px; + padding: 0; + font-size: 1rem; + cursor: inherit; + + > div { + padding: 1.5rem 2.25rem 1.5rem 1.5rem; + } + } + + .uk-notification-close { + color: white; + right: 0.5rem; + top: 2.1rem; + } + + .uk-button { + background: #2563eb; + } +} + +.feedback-text { + margin: 0 1em; +} diff --git a/themes/delphi/assets/js/feedback-button.js b/themes/delphi/assets/js/feedback-button.js index 895f6639e..e91f001f2 100644 --- a/themes/delphi/assets/js/feedback-button.js +++ b/themes/delphi/assets/js/feedback-button.js @@ -1,45 +1,68 @@ -(() => { - const btn = document.querySelector(".feedback-button"); - if (!btn) { +import UIkit from "uikit/dist/js/uikit.js"; + +const btn = document.querySelector(".feedback-button"); +if (!btn) { + return; +} + +const delay = Number.parseInt(btn.dataset.delay, 10) * 1000; +const duration = Number.parseInt(btn.dataset.duration, 10) * 1000; + +const showForm = () => { + const url = `${btn.href}${encodeURIComponent(location.href)}&embedded=true`; + UIkit.modal.dialog( + `` + ); +}; + +const markSubmitted = () => { + if (!localStorage) { return; } + // expires in a month + const expiresAt = new Date(); + expiresAt.setMonth(expiresAt.getMonth() + 1); + localStorage.setItem("feedback-submitted", expiresAt.toString()); +}; +const wasRecentlySubmitted = () => { + if (!localStorage) { + return false; + } + const r = localStorage.getItem("feedback-submitted"); + if (!r) { + return false; + } + const expiresAt = new Date(r); + // check if expired + return expiresAt > new Date(); +}; - const delay = Number.parseInt(btn.dataset.delay, 10) * 1000; - const duration = Number.parseInt(btn.dataset.duration, 10) * 1000; - const requestText = btn.dataset.request; - - const showForm = () => { - const url = `${btn.href}${encodeURIComponent(location.href)}&embedded=true`; - UIkit.modal.dialog( - `` - ); - }; +btn.addEventListener("click", (e) => { + e.preventDefault(); + markSubmitted(); + showForm(); +}); - btn.addEventListener("click", (e) => { +const showFeedbackNotification = () => { + const elem = UIkit.notification({ + message: ``, + pos: "bottom-right", + timeout: duration, + clsContainer: "feedback-message uk-notification", + }); + elem.$el.querySelector("div").addEventListener("click", (e) => { + // stop auto close + e.stopPropagation(); e.preventDefault(); + }); + elem.$el.querySelector("a.feedback-button").addEventListener("click", (e) => { + e.preventDefault(); + elem.close(true); + markSubmitted(); showForm(); }); - - const showFeedbackNotification = () => { - const elem = UIkit.notification({ - message: ``, - status: "primary", - pos: "bottom-right", - timeout: duration, - }); - let clicked = false; - elem.$el.querySelector("a.feedback-button").addEventListener("click", (e) => { - e.preventDefault(); - elem.close(true); - clicked = true; - showForm(); - }); - elem.on("close", () => { - if (!clicked) { - setTimeout(showFeedbackNotification, interval); - } - }); - }; - // initial delay +}; +// initial delay +if (btn.dataset.popup === 'enable' && !wasRecentlySubmitted()) { setTimeout(showFeedbackNotification, delay); -})(); +} diff --git a/themes/delphi/layouts/partials/footer.html b/themes/delphi/layouts/partials/footer.html index 6574ad046..5067dc9e0 100644 --- a/themes/delphi/layouts/partials/footer.html +++ b/themes/delphi/layouts/partials/footer.html @@ -46,8 +46,7 @@
    Contact
    href="{{ .Site.Params.feedbackForm }}" data-delay="{{ .Site.Params.feedbackDelay }}" data-duration="{{ .Site.Params.feedbackDuration }}" - data-interval="{{ .Site.Params.feedbackInterval }}" - data-request="{{ .Site.Params.feedbackRequest }}" + data-popup="{{ if .Params.feedback }}enable{{end}}" >Submit Feedback From 6657f612853cd1f84f2559517efec068e1b8bff7 Mon Sep 17 00:00:00 2001 From: Samuel Gratzl Date: Tue, 12 Jan 2021 11:59:08 +0100 Subject: [PATCH 05/15] fix: linting --- themes/delphi/assets/js/feedback-button.js | 2 +- themes/delphi/layouts/partials/footer.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/themes/delphi/assets/js/feedback-button.js b/themes/delphi/assets/js/feedback-button.js index e91f001f2..919934810 100644 --- a/themes/delphi/assets/js/feedback-button.js +++ b/themes/delphi/assets/js/feedback-button.js @@ -63,6 +63,6 @@ const showFeedbackNotification = () => { }); }; // initial delay -if (btn.dataset.popup === 'enable' && !wasRecentlySubmitted()) { +if (btn.dataset.popup === "enable" && !wasRecentlySubmitted()) { setTimeout(showFeedbackNotification, delay); } diff --git a/themes/delphi/layouts/partials/footer.html b/themes/delphi/layouts/partials/footer.html index 5067dc9e0..1c727654e 100644 --- a/themes/delphi/layouts/partials/footer.html +++ b/themes/delphi/layouts/partials/footer.html @@ -46,7 +46,7 @@
    Contact
    href="{{ .Site.Params.feedbackForm }}" data-delay="{{ .Site.Params.feedbackDelay }}" data-duration="{{ .Site.Params.feedbackDuration }}" - data-popup="{{ if .Params.feedback }}enable{{end}}" + data-popup="{{ if .Params.feedback }}enable{{ end }}" >Submit Feedback From a432f1645b992c1c95b1e3925bad98cc99b76c0e Mon Sep 17 00:00:00 2001 From: Samuel Gratzl Date: Tue, 12 Jan 2021 14:46:32 +0100 Subject: [PATCH 06/15] feat: enable feedback popup on all covidcast modes --- content/covidcast/_index.md | 1 + content/covidcast/export.md | 1 + content/covidcast/single.md | 1 + content/covidcast/timelapse.md | 1 + content/covidcast/top10.md | 1 + 5 files changed, 5 insertions(+) diff --git a/content/covidcast/_index.md b/content/covidcast/_index.md index 20a090b1f..5b01dd126 100644 --- a/content/covidcast/_index.md +++ b/content/covidcast/_index.md @@ -7,4 +7,5 @@ order: 1 modeTitle: Map Overview icon: solid/map heroImage: /images/landing-page/hero-images/covidcast_withfill.jpg +feedback: true --- diff --git a/content/covidcast/export.md b/content/covidcast/export.md index 926fef821..4f359ccb0 100644 --- a/content/covidcast/export.md +++ b/content/covidcast/export.md @@ -7,4 +7,5 @@ app_mode: export order: 6 icon: solid/download heroImage: /images/landing-page/hero-images/covidcast_withfill.jpg +feedback: true --- diff --git a/content/covidcast/single.md b/content/covidcast/single.md index 0ef1ab851..bbc62999d 100644 --- a/content/covidcast/single.md +++ b/content/covidcast/single.md @@ -7,4 +7,5 @@ app_mode: single order: 4 icon: location-solid heroImage: /images/landing-page/hero-images/covidcast_withfill.jpg +feedback: true --- diff --git a/content/covidcast/timelapse.md b/content/covidcast/timelapse.md index 931c0241f..fd6c999ff 100644 --- a/content/covidcast/timelapse.md +++ b/content/covidcast/timelapse.md @@ -7,4 +7,5 @@ app_mode: timelapse order: 2 icon: solid/clock heroImage: /images/landing-page/hero-images/covidcast_withfill.jpg +feedback: true --- diff --git a/content/covidcast/top10.md b/content/covidcast/top10.md index 263badb3b..2a2b3aefe 100644 --- a/content/covidcast/top10.md +++ b/content/covidcast/top10.md @@ -7,4 +7,5 @@ app_mode: top10 order: 3 icon: solid/list heroImage: /images/landing-page/hero-images/covidcast_withfill.jpg +feedback: true --- From c976650bda4772447203ed1cf525410ba4ec3455 Mon Sep 17 00:00:00 2001 From: Samuel Gratzl Date: Wed, 13 Jan 2021 09:40:23 +0100 Subject: [PATCH 07/15] refactor: provide popup template in html --- themes/delphi/assets/js/feedback-button.js | 126 +++++++++++---------- themes/delphi/layouts/partials/footer.html | 20 +++- 2 files changed, 78 insertions(+), 68 deletions(-) diff --git a/themes/delphi/assets/js/feedback-button.js b/themes/delphi/assets/js/feedback-button.js index 919934810..036973c37 100644 --- a/themes/delphi/assets/js/feedback-button.js +++ b/themes/delphi/assets/js/feedback-button.js @@ -1,68 +1,70 @@ import UIkit from "uikit/dist/js/uikit.js"; -const btn = document.querySelector(".feedback-button"); -if (!btn) { - return; -} +(() => { + const markSubmitted = () => { + if (!localStorage) { + return; + } + // expires in a month + const expiresAt = new Date(); + expiresAt.setMonth(expiresAt.getMonth() + 1); + localStorage.setItem("feedback-submitted", expiresAt.toString()); + }; + const wasRecentlySubmitted = () => { + if (!localStorage) { + return false; + } + const r = localStorage.getItem("feedback-submitted"); + if (!r) { + return false; + } + const expiresAt = new Date(r); + // check if expired + return expiresAt > new Date(); + }; -const delay = Number.parseInt(btn.dataset.delay, 10) * 1000; -const duration = Number.parseInt(btn.dataset.duration, 10) * 1000; - -const showForm = () => { - const url = `${btn.href}${encodeURIComponent(location.href)}&embedded=true`; - UIkit.modal.dialog( - `` - ); -}; - -const markSubmitted = () => { - if (!localStorage) { - return; - } - // expires in a month - const expiresAt = new Date(); - expiresAt.setMonth(expiresAt.getMonth() + 1); - localStorage.setItem("feedback-submitted", expiresAt.toString()); -}; -const wasRecentlySubmitted = () => { - if (!localStorage) { - return false; + const showForm = (formLink) => { + const url = `${formLink}${encodeURIComponent(location.href)}&embedded=true`; + UIkit.modal.dialog( + `` + ); + }; + const btn = document.querySelector(".feedback-button"); + if (btn) { + btn.addEventListener("click", (e) => { + e.preventDefault(); + markSubmitted(); + showForm(btn.href); + }); } - const r = localStorage.getItem("feedback-submitted"); - if (!r) { - return false; - } - const expiresAt = new Date(r); - // check if expired - return expiresAt > new Date(); -}; -btn.addEventListener("click", (e) => { - e.preventDefault(); - markSubmitted(); - showForm(); -}); + const container = document.querySelector(".feedback-popup-container"); + + if (container && wasRecentlySubmitted()) { + const delay = Number.parseInt(container.dataset.delay, 10) * 1000; + const duration = Number.parseInt(container.dataset.duration, 10) * 1000; + const formLink = container.dataset.href; -const showFeedbackNotification = () => { - const elem = UIkit.notification({ - message: ``, - pos: "bottom-right", - timeout: duration, - clsContainer: "feedback-message uk-notification", - }); - elem.$el.querySelector("div").addEventListener("click", (e) => { - // stop auto close - e.stopPropagation(); - e.preventDefault(); - }); - elem.$el.querySelector("a.feedback-button").addEventListener("click", (e) => { - e.preventDefault(); - elem.close(true); - markSubmitted(); - showForm(); - }); -}; -// initial delay -if (btn.dataset.popup === "enable" && !wasRecentlySubmitted()) { - setTimeout(showFeedbackNotification, delay); -} + const showFeedbackNotification = () => { + const elem = UIkit.notification({ + message: container.innerHTML, + pos: "bottom-right", + timeout: duration, + clsContainer: "feedback-message uk-notification", + }); + elem.$el.querySelector("div").addEventListener("click", (e) => { + // stop auto close + e.stopPropagation(); + e.preventDefault(); + }); + elem.$el.querySelector(".feedback-button").addEventListener("click", (e) => { + e.preventDefault(); + elem.close(true); + markSubmitted(); + showForm(formLink); + }); + }; + // initial delay + setTimeout(showFeedbackNotification, delay); + } +})(); \ No newline at end of file diff --git a/themes/delphi/layouts/partials/footer.html b/themes/delphi/layouts/partials/footer.html index 1c727654e..2634d1e39 100644 --- a/themes/delphi/layouts/partials/footer.html +++ b/themes/delphi/layouts/partials/footer.html @@ -41,12 +41,7 @@
    Contact
    Twitter
  • -
    • @@ -55,3 +50,16 @@
    Contact
    +{{ if .Params.feedback }} + +{{ end }} From 4285463eb3444e0e50609017f16d0bf6e8efa149 Mon Sep 17 00:00:00 2001 From: Samuel Gratzl Date: Wed, 13 Jan 2021 09:44:29 +0100 Subject: [PATCH 08/15] style: use different icon for popup --- themes/delphi/layouts/partials/footer.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/delphi/layouts/partials/footer.html b/themes/delphi/layouts/partials/footer.html index 2634d1e39..f5a3fbaee 100644 --- a/themes/delphi/layouts/partials/footer.html +++ b/themes/delphi/layouts/partials/footer.html @@ -58,7 +58,7 @@
    Contact
    data-delay="{{ .Site.Params.feedbackDelay }}" data-duration="{{ .Site.Params.feedbackDuration }}" > - + {{ partial "font-awesome.html" "solid/question-circle" }} From f2d675496fd054f91806af310371c3f7b5826fd7 Mon Sep 17 00:00:00 2001 From: Samuel Gratzl Date: Wed, 13 Jan 2021 09:44:44 +0100 Subject: [PATCH 09/15] feat: send ga event upon opening --- themes/delphi/assets/js/feedback-button.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/themes/delphi/assets/js/feedback-button.js b/themes/delphi/assets/js/feedback-button.js index 036973c37..8712a0887 100644 --- a/themes/delphi/assets/js/feedback-button.js +++ b/themes/delphi/assets/js/feedback-button.js @@ -9,6 +9,11 @@ import UIkit from "uikit/dist/js/uikit.js"; const expiresAt = new Date(); expiresAt.setMonth(expiresAt.getMonth() + 1); localStorage.setItem("feedback-submitted", expiresAt.toString()); + + // send a google analytics event + if (window.ga) { + window.ga('send', 'event', 'feedback', 'open', 'show feedback form', 'true'); + } }; const wasRecentlySubmitted = () => { if (!localStorage) { @@ -40,7 +45,7 @@ import UIkit from "uikit/dist/js/uikit.js"; const container = document.querySelector(".feedback-popup-container"); - if (container && wasRecentlySubmitted()) { + if (container && !wasRecentlySubmitted()) { const delay = Number.parseInt(container.dataset.delay, 10) * 1000; const duration = Number.parseInt(container.dataset.duration, 10) * 1000; const formLink = container.dataset.href; From 9193ee49038cf1c6931e3a9ad785224ccaaf2f8c Mon Sep 17 00:00:00 2001 From: Samuel Gratzl Date: Wed, 13 Jan 2021 09:46:33 +0100 Subject: [PATCH 10/15] style: tune feedback popup --- themes/delphi/assets/css/components/_feedback.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/delphi/assets/css/components/_feedback.scss b/themes/delphi/assets/css/components/_feedback.scss index 11da2f345..4db91d8d7 100644 --- a/themes/delphi/assets/css/components/_feedback.scss +++ b/themes/delphi/assets/css/components/_feedback.scss @@ -38,5 +38,5 @@ } .feedback-text { - margin: 0 1em; + margin-right: 1em; } From 27965b3b1c0d55c87249cda15667e6be218e26dd Mon Sep 17 00:00:00 2001 From: Samuel Gratzl Date: Wed, 13 Jan 2021 09:49:45 +0100 Subject: [PATCH 11/15] style: apply suggested style changes --- themes/delphi/assets/css/components/_feedback.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/themes/delphi/assets/css/components/_feedback.scss b/themes/delphi/assets/css/components/_feedback.scss index 4db91d8d7..68d96ad6b 100644 --- a/themes/delphi/assets/css/components/_feedback.scss +++ b/themes/delphi/assets/css/components/_feedback.scss @@ -20,6 +20,7 @@ padding: 0; font-size: 1rem; cursor: inherit; + box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.25); > div { padding: 1.5rem 2.25rem 1.5rem 1.5rem; @@ -34,6 +35,8 @@ .uk-button { background: #2563eb; + border-radius: 3px; + // padding: 14px 24px 14px 24px; } } From 27a5cde5e4b83d56a409320ec66200821e5653bb Mon Sep 17 00:00:00 2001 From: Samuel Gratzl Date: Wed, 13 Jan 2021 09:50:40 +0100 Subject: [PATCH 12/15] fix: linting --- themes/delphi/assets/css/components/_feedback.scss | 2 +- themes/delphi/assets/js/feedback-button.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/themes/delphi/assets/css/components/_feedback.scss b/themes/delphi/assets/css/components/_feedback.scss index 68d96ad6b..cfb8346da 100644 --- a/themes/delphi/assets/css/components/_feedback.scss +++ b/themes/delphi/assets/css/components/_feedback.scss @@ -20,7 +20,7 @@ padding: 0; font-size: 1rem; cursor: inherit; - box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.25); + box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.25); > div { padding: 1.5rem 2.25rem 1.5rem 1.5rem; diff --git a/themes/delphi/assets/js/feedback-button.js b/themes/delphi/assets/js/feedback-button.js index 8712a0887..63dd0b4ab 100644 --- a/themes/delphi/assets/js/feedback-button.js +++ b/themes/delphi/assets/js/feedback-button.js @@ -12,7 +12,7 @@ import UIkit from "uikit/dist/js/uikit.js"; // send a google analytics event if (window.ga) { - window.ga('send', 'event', 'feedback', 'open', 'show feedback form', 'true'); + window.ga("send", "event", "feedback", "open", "show feedback form", "true"); } }; const wasRecentlySubmitted = () => { @@ -72,4 +72,4 @@ import UIkit from "uikit/dist/js/uikit.js"; // initial delay setTimeout(showFeedbackNotification, delay); } -})(); \ No newline at end of file +})(); From c66210427f63010e40165956db97af134334f26b Mon Sep 17 00:00:00 2001 From: Samuel Gratzl Date: Thu, 14 Jan 2021 19:06:36 +0100 Subject: [PATCH 13/15] feat: implement show by chance and random delay --- config.toml | 6 ++++-- themes/delphi/assets/js/feedback-button.js | 17 +++++++++++++++-- themes/delphi/layouts/partials/footer.html | 5 ++++- 3 files changed, 23 insertions(+), 5 deletions(-) diff --git a/config.toml b/config.toml index 4d68a99b4..2a3aa736a 100644 --- a/config.toml +++ b/config.toml @@ -112,6 +112,8 @@ relativeURLs = false apiUrl = "https://cmu-delphi.github.io/delphi-epidata" twitter = "CmuDelphi" feedbackForm = "https://docs.google.com/forms/d/e/1FAIpQLSffGhrCsZmDSF4Lbeg9lB-Gp_Uf7z7D9ust-vXk1F5V1SElig/viewform?usp=pp_url&entry.1245962748=" - feedbackRequest = "We'd love to hear from you" - feedbackDelay = 30 # wait for initial 30sec to show the notification + feedbackLikelihoodMobile = 0.2 + feedbackLikelihoodDesktop = 1 + feedbackDelayMin = 10 # in sec + feedbackDelayMax = 100 # in sec feedbackDuration = 60 # show it for 60sec \ No newline at end of file diff --git a/themes/delphi/assets/js/feedback-button.js b/themes/delphi/assets/js/feedback-button.js index 63dd0b4ab..245e7046f 100644 --- a/themes/delphi/assets/js/feedback-button.js +++ b/themes/delphi/assets/js/feedback-button.js @@ -46,7 +46,18 @@ import UIkit from "uikit/dist/js/uikit.js"; const container = document.querySelector(".feedback-popup-container"); if (container && !wasRecentlySubmitted()) { - const delay = Number.parseInt(container.dataset.delay, 10) * 1000; + const delayMin = Number.parseInt(container.dataset.delayMin, 10) * 1000; + const delayMax = Number.parseInt(container.dataset.delayMax, 10) * 1000; + const delay = delayMin + Math.random() * (delayMax - delayMin); + + const feedbackLikelihoodDesktop = Number.parseFloat(container.dataset.likeDesktop); + const feedbackLikelihoodMobile = Number.parseFloat(container.dataset.likeMobile); + const isMobile = window.matchMedia("only screen and (max-width: 700px)").matches; + + const showByChance = + (isMobile && Math.random() <= feedbackLikelihoodMobile) || + (!isMobile && Math.random() <= feedbackLikelihoodDesktop); + const duration = Number.parseInt(container.dataset.duration, 10) * 1000; const formLink = container.dataset.href; @@ -70,6 +81,8 @@ import UIkit from "uikit/dist/js/uikit.js"; }); }; // initial delay - setTimeout(showFeedbackNotification, delay); + if (showByChance) { + setTimeout(showFeedbackNotification, delay); + } } })(); diff --git a/themes/delphi/layouts/partials/footer.html b/themes/delphi/layouts/partials/footer.html index f5a3fbaee..cdedefd7f 100644 --- a/themes/delphi/layouts/partials/footer.html +++ b/themes/delphi/layouts/partials/footer.html @@ -55,7 +55,10 @@
    Contact
    class="feedback-popup-container" style="display: none" data-href="{{ .Site.Params.feedbackForm }}" - data-delay="{{ .Site.Params.feedbackDelay }}" + data-like-mobile="{{ .Site.Params.feedbackLikelihoodMobile }}" + data-like-desktop="{{ .Site.Params.feedbackLikelihoodDesktop }}" + data-delay-min="{{ .Site.Params.feedbackDelayMin }}" + data-delay-max="{{ .Site.Params.feedbackDelayMax }}" data-duration="{{ .Site.Params.feedbackDuration }}" > {{ partial "font-awesome.html" "solid/question-circle" }} From f59406c36db30667d225d4d84282e6cb943798e4 Mon Sep 17 00:00:00 2001 From: Samuel Gratzl Date: Thu, 14 Jan 2021 19:22:41 +0100 Subject: [PATCH 14/15] style: tune for mobile and always visible x --- .../assets/css/components/_feedback.scss | 23 ++++++++++++++++--- themes/delphi/layouts/partials/footer.html | 6 +++-- 2 files changed, 24 insertions(+), 5 deletions(-) diff --git a/themes/delphi/assets/css/components/_feedback.scss b/themes/delphi/assets/css/components/_feedback.scss index cfb8346da..f03fb2832 100644 --- a/themes/delphi/assets/css/components/_feedback.scss +++ b/themes/delphi/assets/css/components/_feedback.scss @@ -23,14 +23,19 @@ box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.25); > div { - padding: 1.5rem 2.25rem 1.5rem 1.5rem; + padding: 1.5rem 3rem 1.5rem 1.5rem; + display: flex; + justify-content: flex-start; + align-items: center; } } .uk-notification-close { color: white; - right: 0.5rem; - top: 2.1rem; + right: 1rem; + top: 50%; + transform: translateY(-50%); + display: block !important; } .uk-button { @@ -43,3 +48,15 @@ .feedback-text { margin-right: 1em; } + +@media only screen and (max-width: 550px) { + .feedback-message { + .uk-notification-message > div { + flex-direction: column; + } + + .uk-button { + margin-top: 0.5em; + } + } +} diff --git a/themes/delphi/layouts/partials/footer.html b/themes/delphi/layouts/partials/footer.html index cdedefd7f..683e0b1ea 100644 --- a/themes/delphi/layouts/partials/footer.html +++ b/themes/delphi/layouts/partials/footer.html @@ -61,8 +61,10 @@
    Contact
    data-delay-max="{{ .Site.Params.feedbackDelayMax }}" data-duration="{{ .Site.Params.feedbackDuration }}" > - {{ partial "font-awesome.html" "solid/question-circle" }} - +
    + {{ partial "font-awesome.html" "solid/question-circle" }} + +
    {{ end }} From e89bd3c35b2ca209a39735e9871d743906826f11 Mon Sep 17 00:00:00 2001 From: Samuel Gratzl Date: Fri, 15 Jan 2021 17:19:10 +0100 Subject: [PATCH 15/15] feat: tune for real form --- config.toml | 2 +- themes/delphi/assets/css/components/_feedback.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/config.toml b/config.toml index 2a3aa736a..0c184e9b2 100644 --- a/config.toml +++ b/config.toml @@ -111,7 +111,7 @@ relativeURLs = false mission = "Develop the theory and practice of epidemiological forecasting, with a long-term vision of making this technology as universally accepted and useful as weather forecasting is today." apiUrl = "https://cmu-delphi.github.io/delphi-epidata" twitter = "CmuDelphi" - feedbackForm = "https://docs.google.com/forms/d/e/1FAIpQLSffGhrCsZmDSF4Lbeg9lB-Gp_Uf7z7D9ust-vXk1F5V1SElig/viewform?usp=pp_url&entry.1245962748=" + feedbackForm = "https://docs.google.com/forms/d/e/1FAIpQLSeIeOJtrAhdOriEyiRY7LkpQX8DZBY19dl6De8l56Q9CZhmxw/viewform?usp=pp_url&entry.1245962748=" feedbackLikelihoodMobile = 0.2 feedbackLikelihoodDesktop = 1 feedbackDelayMin = 10 # in sec diff --git a/themes/delphi/assets/css/components/_feedback.scss b/themes/delphi/assets/css/components/_feedback.scss index f03fb2832..b75189ed4 100644 --- a/themes/delphi/assets/css/components/_feedback.scss +++ b/themes/delphi/assets/css/components/_feedback.scss @@ -1,6 +1,6 @@ .feedback-modal { padding-top: 1.5em; - height: 500px; + height: calc(100vh - 100px); display: block; position: relative; }