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