public/rancher-docs
1
0
Fork 0
mirror of https://github.com/rancher/rancher-docs.git synced 2026-09-27 13:38:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

cta block

Browse Source
This commit is contained in:
jrcreative
2020-07-27 16:18:38 -07:00
committed by Catherine Luse
parent a54bda273b
commit fc6e623ceb
4 changed files with 245 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/app.js
+13 -15
View File
@@ -1,6 +1,6 @@
// This is for any custom JS that may need to be added to individual apps. // This is for any custom JS that may need to be added to individual apps.
// Main JS is located in Rancher Website Theme // Main JS is located in Rancher Website Theme
const bootstrapDocsSearch = function() { const bootstrapDocsSearch = function () {
var firstSearchRender = true; var firstSearchRender = true;
@@ -78,26 +78,26 @@ const bootstrapDocsSearch = function() {
// add a button // add a button
let label = wrapper.find('.footer-button-label').data('footer-label'); 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 // here goes some logic
modal.close(); modal.close();
}); });
} }
modal.open(); modal.open();
setTimeout(function() { setTimeout(function () {
$('#search-box').focus(); $('#search-box').focus();
}, 50); }, 50);
}); });
//mobile nav toggle //mobile nav toggle
$(document).ready(function() { $(document).ready(function () {
$("body").addClass("js"); $("body").addClass("js");
var $menu = $("#menu"), var $menu = $("#menu"),
$menulink = $(".menu-link"); $menulink = $(".menu-link");
$menulink.click(function() { $menulink.click(function () {
$menulink.toggleClass("active"); $menulink.toggleClass("active");
$menu.toggleClass("active"); $menu.toggleClass("active");
return false; return false;
@@ -105,29 +105,29 @@ const bootstrapDocsSearch = function() {
}); });
} }
const bootstrapIdLinks = function() { const bootstrapIdLinks = function () {
const $container = $('.main-content') const $container = $('.main-content')
const selector = 'h2[id], h3[id], h4[id], h5[id], h6[id]'; 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>')); $(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(); $container.find('.header-anchor').remove();
}); });
} }
const replaceReleaseChannel = function() { const replaceReleaseChannel = function () {
const form = $('#release-channel')[0]; const form = $('#release-channel')[0];
if ( form ) { if (form) {
const val = form.channel.value; const val = form.channel.value;
$('CODE').each((idx, code) => { $('CODE').each((idx, code) => {
const $code = $(code); const $code = $(code);
const text = $code.data('original') || code.innerHTML; 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.data('original', text);
code.innerHTML = text.replace(/&lt;CHART_REPO&gt;/g, val); code.innerHTML = text.replace(/&lt;CHART_REPO&gt;/g, val);
} }
@@ -140,5 +140,3 @@ $(document).ready(() => {
bootstrapIdLinks(); bootstrapIdLinks();
replaceReleaseChannel(); replaceReleaseChannel();
}); });
assets/sass/app.scss
+57
View File
@@ -16,4 +16,61 @@
pre > code { pre > code {
padding: 0; 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
+155 -105
View File
@@ -1,23 +1,23 @@
{{ define "title" }} {{ define "title" }}
{{ .Title }} – {{ .Site.Title }} {{ .Title }} – {{ .Site.Title }}
{{ end }} {{ end }}
{{ define "hero" }} {{ define "hero" }}
{{ end }} {{ end }}
{{ define "main" }} {{ define "main" }}
<section class="docs-container"> <section class="docs-container">
<div class="grid-container"> <div class="grid-container">
<div class="row max-sized set-lines set-ground"> <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 class="col-4"></div>
<div class="col-4"></div> <div class="col-4"></div>
</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="row max-sized contents-container background-base-gray-side">
<div class=" <div class="
col-xl-3 col-xl-3
col-lg-4 col-lg-4
col-md-4 col-md-4
@@ -42,31 +42,80 @@
col-12 col-12
texts-container"> texts-container">
<div class="docs-wrap"> <div class="docs-wrap">
{{ with .Params.Title }} <div class="docs-cta-wrapper">
<h1 class="m-t-0">{{ . }}</h1> <div class="docs-cta">
<hr/> <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}} {{end}}
{{ if .Params.ctaBanner }} {{ if .Params.ctaBanner }}
{{ with index .Site.Data.cta .Params.ctaBanner }} {{ with index .Site.Data.cta .Params.ctaBanner }}
<div class="docs-banner"> <div class="docs-banner">
<h3 class="">{{ .header }}</h3>
<div class="buttons-container"> <h3 class="">{{ .header }}</h3>
<a href="{{ .link }}" target="_blank" class="btn border-btn">
<button class="button has-icon-right"> <div class="buttons-container">
<span>{{ .button }}</span> <a href="{{ .link }}" target="_blank" class="btn border-btn">
<svg class="icon right" enable-background="new 0 0 34 34" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg"> <button class="button has-icon-right">
<g> <span>{{ .button }}</span>
<path class="svg-linear" d="m19.5 12 5 5-5 5"></path> <svg class="icon right" enable-background="new 0 0 34 34" viewBox="0 0 34 34"
<path class="svg-linear" d="m24.5 17h-15"></path> xmlns="http://www.w3.org/2000/svg">
</g> <g>
</svg> <path class="svg-linear" d="m19.5 12 5 5-5 5"></path>
</button> <path class="svg-linear" d="m24.5 17h-15"></path>
</a> </g>
</div> </svg>
</div> </button>
{{ end }} </a>
</div>
</div>
{{ end }}
{{ end }} {{ end }}
<div class="main-content docs-body"> <div class="main-content docs-body">
@@ -77,56 +126,57 @@
{{ $paginator := .Scratch.Get "paginator" }} {{ $paginator := .Scratch.Get "paginator" }}
{{ range $paginator.Pages }} {{ range $paginator.Pages }}
<div class="box m-b-md"> <div class="box m-b-md">
<div class="p-a-sm"> <div class="p-a-sm">
<h3><a href="{{.URL}}">{{.Title}}</a></h3> <h3><a href="{{.URL}}">{{.Title}}</a></h3>
{{ if .Params.Image }} {{ if .Params.Image }}
<div class="thumbnail"><img src="{{ .Params.Image }}" alt="{{ .Params.Title }}"></div> <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}} {{end}}
<p>{{ .Summary | safeHTML }}</p> {{ if eq .Section "events" }}
{{ if .Truncated }} {{ with .Params.EventDate }}
<div> <div class="p-h-sm p-v-xs"><i class="material-icons">event</i> {{ . }}</div>
<a href="{{ .RelPermalink }}">Read More…</a> {{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> </div>
{{ end }} {{end}}
</div>
<div class="bg-default">
<div class="row">
{{ with .Params.Author }} {{ with .Params.Location }}
<div class="p-h-sm p-v-xs"><i class="material-icons">person_outline</i> By: {{ . }}</div> <div class="p-h-sm p-v-xs"><i class="material-icons">location_on</i> {{ . }}</div>
{{end}} {{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>
</div> </div>
{{ end }}
</div> </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> </article>
<!-- {{ with .TableOfContents }} <!-- {{ with .TableOfContents }}
<div class="offset-watch invisible"></div> <div class="offset-watch invisible"></div>
@@ -138,44 +188,44 @@
</div> </div>
</div> </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'); $('.docs-container .side-menus').toggleClass('show');
}); });
// anchor click control. // anchor click control.
$("a[href*='#']").click(function(e) { $("a[href*='#']").click(function (e) {
// e.preventDefault(); // e.preventDefault();
if ($(this).attr('data-target') === undefined && $(this).attr('href').length > 1) { if ($(this).attr('data-target') === undefined && $(this).attr('href').length > 1) {
var hash = $(this).attr('href').substring(1), var hash = $(this).attr('href').substring(1),
objt = $('#' + hash), 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, depth = 80,
scrn = $(window).width(); scrn = $(window).width();
scrn_check = 1025; scrn_check = 1025;
if (scrn < scrn_check) { if (scrn < scrn_check) {
depth = 120; 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 (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 }}
layouts/_default/single.html
+20 -21
View File
@@ -1,45 +1,44 @@
{{ define "title" }} {{ define "title" }}
{{ .Title }} – {{ .Site.Title }} {{ .Title }} – {{ .Site.Title }}
{{ end }} {{ end }}
{{ define "hero" }} {{ define "hero" }}
<section class="hero"> <section class="hero">
<h5 class="text-white">Rancher 2.x Docs</h5> <h5 class="text-white">Rancher 2.x Docs</h5>
{{ with .Params.Title }} {{ with .Params.Title }}
<h1 class="m-t-0">{{ . }}</h1> <h1 class="m-t-0">{{ . }}</h1>
{{end}} {{end}}
{{ with .Params.Author }} {{ with .Params.Author }}
<span class="byline bg-link">{{ . }}</span> <span class="byline bg-link">{{ . }}</span>
{{end}} {{end}}
</section> </section>
{{ end }} {{ end }}
{{ define "main" }} {{ define "main" }}
<div class="wrapper"> <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"> <aside class="col-sm-3 col-xs-12 p-l-0">
{{ partial "docs-side-nav.html" . }} {{ partial "docs-side-nav.html" . }}
</aside> </aside>
<article class="{{ if ($.Scratch.Get "showSidebar") }} col-sm-6 {{else}} col-md-9 p-r-lg {{end}} col-xs-12"> <article class="{{ if ($.Scratch.Get "showSidebar") }} col-sm-6 {{else}} col-md-9 p-r-lg {{end}} col-xs-12">
<div class="main-content ">
<div class="main-content ">
{{ .Content }} {{ .Content }}
</div> </div>
<div class="p-v-sm">{{ partial "page-edit.html" . }}</div> <div class="p-v-sm">{{ partial "page-edit.html" . }}</div>
</article> </article>
<!-- <div class="offset-watch invisible"></div> <!-- <div class="offset-watch invisible"></div>
<aside class="col-sm-3 col-xs-12 unstyled toc-container"> <aside class="col-sm-3 col-xs-12 unstyled toc-container">
<h4 class="m-b-0">On this page</h4> <h4 class="m-b-0">On this page</h4>
{{ .TableOfContents }} {{ .TableOfContents }}
</aside> --> </aside> -->
</div>
</div> </div>
{{ end }}
</div>
{{ end }}