diff --git a/tools/droiddoc/templates-sdk-dyn/assets/css/default.css b/tools/droiddoc/templates-sdk-dyn/assets/css/default.css index c6ad292f91..75ac78bc34 100644 --- a/tools/droiddoc/templates-sdk-dyn/assets/css/default.css +++ b/tools/droiddoc/templates-sdk-dyn/assets/css/default.css @@ -98,7 +98,8 @@ body { #devdoc-nav.fixed { position: fixed; margin:0; - top: 20px; } + top: 65px; /* sticky-header height + 20px gutter */ +} #devdoc-nav span.small { font-size:12px; @@ -1365,8 +1366,7 @@ color-stop(50%, #acbc00), color-stop(50%, #bdde00), color-stop(100%, #bdde00)); .training-nav-top, .training-nav-bottom, #doc-col .content-footer, .nav-x, .nav-y, - .paging-links, - a.totop { + .paging-links { display: none !important; } @@ -1632,168 +1632,6 @@ Header, Login, Nav-X, Search color: #33b5e5 } -/************ STICKY NAV BAR ******************/ - -#header-wrapper { - background: #f9f9f9; - margin: 0 -10px 0 -10px; - padding: 31px 10px 0px 10px; - position: relative; -} -#header-wrapper #nav-x div.wrap { - max-width: 940px; - height: 38px; -} -#header-wrapper #nav-x ul.nav-x li { - margin-right: 36px !important; - margin-top: 5px; - margin-bottom: 0px; - height: 30px; -} -#header-wrapper #nav-x > div.wrap ul.nav-x li.active { - color: #669900; - border-bottom: 3px solid #669900; -} -#header-wrapper #nav-x > div.wrap ul.nav-x li.active a { - color: #669900; -} -#header-wrapper #nav-x > div.wrap ul.nav-x a { - font-size: 14.5px; -} -#header-wrapper .developer-console-btn { - float: right; - background: #fefefe; - border-radius: 4px; - padding: 8px 14px; - box-shadow: 1px 1px 0px #7a7a7a; - font-size: 14px; - margin-top: -6px; - cursor: pointer; - color: #464646; - margin-right: 20px; -} -/* not currently used */ -#header-wrapper .shadow { - width: 1034px; - height: 4px; - position: absolute; - left: 50%; - margin-left: -517px; - bottom: -4px; - background-image: url(../images/header-shadow.png); -} - -#context { - clear: both; - padding-top: 14px; -} -#context .breadcrumb { - float: left; - margin-bottom: 10px; -} -#context .util { - float: right; - margin-right: 20px; -} - -.breadcrumb { - list-style: none; - margin: 0; - padding: 0; - position: relative; -} -.breadcrumb li { - float: left; - padding: 0 20px 0 0; - color: #000; -} -.breadcrumb li a { - color: #000; -} -.breadcrumb li:after { - content: url(../images/breadcrumb.png); - position: relative; - top: 1px; - left: 10px; - width: 5px; - height: 10px; -} -.breadcrumb li.current { - font-weight: 700; -} -.breadcrumb li.current:after { - display: none; -} - -/* Sticky Nav overrides */ -.sticky-menu { - position: fixed; - width: 940px; - height: 0px; - z-index: 51; - top: 12px; -} -#sticky-header { - display: none; - padding: 0 10px; - position: fixed; - background: #f9f9f9; - top: 0px; - left: 0px; - right: 0px; - height: 45px; - box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1); - border-bottom: 1px solid #a5c43a; - z-index: 50; - opacity: 0; - -webkit-transition: opacity 0.25s; - -moz-transition: opacity 0.25s; - -o-transition: opacity 0.25s; - transition: opacity 0.25s; -} -#sticky-header.design { - border-bottom: 1px solid #33b5e5; -} -#sticky-header.develop { - border-bottom: 1px solid #F80; -} -#sticky-header.distribute { - border-bottom: 1px solid #9C0; -} -#sticky-header > div { - overflow: hidden; - *zoom: 1; - width: 940px; - margin: 0 auto; - clear: both; - padding-top: 9px; -} -#sticky-header > div .logo { - float: left; - width: 26px; - height: 25px; - background: url(../images/dac_logo.png); - z-index: 52; - position: relative; -} -#sticky-header > div .top { - float: left; - width: 38px; - height: 38px; - position: relative; - background: url(../images/styles/gototop.png); - z-index: 52; -} -#sticky-header > div .breadcrumb { - float: left; - padding: 0 0 0 10px; - border-left: 1px solid #d2d2d2; - line-height: 24px; - font-size: 14px; - position: relative; - top: 0px; - z-index: 52; -} /* -------------------------------------------------------------------------- Buttons @@ -3034,26 +2872,6 @@ div.design-announce p { margin:0 0 10px; } -#devdoc-nav a.totop { - display:block; - top:0; - width:inherit; - background: transparent url(../images/styles/gototop.png) no-repeat scroll 50% 50%; - text-indent:-9999em; -} -#devdoc-nav a.totop { - position:fixed; - display:none; -} -#devdoc-nav a.totop:hover { - background-color:#33B5E5; -} - -.content-footer a.totop { - text-transform:uppercase; - line-height:30px; -} - .expandable { height:34px; padding-left:20px; @@ -4118,13 +3936,171 @@ EndColorStr='#ececec'); z-index:100; } + + + + +/************ STICKY NAV BAR ******************/ + +#header-wrapper { + background: #f9f9f9; + margin: 0 -10px 0 -10px; + padding: 31px 10px 0px 10px; + position: relative; +} +#header-wrapper #nav-x div.wrap { + max-width: 940px; + height: 38px; +} +#header-wrapper #nav-x ul.nav-x li { + margin-right: 36px !important; + margin-top: 5px; + margin-bottom: 0px; + height: 30px; +} +#header-wrapper #nav-x > div.wrap ul.nav-x li.active { + color: #669900; + border-bottom: 3px solid #669900; +} +#header-wrapper #nav-x > div.wrap ul.nav-x li.active a { + color: #669900; +} +#header-wrapper #nav-x > div.wrap ul.nav-x a { + font-size: 14.5px; +} +#header-wrapper .developer-console-btn { + float: right; + background: #fefefe; + border-radius: 4px; + padding: 8px 14px; + box-shadow: 1px 1px 0px #7a7a7a; + font-size: 14px; + margin-top: -6px; + cursor: pointer; + color: #464646; + margin-right: 20px; +} +/* not currently used */ +#header-wrapper .shadow { + width: 1034px; + height: 4px; + position: absolute; + left: 50%; + margin-left: -517px; + bottom: -4px; + background-image: url(../images/header-shadow.png); +} + +#context { + clear: both; + padding-top: 14px; +} +#context .breadcrumb { + float: left; + margin-bottom: 10px; +} +#context .util { + float: right; + margin-right: 20px; +} + +.breadcrumb { + list-style: none; + margin: 0; + padding: 0; + position: relative; +} +.breadcrumb li { + float: left; + padding: 0 20px 0 0; + color: #000; + white-space: nowrap; +} +.breadcrumb li a { + color: #000; +} +.breadcrumb li:after { + content: url(../images/breadcrumb.png); + position: relative; + top: 1px; + left: 10px; + width: 5px; + height: 10px; +} +.breadcrumb li.current { + font-weight: 700; +} +.breadcrumb li.current:after { + display: none; +} + +/* Sticky Nav overrides */ +.sticky-menu { + position: fixed; + width: 940px; + height: 0px; + z-index: 51; + top: 12px; +} +#sticky-header { + display: none; + padding: 0 10px; + position: fixed; + background: #f9f9f9; + top: 0px; + left: 0px; + right: 0px; + height: 45px; + box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1); + border-bottom: 1px solid #a5c43a; + z-index: 50; +} +#sticky-header.design { + border-bottom: 1px solid #33b5e5; +} +#sticky-header.develop { + border-bottom: 1px solid #F80; +} +#sticky-header.distribute { + border-bottom: 1px solid #9C0; +} +#sticky-header > div { + overflow: hidden; + *zoom: 1; + width: 940px; + margin: 0 auto; + clear: both; + padding-top: 9px; +} +#sticky-header > div .logo { + float: left; + width: 26px; + height: 25px; + background: url(../images/dac_logo.png); + z-index: 52; + position: relative; +} +#sticky-header > div .top { + float: left; + width: 38px; + height: 38px; + position: relative; + background: url(../images/styles/gototop.png); + z-index: 52; +} +#sticky-header > div .breadcrumb { + float: left; + padding: 0 0 0 10px; + border-left: 1px solid #d2d2d2; + line-height: 24px; + font-size: 14px; + position: relative; + top: 0px; + z-index: 52; } - - - - +} diff --git a/tools/droiddoc/templates-sdk-dyn/assets/css/fullscreen.css b/tools/droiddoc/templates-sdk-dyn/assets/css/fullscreen.css index 71cf65b129..1093eae358 100644 --- a/tools/droiddoc/templates-sdk-dyn/assets/css/fullscreen.css +++ b/tools/droiddoc/templates-sdk-dyn/assets/css/fullscreen.css @@ -15,16 +15,16 @@ @media screen, projection, print { .full { - padding: 2.5em 0; - border-top: solid 1px #ddd; - border-bottom: solid 1px #ddd; - background: #f7f7f7; + padding: 2.5em 0; + border-top: solid 1px #ddd; + border-bottom: solid 1px #ddd; + background: #f7f7f7; } .wrap { - margin: 0 auto; - width: 100%; - min-width:600px; - clear: both; + margin: 0 auto; + width: 100%; + min-width:600px; + clear: both; } .cols { height: 1%; @@ -170,7 +170,7 @@ body { max-width: 100%; } -#nav-x .wrap, +#header-wrapper #nav-x div.wrap, #searchResults.wrap { max-width:100%; } @@ -184,7 +184,18 @@ body { left:20px; /* !important ... for IE i think */ } +#sticky-header { + padding: 0 20px; +} +#sticky-header > div { + width: 100%; +} + +.sticky-menu { + width:100%; + left:-20px; +} } diff --git a/tools/droiddoc/templates-sdk-dyn/assets/js/docs.js b/tools/droiddoc/templates-sdk-dyn/assets/js/docs.js index 97e3efd624..00a1b2b85f 100644 --- a/tools/droiddoc/templates-sdk-dyn/assets/js/docs.js +++ b/tools/droiddoc/templates-sdk-dyn/assets/js/docs.js @@ -221,6 +221,7 @@ $(document).ready(function() { // and highlight the sidenav mPagePath = pagePath; highlightSidenav(); + buildBreadcrumbs(); // set up prev/next links if they exist var $selNavLink = $('#nav').find('a[href="' + pagePath + '"]'); @@ -405,70 +406,6 @@ false; // navigate across topic boundaries only in design docs }); - // Set up fixed navbar - var prevScrollLeft = 0; // used to compare current position to previous position of horiz scroll - $(window).scroll(function(event) { - if ($('#side-nav').length == 0) return; - if (event.target.nodeName == "DIV") { - // Dump scroll event if the target is a DIV, because that means the event is coming - // from a scrollable div and so there's no need to make adjustments to our layout - return; - } - var scrollTop = $(window).scrollTop(); - var headerHeight = $('#header').outerHeight(); - var subheaderHeight = $('#nav-x').outerHeight(); - var searchResultHeight = $('#searchResults').is(":visible") ? - $('#searchResults').outerHeight() : 0; - var totalHeaderHeight = headerHeight + subheaderHeight + searchResultHeight; - // we set the navbar fixed when the scroll position is beyond the height of the site header... - var navBarShouldBeFixed = scrollTop > totalHeaderHeight; - // ... except if the document content is shorter than the sidenav height. - // (this is necessary to avoid crazy behavior on OSX Lion due to overscroll bouncing) - if ($("#doc-col").height() < $("#side-nav").height()) { - navBarShouldBeFixed = false; - } - - var scrollLeft = $(window).scrollLeft(); - // When the sidenav is fixed and user scrolls horizontally, reposition the sidenav to match - if (navBarIsFixed && (scrollLeft != prevScrollLeft)) { - updateSideNavPosition(); - prevScrollLeft = scrollLeft; - } - - // Don't continue if the header is sufficently far away - // (to avoid intensive resizing that slows scrolling) - if (navBarIsFixed && navBarShouldBeFixed) { - return; - } - - if (navBarIsFixed != navBarShouldBeFixed) { - if (navBarShouldBeFixed) { - // make it fixed - var width = $('#devdoc-nav').width(); - $('#devdoc-nav') - .addClass('fixed') - .css({'width':width+'px'}) - .prependTo('#body-content'); - // add neato "back to top" button - $('#devdoc-nav a.totop').css({'display':'block','width':$("#nav").innerWidth()+'px'}); - - // update the sidenaav position for side scrolling - updateSideNavPosition(); - } else { - // make it static again - $('#devdoc-nav') - .removeClass('fixed') - .css({'width':'auto','margin':''}) - .prependTo('#side-nav'); - $('#devdoc-nav a.totop').hide(); - } - navBarIsFixed = navBarShouldBeFixed; - } - - resizeNav(250); // pass true in order to delay the scrollbar re-initialization for performance - }); - - var navBarLeftPos; if ($('#devdoc-nav').length) { setNavBarLeftPos(); @@ -613,6 +550,22 @@ function initExpandableNavItems(rootTag) { }); } + +/** Create the list of breadcrumb links in the sticky header */ +function buildBreadcrumbs() { + var $breadcrumbUl = $("#sticky-header ul.breadcrumb"); + // Add the secondary horizontal nav item, if provided + var $selectedSecondNav = $("div#nav-x ul.nav-x a.selected").clone().removeClass("selected"); + if ($selectedSecondNav.length) { + $breadcrumbUl.prepend($("
  • ").append($selectedSecondNav)) + } + // Add the primary horizontal nav + var $selectedFirstNav = $("div#header-wrap ul.nav-x a.selected").clone().removeClass("selected"); + $breadcrumbUl.prepend($("
  • ").append($selectedFirstNav)); +} + + + /** Highlight the current page in sidenav, expanding children as appropriate */ function highlightSidenav() { // if something is already highlighted, undo it. This is for dynamic navigation (Samples index) @@ -725,9 +678,8 @@ function resizeNav(delay) { // Then figure out based on scroll position whether the header is visible var windowHeight = $window.height(); var scrollTop = $window.scrollTop(); - var headerHeight = $('#header').outerHeight(); - var subheaderHeight = $('#nav-x').outerHeight(); - var headerVisible = (scrollTop < (headerHeight + subheaderHeight)); + var headerHeight = $('#header-wrapper').outerHeight(); + var headerVisible = scrollTop < stickyTop; // get the height of space between nav and top of window. // Could be either margin or top position, depending on whether the nav is fixed. @@ -737,7 +689,7 @@ function resizeNav(delay) { // Depending on whether the header is visible, set the side nav's height. if (headerVisible) { // The sidenav height grows as the header goes off screen - navHeight = windowHeight - (headerHeight + subheaderHeight - scrollTop) - topMargin; + navHeight = windowHeight - (headerHeight - scrollTop) - topMargin; } else { // Once header is off screen, the nav height is almost full window height navHeight = windowHeight - topMargin; @@ -929,12 +881,12 @@ function writeCookie(cookie, val, section, expiration) { /* * Displays sticky nav bar on pages when dac header scrolls out of view */ - +var stickyTop; (function() { $(document).ready(function() { // Sticky nav position - var stickyTop = $('#header-wrapper').outerHeight(); + stickyTop = $('#header-wrapper').outerHeight() - $('#sticky-header').outerHeight(); var sticky = false; var hiding = false; var $stickyEl = $('#sticky-header'); @@ -943,26 +895,62 @@ function writeCookie(cookie, val, section, expiration) { var lastScroll = 0; var autoScrolling = false; - $(window).scroll(function() { - var top = $(window).scrollTop(); + var prevScrollLeft = 0; // used to compare current position to previous position of horiz scroll - if (sticky && top < stickyTop) { + $(window).scroll(function() { + // Exit if there's no sidenav + if ($('#side-nav').length == 0) return; + // Exit if the mouse target is a DIV, because that means the event is coming + // from a scrollable div and so there's no need to make adjustments to our layout + if (event.target.nodeName == "DIV") { + return; + } + + + var top = $(window).scrollTop(); + // we set the navbar fixed when the scroll position is beyond the height of the site header... + var shouldBeSticky = top >= stickyTop; + // ... except if the document content is shorter than the sidenav height. + // (this is necessary to avoid crazy behavior on OSX Lion due to overscroll bouncing) + if ($("#doc-col").height() < $("#side-nav").height()) { + shouldBeSticky = false; + } + + // Don't continue if the header is sufficently far away + // (to avoid intensive resizing that slows scrolling) + if (sticky && shouldBeSticky) { + return; + } + + // Account for horizontal scroll + var scrollLeft = $(window).scrollLeft(); + // When the sidenav is fixed and user scrolls horizontally, reposition the sidenav to match + if (navBarIsFixed && (scrollLeft != prevScrollLeft)) { + updateSideNavPosition(); + prevScrollLeft = scrollLeft; + } + + // If sticky header visible and position is now near top, hide sticky + if (sticky && !shouldBeSticky) { sticky = false; hiding = true; - $stickyEl.css({'opacity': 0}); - setTimeout(function() { - $menuEl.removeClass('sticky-menu'); - $stickyEl.hide(); - hiding = false; - }, 250); - } else if (!sticky && top >= stickyTop) { + // make the sidenav static again + $('#devdoc-nav') + .removeClass('fixed') + .css({'width':'auto','margin':''}) + .prependTo('#side-nav'); + // delay hide the sticky + $menuEl.removeClass('sticky-menu'); + $stickyEl.fadeOut(250); + hiding = false; + + // update the sidenaav position for side scrolling + updateSideNavPosition(); + } else if (!sticky && shouldBeSticky) { sticky = true; - $stickyEl.show(); + $stickyEl.fadeIn(10); $menuEl.addClass('sticky-menu'); - setTimeout(function() { - $stickyEl.css({'opacity': 1}); - }, 10); // If its a jump then make sure to modify the scroll because of the // sticky nav @@ -970,6 +958,17 @@ function writeCookie(cookie, val, section, expiration) { autoScrolling = true; $('body,html').animate({scrollTop:(top = top - 60)}, '250', 'swing', function() { autoScrolling = false; }); } + + // make the sidenav fixed + var width = $('#devdoc-nav').width(); + $('#devdoc-nav') + .addClass('fixed') + .css({'width':width+'px'}) + .prependTo('#body-content'); + + // update the sidenaav position for side scrolling + updateSideNavPosition(); + } else if (hiding && top < 15) { $menuEl.removeClass('sticky-menu'); $stickyEl.hide(); @@ -977,6 +976,7 @@ function writeCookie(cookie, val, section, expiration) { } lastScroll = top; + resizeNav(250); // pass true in order to delay the scrollbar re-initialization for performance }); // Stack hover states @@ -988,21 +988,7 @@ function writeCookie(cookie, val, section, expiration) { $cardInfo.css({position: 'absolute', bottom:'0px', left:'0px', right:'0px', overflow:'visible'}); }); - // Auto scroll anchors and account for sticky nav - $('a[href^=#]').click(function(e){ - e.preventDefault(); - var tmp = $.attr(this, 'href').substr(1); - var el = document.getElementById(tmp) || - ((tmp = document.getElementsByName(tmp)).length ? - tmp[0] : null); - - if (el) { - var top = $(el).offset().top - 60; - autoScrolling = true; - $('body,html').animate({scrollTop:top}, '500', 'swing', function() { autoScrolling = false; }); - } - }); - + resizeNav(); // must resize once loading is finished }); })(); @@ -3599,7 +3585,7 @@ function showSamples() { resources = urls.map(function(url){ return ALL_RESOURCES_BY_URL[url]; }); break; } - //console.log(firstClause.attr + ':' + firstClause.value); + // console.log(firstClause.attr + ':' + firstClause.value); resources = resources || []; // use additional clauses to filter corpus @@ -3615,7 +3601,7 @@ function showSamples() { // add to list of already added indices for (var j = 0; j < resources.length; j++) { - console.log(resources[j].title); + // console.log(resources[j].title); addedResourceIndices[resources[j].index] = 1; } @@ -3933,4 +3919,4 @@ function showSamples() { return this; }; -}) (jQuery); \ No newline at end of file +}) (jQuery); diff --git a/tools/droiddoc/templates-sdk-dyn/components/masthead.cs b/tools/droiddoc/templates-sdk-dyn/components/masthead.cs index a365462f3c..b5876611eb 100644 --- a/tools/droiddoc/templates-sdk-dyn/components/masthead.cs +++ b/tools/droiddoc/templates-sdk-dyn/components/masthead.cs @@ -296,31 +296,13 @@ onkeyup="return search_changed(event, false, '')" />
    • + @@ -330,4 +312,4 @@ if:!section.landing ?>
    • \ No newline at end of file +/def ?> diff --git a/tools/droiddoc/templates-sdk-dyn/customizations.cs b/tools/droiddoc/templates-sdk-dyn/customizations.cs index 64ae1189e4..2e2f2e6a29 100644 --- a/tools/droiddoc/templates-sdk-dyn/customizations.cs +++ b/tools/droiddoc/templates-sdk-dyn/customizations.cs @@ -7,7 +7,6 @@ def:sdk_nav() ?>
    -to top @@ -25,7 +24,6 @@ def:tools_nav() ?>
    -to top @@ -43,7 +41,6 @@ def:training_nav() ?>
    -to top
    @@ -78,7 +74,6 @@ def:essentials_nav() ?>
    @@ -93,7 +88,6 @@ def:users_nav() ?>
    @@ -108,7 +102,6 @@ def:engage_nav() ?>
    @@ -123,7 +116,6 @@ def:monetize_nav() ?>
    @@ -138,7 +130,6 @@ def:disttools_nav() ?>
    @@ -153,7 +144,6 @@ def:stories_nav() ?>
    @@ -168,8 +158,6 @@ def:guide_nav() ?>
    -to top - @@ -188,7 +176,6 @@ def:design_nav() ?>
    -to top
    -to top @@ -228,7 +214,6 @@ def:samples_nav() ?>
    -to top @@ -248,7 +233,6 @@ def:google_nav() ?>
    -to top @@ -272,7 +256,6 @@ def:about_nav() ?>
    -to top @@ -295,8 +278,6 @@ def:default_left_nav() ?>
    - -to top