From c531aa02bb6b5a5b59b0cd2f3fb9e1a544e8f7d8 Mon Sep 17 00:00:00 2001 From: Scott Anderson Date: Thu, 10 Sep 2020 10:41:37 -0600 Subject: [PATCH 1/4] established structure and styles of notifications --- assets/styles/layouts/_notifications.scss | 85 ++++++++++++++++++++++ assets/styles/styles-default.scss | 3 +- assets/styles/tools/_color-palette.scss | 1 + data/notifications.yaml | 23 ++++++ layouts/partials/article/feedback.html | 6 +- layouts/partials/footer.html | 3 + layouts/partials/footer/notifications.html | 9 +++ 7 files changed, 128 insertions(+), 2 deletions(-) create mode 100644 assets/styles/layouts/_notifications.scss create mode 100644 data/notifications.yaml create mode 100644 layouts/partials/footer/notifications.html diff --git a/assets/styles/layouts/_notifications.scss b/assets/styles/layouts/_notifications.scss new file mode 100644 index 000000000..8e9f35a9f --- /dev/null +++ b/assets/styles/layouts/_notifications.scss @@ -0,0 +1,85 @@ +#docs-notifications { + position: absolute; + top: 10px; + right: 10px; + z-index: 100; + width: calc(100vw - 20px); + max-width: 500px; + + .notification { + position: relative; + padding: 1.25rem 2.35rem .5rem 1.25rem; + margin-bottom: 10px; + border-radius: $radius; + font-size: .95rem; + color: $g20-white; + box-shadow: 2px 2px 6px rgba($g2-kevlar, .35); + + .close-notification { + position: absolute; + top: 8px; + right: 8px; + font-size: 1.1rem; + cursor: pointer; + transition: color .2s; + font-weight: bold; + color: rgba($g20-white, .5); + &:hover{ color: $g20-white } + } + + &.note { + @include gradient($grad-GarageBand); + a:hover { color: $gr-gypsy; } + code { color: $gr-gypsy; background: rgba($gr-gypsy, .25); } + pre { background: rgba($gr-gypsy, .25); } + } + + &.warn { + @include gradient($grad-FuyuPersimmon, 225deg); + a:hover { color: $r-basalt; } + code { color: #ffbbdd; background: rgba($r-basalt, .35); } + pre { background: rgba($r-basalt, .35); } + } + + //////////// Basic HTML element styles for notification content //////////// + + h1,h2,h3,h4,h5,h6 { + font-weight: 500; + margin: 1rem 0 .75rem; + &:first-child { margin-top: 0; } + } + + h1,h2 { font-size: 1.5rem; } + h3 { font-size: 1.25rem; } + h4 { font-size: 1.1rem; } + h5 { font-size: 1rem; } + h6 { font-size: .95rem; font-style: italic; } + + p,li { line-height: 1.4rem; } + + p { margin: 0 0 .75rem; } + + a { + font-weight: bold; + text-decoration: none; + color: $g20-white; + transition: color .2s; + } + + ul,ol { padding-left: 1.5rem; } + + code { + padding: .15rem .4rem; + border-radius: $radius; + font-weight: bold; + } + + pre { + padding: 1rem; + border-radius: $radius; + overflow: scroll; + code { background: transparent !important; } + } + + } +} \ No newline at end of file diff --git a/assets/styles/styles-default.scss b/assets/styles/styles-default.scss index d507535fe..f288be2e9 100644 --- a/assets/styles/styles-default.scss +++ b/assets/styles/styles-default.scss @@ -25,7 +25,8 @@ "layouts/error-page", "layouts/url-selector", "layouts/feature-callouts", - "layouts/v1-overrides"; + "layouts/v1-overrides", + "layouts/notifications"; // Import Product-specifc color schemes @import "product-overrides/telegraf", diff --git a/assets/styles/tools/_color-palette.scss b/assets/styles/tools/_color-palette.scss index 647715392..78cf16c6a 100644 --- a/assets/styles/tools/_color-palette.scss +++ b/assets/styles/tools/_color-palette.scss @@ -138,6 +138,7 @@ $grad-PastelGothic: $p-comet, $b-laser; $grad-GarageBand: $b-pool, $gr-rainforest; $grad-LowDifficulty: $b-pool, $gr-honeydew; $grad-DesertFestival: $r-curacao, $p-star; +$grad-FuyuPersimmon: $y-tiger, $r-fire; $grad-SavannaHeat: $y-topaz, $r-ruby; $grad-ScotchBonnet: $y-pineapple,$r-curacao; diff --git a/data/notifications.yaml b/data/notifications.yaml new file mode 100644 index 000000000..e2621765a --- /dev/null +++ b/data/notifications.yaml @@ -0,0 +1,23 @@ +- id: influxdb-2-0-ga + level: note + scope: + - / + message: | + ### InfluxDB v2.0 is now GA!! + + Get your upgrade on! + + [Upgrade from InfluxDB 1.x to 2.0](#) + +- id: beta-17-upgrade + level: warn + scope: + - /influxdb/v2.0/ + - /influxdb/1.8/ + message: | + ### Breaking changes in beta 17 + + InfluxDB v2.0 beta 17 includes breaking changes that require a manual upgrade + from beta-16 and older. For information, see: + + [Upgrade to beta 17](#) \ No newline at end of file diff --git a/layouts/partials/article/feedback.html b/layouts/partials/article/feedback.html index 6d59a0ddc..6935d5461 100644 --- a/layouts/partials/article/feedback.html +++ b/layouts/partials/article/feedback.html @@ -8,7 +8,11 @@ {{ $productName := (index .Site.Data.products $product).name }} {{ $supportBlacklist := slice "chronograf" "kapacitor" }} -{{ .Scratch.Set "pageGithubLink" (print "https://github.com/influxdata/docs-v2/edit/master/content/" .File.Path) }} +{{ if .File }} + {{ .Scratch.Set "pageGithubLink" (print "https://github.com/influxdata/docs-v2/edit/master/content/" .File.Path) }} +{{ else }} + {{ .Scratch.Set "pageGithubLink" (print "https://github.com/influxdata/docs-v2/edit/master/content/") }} +{{ end }} {{ .Scratch.Set "productGithubLink" (print "https://github.com/influxdata/" $product "/issues/new/choose/") }} {{ $pageGithubLink := .Scratch.Get "pageGithubLink" }} {{ $productGithubLink := .Scratch.Get "productGithubLink" }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 1b3228328..446a0db01 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -9,6 +9,9 @@ {{ partial "footer/search.html" . }} + + {{ partial "footer/notifications.html" . }} + {{ partial "footer/javascript.html" . }} diff --git a/layouts/partials/footer/notifications.html b/layouts/partials/footer/notifications.html new file mode 100644 index 000000000..6ea23ec3b --- /dev/null +++ b/layouts/partials/footer/notifications.html @@ -0,0 +1,9 @@ +
+ {{ range .Site.Data.notifications }} +
+ {{ .message | markdownify }} +
+
+ {{ end }} +
+ From e26f34d02f33b3cde3ab02b744a6997698b9b3a4 Mon Sep 17 00:00:00 2001 From: Scott Anderson Date: Thu, 10 Sep 2020 14:11:56 -0600 Subject: [PATCH 2/4] added js for notification cookies and interactions --- assets/js/notifications.js | 46 ++++++++++++++++++++++ assets/styles/layouts/_notifications.scss | 18 ++++++--- data/notifications.yaml | 27 ++++++------- layouts/partials/footer/javascript.html | 3 +- layouts/partials/footer/notifications.html | 6 ++- 5 files changed, 77 insertions(+), 23 deletions(-) create mode 100644 assets/js/notifications.js diff --git a/assets/js/notifications.js b/assets/js/notifications.js new file mode 100644 index 000000000..f04cdd810 --- /dev/null +++ b/assets/js/notifications.js @@ -0,0 +1,46 @@ +// Get notification cookie name +function notificationCookieName(el) { + return "influx-" + $(el).attr('id') + "-notification-seen" +} + +// Show notifications that are within scope and haven't been ssen +function showNotifications() { + $('#docs-notifications > .notification').each(function() { + + // Check if the path includes paths defined in the data-scope attribute + // of the notification html element + function inScope(path, scope) { + for(let i = 0; i < scope.length; i++){ + if (path.includes(scope[i])) { + return true; + }; + } + return false; + } + + var scope = $(this).data('scope').split(',') + var pageInScope = inScope(window.location.pathname, scope) + var notificationCookie = Cookies.get( notificationCookieName(this) ) + + if (pageInScope && notificationCookie != 'true') { + $(this).show().animate({right: 0, opacity: 1}, 200, 'swing') + } + }); +} + +// Hide a notification and set cookie as true +function hideNotification(el) { + $(el).closest('.notification').animate({height: 0, opacity: 0}, 200, 'swing', function(){ + $(this).hide(); + Cookies.set(notificationCookieName(this), true); + }); +} + +// Show notifications on page load +showNotifications() + +// Hide a notification and set see cookie to true +$('.close-notification').click(function(e) { + e.preventDefault(); + hideNotification(this); +}) \ No newline at end of file diff --git a/assets/styles/layouts/_notifications.scss b/assets/styles/layouts/_notifications.scss index 8e9f35a9f..ee834a5b9 100644 --- a/assets/styles/layouts/_notifications.scss +++ b/assets/styles/layouts/_notifications.scss @@ -1,20 +1,28 @@ #docs-notifications { - position: absolute; + position: fixed; top: 10px; right: 10px; z-index: 100; width: calc(100vw - 20px); max-width: 500px; + transition: all .4s ease; .notification { + display: none; // initial hidden state + right: -50px; // initial hidden state + opacity: 0; // initial hidden state + position: relative; - padding: 1.25rem 2.35rem .5rem 1.25rem; - margin-bottom: 10px; border-radius: $radius; - font-size: .95rem; - color: $g20-white; box-shadow: 2px 2px 6px rgba($g2-kevlar, .35); + .notification-content { + padding: 1.25rem 2.35rem .5rem 1.25rem; + margin-bottom: 10px; + font-size: .95rem; + color: $g20-white; + } + .close-notification { position: absolute; top: 8px; diff --git a/data/notifications.yaml b/data/notifications.yaml index e2621765a..b95e7a72e 100644 --- a/data/notifications.yaml +++ b/data/notifications.yaml @@ -1,23 +1,20 @@ -- id: influxdb-2-0-ga - level: note - scope: - - / - message: | - ### InfluxDB v2.0 is now GA!! +# Notification data structure +# +# - id: unqiue ID for notification, cannot start with digit, no spaces, a-z and 0-9 +# level: note or warn +# scope: +# - list of URL paths to show notification on, no scope shows everywhere +# message: | +# Markdown message content. - Get your upgrade on! - - [Upgrade from InfluxDB 1.x to 2.0](#) - -- id: beta-17-upgrade +- id: rc1-upgrade level: warn scope: - /influxdb/v2.0/ - - /influxdb/1.8/ message: | - ### Breaking changes in beta 17 + ### Breaking changes in v2.0 rc.1 - InfluxDB v2.0 beta 17 includes breaking changes that require a manual upgrade + InfluxDB v2.0 rc.1 includes breaking changes that require a manual upgrade from beta-16 and older. For information, see: - [Upgrade to beta 17](#) \ No newline at end of file + [Upgrade to v2.0 rc.1](#) \ No newline at end of file diff --git a/layouts/partials/footer/javascript.html b/layouts/partials/footer/javascript.html index 56ad03440..97df84c1d 100644 --- a/layouts/partials/footer/javascript.html +++ b/layouts/partials/footer/javascript.html @@ -3,7 +3,8 @@ {{ $searchInteractions := resources.Get "js/search-interactions.js" }} {{ $telegrafFilters := resources.Get "js/telegraf-filters.js" }} {{ $influxdbURLs := resources.Get "js/influxdb-url.js" }} -{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $telegrafFilters $influxdbURLs | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }} +{{ $notifications := resources.Get "js/notifications.js" }} +{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $telegrafFilters $influxdbURLs $notifications | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }}