mirror of
https://github.com/rancher/rancher-docs.git
synced 2026-09-25 04:28:15 +00:00
Update docs for mobile.
This commit is contained in:
Keyser H
+110
-111
@@ -19,7 +19,7 @@
|
||||
<div class="row max-sized contents-container background-base-gray-side">
|
||||
<div class="
|
||||
col-xl-3
|
||||
col-lg-3
|
||||
col-lg-4
|
||||
col-md-4
|
||||
col-sm-12
|
||||
col-xs-12
|
||||
@@ -29,13 +29,14 @@
|
||||
<input class="search input" placeholder="SEARCH" />
|
||||
</div>
|
||||
|
||||
<div class="side-menus-wrap jquery-accordion-menu">
|
||||
{{ partial "docs-side-nav.html" . }}
|
||||
</div>
|
||||
|
||||
<!-- <div class="side-menus-wrap jquery-accordion-menu"> -->
|
||||
{{ partial "docs-side-nav.html" . }}
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<div class="
|
||||
col-xl-9
|
||||
col-lg-9
|
||||
col-lg-8
|
||||
col-md-8
|
||||
col-sm-12
|
||||
col-xs-12
|
||||
@@ -130,114 +131,112 @@
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Side menu script
|
||||
;(function ( $, window, document, undefined ) {
|
||||
var pluginName = "jqueryAccordionMenu";
|
||||
var defaults = {
|
||||
speed: 300,
|
||||
showDelay: 0,
|
||||
hideDelay: 0,
|
||||
singleOpen: true,
|
||||
clickEffect: true
|
||||
};
|
||||
|
||||
function Plugin ( element, options ) {
|
||||
this.element = element;
|
||||
this.settings = $.extend( {}, defaults, options );
|
||||
this._defaults = defaults;
|
||||
this._name = pluginName;
|
||||
this.init();
|
||||
};
|
||||
|
||||
$.extend(Plugin.prototype, {
|
||||
|
||||
init: function () {
|
||||
this.openSubmenu();
|
||||
this.submenuIndicators();
|
||||
if(this.settings.clickEffect){
|
||||
this.addClickEffect();
|
||||
}
|
||||
},
|
||||
|
||||
openSubmenu: function () {
|
||||
var opts = this.settings; //to differ from local variable "this"
|
||||
$(this.element).children("ul").find("li").bind("click touchstart", function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
if ($(this).attr('class') === 'back-to-the-top') {
|
||||
$('.mobile-header-container').scrollTop(0);
|
||||
}
|
||||
|
||||
if($(this).children(".submenu").length > 0){
|
||||
if($(this).children(".submenu").css("display") == "none"){
|
||||
$(this).children(".submenu").delay(opts.showDelay).slideDown(opts.speed);
|
||||
$(this).children(".submenu").siblings("a").addClass("submenu-indicator-minus");
|
||||
$(this).addClass("activate");
|
||||
if(opts.singleOpen){
|
||||
$(this).siblings().children(".submenu").slideUp(opts.speed);
|
||||
$(this).siblings().children(".submenu").siblings("a").removeClass("submenu-indicator-minus");
|
||||
}
|
||||
return false;
|
||||
}
|
||||
else{
|
||||
$(this).children(".submenu").delay(opts.hideDelay).slideUp(opts.speed);
|
||||
}
|
||||
if($(this).children(".submenu").siblings("a").hasClass("submenu-indicator-minus")){
|
||||
$(this).children(".submenu").siblings("a").removeClass("submenu-indicator-minus");
|
||||
$(this).removeClass("activate");
|
||||
}
|
||||
}
|
||||
window.location.href = $(this).children("a").attr("href");
|
||||
});
|
||||
},
|
||||
|
||||
submenuIndicators: function () {
|
||||
if($(this.element).find(".submenu").length > 0){
|
||||
$(this.element).find(".submenu").siblings("a").append("<span class='submenu-indicator'><span class='object1'></span><span class='object2'></span><span class='object3'></span></span>");
|
||||
}
|
||||
},
|
||||
|
||||
addClickEffect: function () {
|
||||
var ink, d, x, y;
|
||||
$(this.element).find("a").bind("click touchstart", function(e){
|
||||
|
||||
$(".ink").remove();
|
||||
|
||||
if($(this).children(".ink").length === 0){
|
||||
$(this).prepend("<span class='ink'></span>");
|
||||
}
|
||||
|
||||
ink = $(this).find(".ink");
|
||||
ink.removeClass("animate-ink");
|
||||
|
||||
if(!ink.height() && !ink.width()){
|
||||
d = Math.max($(this).outerWidth(), $(this).outerHeight());
|
||||
ink.css({height: d, width: d});
|
||||
}
|
||||
|
||||
x = e.pageX - $(this).offset().left - ink.width()/2;
|
||||
y = e.pageY - $(this).offset().top - ink.height()/2;
|
||||
|
||||
ink.css({top: y+'px', left: x+'px'}).addClass("animate-ink");
|
||||
});
|
||||
// Side menu script
|
||||
;(function ( $, window, document, undefined ) {
|
||||
var pluginName = "jqueryAccordionMenu";
|
||||
var defaults = {
|
||||
speed: 300,
|
||||
showDelay: 0,
|
||||
hideDelay: 0,
|
||||
singleOpen: true,
|
||||
clickEffect: true
|
||||
};
|
||||
|
||||
function Plugin ( element, options ) {
|
||||
this.element = element;
|
||||
this.settings = $.extend( {}, defaults, options );
|
||||
this._defaults = defaults;
|
||||
this._name = pluginName;
|
||||
this.init();
|
||||
};
|
||||
|
||||
$.extend(Plugin.prototype, {
|
||||
|
||||
init: function () {
|
||||
this.openSubmenu();
|
||||
this.submenuIndicators();
|
||||
if(this.settings.clickEffect){
|
||||
this.addClickEffect();
|
||||
}
|
||||
},
|
||||
|
||||
openSubmenu: function () {
|
||||
var opts = this.settings; //to differ from local variable "this"
|
||||
$(this.element).children("ul").find("li").bind("click touchstart", function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
if ($(this).attr('class') === 'back-to-the-top') {
|
||||
$('.mobile-header-container').scrollTop(0);
|
||||
}
|
||||
|
||||
if($(this).children(".submenu").length > 0) {
|
||||
if($(this).children(".submenu").css("display") == "none") {
|
||||
$(this).children(".submenu").delay(opts.showDelay).slideDown(opts.speed);
|
||||
$(this).children(".submenu").siblings("a").addClass("submenu-indicator-minus");
|
||||
$(this).addClass("activate");
|
||||
if(opts.singleOpen){
|
||||
$(this).siblings().children(".submenu").slideUp(opts.speed);
|
||||
$(this).siblings().children(".submenu").siblings("a").removeClass("submenu-indicator-minus");
|
||||
$(this).removeClass("activate");
|
||||
}
|
||||
return false;
|
||||
} else {
|
||||
$(this).children(".submenu").delay(opts.hideDelay).slideUp(opts.speed);
|
||||
$(this).removeClass("activate");
|
||||
}
|
||||
|
||||
if($(this).children(".submenu").siblings("a").hasClass("submenu-indicator-minus")){
|
||||
$(this).children(".submenu").siblings("a").removeClass("submenu-indicator-minus");
|
||||
}
|
||||
}
|
||||
window.location.href = $(this).children("a").attr("href");
|
||||
});
|
||||
|
||||
$.fn[ pluginName ] = function ( options ) {
|
||||
this.each(function() {
|
||||
if ( !$.data( this, "plugin_" + pluginName ) ) {
|
||||
$.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
|
||||
}
|
||||
});
|
||||
return this;
|
||||
};
|
||||
})( jQuery, window, document );
|
||||
|
||||
var sideNavMenus = $('.side-menus-wrap');
|
||||
|
||||
sideNavMenus.jqueryAccordionMenu();
|
||||
},
|
||||
|
||||
submenuIndicators: function () {
|
||||
if($(this.element).find(".submenu").length > 0){
|
||||
$(this.element).find(".submenu").siblings("a").append("<span class='submenu-indicator'><span class='object1'></span><span class='object2'></span><span class='object3'></span></span>");
|
||||
}
|
||||
},
|
||||
|
||||
addClickEffect: function () {
|
||||
var ink, d, x, y;
|
||||
$(this.element).find("a").bind("click touchstart", function(e){
|
||||
$(".ink").remove();
|
||||
|
||||
if($(this).children(".ink").length === 0){
|
||||
$(this).prepend("<span class='ink'></span>");
|
||||
}
|
||||
|
||||
ink = $(this).find(".ink");
|
||||
ink.removeClass("animate-ink");
|
||||
|
||||
if(!ink.height() && !ink.width()){
|
||||
d = Math.max($(this).outerWidth(), $(this).outerHeight());
|
||||
ink.css({height: d, width: d});
|
||||
}
|
||||
|
||||
x = e.pageX - $(this).offset().left - ink.width()/2;
|
||||
y = e.pageY - $(this).offset().top - ink.height()/2;
|
||||
|
||||
ink.css({top: y+'px', left: x+'px'}).addClass("animate-ink");
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$.fn[ pluginName ] = function ( options ) {
|
||||
this.each(function() {
|
||||
if ( !$.data( this, "plugin_" + pluginName ) ) {
|
||||
$.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
|
||||
}
|
||||
});
|
||||
return this;
|
||||
};
|
||||
})( jQuery, window, document );
|
||||
|
||||
var sideNavMenus = $('.side-menus-container');
|
||||
|
||||
sideNavMenus.jqueryAccordionMenu();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -12,43 +12,56 @@
|
||||
{{end}}
|
||||
|
||||
<!-- product dropdown -->
|
||||
<ul class="side-menus-wrap">
|
||||
<li class="">
|
||||
<a href="{{ ($.Scratch.Get "topLevel").Permalink }}" class="">
|
||||
<span class="">
|
||||
{{ range $product := $.Site.Sections }}
|
||||
{{ range $version := .Sections }}
|
||||
{{ range $language := .Sections }}
|
||||
{{if $.CurrentSection}}
|
||||
{{ if .IsAncestor $.CurrentSection }}
|
||||
{{ .Params.shortTitle }}
|
||||
<div class="side-menus-container product-select jquery-accordion-menu">
|
||||
<ul class="side-menus-wrap">
|
||||
<li class="">
|
||||
<a href="{{ ($.Scratch.Get "topLevel").Permalink }}" class="">
|
||||
<span class="">
|
||||
{{ range $product := $.Site.Sections }}
|
||||
{{ range $version := .Sections }}
|
||||
{{ range $language := .Sections }}
|
||||
{{if $.CurrentSection}}
|
||||
{{ if .IsAncestor $.CurrentSection }}
|
||||
{{ .Params.shortTitle }}
|
||||
{{end}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<ul class="submenu submenus-wrap">
|
||||
{{ range $product := $.Site.Sections }}
|
||||
{{ range $version := .Sections }}
|
||||
{{ range $language := .Sections }}
|
||||
<li><a href="{{ .Permalink }}">{{ .Params.shortTitle }}</a></li>
|
||||
{{ if .Params.insertonesix }}
|
||||
<li><a href="https://rancher.com/docs/rancher/v1.6/en/" target="blank">Rancher 1.6</a></li>
|
||||
<ul class="submenu submenus-wrap">
|
||||
{{ range $product := $.Site.Sections }}
|
||||
{{ range $version := .Sections }}
|
||||
{{ range $language := .Sections }}
|
||||
<li><a href="{{ .Permalink }}">{{ .Params.shortTitle }}</a></li>
|
||||
{{ if .Params.insertonesix }}
|
||||
<li><a href="https://rancher.com/docs/rancher/v1.6/en/" target="blank">Rancher 1.6</a></li>
|
||||
{{end}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="side-menus-wrap second">
|
||||
<!-- {{ template "section-tree-nav" ($.Scratch.Get "secondLevel") }} -->
|
||||
<div class="guide-menus-activator">
|
||||
Quick start guides
|
||||
|
||||
<span class="indicator">
|
||||
<span class="object1"></span>
|
||||
<span class="object2"></span>
|
||||
<span class="object3"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="side-menus-container guide-menus jquery-accordion-menu">
|
||||
<ul class="side-menus-wrap second">
|
||||
{{ template "section-tree-nav" ($.Scratch.Get "topLevel") }}
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
{{ define "section-tree-nav" }}
|
||||
{{ range .Sections}}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 234 B |
@@ -0,0 +1 @@
|
||||
<svg enable-background="new 0 0 23 23" viewBox="0 0 23 23" xmlns="http://www.w3.org/2000/svg"><path d="m18.6 2.4h-14.2c-1.2 0-2.2 1-2.2 2.2v14.4c0 1.2 1 2.2 2.2 2.2h14.3c1.2 0 2.2-1 2.2-2.2v-14.3c0-1.3-1-2.3-2.3-2.3zm-1.7 6.7h-.9c-1 0-1.3.2-1.3.9v1.3h2.2l-.4 2.2h-1.8v6.7h-2.2v-6.7h-1.8v-2.2h1.8v-1.3c0-1.8.9-3.1 2.7-3.1 1.3 0 1.8.4 1.8.4v1.8z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 364 B |
@@ -0,0 +1 @@
|
||||
<svg enable-background="new 0 0 23 23" viewBox="0 0 23 23" xmlns="http://www.w3.org/2000/svg"><path d="m8.3 21.8c.3-.1.5-.5.5-.8v-2.4c0-.1 0-.2 0-.3s-1.3 0-1.6 0c-.7 0-1.3-.3-1.5-.8-.3-.5-.5-1.5-1.3-2.1-.1-.1 0-.2.2-.2.3 0 .8.4 1.2.9.5.5.9.9 1.6.9 1.1 0 1.7-.1 2.1-.2.4-.6 1-1.1 1.6-1.1-2.5-.1-4.2-.9-4.9-2.2-1.6 0-3.1.2-3.9.3 0-.1 0-.3-.1-.4.8-.2 2.2-.4 3.7-.4-.1-.1-.1-.2-.1-.4-1.6-.1-2.9 0-3.7 0 0-.1 0-.3 0-.4.7-.1 2.1-.1 3.6 0 0-.2-.1-.5-.1-.7 0-.8.3-1.6.8-2.2-.2-.8-.5-2.4.1-3 1.2 0 2.1.6 2.5.9.8-.3 1.6-.5 2.5-.5s1.8.2 2.5.5c.4-.4 1.3-.9 2.5-.9.7.6.3 2.2.1 2.9.5.7.8 1.4.7 2.2v.6c1.6-.1 2.9 0 3.7 0v.4c-.7-.1-2.1-.1-3.7 0 0 .2-.1.3-.1.4 1.6 0 3 .2 3.8.3 0 .1 0 .3-.1.4-.9-.1-2.3-.3-4-.3-.7 1.3-2.3 2.1-4.8 2.2 1.2 0 2.2 1.7 2.2 2.9v2.7c0 .4.2.7.5.8 4.1-1.4 7.1-5.2 7.1-9.8 0-5.7-4.6-10.3-10.3-10.3s-10.4 4.7-10.4 10.4c0 4.5 3 8.4 7.1 9.7z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 866 B |
@@ -0,0 +1 @@
|
||||
<svg enable-background="new 0 0 23 23" viewBox="0 0 23 23" xmlns="http://www.w3.org/2000/svg"><path d="m18.6 2.4h-14.2c-1.2 0-2.2 1-2.2 2.2v14.4c0 1.2 1 2.2 2.2 2.2h14.3c1.2 0 2.2-1 2.2-2.2v-14.3c0-1.3-1-2.3-2.3-2.3zm-10.7 7.2v8.5h-2.7v-8.5zm-2.7-2.5c0-.6.6-1.1 1.4-1.1s1.3.5 1.3 1.1-.5 1.1-1.3 1.1c-.8.1-1.4-.5-1.4-1.1zm12.6 11h-2.7s0-4.1 0-4.5c0-.9-.4-1.8-1.6-1.8-1.1 0-1.5.9-1.5 1.8v4.5h-2.7v-8.5h2.7v1.1s.9-1.1 2.6-1.1c1.8 0 3.2 1.2 3.2 3.7z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 466 B |
@@ -0,0 +1 @@
|
||||
<svg enable-background="new 0 0 23 23" viewBox="0 0 23 23" xmlns="http://www.w3.org/2000/svg"><path d="m12.8 2c-.2 0-.4 0-.6.1-.9.3-1.3 1.2-1 2.1l.7 2.4-3.3 1-.7-2.2c-.3-.9-1.2-1.3-2-1-.9.2-1.3 1.1-1 2l.7 2.3-2.4.8c-.8.3-1.3 1.2-1 2.1.2.7.9 1.1 1.5 1.1.2 0 .4 0 .5-.1l2.4-.8 1 3.1-2.6.9c-.9.2-1.3 1.2-1 2 .2.7.8 1.2 1.5 1.2.1 0 .3 0 .5-.1l2.5-.9.8 2.5c.2.7.9 1.1 1.5 1.1.2 0 .4 0 .5-.1.8-.3 1.3-1.2 1-2.1l-.7-2.4 3.2-1.1.7 2.4c.2.7.9 1.1 1.5 1.1.2 0 .4 0 .5-.1.8-.3 1.3-1.2 1-2.1l-.7-2.4 2-.7c.8-.3 1.3-1.3.9-2.1-.3-.9-1.2-1.3-2-1l-2 .7-.9-3.1 2.2-.7c.9-.3 1.3-1.2 1-2.1s-1.2-1.3-2-1l-2.1.7-.7-2.4c-.2-.7-.8-1.1-1.4-1.1zm0 7.7.9 3.1-3.2 1.1-1-3.1z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 668 B |
@@ -0,0 +1 @@
|
||||
<svg enable-background="new 0 0 23 23" viewBox="0 0 23 23" xmlns="http://www.w3.org/2000/svg"><path d="m22.7 4.9c-.8.4-1.7.6-2.6.7.9-.6 1.7-1.5 2-2.5-.9.5-1.9.9-2.9 1.1-.8-.9-2-1.5-3.4-1.5-2.5 0-4.6 2.1-4.6 4.6 0 .4 0 .7.1 1-3.8-.2-7.2-2-9.5-4.8-.3.7-.6 1.5-.6 2.4 0 1.6.8 3 2 3.8-.8 0-1.5-.2-2.1-.6v.1c0 2.2 1.6 4.1 3.7 4.5-.4.1-.8.2-1.2.2-.3 0-.6 0-.9-.1.6 1.8 2.3 3.2 4.3 3.2-1.6 1.2-3.6 2-5.7 2-.4 0-.7 0-1.1-.1 2 1.3 4.4 2.1 7 2.1 8.5 0 13.1-7 13.1-13.1 0-.2 0-.4 0-.6 1-.7 1.8-1.5 2.4-2.4z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 516 B |
@@ -0,0 +1 @@
|
||||
<svg enable-background="new 0 0 23 23" viewBox="0 0 23 23" xmlns="http://www.w3.org/2000/svg"><path d="m20.6 7.1c-.2-1-1-1.7-2-1.9-1.5-.3-4.2-.5-7.1-.5s-5.7.2-7.2.5c-1 .2-1.8.9-2 1.9-.3 1.2-.4 2.7-.4 4.7s.2 3.6.4 4.7c.2 1 1 1.7 2 1.9 1.6.3 4.2.5 7.2.5s5.6-.2 7.2-.5c1-.2 1.8-.9 2-1.9.2-1.1.4-2.7.4-4.7-.1-2-.3-3.5-.5-4.7zm-11.6 7.9v-6.3l5.5 3.1z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 366 B |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Reference in New Issue
Block a user