mirror of
https://github.com/rancher/rancher-docs.git
synced 2026-09-26 21:18:04 +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}}
|
||||
|
||||
Reference in New Issue
Block a user