cta block

2026-09-23 03:28:07 +00:00 · 2020-07-27 16:18:38 -07:00
parent a54bda273b
commit fc6e623ceb
4 changed files with 245 additions and 141 deletions
@@ -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 ) {
-      modal.addFooterBtn(label, 'tingle-btn tingle-btn--primary', function() {
+    if (label) {
+      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 = $(".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();
 });
-
-
@@ -16,4 +16,61 @@

 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);
+    }
+  }
 }
@@ -1,23 +1,23 @@
 {{ define "title" }}
-  {{ .Title }} – {{ .Site.Title }}
+{{ .Title }} – {{ .Site.Title }}
 {{ end }}

 {{ define "hero" }}
 {{ end }}

 {{ define "main" }}
-  <section class="docs-container">
-    <div class="grid-container">
-      <div class="row max-sized set-lines set-ground">
-        <div class="col-4"></div>
-        <div class="col-4"></div>
-        <div class="col-4"></div>
-      </div>
+<section class="docs-container">
+  <div class="grid-container">
+    <div class="row max-sized set-lines set-ground">
+      <div class="col-4"></div>
+      <div class="col-4"></div>
+      <div class="col-4"></div>
+    </div>

-      <div class="head-blank"></div>
+    <div class="head-blank"></div>

-      <div class="row max-sized contents-container background-base-gray-side">
-        <div class="
+    <div class="row max-sized contents-container background-base-gray-side">
+      <div class="
        col-xl-3
        col-lg-4
        col-md-4
@@ -42,31 +42,80 @@
        col-12
        texts-container">
        <div class="docs-wrap">
-            {{ with .Params.Title }}
-            <h1 class="m-t-0">{{ . }}</h1>
-            <hr/>
+          <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 />
          {{end}}

          {{ if .Params.ctaBanner }}
-            {{ with index .Site.Data.cta .Params.ctaBanner }}
-              <div class="docs-banner">
-                <h3 class="">{{ .header }}</h3>
+          {{ with index .Site.Data.cta .Params.ctaBanner }}
+          <div class="docs-banner">

-                <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">
-                        <g>
-                          <path class="svg-linear" d="m19.5 12 5 5-5 5"></path>
-                          <path class="svg-linear" d="m24.5 17h-15"></path>
-                        </g>
-                      </svg>
-                    </button>
-                  </a>
-                </div>
-              </div>
-            {{ end }}
+            <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">
+                    <g>
+                      <path class="svg-linear" d="m19.5 12 5 5-5 5"></path>
+                      <path class="svg-linear" d="m24.5 17h-15"></path>
+                    </g>
+                  </svg>
+                </button>
+              </a>
+            </div>
+          </div>
+          {{ end }}
          {{ end }}

          <div class="main-content docs-body">
@@ -77,56 +126,57 @@

            {{ $paginator := .Scratch.Get "paginator" }}
            {{ range $paginator.Pages }}
-              <div class="box m-b-md">
-                <div class="p-a-sm">
-                  <h3><a href="{{.URL}}">{{.Title}}</a></h3>
+            <div class="box m-b-md">
+              <div class="p-a-sm">
+                <h3><a href="{{.URL}}">{{.Title}}</a></h3>

-                  {{ if .Params.Image }}
-                    <div class="thumbnail"><img src="{{ .Params.Image }}" alt="{{ .Params.Title }}"></div>
+                {{ if .Params.Image }}
+                <div class="thumbnail"><img src="{{ .Params.Image }}" alt="{{ .Params.Title }}"></div>
+                {{end}}
+
+                <p>{{ .Summary | safeHTML }}</p>
+                {{ if .Truncated }}
+                <div>
+                  <a href="{{ .RelPermalink }}">Read More…</a>
+                </div>
+                {{ end }}
+              </div>
+              <div class="bg-default">
+                <div class="row">
+
+                  {{ with .Params.Author }}
+                  <div class="p-h-sm p-v-xs"><i class="material-icons">person_outline</i> By: {{ . }}</div>
                  {{end}}

-                  <p>{{ .Summary | safeHTML }}</p>
-                  {{ if .Truncated }}
-                  <div>
-                    <a href="{{ .RelPermalink }}">Read More…</a>
+                  {{ if eq .Section "events" }}
+                  {{ with .Params.EventDate }}
+                  <div class="p-h-sm p-v-xs"><i class="material-icons">event</i> {{ . }}</div>
+                  {{end}}
+
+                  {{ else }}
+
+                  {{ with .Params.Date }}
+                  <div class="p-h-sm p-v-xs"><i class="material-icons">event</i> {{ .Format "January 2, 2006" }}</div>
+                  {{end}}
+                  {{end}}
+
+                  {{ if eq .Section "blog" }}
+                  <div class="p-h-sm p-v-xs"><i class="material-icons">timer</i> Read Time: {{.ReadingTime}} minutes
                  </div>
-                  {{ end }}
-                </div>
-                <div class="bg-default">
-                  <div class="row">
+                  {{end}}

-                    {{ with .Params.Author }}
-                      <div class="p-h-sm p-v-xs"><i class="material-icons">person_outline</i> By: {{ . }}</div>
-                    {{end}}
+                  {{ with .Params.Location }}
+                  <div class="p-h-sm p-v-xs"><i class="material-icons">location_on</i> {{ . }}</div>
+                  {{end}}

-                    {{ if eq .Section "events" }}
-                      {{ with .Params.EventDate }}
-                        <div class="p-h-sm p-v-xs"><i class="material-icons">event</i> {{ . }}</div>
-                      {{end}}
-
-                    {{ else }}
-
-                      {{ with .Params.Date }}
-                        <div class="p-h-sm p-v-xs"><i class="material-icons">event</i> {{ .Format "January 2, 2006" }}</div>
-                      {{end}}
-                    {{end}}
-
-                    {{ if eq .Section "blog" }}
-                      <div class="p-h-sm p-v-xs"><i class="material-icons">timer</i> Read Time: {{.ReadingTime}} minutes</div>
-                    {{end}}
-
-                    {{ with .Params.Location }}
-                      <div class="p-h-sm p-v-xs"><i class="material-icons">location_on</i> {{ . }}</div>
-                      {{end}}
-
-                  </div>
                </div>
              </div>
-              {{ end }}
            </div>
-            {{ template "_internal/pagination.html" . }}
+            {{ end }}
+          </div>
+          {{ template "_internal/pagination.html" . }}

-            <div class="p-v-xs">{{ partial "page-edit.html" . }}</div>
+          <div class="p-v-xs">{{ partial "page-edit.html" . }}</div>
          </article>
          <!-- {{ with .TableOfContents }}
            <div class="offset-watch invisible"></div>
@@ -138,44 +188,44 @@
        </div>
      </div>
    </div>
-  </section>
+</section>


-  <script>
-    $(document).ready(function() {
-      $('.guide-menus-activator').click(function() {
-        $('.docs-container .side-menus').toggleClass('show');
-      });
+<script>
+  $(document).ready(function () {
+    $('.guide-menus-activator').click(function () {
+      $('.docs-container .side-menus').toggleClass('show');
+    });

-      // anchor click control.
-      $("a[href*='#']").click(function(e) {
+    // anchor click control.
+    $("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,"")),
-              depth = 80,
-              scrn = $(window).width();
-              scrn_check = 1025;
+      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, "")),
+          depth = 80,
+          scrn = $(window).width();
+        scrn_check = 1025;

-          if (scrn < scrn_check) {
-            depth = 120;
-          }
-
-          if (objt_mt > 0) {
-            depth = depth + objt_mt
-          }
-
-          if ($(this).attr('href').charAt(0) === '#') {
-            var objectTop = $($(this).attr('href')).offset().top;
-
-            setTimeout(function() {
-              $('html').scrollTop(objectTop - depth);
-            }, 100);
-          }
+        if (scrn < scrn_check) {
+          depth = 120;
        }
-      });
+
+        if (objt_mt > 0) {
+          depth = depth + objt_mt
+        }
+
+        if ($(this).attr('href').charAt(0) === '#') {
+          var objectTop = $($(this).attr('href')).offset().top;
+
+          setTimeout(function () {
+            $('html').scrollTop(objectTop - depth);
+          }, 100);
+        }
+      }
    });
-  </script>
-{{ end }}
+  });
+</script>
+{{ end }}
@@ -1,45 +1,44 @@
 {{ define "title" }}
-  {{ .Title }} – {{ .Site.Title }}
+{{ .Title }} – {{ .Site.Title }}
 {{ end }}

 {{ define "hero" }}
 <section class="hero">
-    <h5 class="text-white">Rancher 2.x Docs</h5>
-    {{ with .Params.Title }}
-      <h1 class="m-t-0">{{ . }}</h1>
-    {{end}}
+  <h5 class="text-white">Rancher 2.x Docs</h5>
+  {{ with .Params.Title }}
+  <h1 class="m-t-0">{{ . }}</h1>
+  {{end}}

-    {{ with .Params.Author }}
-      <span class="byline bg-link">{{ . }}</span>
-    {{end}}
+  {{ with .Params.Author }}
+  <span class="byline bg-link">{{ . }}</span>
+  {{end}}
 </section>
 {{ end }}

 {{ define "main" }}

 <div class="wrapper">
-    <div class="row m-t-sm">
+  <div class="row m-t-sm">

-      <aside class="col-sm-3 col-xs-12 p-l-0">
-        {{ partial "docs-side-nav.html" . }}
-      </aside>
+    <aside class="col-sm-3 col-xs-12 p-l-0">
+      {{ partial "docs-side-nav.html" . }}
+    </aside>

-      <article class="{{ if ($.Scratch.Get "showSidebar") }} col-sm-6 {{else}} col-md-9 p-r-lg {{end}} col-xs-12">
-
-        <div class="main-content ">
+    <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>

-         <div class="p-v-sm">{{ partial "page-edit.html" . }}</div>
-      </article>
-     <!--  <div class="offset-watch invisible"></div>
+      <div class="p-v-sm">{{ partial "page-edit.html" . }}</div>
+    </article>
+    <!--  <div class="offset-watch invisible"></div>
      <aside class="col-sm-3 col-xs-12 unstyled toc-container">
        <h4 class="m-b-0">On this page</h4>
        {{ .TableOfContents }}
      </aside> -->
-    </div>
-
  </div>
-{{ end }}
+
+</div>
+{{ end }}