From 7d214ec24bc5fb55b2fc652e0f5e777a250f25c1 Mon Sep 17 00:00:00 2001 From: Scott Anderson Date: Tue, 31 Jan 2023 18:44:23 -0700 Subject: [PATCH] add minimized state to notifications --- assets/js/notifications.js | 4 ++ assets/styles/layouts/_notifications.scss | 50 +++++++++++++++++-- data/notifications.yaml | 11 ++-- layouts/partials/footer/notifications.html | 6 ++- .../shortcodes/influxdb/line-protocol.html | 2 +- 5 files changed, 60 insertions(+), 13 deletions(-) diff --git a/assets/js/notifications.js b/assets/js/notifications.js index f04cdd810..412a89e4e 100644 --- a/assets/js/notifications.js +++ b/assets/js/notifications.js @@ -43,4 +43,8 @@ showNotifications() $('.close-notification').click(function(e) { e.preventDefault(); hideNotification(this); +}) + +$('.notification .show').click(function() { + $(this).closest('.notification').toggleClass('min'); }) \ No newline at end of file diff --git a/assets/styles/layouts/_notifications.scss b/assets/styles/layouts/_notifications.scss index 206905b0d..3bd2f38c4 100644 --- a/assets/styles/layouts/_notifications.scss +++ b/assets/styles/layouts/_notifications.scss @@ -4,7 +4,7 @@ right: 10px; z-index: 100; width: calc(100vw - 20px); - max-width: 500px; + max-width: 450px; transition: all .4s ease; .notification { @@ -13,14 +13,31 @@ opacity: 0; // initial hidden state position: relative; + padding: 1.25rem 2.5rem 1.25rem 1.25rem; border-radius: $radius; box-shadow: 2px 2px 6px rgba($g2-kevlar, .35); + margin-bottom: 10px; + + color: $g20-white; + + .notification-title { + h3 { + margin-bottom: 1rem; + transition: font-size .2s; + } + } .notification-content { - padding: 1.25rem 2.35rem .5rem 1.25rem; - margin-bottom: 10px; font-size: 1.05rem; - color: $g20-white; + opacity: 1; + max-height: 500px; + margin-bottom: 1.5rem; + transition: opacity .4s, max-height .2s ease-out, margin .2s ease-out; + + h1,h2,h3,h4,h5,h6 { + margin: 1rem 0 .75rem; + &:first-child {margin-top: 0;} + } } .close-notification { @@ -35,6 +52,22 @@ &:hover{ color: $g20-white } } + .show { + position: absolute; + bottom: 1rem; + left: 1.25rem; + text-transform: uppercase; + font-size: .8rem; + font-weight: bold; + opacity: .75; + transition: opacity .2s; + &:hover { + cursor: pointer; + opacity: 1; + } + &:before {content: "Show less"} + } + &.note { @include gradient($grad-GarageBand); a:hover { color: $gr-gypsy; } @@ -89,5 +122,14 @@ code { background: transparent !important; } } + &.min { + .notification-title {h3 {font-size: 1.15rem;}} + .notification-content { + max-height: 0; + margin: 0; + opacity: 0; + } + .show::before {content: "Show more"} + } } } \ No newline at end of file diff --git a/data/notifications.yaml b/data/notifications.yaml index c25cad5cf..9718003b2 100644 --- a/data/notifications.yaml +++ b/data/notifications.yaml @@ -49,8 +49,8 @@ - /telegraf/v1.23/install/ - /telegraf/v1.24/install/ - /telegraf/v1.9/introduction/installation/ + title: Linux Package Signing Key Rotation message: | - ### Linux Package Signing Key Rotation All signed InfluxData Linux packages have been resigned with an updated key. If using Linux, you may need to update your package configuration to continue to download and verify InfluxData software packages. @@ -62,9 +62,8 @@ level: note scope: - /influxdb/cloud-iox/ + title: InfluxDB Cloud backed by InfluxDB IOx message: | - ### InfluxDB Cloud backed by InfluxDB IOx - All InfluxDB Cloud organizations created on or after **January 31, 2023** are backed by the new InfluxDB IOx storage engine. Check the right column of your [InfluxDB Cloud organization homepage](https://cloud2.influxdata.com) @@ -78,9 +77,8 @@ level: note scope: - /influxdb/cloud/ + title: InfluxDB Cloud backed by InfluxDB TSM message: | - ### InfluxDB Cloud backed by InfluxDB TSM - All InfluxDB Cloud organizations created on or after **January 31, 2023** are backed by the new InfluxDB IOx storage engine which enables nearly unlimited series cardinality and SQL query support. @@ -95,9 +93,8 @@ level: warn scope: - /influxdb/cloud-iox/ + title: State of the InfluxDB Cloud (IOx) documentation message: | - ### State of the InfluxDB Cloud (IOx) documentation - The new documentation for **InfluxDB Cloud backed by InfluxDB IOx** is a work in progress. We are adding new information and content almost daily. Thank you for your patience! diff --git a/layouts/partials/footer/notifications.html b/layouts/partials/footer/notifications.html index 4332350d9..39f519cd4 100644 --- a/layouts/partials/footer/notifications.html +++ b/layouts/partials/footer/notifications.html @@ -1,10 +1,14 @@
{{ range .Site.Data.notifications }} -
+
+
+

{{ .title }}

+
{{ .message | markdownify }}
+
{{ end }}
diff --git a/layouts/shortcodes/influxdb/line-protocol.html b/layouts/shortcodes/influxdb/line-protocol.html index 0eae33039..86d95f080 100644 --- a/layouts/shortcodes/influxdb/line-protocol.html +++ b/layouts/shortcodes/influxdb/line-protocol.html @@ -1,6 +1,6 @@

- measurement,tag11=val1,tag2=val2 + measurement,tag1=val1,tag2=val2 field1="v1",field2=1i 0000000000000000000

\ No newline at end of file