add minimized state to notifications

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');
 })

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"}
+    }
   }
 }

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!

layouts/partials/footer/notifications.html

@@ -1,10 +1,14 @@
 <div id="docs-notifications">
   {{ range .Site.Data.notifications }}
-    <div class="notification {{ .level }}" id="{{ .id }}" data-scope='{{ if .scope }}{{ delimit .scope "," }}{{ else }}/{{ end }}'>
+    <div class="notification {{ .level }} min" id="{{ .id }}" data-scope='{{ if .scope }}{{ delimit .scope "," }}{{ else }}/{{ end }}'>
+      <div class="notification-title">
+        <h3>{{ .title }}</h3>
+      </div>
       <div class="notification-content">
         {{ .message | markdownify }}
       </div>
       <div class="close-notification"><span class="icon-remove"></span></div>
+      <span class="show"></span>
     </div>
   {{ end }}
 </div>

layouts/shortcodes/influxdb/line-protocol.html

@@ -1,6 +1,6 @@
 <div id="line-protocol-anatomy">
   <p>
-    <span class="el measurement">measurement</span><span class="comma">,</span><span class="el tagset">tag11=val1,tag2=val2</span><span class="whitespace" data-whitespace="1st"> </span>
+    <span class="el measurement">measurement</span><span class="comma">,</span><span class="el tagset">tag1=val1,tag2=val2</span><span class="whitespace" data-whitespace="1st"> </span>
     <span class="el fieldset">field1="v1",field2=1i</span><span class="whitespace" data-whitespace="2nd"> </span><span class="el timestamp">0000000000000000000</span>
   </p>
 </div>