feat: Added announcement ribbon functionality on a page level

Author: imtodor

_assets/css/_styles.scss

@@ -337,6 +337,37 @@ nav.TK-Nav, .PRGS-PairNav {
     margin-top: -95px;
 }
 
+// Ribbon Announcement
+
+.SiteRibbon-text,
+.SiteRibbon-CTA {
+    display: inline;
+    vertical-align: middle;
+}
+
+.SiteRibbon {
+    margin-top: -95px;
+    top: 0;
+    position: relative;
+    padding: 20px 0 18px 0;
+    font-family: FaktSlabPro,Arial,Helvetica,sans-serif;
+    font-weight: 300;
+    font-size: 16px;
+    line-height: 1.2;
+    text-align: center;
+    z-index: 50000;
+    color: #000;
+    background-color: #ffda3f;
+
+    .container {
+        position: relative;
+    }
+
+    + nav.TK-Nav, + .PRGS-PairNav {
+        margin-top: 0;
+    }
+}
+
 /* Main Menu */
 
 $text-color: #4a4e52;
@@ -2708,6 +2739,10 @@ $callout-bg: #d7dfe3;
 
 // md size
 @media (min-width: 992px) {
+    .SiteRibbon {
+        font-size: 20px;
+    }
+
     .live-samples .callout-tabs {
         &::after {
             display: none;
@@ -3197,6 +3232,14 @@ span.all-components-expanded-icon {
         transform: translateZ(0);
         -webkit-transform: translateZ(0);
     }
+
+    .SiteRibbon {
+        position: sticky;
+
+        + nav.TK-Nav, + .PRGS-PairNav {
+            top: 24px;
+        }
+    }
 }
 
 @media (min-width: 768px) { /* Styles for width >= 768px */
@@ -4631,23 +4674,24 @@ div#sidetoc {
     }
 }
 
-div{
-  &.k-content {
-    &.k-state-active{
-      .copy-code-btn {
-        padding:7px 10px;
-      }      
+div {
+    &.k-content {
+        &.k-state-active {
+            .copy-code-btn {
+                padding: 7px 10px;
+            }
+        }
     }
-  }
 }
+
 .copy-code-btn {
     position: absolute;
     top: 0;
     right: 0;
-    padding:10px;
+    padding: 10px;
     z-index: 100;
 
     &:hover {
-      cursor: pointer;
+        cursor: pointer;
     }
 }

_assets/js/ribbon.js

@@ -87,7 +87,7 @@ function setSideNavPosition() {
     var $window = $(window);
     var windowHeight = $window.height();
     var scrollFold = $window.scrollTop() + windowHeight;
-    var topNavigationHeight = $('nav.TK-Nav').height() || ($('.PRGS-Nav').height() + $('.PRGS-Bar').height());
+    var topNavigationHeight = $('.SiteRibbon').outerHeight() + ($('nav.TK-Nav').height() || ($('.PRGS-Nav').height() + $('.PRGS-Bar').height()));
     var progressBarHeight = $('aside.TK-Hat').height() || $('.PRGS-Bar').height();
 
     var top = window.scrollY > 0 ? topNavigationHeight - progressBarHeight : topNavigationHeight;

_assets/js/side-nav.js

@@ -1,79 +1,9 @@
-<style>
-  .SiteRibbon {
-    position: relative;
-    padding: 20px 0 18px 0;
-    font-family: FaktSlabPro,Arial,Helvetica,sans-serif;
-    font-weight: 300;
-    font-size: 16px;
-    line-height: 1.2;
-    text-align: center;
-    color: #000;
-    background-color: #ffda3f;
-  }
-
-  .SiteRibbon.is-hidden {
-    display: none;
-  }
-
-  .SiteRibbon .container {
-    position: relative;
-  }
-  .SiteRibbon-text,
-  .SiteRibbon-CTA {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  .SiteRibbon-CTA a {
-    cursor: pointer;
-  }
-
-  .SiteRibbon-x {
-    position: absolute;
-    top: 50%;
-    right: 15px;
-    width: 44px;
-    padding: 0;
-    border: 0;
-    font-family: FaktSlabPro,Arial,Helvetica,sans-serif;
-    font-weight: 300;
-    font-size: 30px;
-    line-height: 1.2;
-    background: none;
-    cursor: pointer;
-    outline: 0;
-    opacity: 1;
-    margin-top: -.5em;
-  }
-
-  .SiteRibbon-x:hover {
-    opacity: .7;
-  }
-
-  @media (min-width: 992px) {
-    font-size: 20px;
-  }
-</style>
-
-<div class="SiteRibbon is-hidden" id="announcement">
-  <div class="container">
-    <div class="u-pr5">
-      <span class="SiteRibbon-text u-fs20">
-        Say ‘no’ to Ugly Apps. Modern UI with new React, Angular and Vue components.
-        <a href="https://www.telerik.com/support/whats-new/kendo-ui?utm_medium=telerik&utm_source=yellow-ribbon&utm_campaign=kendo-ui-awareness-r118release"><strong>See our New Release!</strong></a>
-      </span>
-    </div>
-    <button type="button" class="SiteRibbon-x">×</button>
-  </div>
-</div>
-
-{% javascript "ribbon" %}
-
+<div class="SiteRibbon js-r1dt" style="display:none;"><div class="container">
+<span class="SiteRibbon-text">
+  {{page.announcement}}
+</span></div></div>
 <script>
-    $(".SiteRibbon-x")
-        .click(function() {
-            $(document.documentElement).addClass("no-announcement");
-            $(this).closest(".SiteRibbon").slideUp();
-        });
-    $(document.documentElement).toggleClass("no-announcement", $(".SiteRibbon").hasClass("is-hidden"));
+  $(document).ready(function(){
+    $('.js-r1dt').insertBefore($('#js-tlrk-nav')).end().show();
+  });
 </script>

_includes/announcement.html

@@ -96,7 +96,7 @@
       apiColumnsCount = {{ site.api_columns_count }};
       {% endif %}
     </script>
-
+{% if page.announcement %}{% include announcement.html %}{% endif %}
 {% include nav.html %}
 
 <div id="content">