cta block

assets/js/app.js

@@ -1,6 +1,6 @@
 // This is for any custom JS that may need to be added to individual apps.
 // Main JS is located in Rancher Website Theme
-const bootstrapDocsSearch = function() {
+const bootstrapDocsSearch = function () {
 
   var firstSearchRender = true;
 
@@ -78,26 +78,26 @@ const bootstrapDocsSearch = function() {
 
     // add a button
     let label = wrapper.find('.footer-button-label').data('footer-label');
-    if ( label ) {
+    if (label) {
-      modal.addFooterBtn(label, 'tingle-btn tingle-btn--primary', function() {
+      modal.addFooterBtn(label, 'tingle-btn tingle-btn--primary', function () {
         // here goes some logic
         modal.close();
       });
     }
 
     modal.open();
-    setTimeout(function() {
+    setTimeout(function () {
       $('#search-box').focus();
     }, 50);
   });
 
   //mobile nav toggle
-  $(document).ready(function() {
+  $(document).ready(function () {
     $("body").addClass("js");
     var $menu = $("#menu"),
       $menulink = $(".menu-link");
 
-    $menulink.click(function() {
+    $menulink.click(function () {
       $menulink.toggleClass("active");
       $menu.toggleClass("active");
       return false;
@@ -105,29 +105,29 @@ const bootstrapDocsSearch = function() {
   });
 }
 
-const bootstrapIdLinks = function() {
+const bootstrapIdLinks = function () {
   const $container = $('.main-content')
   const selector = 'h2[id], h3[id], h4[id], h5[id], h6[id]';
 
-  $container.on('mouseenter', selector, function(e) {
+  $container.on('mouseenter', selector, function (e) {
     $(e.target).append($('<a />').addClass('header-anchor').attr('href', '#' + e.target.id).html('<i style="font-size: 12px" aria-hidden="true">link</i>'));
   });
 
-  $container.on('mouseleave', selector, function(e) {
+  $container.on('mouseleave', selector, function (e) {
     $container.find('.header-anchor').remove();
   });
 }
 
-const replaceReleaseChannel = function() {
+const replaceReleaseChannel = function () {
   const form = $('#release-channel')[0];
-  if ( form ) {
+  if (form) {
     const val = form.channel.value;
 
     $('CODE').each((idx, code) => {
       const $code = $(code);
       const text = $code.data('original') || code.innerHTML;
 
-      if ( text.includes('&lt;CHART_REPO&gt;') ) {
+      if (text.includes('&lt;CHART_REPO&gt;')) {
         $code.data('original', text);
         code.innerHTML = text.replace(/&lt;CHART_REPO&gt;/g, val);
       }
@@ -140,5 +140,3 @@ $(document).ready(() => {
   bootstrapIdLinks();
   replaceReleaseChannel();
 });
-
-

assets/sass/app.scss

@@ -17,3 +17,60 @@
 pre > code {
 	padding: 0;
 }
+
+.docs-cta-wrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.docs-cta {
+  padding: 10px;
+  background-color: #0075A8;
+  color: white;
+  border-radius: 30px;
+  display: flex;
+  align-content: center;
+  display: flex;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  width: auto;
+  transition: width 200ms ease-in-out;
+
+  .content {
+    margin: 0 0.5rem;
+
+    a {
+      color: white;
+      text-decoration: underline;
+    }
+  }
+
+  .icon {
+    border: 2px solid white;
+    border-radius: 20px;
+    color: white;
+    height: 35px;
+    width: 35px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 900;
+  }
+
+  .close {
+    font-size: 20px;
+    background-color: rgba(255, 255, 255, 0.2);
+    border-radius: 20px;
+    height: 25px;
+    width: 25px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: background-color 250ms ease-in-out;
+    color: white;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.3);
+    }
+  }
+}

layouts/_default/list.html

@@ -1,12 +1,12 @@
 {{ define "title" }}
-  {{ .Title }} – {{ .Site.Title }}
+{{ .Title }} – {{ .Site.Title }}
 {{ end }}
 
 {{ define "hero" }}
 {{ end }}
 
 {{ define "main" }}
-  <section class="docs-container">
+<section class="docs-container">
   <div class="grid-container">
     <div class="row max-sized set-lines set-ground">
       <div class="col-4"></div>
@@ -42,21 +42,70 @@
         col-12
         texts-container">
         <div class="docs-wrap">
+          <div class="docs-cta-wrapper">
+            <div class="docs-cta">
+              <a class="icon">?</a>
+              <span class="content">
+                <strong>Need Help? </strong>
+                &nbsp;<a href="https://rancher.com/training">Get free intro and advanced online training</a>
+              </span>
+              <a class="close">&times;</a>
+            </div>
+          </div>
+
+          <script>
+            function getCookie(name) {
+              var cookieArr = document.cookie.split(";");
+
+              for (var i = 0; i < cookieArr.length; i++) {
+                var cookiePair = cookieArr[i].split("=");
+
+                if (name == cookiePair[0].trim()) {
+                  return decodeURIComponent(cookiePair[1]);
+                }
+              }
+
+              return null;
+            }
+
+            console.log(getCookie('ctaClosed'))
+
+            if (getCookie('ctaClosed') == 'true') {
+              $('.docs-cta .content, .docs-cta .close').hide();
+              $('.docs-cta').addClass('closed');
+            }
+
+            $('.docs-cta .icon').click(function (e) {
+              e.preventDefault;
+              $('.docs-cta .content, .docs-cta .close').show('fast');
+              $('.docs-cta').remove('closed');
+              document.cookie = "ctaClosed=false;path=/";
+            });
+
+            $('.docs-cta .close').click(function (e) {
+              e.preventDefault;
+              $('.docs-cta .content, .docs-cta .close').hide('fast');
+              $('.docs-cta').toggleClass('closed');
+              document.cookie = "ctaClosed=true;SameSite=Lax;path=/;max-age=" + 10 * 24 * 60 * 60;
+            });
+          </script>
           {{ with .Params.Title }}
           <h1 class="m-t-0">{{ . }}</h1>
-            <hr/>
+          <hr />
           {{end}}
 
           {{ if .Params.ctaBanner }}
           {{ with index .Site.Data.cta .Params.ctaBanner }}
           <div class="docs-banner">
+
             <h3 class="">{{ .header }}</h3>
 
             <div class="buttons-container">
               <a href="{{ .link }}" target="_blank" class="btn border-btn">
                 <button class="button has-icon-right">
                   <span>{{ .button }}</span>
-                      <svg class="icon right" enable-background="new 0 0 34 34" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg">
+                  <svg class="icon right" enable-background="new 0 0 34 34" viewBox="0 0 34 34"
+                    xmlns="http://www.w3.org/2000/svg">
                     <g>
                       <path class="svg-linear" d="m19.5 12 5 5-5 5"></path>
                       <path class="svg-linear" d="m24.5 17h-15"></path>
@@ -112,7 +161,8 @@
                   {{end}}
 
                   {{ if eq .Section "blog" }}
-                      <div class="p-h-sm p-v-xs"><i class="material-icons">timer</i> Read Time: {{.ReadingTime}} minutes</div>
+                  <div class="p-h-sm p-v-xs"><i class="material-icons">timer</i> Read Time: {{.ReadingTime}} minutes
+                  </div>
                   {{end}}
 
                   {{ with .Params.Location }}
@@ -138,23 +188,23 @@
         </div>
       </div>
     </div>
-  </section>
+</section>
 
 
-  <script>
+<script>
-    $(document).ready(function() {
+  $(document).ready(function () {
-      $('.guide-menus-activator').click(function() {
+    $('.guide-menus-activator').click(function () {
       $('.docs-container .side-menus').toggleClass('show');
     });
 
     // anchor click control.
-      $("a[href*='#']").click(function(e) {
+    $("a[href*='#']").click(function (e) {
       // e.preventDefault();
 
       if ($(this).attr('data-target') === undefined && $(this).attr('href').length > 1) {
         var hash = $(this).attr('href').substring(1),
           objt = $('#' + hash),
-              objt_mt = Number(objt.css('margin-top').replace(/[^0-9]/g,"")),
+          objt_mt = Number(objt.css('margin-top').replace(/[^0-9]/g, "")),
           depth = 80,
           scrn = $(window).width();
         scrn_check = 1025;
@@ -170,12 +220,12 @@
         if ($(this).attr('href').charAt(0) === '#') {
           var objectTop = $($(this).attr('href')).offset().top;
 
-            setTimeout(function() {
+          setTimeout(function () {
             $('html').scrollTop(objectTop - depth);
           }, 100);
         }
       }
     });
   });
-  </script>
+</script>
 {{ end }}

layouts/_default/single.html

@@ -1,5 +1,5 @@
 {{ define "title" }}
-  {{ .Title }} – {{ .Site.Title }}
+{{ .Title }} – {{ .Site.Title }}
 {{ end }}
 
 {{ define "hero" }}
@@ -27,7 +27,6 @@
     <article class="{{ if ($.Scratch.Get "showSidebar") }} col-sm-6 {{else}} col-md-9 p-r-lg {{end}} col-xs-12">
 
       <div class="main-content ">
-
         {{ .Content }}
 
       </div>
@@ -41,5 +40,5 @@
       </aside> -->
   </div>
 
-  </div>
+</div>
 {{ end }}