forked from openkylin/platform_build
docs: make the resizable side nav standard. DO NOT MERGE.
This actually affects only the SDK tab, which previously did not allow resizing---now it does. Also add a couple new templates to allow either 190 or 200 pixel-wide side navigation by default, and apply 200 to the Resources tab. Change-Id: I4555c496088dd8aac77f9aa01273c3a1d52f89e0
This commit is contained in:
parent
fa83b5e4da
commit
2e94aa25d4
|
@ -101,7 +101,7 @@ def:custom_masthead() ?>
|
|||
<?cs
|
||||
def:sdk_nav() ?>
|
||||
<div class="g-section g-tpl-240" id="body-content">
|
||||
<div class="g-unit g-first not-resizable" id="side-nav">
|
||||
<div class="g-unit g-first" id="side-nav">
|
||||
<div id="devdoc-nav"><?cs
|
||||
include:"../../../../frameworks/base/docs/html/sdk/sdk_toc.cs" ?>
|
||||
</div>
|
||||
|
@ -110,8 +110,8 @@ def:sdk_nav() ?>
|
|||
|
||||
<?cs
|
||||
def:resources_tab_nav() ?>
|
||||
<div class="g-section g-tpl-240" id="body-content">
|
||||
<div class="g-unit g-first side-nav-resizable" id="side-nav">
|
||||
<div class="g-section g-tpl-200" id="body-content">
|
||||
<div class="g-unit g-first" id="side-nav">
|
||||
<div id="devdoc-nav"><?cs
|
||||
include:"../../../../frameworks/base/docs/html/resources/resources_toc.cs" ?>
|
||||
</div>
|
||||
|
@ -126,7 +126,7 @@ def:resources_tab_nav() ?>
|
|||
<?cs
|
||||
def:guide_nav() ?>
|
||||
<div class="g-section g-tpl-240" id="body-content">
|
||||
<div class="g-unit g-first side-nav-resizable" id="side-nav">
|
||||
<div class="g-unit g-first" id="side-nav">
|
||||
<div id="devdoc-nav"><?cs
|
||||
include:"../../../../frameworks/base/docs/html/guide/guide_toc.cs" ?>
|
||||
</div>
|
||||
|
@ -141,7 +141,7 @@ def:guide_nav() ?>
|
|||
<?cs # The default side navigation for the reference docs ?><?cs
|
||||
def:default_left_nav() ?>
|
||||
<div class="g-section g-tpl-240" id="body-content">
|
||||
<div class="g-unit g-first side-nav-resizable" id="side-nav">
|
||||
<div class="g-unit g-first" id="side-nav">
|
||||
<div id="swapper">
|
||||
<div id="nav-panels">
|
||||
<div id="resize-packages-nav">
|
||||
|
|
|
@ -34,10 +34,6 @@
|
|||
font-size:12px;
|
||||
}
|
||||
|
||||
#side-nav.not-resizable {
|
||||
background:url('images/sidenav-rule.png') no-repeat 243px 0;
|
||||
}
|
||||
|
||||
#resize-packages-nav {
|
||||
/* keeps the resize handle below the h-scroll handle */
|
||||
height:270px;
|
||||
|
@ -1181,6 +1177,76 @@ table.download th {
|
|||
float: right;
|
||||
}
|
||||
|
||||
/* 200px */
|
||||
.g-tpl-200 .g-unit,
|
||||
.g-unit .g-tpl-200 .g-unit,
|
||||
.g-unit .g-unit .g-tpl-200 .g-unit {
|
||||
display: block;
|
||||
margin: 0 0 0 200px;
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
.g-unit .g-unit .g-tpl-200 .g-first,
|
||||
.g-unit .g-tpl-200 .g-first,
|
||||
.g-tpl-200 .g-first {
|
||||
display: block;
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
float: left;
|
||||
}
|
||||
/* 200px alt */
|
||||
.g-tpl-200-alt .g-unit,
|
||||
.g-unit .g-tpl-200-alt .g-unit,
|
||||
.g-unit .g-unit .g-tpl-200-alt .g-unit {
|
||||
display: block;
|
||||
margin: 0 200px 0 0;
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
.g-unit .g-unit .g-tpl-200-alt .g-first,
|
||||
.g-unit .g-tpl-200-alt .g-first,
|
||||
.g-tpl-200-alt .g-first {
|
||||
display: block;
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* 190px */
|
||||
.g-tpl-190 .g-unit,
|
||||
.g-unit .g-tpl-190 .g-unit,
|
||||
.g-unit .g-unit .g-tpl-190 .g-unit {
|
||||
display: block;
|
||||
margin: 0 0 0 190px;
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
.g-unit .g-unit .g-tpl-190 .g-first,
|
||||
.g-unit .g-tpl-190 .g-first,
|
||||
.g-tpl-190 .g-first {
|
||||
display: block;
|
||||
margin: 0;
|
||||
width: 190px;
|
||||
float: left;
|
||||
}
|
||||
/* 190px alt */
|
||||
.g-tpl-190-alt .g-unit,
|
||||
.g-unit .g-tpl-190-alt .g-unit,
|
||||
.g-unit .g-unit .g-tpl-190-alt .g-unit {
|
||||
display: block;
|
||||
margin: 0 190px 0 0;
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
.g-unit .g-unit .g-tpl-190-alt .g-first,
|
||||
.g-unit .g-tpl-190-alt .g-first,
|
||||
.g-tpl-190-alt .g-first {
|
||||
display: block;
|
||||
margin: 0;
|
||||
width: 190px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* 180px */
|
||||
.g-tpl-180 .g-unit,
|
||||
.g-unit .g-tpl-180 .g-unit,
|
||||
|
|
|
@ -141,18 +141,20 @@ function init() {
|
|||
cookiePath = "reference_";
|
||||
} else if (location.href.indexOf("/guide/") != -1) {
|
||||
cookiePath = "guide_";
|
||||
} else if (location.href.indexOf("/sdk/") != -1) {
|
||||
cookiePath = "sdk_";
|
||||
} else if (location.href.indexOf("/resources/") != -1) {
|
||||
cookiePath = "resources_";
|
||||
}
|
||||
|
||||
if (!isMobile) {
|
||||
$("#resize-packages-nav").resizable({handles: "s", resize: function(e, ui) { resizePackagesHeight(); } });
|
||||
$(".side-nav-resizable").resizable({handles: "e", resize: function(e, ui) { resizeWidth(); } });
|
||||
$("#side-nav").resizable({handles: "e", resize: function(e, ui) { resizeWidth(); } });
|
||||
var cookieWidth = readCookie(cookiePath+'width');
|
||||
var cookieHeight = readCookie(cookiePath+'height');
|
||||
if (cookieWidth) {
|
||||
restoreWidth(cookieWidth);
|
||||
} else if ($(".side-nav-resizable").length) {
|
||||
} else if ($("#side-nav").length) {
|
||||
resizeWidth();
|
||||
}
|
||||
if (cookieHeight) {
|
||||
|
@ -171,12 +173,12 @@ function highlightNav(fullPageName) {
|
|||
var lastSlashPos = fullPageName.lastIndexOf("/");
|
||||
var firstSlashPos;
|
||||
if (fullPageName.indexOf("/guide/") != -1) {
|
||||
firstSlashPos = fullPageName.indexOf("/guide/");
|
||||
} else if (fullPageName.indexOf("/sdk/") != -1) {
|
||||
firstSlashPos = fullPageName.indexOf("/sdk/");
|
||||
} else {
|
||||
firstSlashPos = fullPageName.indexOf("/resources/");
|
||||
}
|
||||
firstSlashPos = fullPageName.indexOf("/guide/");
|
||||
} else if (fullPageName.indexOf("/sdk/") != -1) {
|
||||
firstSlashPos = fullPageName.indexOf("/sdk/");
|
||||
} else if (fullPageName.indexOf("/resources/") != -1) {
|
||||
firstSlashPos = fullPageName.indexOf("/resources/");
|
||||
}
|
||||
if (lastSlashPos == (fullPageName.length - 1)) { // if the url ends in slash (add 'index.html')
|
||||
fullPageName = fullPageName + "index.html";
|
||||
}
|
||||
|
@ -184,7 +186,7 @@ function highlightNav(fullPageName) {
|
|||
var pathPageName = fullPageName.slice(firstSlashPos, htmlPos + 5);
|
||||
var link = $("#devdoc-nav a[href$='"+ pathPageName+"']");
|
||||
if ((link.length == 0) && ((fullPageName.indexOf("/guide/") != -1) || (fullPageName.indexOf("/resources/") != -1))) {
|
||||
// if there's no match, then let's backstep through the directory until we find an index.html page that matches our ancestor directories (only for dev guide)
|
||||
// if there's no match, then let's backstep through the directory until we find an index.html page that matches our ancestor directories (only for dev guide and resources)
|
||||
lastBackstep = pathPageName.lastIndexOf("/");
|
||||
while (link.length == 0) {
|
||||
backstepDirectory = pathPageName.lastIndexOf("/", lastBackstep);
|
||||
|
@ -249,10 +251,8 @@ function resizeHeight() {
|
|||
$("#classes-nav").css({height:swapperHeight - parseInt(resizePackagesNav.css("height")) + "px"});
|
||||
$("#nav-tree").css({height:swapperHeight + "px"});
|
||||
|
||||
// If in the dev guide docs, also resize the "devdoc-nav" div
|
||||
} else if (href.indexOf("/guide/") != -1) {
|
||||
$("#devdoc-nav").css({height:sidenav.css("height")});
|
||||
} else if (href.indexOf("/resources/") != -1) {
|
||||
// Also resize the "devdoc-nav" div
|
||||
} else if ($("#devdoc-nav").length) {
|
||||
$("#devdoc-nav").css({height:sidenav.css("height")});
|
||||
}
|
||||
|
||||
|
@ -268,6 +268,7 @@ function resizeHeight() {
|
|||
* which creates the resizable side bar */
|
||||
function resizeWidth() {
|
||||
var windowWidth = $(window).width() + "px";
|
||||
var sidenav = $("#side-nav");
|
||||
if (sidenav.length) {
|
||||
var sidenavWidth = sidenav.css("width");
|
||||
} else {
|
||||
|
@ -283,7 +284,7 @@ function resizeWidth() {
|
|||
classesNav.css({width:sidenavWidth});
|
||||
$("#packages-nav").css({width:sidenavWidth});
|
||||
|
||||
if ($(".side-nav-resizable").length) { // Must check if the nav is resizable because IE6 calls resizeWidth() from resizeAll() for all pages
|
||||
if (sidenav.length) { // Must check if the nav exists because IE6 calls resizeWidth() from resizeAll() for all pages
|
||||
var basePath = getBaseUri(location.pathname);
|
||||
var section = basePath.substring(1,basePath.indexOf("/",1));
|
||||
writeCookie("width", sidenavWidth, section, null);
|
||||
|
|
Loading…
Reference in New Issue