diff options
Diffstat (limited to 'tools/droiddoc/templates-sdk')
18 files changed, 4266 insertions, 591 deletions
diff --git a/tools/droiddoc/templates-sdk/assets/css/default.css b/tools/droiddoc/templates-sdk/assets/css/default.css index aa30c8a..3b647c2 100644 --- a/tools/droiddoc/templates-sdk/assets/css/default.css +++ b/tools/droiddoc/templates-sdk/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; @@ -157,12 +158,6 @@ video.with-shadow { .layout-content-row { display: inline-block; margin-bottom: 10px; } - .layout-content-row:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; } * html .layout-content-row { height: 1px; } @@ -429,20 +424,19 @@ video.with-shadow { /* content header */ .content-header { height: 30px; - margin:20px 0 25px; - padding:0 0 10px;} + margin:36px 0 23px; /* same as h1 */ + padding:0 0 10px;} /* same as h1 */ .content-header.just-links { margin-bottom:0; padding-bottom:0;} .content-header h1 { - color:#000; margin:0; - border-bottom:0; padding:0; + width: 700px; } .content-header > div:first-child { - height:55px; /* set fixed height for the header div to ensure the + height:1px; /* set fixed height for the header div to ensure the next/prev links align with toc on training classes */ } @@ -450,7 +444,7 @@ video.with-shadow { border-top: 1px solid #ccc; margin-top: 10px; padding-top:10px; - height: 30px; } + width:100%; } .content-footer .col-9 { margin-left:0; @@ -461,20 +455,30 @@ video.with-shadow { .content-footer.wrap { width:940px; } +.content-footer .plus-container { + margin:5px 0 0; + text-align:right; + float:right; +} + +a.back-link { + text-decoration: none; + text-transform: uppercase; +} .paging-links { - position: relative; } + position: relative; + height:30px; } .paging-links a { position: absolute; } .paging-links a, .training-nav-top a { - font-size: 14px; - line-height: 30px; color: #555555; text-decoration: none; text-transform: uppercase; } .paging-links .prev-page-link:before, - .training-nav-top .prev-page-link:before { + .training-nav-top .prev-page-link:before, + a.back-link:before { content: ''; background: transparent url(../images/styles/disclosure_left.png) no-repeat scroll 50% 50%; width: 10px; @@ -488,7 +492,7 @@ video.with-shadow { .paging-links .prev-page-link { left: -15px; } .paging-links .next-page-link { - right: 0px; } + right: 0; } .next-page-link:after, .start-class-link:after, .start-course-link:after, @@ -505,6 +509,9 @@ video.with-shadow { .next-page-link.inline:after { content: none; } + .content-footer .paging-links .next-page-link { + left:0; + } .training-nav-top a { display:block; @@ -543,7 +550,6 @@ video.with-shadow { .paging-links a.start-class-link { width:100%; - text-align:right; } /* list of classes on course landing page */ @@ -622,19 +628,6 @@ video.with-shadow { display:none !important; } - .content-footer.next-class { - display:block; - border:0; - margin-top:0; - padding-top:0; - } - - .content-footer.next-class a.next-class-link { - display:block; - float:right; - text-transform:uppercase; - } - /* inner-doc tabs w/ title */ @@ -712,6 +705,7 @@ ul#title-tabs li a:active { color: #33b5e5; border-bottom-color: #33b5e5; } } +h1:target, h2:target, h3:target { -webkit-animation-name: glowheader; @@ -893,7 +887,7 @@ scroll top left; .framed-nexus4-port-216 img { width: 216px; height: 360px; } - + .framed-nexus5-port-span-5 { background: transparent url(../images/styles/device_nexus5_blank_port_span5.png) no-repeat scroll top left; @@ -928,6 +922,47 @@ scroll top left; height: 384px; } +/* wear device frames */ + +.framed-wear-square { + background: transparent url(../images/styles/device_wear_square.png) no-repeat scroll top left; + background-size: 302px 302px; + height:222px; + width:222px; + padding:40px; + overflow:hidden; +} + +.framed-wear-square-small { + background: transparent url(../images/styles/device_wear_square_small.png) no-repeat scroll top left; + background-size: 169px 200px; + height:147px; + width:147px; + padding:27px 11px; + overflow:hidden; +} + +#jd-content +.framed-wear-square img { + height:222px; + width: 222px; + padding:0; + margin:0; +} + +#jd-content +.framed-wear-square-small img { + height:147px; + width: 147px; + padding:0; + margin:0; +} + + + + + + /* landing page disclosures */ .landing-page-link { text-decoration: none; @@ -1101,12 +1136,13 @@ table, fieldset { } h1 { color:#333; - font-size: 22px; - margin: 20px 0 20px; + font-size: 34px; + margin: 36px 0 27px; padding:0 0 10px; + font-weight:300; } h1, h2 { - line-height: 32px; + line-height: 30px; } h1.short { margin-right:320px; @@ -1119,21 +1155,24 @@ h1.super { } h2 { color:#333; - font-size: 20px; - margin: 20px 0 20px; + font-size: 26px; + margin: 32px 0 20px; padding:0; + font-weight:300; } h3 { color:#333; - font-size: 18px; + font-size: 21px; + font-weight:400; + margin:21px 0 14px 0; } h3, h4 { - color:#333; - line-height: 20px; - margin: 10px 0; + line-height: 21px; } h4 { - font-size: 16px; + font-size: 18px; + margin: 12px 0; + font-weight:500; } h5 { font-size: 14px; @@ -1146,7 +1185,7 @@ h6 { } hr { /* applied to the bottom of h2 elements */ height: 1px; - margin: 5px 0 20px; + margin: 3px 0 12px; border: 0; background: #ccc; } @@ -1215,6 +1254,13 @@ a:focus, a:hover, a:active { color: #33B5E5; text-decoration: none; } +a.white { + color: #fff; + text-decoration:underline; +} +a.white:hover, a.white:active { + color: #ccc !important; +} strong, b { font-weight:bold; color: #222; @@ -1248,6 +1294,7 @@ th { tr:first-of-type th:first-of-type:empty { visibility: hidden; } + /* -------------------------------------------------------------------------- Footer */ @@ -1378,8 +1425,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; } @@ -1504,7 +1550,8 @@ color-stop(50%, #acbc00), color-stop(50%, #bdde00), color-stop(100%, #bdde00)); Header, Login, Nav-X, Search */ #header { - padding: 2.2em 0 0.2em 0; + margin: 0; + padding: 0; } #header:before, #header:after { content: ""; @@ -1522,6 +1569,9 @@ Header, Login, Nav-X, Search color: #333; font-size: 16px; } +.about a.selected { + color: #9933CC; +} .design a.selected { color: #33b5e5; } @@ -1833,6 +1883,11 @@ EndColorStr='#ececec'); margin:0 0 0 20px; } +.training-nav-top { + position:relative; + top:73px; +} + .training-nav-bottom { padding:0 0 20px; } @@ -1841,12 +1896,12 @@ EndColorStr='#ececec'); #qv-wrapper { float:right; clear:right; - margin:0 0 0 20px; /* negative top-margin to counter the content-header bottom margin */ - padding:0 0 20px; + margin:6px 0 0 30px; /* negative top-margin to counter the content-header bottom margin */ + padding:0 0 30px; } #tb-wrapper { - margin:-29px 0 0 20px; /* negative top-margin to counter the content-header bottom margin */ + margin:51px 0 0 20px; /* negative top-margin to counter the content-header bottom margin */ } #tb, @@ -1930,6 +1985,10 @@ EndColorStr='#ececec'); margin:0 15px 10px 35px; } +#tb p { + margin:0 15px 10px; +} + #qv ol { list-style:none; margin:0 15px 15px; @@ -1958,28 +2017,12 @@ EndColorStr='#ececec'); /* related resources blocks in checklists */ -.rel-resources { - margin:10px 0px; - border:1px solid #ccc; - background-color:rgba(0, 0, 0, 0.027451); - border:1px solid #ccc; - font-size:13px; - color:#6f6f6f; -} +/* related resources sections that have dynamic content */ -.rel-resources ul { -padding: .5em 1em 0 1em; -} -.rel-resources a { -font-weight:500; -} -.rel-resources h3 { - margin:4px 15px 0px 15px; - font-size:13px; - font-weight:600; - text-transform:uppercase; +h3.rel-resources { +margin:1.25em auto; } /* -------------------------------------------------------------------------- @@ -2359,6 +2402,13 @@ a:visited, #doc-col { margin-right:0; } + +/* Uncomment this for preview release watermark +#doc-col { + background: url('../images/preview.png') repeat; +} +*/ + #doc-content-container { margin-left: 291px } @@ -2760,7 +2810,7 @@ table.blank th, table.blank td { .caption { margin: 0.5em 0 2em 0; color: #000; - font-size: 11.5px; + font-size: 11.5px; } .nolist, .nolist ul, .nolist ol { @@ -2884,26 +2934,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; @@ -3013,6 +3043,34 @@ a.header-toggle { } +/* for IDE instruction toggle (Studio/Eclipse/Other) */ +select.ide { + background: transparent; + border: 1px solid #bbb; + border-left: 0; + border-right: 0; + margin: 10px 0; + padding: 10px 0; + color:#666; +} +select.ide, +select.ide option { + font-family: inherit; + font-size:16px; + font-weight:500; +} +/* hide all except eclipse by default */ +.select-ide.studio, +.select-ide.other { + display:none; +} +/* ... unless eclipse also includes one of the others */ +.select-ide.eclipse.studio, +.select-ide.eclipse.other { + display:block; +} + + /* ----------------------------------------------- good/bad example containers */ @@ -3365,28 +3423,37 @@ Page-Specific Styles } #jd-header { - padding: 0 0 5px; - margin: 20px 0 10px; - font-size:13px; + padding: 0 0 12px; + margin: 20px 0 12px; + font-size:12px; + padding-bottom:12px; border-bottom:solid 1px #ccc; } #jd-header h1 { margin:0; - padding:0; + padding:0 0 6px 0; } +/* not sure if this is needed in the ref docs, disabling for now +.jd-descr h2 { + margin:16px 0; +} +*/ + /* page-top-right container for reference pages (holds links to summary tables) */ #api-info-block { - font-size:13px; + font-size:12px; margin:20px 0 0; padding:0 10px 6px; font-weight:normal; float:right; text-align:right; color:#999; - max-width:70%; + max-width:80%; + font-size: 12px; + line-height:14px; } #api-info-block div.api-level { @@ -3403,7 +3470,8 @@ links to summary tables) */ border-spacing:0; margin:0; padding:0; - font-size:13px; + font-size:12px; + line-height:14px; background-color:transparent; } .jd-inheritance-table tr td { @@ -3968,13 +4036,175 @@ 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.about { + border-bottom: 1px solid #9933CC; +} +#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); + background-image: -webkit-image-set(url(../images/dac_logo.png) 1x, url(../images/dac_logo@2x.png) 2x); + 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; +} +} @@ -4014,7 +4244,6 @@ EndColorStr='#ececec'); } .logo a { - width:123px; float:left; } @@ -4027,11 +4256,13 @@ EndColorStr='#ececec'); } -#header .logo-wear { +#header-wrap .logo.landing-logo { width:220px; margin:0; + padding:0; + margin-bottom:22px; } -#header .logo-wear img { +#header-wrap .logo.landing-logo img { padding:0 0 0 10px; } @@ -4103,7 +4334,7 @@ EndColorStr='#ececec'); #quicknav { float:none; clear:both; - margin-left:180px; + margin-left:0; margin-top:-30px; display:none; overflow:hidden; @@ -4118,6 +4349,10 @@ EndColorStr='#ececec'); padding:0; } +#quicknav ul li.about { + border-top:1px solid #9933CC; +} + #quicknav ul li.design { border-top:1px solid #33b5e5; } @@ -4447,7 +4682,9 @@ EndColorStr='#ececec'); } - +#landing h1 { + margin:17px 0 20px 0 !important; +} a.download-sdk { float:right; @@ -4458,11 +4695,11 @@ a.download-sdk { } #nav-x { - padding-top: 14px; + padding-top: 13px; } #nav-x .wrap { - min-height:34px; + min-height:32px; } #nav-x .wrap, @@ -4618,14 +4855,14 @@ a.download-sdk { /* Slideshow */ .slideshow-develop { - height: 300px; + height: 316px; width: 940px; position: relative; overflow:hidden; } .slideshow-develop .frame { width: 940px; - height: 300px; + height: 316px; } .slideshow-develop img.play { max-width:350px; @@ -4657,6 +4894,7 @@ a.download-sdk { padding:0; margin-bottom:10px; border:none; + font-size:24px; } .slideshow-develop .item { height: 300px; @@ -4804,53 +5042,6 @@ a.download-sdk { -/************ DISTRIBUTE HOMEPAGE ***************/ - -.marquee { - width: 760px; -} -.marquee .main-img { - float: left; - margin-top: 20px; - width: 490px; -} -.marquee .copy { - width: 270px; - float: left; - margin-top: 30px; -} -.distribute-features { - margin: 0; -} -.distribute-features ul { - margin: 0; -} -.distribute-features ul li { - list-style: none; - float: left; - border-top: 1px solid #9C0; - width: 220px; - margin-right: 50px; -} -.distribute-features ul li.last { - margin-right: 0px; -} - -.distribute-features .distribute-link li a { - color:red !important; -} - -.distribute-features .distribute-link li a, -.distribute-features .distribute-link li a:active { - color:#555 !important; -} - -.distribute-features .distribute-link li a:hover, -.distribute-features .distribute-link li a:hover * { - color:#7AA1B0 !important; -} - - /************ DEVELOP TOPIC CONTAINERS ************/ .landing-banner, @@ -4876,7 +5067,8 @@ a.download-sdk { margin-bottom:0; } .landing-banner h1 { - margin-top:0; + margin-top:16px; + padding-bottom:24px; } .landing-docs, .landing-banner { @@ -5028,3 +5220,2113 @@ a.download-sdk { .fullpage #footer { margin-top: -40px; } + +/************ DISTRIBUTE PAGES ******************/ + +.article-detail #body-content { + padding-top: 10px; +} + +/* A container for grid sets with uppercase h3 and rule */ +.dynamic-grid h3 { + font-size:14px; + line-height:21px; + color:#555; + text-transform:uppercase; + border-bottom:1px solid #CCC; + padding:8px 0 0 1px; + margin-bottom:14px; + clear:both; +} + +.top-right-float { + float: right; +} + +.clearfloat { + float: none; + clear: both; +} + +.border-img { + border: 1px solid #CCC; +} + +.center-img { + margin: auto; + text-align: center; +} +.center-img img { + margin-bottom: 15px; +} + +.figure img, .border-img { + margin-bottom: 15px; +} + +/************ RESOURCE CARDS ******************/ + +/* Resource cards, 12, 13, 16-col */ + +/* Basic card-styling with shadow */ +.resource-card { + border-radius: 1px; + box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.12); + background: #fefefe; +} + +/* Styling for background image including tinting and section icons in stacks */ +.card-bg { + display: block; + position: absolute; + vertical-align: top; + width: 100%; + left: 0; + top: 0; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + background-image: url(../images/resource-card-default-android.jpg); +} +.card-bg:after { + content: ""; + display: block; + height: 100%; + width: 100%; + opacity: 1; + background: rgba(0, 0, 0, 0.2); + -webkit-transition: opacity 0.5s; + -moz-transition: opacity 0.5s; + -o-transition: opacity 0.5s; + transition: opacity 0.5s; +} +.static .card-bg:after { + display:none; +} +.card-bg .card-section-icon { + position: absolute; + top: 50%; + width: 100%; + margin-top: -35px; + text-align: center; + padding-top: 65px; + z-index: 100; +} +.card-bg .card-section-icon .icon { + position: absolute; + left: 50%; + margin-left: -28px; + top: 0px; + width: 56px; + height: 56px; + background-repeat: no-repeat; + background-position: 50% 50%; + background-image: url(../images/stack-icon.png); +} +.card-bg .card-section-icon .section { + text-transform: uppercase; + color: white; + font-size: 14px; +} + +.card-info { + position: absolute; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; + background: #fefefe; + padding: 4px 12px 6px 12px; +} +.card-info .section { + text-transform: uppercase; + color: #898989; + font-size: 12px; + margin-bottom: 1px; +} +.card-info .title { + color: #363636; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding-bottom: 5px; + margin-bottom: -2px; + font-size: 16px; +} +.card-info .description { + overflow: hidden; +} +.card-info .description .text { + color: #464646; + font: 13px/15px Roboto Condensed; + overflow: hidden; + width:100%; +} +.card-info .description .util { + position: absolute; + right: 5px; + bottom: 70px; /*-2px;*/ + opacity: 0; + -webkit-transition: opacity 0.5s; + -moz-transition: opacity 0.5s; + -o-transition: opacity 0.5s; + transition: opacity 0.5s; +} +.card-info.empty-desc .title { + white-space: normal; + overflow: visible; +} +.card-info.empty-desc .description { + display: none; +} +/* Truncate card summaries at bounding box and + * and apply ellipsis at lower right */ +.ellipsis { + overflow: hidden; + float:right; + line-height: 15px; + width:100%; +} +.resource-card-6x6 .card-info .description .teddddddxt { + float:left; + position:relative; + margin-left:0; +} +.ellipsis:before { + content:""; + float: left; + width: 5px; + height:100%; +} +.ellipsis > *:first-child.text { + float: right; + width: 100% !important; + margin-left: -5px; +} +.ellipsis:after { + content: "\02026"; + height:17px; + padding-bottom:4px; + + box-sizing: content-box; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + + float: right; position: relative; + top: -16px; left: 100%; + width: 4em; margin-left: -4em; + padding-right: 5px; + + background: -webkit-gradient(linear, left top, right top, + from(rgba(255, 255, 255, 0)), to(white), color-stop(65%, white)); + background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white); + background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white); + background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white); + background: linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white); +} +.ellipsis:after { + font-style: normal; color: #aaa; + font-size:13px; + text-align: right; +} + +/* Flow Layout */ +.resource-flow-layout { + display: inline-block; +} +.resource-flow-layout .resource-card, .resource-flow-layout .resource-card-stack { + float: left; + position: relative; +} +.resource-flow-layout .resource-card-stack > .resource-card { + margin-right: 0px !important; +} +.resource-flow-layout:after { + content: "."; + display: block; + height: 0; + position:relative; + clear: both; + visibility: hidden; +} +.resource-card:hover { + cursor: pointer; +} +.static .resource-card:hover { + cursor: auto; +} +.resource-card:hover .card-bg:after { + opacity: 0; +} +/* disabled to make way for fade/ellipsis truncation, + and the plusone moves up. +.resource-card:hover .card-info .description .text { + padding-right: 70px; +} */ +.resource-card:hover .card-info .description .util { + opacity: 1; +} + +/* Carousel Layout */ +/* Carousel styles for landing page */ +.resource-carousel-layout { + margin: 20px 0 20px 0; + position: relative; + overflow: hidden; +} +.resource-carousel-layout .slideshow-prev, .resource-carousel-layout .slideshow-next { + display: none; +} +.resource-carousel-layout .pagination { + bottom: 0px; +} +.resource-carousel-layout .frame li { + position: relative; +} +.resource-carousel-layout .frame li .card-bg { + height: 300px; +} +.resource-carousel-layout .frame li .card-info { + padding: 7px 15px 0px 15px; + top: 300px; +} +.resource-carousel-layout .frame li .card-info .section { + font-size: 13px; + margin-bottom: 7px; +} +.resource-carousel-layout .frame li .card-info .title { + font-size: 25px; + margin-bottom: 2px; +} +.resource-carousel-layout .frame li .card-info .description { + font-family: 15px/16px Roboto Condensed, sans-serif; +} +.resource-carousel-layout .frame li .card-info .description .text { + height: 40px; +} +.resource-carousel-layout .frame li .card-info .description .util { + bottom:97px; + right:4px; +} + +/* Stack Layout */ +.resource-stack-layout { + display: inline-block; +} +.resource-stack-layout .resource-card-stack { + float: left; + position: relative; +} +.resource-stack-layout .resource-card { + margin-bottom: 20px; + display: block; + position: relative; +} +.resource-stack-layout .section-card-menu > .card-info .section, .resource-stack-layout .section-card > .card-info .title { + /*text-transform: uppercase;*/ + color: #898989; + font-size: 17px; + line-height: 24px; + margin-bottom: 6px; +} +.resource-stack-layout .section-card { + height: 284px; +} +.resource-stack-layout .section-card > .card-bg { + height: 192px; +} +.resource-stack-layout .section-card > .card-info { + padding: 4px 12px 6px 12px; + top: 192px; +} +.resource-stack-layout .section-card > .card-info .section { + display: none; +} +.resource-stack-layout .section-card > .card-info .title { + font-size: 17px; + border-bottom: 1px solid #959595; + padding-bottom: 0px; +} +.resource-stack-layout .section-card > .card-info .description { + font-size: 13px; + line-height: 15px; +} +.resource-stack-layout .section-card > .card-info .description .text { + height: 30px; +} +.resource-stack-layout .related-card { + height: 90px; +} +.resource-stack-layout .related-card > .card-bg { + left: 0; + top: 0; + width: 90px; + height: 100%; + position: absolute; + display: block; +} +.resource-stack-layout .related-card > .card-info { + left: 90px; + padding: 4px 12px 4px 12px; +} +.resource-stack-layout .related-card > .card-info .section { + font-size: 12px; + margin-bottom: 1px; + display: none; +} +.resource-stack-layout .related-card > .card-info .title { + font-size: 16px; + margin-bottom: -2px; + white-space: normal; + overflow: visible; + text-overflow: ellipsis; +} +.resource-stack-layout .related-card > .card-info .title:after { + content: url(../images/link-out.png); + display: block; +} +.resource-stack-layout .related-card > .card-info .description { + display: none; +} +.resource-stack-layout .section-card-menu { + /* Flexible height */ + display: block; + height: auto; + width: auto; +} +.resource-stack-layout .section-card-menu .card-bg { + height: 155px; + /* Flexible height */ + position: relative; + display: inline-block; + vertical-align: top; +} +.resource-stack-layout .section-card-menu .card-info { + padding: 4px 12px 0px 12px; + /* Flexible height */ + position: relative; + left: auto; + top: auto; + right: auto; + bottom: auto; +} +.resource-stack-layout .section-card-menu .card-info ul { + list-style: none; + margin: 0; +} +.resource-stack-layout .section-card-menu .card-info ul li { + list-style: none; + margin: 0; + padding: 15px 0; + border-top-width: 1px; + border-top-style: solid; + border-top-color: #959595; +} +.resource-stack-layout .section-card-menu .card-info ul li a, .resource-stack-layout .section-card-menu .card-info ul li a:focus, .resource-stack-layout .section-card-menu .card-info ul li a:link, .resource-stack-layout .section-card-menu .card-info ul li a:visited, .resource-stack-layout .section-card-menu .card-info ul li a:active, .resource-stack-layout .section-card-menu .card-info ul li a:hover { + color: #363636 !important; +} +.resource-stack-layout .section-card-menu .card-info ul li:first-child { + border-top: none; +} +.resource-stack-layout .section-card-menu .card-info ul li:hover .title:after { + opacity: 1; + -webkit-transition: opacity 0.5s; + -moz-transition: opacity 0.5s; + -o-transition: opacity 0.5s; + transition: opacity 0.5s; +} +.resource-stack-layout .section-card-menu .card-info ul li:hover .description { + max-height: 30px; + opacity: 1; + -webkit-transition: max-height 0.5s, opacity 1s; + -moz-transition: max-height 0.5s, opacity 1s; + -o-transition: max-height 0.5s, opacity 1s; + transition: max-height 0.5s, opacity 1s; +} +.resource-stack-layout .section-card-menu .card-info .title { + font-size: 16px; + margin-bottom: -2px; + position: relative; +} +.resource-stack-layout .section-card-menu .card-info .title:after { + background: url(../images/stack-arrow-right.png); + content: ''; + opacity: 0; + -webkit-transition: opacity 0.25s; + -moz-transition: opacity 0.25s; + -o-transition: opacity 0.25s; + transition: opacity 0.25s; + position: absolute; + right: 0px; + top: 3px; + width: 10px; + height: 15px; +} +.resource-stack-layout .section-card-menu .card-info .title.more { + text-transform: uppercase; + color: #898989; + display: inline-block; +} +.resource-stack-layout .section-card-menu .card-info .title.more:after { + background: url(../images/stack-arrow-right.png); + content: ''; + display: block; + position: absolute; + right: -20px; + top: 3px; + width: 10px; + height: 15px; +} +.resource-stack-layout .section-card-menu .card-info .description { + max-height: 0px; + opacity: 0; + overflow: hidden; + font-size: 13px; + line-height: 15px; + /* Hover off */ + -webkit-transition: max-height 0.5s, opacity 0.5s; + -moz-transition: max-height 0.5s, opacity 0.5s; + -o-transition: max-height 0.5s, opacity 0.5s; + transition: max-height 0.5s, opacity 0.5s; +} +.resource-stack-layout .section-card-menu .card-info .description .text { + height: 30px; +} +.resource-stack-layout:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +/* Generate the flow layout styles for a 3-column 16-col span */ +.resource-flow-layout.col-16 { + margin: 0 -14px 0 0; + width: 954px; +} +.resource-flow-layout.col-16 .resource-card, .resource-flow-layout.col-16 .resource-card-stack { + margin: 0 14px 20px 0; +} +.resource-flow-layout.col-16 .resource-card-row-stack-last { + margin-bottom: 0px !important; +} +.resource-flow-layout.col-16 .resource-card-col-stack-last { + margin-bottom: 0px !important; +} +.resource-flow-layout.col-16 .resource-card-3x6 { + width: 145px; + height: 284px; +} +.resource-flow-layout.col-16 .resource-card-3x12 { + width: 145px; + height: 588px; +} +.resource-flow-layout.col-16 .resource-card-3x18 { + width: 145px; + height: 892px; +} +.resource-flow-layout.col-16 .resource-card-6x6 { + width: 304px; + height: 284px; +} +.resource-flow-layout.col-16 .resource-card-6x12 { + width: 304px; + height: 588px; +} +.resource-flow-layout.col-16 .resource-card-6x18 { + width: 304px; + height: 892px; +} +.resource-flow-layout.col-16 .resource-card-9x6 { + width: 463px; + height: 284px; +} +.resource-flow-layout.col-16 .resource-card-9x12 { + width: 463px; + height: 588px; +} +.resource-flow-layout.col-16 .resource-card-9x18 { + width: 463px; + height: 892px; +} +.resource-flow-layout.col-16 .resource-card-12x6 { + width: 622px; + height: 284px; +} +.resource-flow-layout.col-16 .resource-card-12x12 { + width: 622px; + height: 588px; +} +.resource-flow-layout.col-16 .resource-card-12x18 { + width: 622px; + height: 892px; +} +.resource-flow-layout.col-16 .resource-card-15x6 { + width: 781px; + height: 284px; +} +.resource-flow-layout.col-16 .resource-card-15x12 { + width: 781px; + height: 588px; +} +.resource-flow-layout.col-16 .resource-card-15x18 { + width: 781px; + height: 892px; +} +.resource-flow-layout.col-16 .resource-card-18x6 { + width: 940px; + height: 284px; +} +.resource-flow-layout.col-16 .resource-card-18x12 { + width: 940px; + height: 420px; +} +.resource-flow-layout.col-16 .resource-card-18x18 { + width: 940px; + height: 892px; +} +.resource-flow-layout.col-16 .resource-card-3x2 { + width: 145px; + height: 95px; +} +.resource-flow-layout.col-16 .resource-card-3x2x3 { + width: 145px; + height: 90px; + margin-bottom: 7px; +} +.resource-flow-layout.col-16 .resource-card-3x3 { + width: 145px; + height: 142px; +} +.resource-flow-layout.col-16 .resource-card-3x3x2 { + width: 145px; + height: 138px; + margin-bottom: 8px; +} +.resource-flow-layout.col-16 .resource-card-6x2 { + width: 304px; + height: 95px; +} +.resource-flow-layout.col-16 .resource-card-6x2x3 { + width: 304px; + height: 90px; + margin-bottom: 7px; +} +.resource-flow-layout.col-16 .resource-card-6x3 { + width: 304px; + height: 142px; +} +.resource-flow-layout.col-16 .resource-card-6x3x2 { + width: 304px; + height: 138px; + margin-bottom: 8px; +} +.resource-flow-layout.col-16 .resource-card-9x2 { + width: 463px; + height: 95px; +} +.resource-flow-layout.col-16 .resource-card-9x2x3 { + width: 463px; + height: 90px; + margin-bottom: 7px; +} +.resource-flow-layout.col-16 .resource-card-9x3 { + width: 463px; + height: 142px; +} +.resource-flow-layout.col-16 .resource-card-9x3x2 { + width: 463px; + height: 138px; + margin-bottom: 8px; +} +.resource-flow-layout.col-16 .resource-card-12x2 { + width: 622px; + height: 95px; +} +.resource-flow-layout.col-16 .resource-card-12x2x3 { + width: 622px; + height: 90px; + margin-bottom: 7px; +} +.resource-flow-layout.col-16 .resource-card-12x3 { + width: 622px; + height: 142px; +} +.resource-flow-layout.col-16 .resource-card-12x3x2 { + width: 622px; + height: 138px; + margin-bottom: 8px; +} +.resource-flow-layout.col-16 .resource-card-15x2 { + width: 781px; + height: 95px; +} +.resource-flow-layout.col-16 .resource-card-15x2x3 { + width: 781px; + height: 90px; + margin-bottom: 7px; +} +.resource-flow-layout.col-16 .resource-card-15x3 { + width: 781px; + height: 142px; +} +.resource-flow-layout.col-16 .resource-card-15x3x2 { + width: 781px; + height: 138px; + margin-bottom: 8px; +} +.resource-flow-layout.col-16 .resource-card-18x2 { + width: 940px; + height: 95px; +} +.resource-flow-layout.col-16 .resource-card-18x2x3 { + width: 940px; + height: 90px; + margin-bottom: 7px; +} +.resource-flow-layout.col-16 .resource-card-18x3 { + width: 940px; + height: 142px; +} +.resource-flow-layout.col-16 .resource-card-18x3x2 { + width: 940px; + height: 138px; + margin-bottom: 8px; +} + +/* Generate the flow layout styles for a 3-column 16-col span */ +.resource-flow-layout.col-12 { + margin: 0 -14px 0 0; + width: 714px; +} + +.resource-flow-layout.col-12 .resource-card, .resource-flow-layout.col-12 .resource-card-stack { + margin: 0 14px 20px 0; +} +.resource-flow-layout.col-12 .resource-card-row-stack-last { + margin-bottom: 0px !important; +} +.resource-flow-layout.col-12 .resource-card-col-stack-last { + margin-bottom: 0px !important; +} +.resource-flow-layout.col-12 .resource-card-3x6 { + width: 105px; + height: 284px; +} +.resource-flow-layout.col-12 .resource-card-3x12 { + width: 105px; + height: 588px; +} +.resource-flow-layout.col-12 .resource-card-3x18 { + width: 105px; + height: 892px; +} +.resource-flow-layout.col-12 .resource-card-6x6 { + width: 224px; + height: 284px; +} +.resource-flow-layout.col-12 .resource-card-6x12 { + width: 224px; + height: 588px; +} +.resource-flow-layout.col-12 .resource-card-6x18 { + width: 224px; + height: 892px; +} +.resource-flow-layout.col-12 .resource-card-9x6 { + width: 343px; + height: 284px; +} +.resource-flow-layout.col-12 .resource-card-9x12 { + width: 343px; + height: 588px; +} +.resource-flow-layout.col-12 .resource-card-9x18 { + width: 343px; + height: 892px; +} +.resource-flow-layout.col-12 .resource-card-12x6 { + width: 462px; + height: 284px; +} +.resource-flow-layout.col-12 .resource-card-12x12 { + width: 462px; + height: 588px; +} +.resource-flow-layout.col-12 .resource-card-12x18 { + width: 462px; + height: 892px; +} +.resource-flow-layout.col-12 .resource-card-15x6 { + width: 581px; + height: 284px; +} +.resource-flow-layout.col-12 .resource-card-15x12 { + width: 581px; + height: 588px; +} +.resource-flow-layout.col-12 .resource-card-15x18 { + width: 581px; + height: 892px; +} +.resource-flow-layout.col-12 .resource-card-18x6 { + width: 700px; + height: 284px; +} +.resource-flow-layout.col-12 .resource-card-18x12 { + width: 700px; + height: 420px; +} +.resource-flow-layout.col-12 .resource-card-18x18 { + width: 700px; + height: 892px; +} +.resource-flow-layout.col-12 .resource-card-3x2 { + width: 105px; + height: 95px; +} +.resource-flow-layout.col-12 .resource-card-3x2x3 { + width: 105px; + height: 90px; + margin-bottom: 7px; +} +.resource-flow-layout.col-12 .resource-card-3x3 { + width: 105px; + height: 142px; +} +.resource-flow-layout.col-12 .resource-card-3x3x2 { + width: 105px; + height: 138px; + margin-bottom: 8px; +} +.resource-flow-layout.col-12 .resource-card-6x2 { + width: 224px; + height: 95px; +} +.resource-flow-layout.col-12 .resource-card-6x2x3 { + width: 224px; + height: 90px; + margin-bottom: 7px; +} +.resource-flow-layout.col-12 .resource-card-6x3 { + width: 224px; + height: 142px; +} +.resource-flow-layout.col-12 .resource-card-6x3x2 { + width: 224px; + height: 138px; + margin-bottom: 8px; +} +.resource-flow-layout.col-12 .resource-card-9x2 { + width: 343px; + height: 95px; +} +.resource-flow-layout.col-12 .resource-card-9x2x3 { + width: 343px; + height: 90px; + margin-bottom: 7px; +} +.resource-flow-layout.col-12 .resource-card-9x3 { + width: 343px; + height: 142px; +} +.resource-flow-layout.col-12 .resource-card-9x3x2 { + width: 343px; + height: 138px; + margin-bottom: 8px; +} +.resource-flow-layout.col-12 .resource-card-12x2 { + width: 462px; + height: 95px; +} +.resource-flow-layout.col-12 .resource-card-12x2x3 { + width: 462px; + height: 90px; + margin-bottom: 7px; +} +.resource-flow-layout.col-12 .resource-card-12x3 { + width: 462px; + height: 142px; +} +.resource-flow-layout.col-12 .resource-card-12x3x2 { + width: 462px; + height: 138px; + margin-bottom: 8px; +} +.resource-flow-layout.col-12 .resource-card-15x2 { + width: 581px; + height: 95px; +} +.resource-flow-layout.col-12 .resource-card-15x2x3 { + width: 581px; + height: 90px; + margin-bottom: 7px; +} +.resource-flow-layout.col-12 .resource-card-15x3 { + width: 581px; + height: 142px; +} +.resource-flow-layout.col-12 .resource-card-15x3x2 { + width: 581px; + height: 138px; + margin-bottom: 8px; +} +.resource-flow-layout.col-12 .resource-card-18x2 { + width: 700px; + height: 95px; +} +.resource-flow-layout.col-12 .resource-card-18x2x3 { + width: 700px; + height: 90px; + margin-bottom: 7px; +} +.resource-flow-layout.col-12 .resource-card-18x3 { + width: 700px; + height: 142px; +} +.resource-flow-layout.col-12 .resource-card-18x3x2 { + width: 700px; + height: 138px; + margin-bottom: 8px; +} + +/* Generate the flow layout styles for a 3-column 13-col span */ + +.resource-flow-layout.col-13 { + margin: 0 -14px 0 0; + width: 774px; +} +.resource-flow-layout.col-13 .resource-card, .resource-flow-layout.col-13 .resource-card-stack { + margin: 0 14px 20px 0; +} +.resource-flow-layout.col-13 .resource-card-row-stack-last { + margin-bottom: 0px !important; +} +.resource-flow-layout.col-13 .resource-card-col-stack-last { + margin-bottom: 0px !important; +} +.resource-flow-layout.col-13 .resource-card-3x6 { + width: 115px; + height: 284px; +} +.resource-flow-layout.col-13 .resource-card-3x12 { + width: 115px; + height: 588px; +} +.resource-flow-layout.col-13 .resource-card-3x18 { + width: 115px; + height: 892px; +} +.resource-flow-layout.col-13 .resource-card-6x6 { + width: 244px; + height: 284px; +} +.resource-flow-layout.col-13 .resource-card-6x12 { + width: 244px; + height: 588px; +} +.resource-flow-layout.col-13 .resource-card-6x18 { + width: 244px; + height: 892px; +} +.resource-flow-layout.col-13 .resource-card-9x6 { + width: 373px; + height: 284px; +} +.resource-flow-layout.col-13 .resource-card-9x12 { + width: 373px; + height: 588px; +} +.resource-flow-layout.col-13 .resource-card-9x18 { + width: 373px; + height: 892px; +} +.resource-flow-layout.col-13 .resource-card-12x6 { + width: 502px; + height: 284px; +} +.resource-flow-layout.col-13 .resource-card-12x12 { + width: 502px; + height: 588px; +} +.resource-flow-layout.col-13 .resource-card-12x18 { + width: 502px; + height: 892px; +} +.resource-flow-layout.col-13 .resource-card-15x6 { + width: 631px; + height: 284px; +} +.resource-flow-layout.col-13 .resource-card-15x12 { + width: 631px; + height: 588px; +} +.resource-flow-layout.col-13 .resource-card-15x18 { + width: 631px; + height: 892px; +} +.resource-flow-layout.col-13 .resource-card-18x6 { + width: 760px; + height: 284px; +} +.resource-flow-layout.col-13 .resource-card-18x12 { + width: 760px; + height: 420px; +} +.resource-flow-layout.col-13 .resource-card-18x18 { + width: 760px; + height: 892px; +} +.resource-flow-layout.col-13 .resource-card-3x2 { + width: 115px; + height: 95px; +} +.resource-flow-layout.col-13 .resource-card-3x2x3 { + width: 115px; + height: 90px; + margin-bottom: 7px; +} +.resource-flow-layout.col-13 .resource-card-3x3 { + width: 115px; + height: 142px; +} +.resource-flow-layout.col-13 .resource-card-3x3x2 { + width: 115px; + height: 138px; + margin-bottom: 8px; +} +.resource-flow-layout.col-13 .resource-card-6x2 { + width: 244px; + height: 95px; +} +.resource-flow-layout.col-13 .resource-card-6x2x3 { + width: 244px; + height: 90px; + margin-bottom: 7px; +} +.resource-flow-layout.col-13 .resource-card-6x3 { + width: 244px; + height: 142px; +} +.resource-flow-layout.col-13 .resource-card-6x3x2 { + width: 244px; + height: 138px; + margin-bottom: 8px; +} +.resource-flow-layout.col-13 .resource-card-9x2 { + width: 373px; + height: 95px; +} +.resource-flow-layout.col-13 .resource-card-9x2x3 { + width: 373px; + height: 90px; + margin-bottom: 7px; +} +.resource-flow-layout.col-13 .resource-card-9x3 { + width: 373px; + height: 142px; +} +.resource-flow-layout.col-13 .resource-card-9x3x2 { + width: 373px; + height: 138px; + margin-bottom: 8px; +} +.resource-flow-layout.col-13 .resource-card-12x2 { + width: 502px; + height: 95px; +} +.resource-flow-layout.col-13 .resource-card-12x2x3 { + width: 502px; + height: 90px; + margin-bottom: 7px; +} +.resource-flow-layout.col-13 .resource-card-12x3 { + width: 502px; + height: 142px; +} +.resource-flow-layout.col-13 .resource-card-12x3x2 { + width: 502px; + height: 138px; + margin-bottom: 8px; +} +.resource-flow-layout.col-13 .resource-card-15x2 { + width: 631px; + height: 95px; +} +.resource-flow-layout.col-13 .resource-card-15x2x3 { + width: 631px; + height: 90px; + margin-bottom: 7px; +} +.resource-flow-layout.col-13 .resource-card-15x3 { + width: 631px; + height: 142px; +} +.resource-flow-layout.col-13 .resource-card-15x3x2 { + width: 631px; + height: 138px; + margin-bottom: 8px; +} +.resource-flow-layout.col-13 .resource-card-18x2 { + width: 760px; + height: 95px; +} +.resource-flow-layout.col-13 .resource-card-18x2x3 { + width: 760px; + height: 90px; + margin-bottom: 7px; +} +.resource-flow-layout.col-13 .resource-card-18x3 { + width: 760px; + height: 142px; +} +.resource-flow-layout.col-13 .resource-card-18x3x2 { + width: 760px; + height: 138px; + margin-bottom: 8px; +} + +/* + The following are styles for cards in the flowlayout above, styled by the number of rows they span +*/ +/* Single row items, might be simpler to just apply a class */ +.resource-card-3x6 > .card-bg, .resource-card-6x6 > .card-bg, .resource-card-9x6 > .card-bg, .resource-card-12x6 > .card-bg, .resource-card-15x6 > .card-bg, .resource-card-18x6 > .card-bg { + height: 192px; +} +.resource-card-3x6 > .card-info, .resource-card-6x6 > .card-info, .resource-card-9x6 > .card-info, .resource-card-12x6 > .card-info, .resource-card-15x6 > .card-info, .resource-card-18x6 > .card-info { + padding: 4px 12px 6px 12px; + top: 192px; +} +.resource-card-3x6 > .card-info .section, .resource-card-6x6 > .card-info .section, .resource-card-9x6 > .card-info .section, .resource-card-12x6 > .card-info .section, .resource-card-15x6 > .card-info .section, .resource-card-18x6 > .card-info .section { + font-size: 12px; + margin-bottom: 1px; +} +.resource-card-3x6 > .card-info .title, .resource-card-6x6 > .card-info .title, .resource-card-9x6 > .card-info .title, .resource-card-12x6 > .card-info .title, .resource-card-15x6 > .card-info .title, .resource-card-18x6 > .card-info .title { + font-size: 16px; + margin-bottom: -2px; +} +.resource-card-3x6 > .card-info .description, .resource-card-6x6 > .card-info .description, .resource-card-9x6 > .card-info .description, .resource-card-12x6 > .card-info .description, .resource-card-15x6 > .card-info .description, .resource-card-18x6 > .card-info .description { + font-size: 13px; + line-height: 15px; +} +.resource-card-3x6 > .card-info .description .text, .resource-card-6x6 > .card-info .description .text, .resource-card-9x6 > .card-info .description .text, .resource-card-12x6 > .card-info .description .text, .resource-card-15x6 > .card-info .description .text, .resource-card-18x6 > .card-info .description .text { + height: 30px; +} + +/* Double row items */ +.resource-card-3x12 > .card-bg, .resource-card-6x12 > .card-bg, .resource-card-9x12 > .card-bg, .resource-card-12x12 > .card-bg, .resource-card-15x12 > .card-bg, .resource-card-18x12 > .card-bg { + height: 320px; +} +.resource-card-3x12 > .card-info, .resource-card-6x12 > .card-info, .resource-card-9x12 > .card-info, .resource-card-12x12 > .card-info, .resource-card-15x12 > .card-info, .resource-card-18x12 > .card-info { + padding: 4px 12px 6px 12px; + top: 320px; +} +.resource-card-3x12 > .card-info .section, .resource-card-6x12 > .card-info .section, .resource-card-9x12 > .card-info .section, .resource-card-12x12 > .card-info .section, .resource-card-15x12 > .card-info .section, .resource-card-18x12 > .card-info .section { + font-size: 12px; + margin-bottom: 1px; +} +.resource-card-3x12 > .card-info .title, .resource-card-6x12 > .card-info .title, .resource-card-9x12 > .card-info .title, .resource-card-12x12 > .card-info .title, .resource-card-15x12 > .card-info .title, .resource-card-18x12 > .card-info .title { + font-size: 16px; + margin-bottom: -2px; + white-space: normal; +} +.resource-card-3x12 > .card-info .description, .resource-card-6x12 > .card-info .description, .resource-card-9x12 > .card-info .description, .resource-card-12x12 > .card-info .description, .resource-card-15x12 > .card-info .description, .resource-card-18x12 > .card-info .description { + font-size: 13px; + line-height: 15px; +} + +/* 1/3 row items */ +.resource-card-3x2 > .card-bg, .resource-card-6x2 > .card-bg, .resource-card-9x2 > .card-bg, .resource-card-12x2 > .card-bg, .resource-card-15x2 > .card-bg, .resource-card-18x2 > .card-bg { + left: 0; + top: 0; + width: 90px; + height: 100%; + position: absolute; + display: block; +} +.resource-card-3x2 > .card-info, .resource-card-6x2 > .card-info, .resource-card-9x2 > .card-info, .resource-card-12x2 > .card-info, .resource-card-15x2 > .card-info, .resource-card-18x2 > .card-info { + left: 90px; + padding: 4px 12px 4px 12px; + height: 80px; + overflow: hidden; +} +.resource-card-3x2 > .card-info .section, .resource-card-6x2 > .card-info .section, .resource-card-6x3 > .card-info .section, .resource-card-9x2 > .card-info .section, .resource-card-12x2 > .card-info .section, .resource-card-15x2 > .card-info .section, .resource-card-18x2 > .card-info .section { + font-size: 12px; + margin-bottom: 1px; + /* display: none; */ +} +.resource-card-3x2 > .card-info .title, .resource-card-6x2 > .card-info .title, .resource-card-9x2 > .card-info .title, .resource-card-12x2 > .card-info .title, .resource-card-15x2 > .card-info .title, .resource-card-18x2 > .card-info .title { + font-size: 16px; + margin-bottom: -2px; + white-space: normal; + overflow: visible; + text-overflow: ellipsis; +} +.resource-card-3x2 > .card-info .title:after, .resource-card-6x2 > .card-info .title:after, .resource-card-9x2 > .card-info .title:after, .resource-card-12x2 > .card-info .title:after, .resource-card-15x2 > .card-info .title:after, .resource-card-18x2 > .card-info .title:after { + /* content: url(../images/link-out.png); */ + display: block; +} +.resource-card-3x2 > .card-info .description, .resource-card-6x2 > .card-info .description, .resource-card-9x2 > .card-info .description, .resource-card-12x2 > .card-info .description, .resource-card-15x2 > .card-info .description, .resource-card-18x2 > .card-info .description { + display: none; +} + + +/* Override to show the description instead of the content section */ +.no-section .resource-card-3x2 > .card-info .section, +.no-section .resource-card-6x2 > .card-info .section { + display: none; +} +.no-section .resource-card-3x2 > .card-info .description, +.no-section .resource-card-6x2 > .card-info .description { + display: block; +} + +/* 1/2 row items */ +.resource-card-3x3 > .card-bg, .resource-card-6x3 > .card-bg, .resource-card-9x3 > .card-bg, .resource-card-12x3 > .card-bg, .resource-card-15x3 > .card-bg, .resource-card-18x3 > .card-bg { + left: 0; + top: 0; + width: 90px; + height: 100%; + position: absolute; + display: block; +} +.resource-card-3x3 > .card-info, .resource-card-6x3 > .card-info, .resource-card-9x3 > .card-info, .resource-card-12x3 > .card-info, .resource-card-15x3 > .card-info, .resource-card-18x3 > .card-info { + left: 90px; + padding: 4px 12px 0px 12px; +} +.resource-card-3x3 > .card-info .section, .resource-card-6x3 > .card-info .section, .resource-card-9x3 > .card-info .section, .resource-card-12x3 > .card-info .section, .resource-card-15x3 > .card-info .section, .resource-card-18x3 > .card-info .section { + font-size: 12px; + margin-bottom: 1px; + display: none; +} +.resource-card-3x3 > .card-info .title, .resource-card-6x3 > .card-info .title, .resource-card-9x3 > .card-info .title, .resource-card-12x3 > .card-info .title, .resource-card-15x3 > .card-info .title, .resource-card-18x3 > .card-info .title { + font-size: 16px; + margin-bottom: -2px; + white-space: normal; + overflow: visible; +} +.resource-card-3x3 > .card-info .description .text, .resource-card-6x3 > .card-info .description .text, .resource-card-9x3 > .card-info .description .text, .resource-card-12x3 > .card-info .description .text, .resource-card-15x3 > .card-info .description .text, .resource-card-18x3 > .card-info .description .text { + font-size: 12px; + line-height: 15px; + padding-right: 0px !important; + height: 80px; +} +.resource-card-3x3 > .card-info .description .util, .resource-card-6x3 > .card-info .description .util, .resource-card-9x3 > .card-info .description .util, .resource-card-12x3 > .card-info .description .util, .resource-card-15x3 > .card-info .description .util, .resource-card-18x3 > .card-info .description .util { + display: none; +} +/* placement of plusone */ +.resource-card-6x12 > .card-info .description .util, .resource-card-9x12 > .card-info .description .util, .resource-card-12x12 > .card-info .description .util, .resource-card-15x12 > .card-info .description .util { + bottom:2px; +} +.resource-card-18x12 > .card-info .description .util { + bottom:2px; +} +/* Overrides for col-16 6x6 cards linking to local content on landing pages. + Suppresses "section" and puts the title above a hairline rule. */ +.landing .card-info .section, .resource-flow-layout.col-16.landing .resource-card-9x6 .card-info .section { + display:none; +} +.landing .card-info .title { + color: #898989; + font-size: 17px; + line-height: 24px; + margin-bottom: 6px; + border-bottom: 1px solid #959595; + padding-bottom: 0px; +} +.landing .card-info .description { + font-size: 13px; + line-height: 15px; +} +.landing .card-info .description .text { +height:30px; +} +.landing .resource-card-6x6 > .card-info .description .util, .landing .resource-card-9x6 > .card-info .description .util { + bottom:2px; +} +/* + Generate a resource stack layout for a 3 column widget spanning 16 grid cols +*/ +.resource-stack-layout.col-16 { + margin: 0 -14px 0 0; + width: 954px; +} +.resource-stack-layout.col-16 .resource-card-stack { + margin: 0 14px 0 0; + width: 304px; +} + +/* Example of card menu tinting */ +.resource-widget[data-section=distribute\/tools] .section-card-menu +.card-bg:after { + background: rgba(126, 55, 148, 0.4) !important; +} +.resource-widget[data-section=distribute\/tools] .section-card-menu +.card-section-icon .icon { + background-color: #7e3794 !important; +} +.resource-widget[data-section=distribute\/tools] .section-card-menu +.card-info ul li { + border-top-color: #7e3794 !important; +} + +/* tinting for stacks */ + +div.jd-descr > .resource-widget[data-section=distribute\/tools] +.section-card-menu .card-info ul li { + border-top-color: #7e3794 !important; +} + + + +/** + * UTILITIES + */ + + +.border-box { + box-sizing: border-box; +} + +.vertical-center-outer { + display: table; + height: 100%; + width: 100%; +} + +.vertical-center-inner { + display: table-cell; + vertical-align: middle; +} + +/** + * TYPE STYLES + */ + +.landing-h1 { + font-weight: 100; + font-size: 60px; + line-height: 78px; + text-align: center; + letter-spacing: -1px; +} + +.landing-pre-h1 { + font-weight: 400; + font-size: 28px; + color: #93B73F; + line-height: 36px; + text-align: center; + letter-spacing: -1px; + text-transform: uppercase; + +} + +.landing-h1.hero { + text-align: left; +} + +.landing-h2 { + font-weight: 300; + font-size: 42px; + line-height: 64px; + text-align: center; +} + +.landing-subhead { + color: #999999; + font-size: 20px; + line-height: 28px; + font-weight:300; + text-align: center; +} +.landing-subhead.hero { + text-align: left; + color: white; +} + +.landing-hero-description { + text-align: left; + margin: 1em 0; +} + +.landing-hero-description p { + font-weight: 300; + margin: 0; + font-size: 18px; + line-height: 24px; +} + +.landing-body .landing-small { + font-size: 14px; + line-height: 19px; +} + +.landing-body.landing-align-center { + text-align: center; +} + +.landing-align-left { + text-align: left; +} + +/** + * LAYOUT + */ + +#body-content, +.fullpage, +#jd-content, +.jd-descr, +.landing-body-content { + height: 100%; +} + +.landing-section { + padding: 80px 10px 80px; + width: 100%; + margin-left: -10px; + text-rendering: optimizeLegibility; +} + +#extending-android-to-wearables { + padding-top: 30px; +} + +.landing-short-section { + padding: 40px 10px 28px; +} + +.landing-gray-background { + background-color: #e9e9e9; +} + +.landing-white-background { + background-color: white; +} + +.landing-red-background { + color: white; + background-color: hsl(8, 70%, 54%); +} + +.landing-subhead-red { + color: hsl(8, 71%, 84%); + text-align: left; +} + +.landing-subhead-red p { + margin-top: 20px; +} + +.landing-hero-container { + height: 100%; +} + + +.preview-hero { + height: calc(100% - 110px); + min-height: 504px; + margin-top: -5px; + padding-top: 0; + padding-bottom: 0; + background-image: url(../../preview/images/hero.jpg); + background-size: cover; + background-position: right center; + color: white; + position: relative; + overflow: hidden; +} + +.wear-hero { + height: calc(100% - 110px); + min-height: 504px; + margin-top: -5px; + padding-top: 0; + padding-bottom: 0; + background-image: url(../../wear/images/hero.jpg); + background-size: cover; + background-position: top center; + color: white; + position: relative; + overflow: hidden; +} + +.tv-hero { + height: calc(100% - 110px); + min-height: 504px; + margin-top: -5px; + padding-top: 0; + padding-bottom: 0; + background-image: url(../../tv/images/hero.jpg); + background-size: cover; + background-position: right center; + color: white; + position: relative; + overflow: hidden; +} + +.auto-hero { + height: calc(100% - 110px); + min-height: 504px; + margin-top: -5px; + padding-top: 0; + padding-bottom: 0; + background-image: url(../../auto/images/hero.jpg); + background-size: cover; + background-position: right center; + color: white; + position: relative; + overflow: hidden; +} + +.landing-hero-scrim { + background: black; + opacity: .2; + position: absolute; + width: 100%; + height: 100%; + margin-left: -10px; +} + +.landing-hero-wrap { + margin: 0 auto; + width: 940px; + clear: both; + height: 100%; + position: relative; +} + +.landing-section-header { + margin-bottom: 40px; +} + +.landing-hero-wrap .landing-section-header { + margin-bottom: 16px; +} + +.landing-body { + font-size: 18px; + line-height: 24px; +} + +.landing-button { + white-space: nowrap; + display: inline-block; + padding: 16px 32px; + font-size: 18px; + font-weight: 500; + line-height: 24px; + cursor: pointer; + color: white; + -webkit-user-select: none; + -moz-user-select: none; + -o-user-select: none; + user-select: none; + -webkit-transition: .2s background-color ease-in-out; + -moz-transition: .2s background-color ease-in-out; + -o-transition: .2s background-color ease-in-out; + transition: .2s background-color ease-in-out; +} + +.landing-primary { + background-color: hsl(8, 70%, 44%); + color: #f8f8f8; +} + +.landing-button.landing-primary:hover { + background-color: hsl(8, 70%, 36%); +} + +.landing-button.landing-primary:active { + background-color: hsl(8, 70%, 30%); +} + +.landing-button.landing-secondary { + background-color: #2faddb; +} + +.landing-button.landing-secondary:hover { + background-color: #09c; +} + +.landing-button.landing-secondary:active { + background-color: #3990ab; +} + +a.landing-button, +a.landing-button:hover, +a.landing-button:visited { + color: white !important; +} + +.landing-video-link { + white-space: nowrap; + display: inline-block; + padding: 16px 32px 16px 82px; + font-size: 18px; + font-weight: 400; + line-height: 24px; + cursor: pointer; + color: hsla(0, 0%, 100%, .8); + -webkit-user-select: none; + -moz-user-select: none; + -o-user-select: none; + user-select: none; + -webkit-transition: .2s color ease-in-out; + -moz-transition: .2s color ease-in-out; + -o-transition: .2s color ease-in-out; + transition: .2s color ease-in-out; +} + +.landing-video-link:before { + height: 64px; + width: 64px; + display: inline-block; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAFuklEQVR42u2dXWgcVRSAV9LWtBBTTZVWUhNqEQtq1QeroDRKFRFsROqTYPuo+JCiIoJKFC0USqlUfCiowRcfrBgVUUElefAPkW5T8aeaGn9aRbFsjP0x2cx8PuRMvFxmdjeb2Z17Z8+B85DsZPbO+eaec3/OPSkABdXsVI2gABSAqgJQAKoKQAGoKgAFoKoAFICqAlAAqgpAAai6DqDRAiwDeoFtwB7gPaAInABKwKToCWAMeB/YDdwJrAWWNLh9+QMAXABsBQ4A3wFTwAxQBmaBAAhjNJDPy3L938BXwAvArUCHAkh+kCXAVcA+YBw4bRg7MngtkgTlDPA98CywHmhTAP8/xCbgVeAvMZZpwDQllN7xB/AysKGlAQAXAvuBkzW85UVgCBgENlfQQbmuWAXELPAnsAvoaikAQBtwh/j3coLhS2LIfqCzzu/plL8fkvvFgZiR4L2lHrfkHQBgpQTFUwmGnwC212v0KjC2y/3jQPwDPA+05xYAcBHwubx1YZzhC02QBBBRbxgBzssdAOBy4JgRZE0ZTPuNr7FHDCbEhqNAd24AAN0yUbID7QSwsZChABut3hANXY8Bq70HIMb/Ocb4w81+66v0hmGrN0QQ1ngLQJYRvpWHMWWo4KDIaMnuCcVKgdlZAGL8t2J8vpPGrwChDLyWBMFlAA8D0z4ZvwKEs8D93gCQEc9Jy/jFgkdizaRDGUSs8wXAu1bQLQE9ngHosWbPAXDQeQAypT9rBd3+gociyxi2K9riLABZUj5iuZ6RgsciM2OzFxw2A7JrAO6VwGtKTwpG+Anoy9AVmb3gDHCPcwCAFcChRox6jPu9CazMeFQUAKNRL3AJwE2yopjq228BQPZ/d2bcCyaBTa4BeNGa8Q6naIA4GQWubiKEYWvBbp8zAGQt5VfL/fQ3GEAkTzXDLVkjokA2k5a7AuA2GaLNj/tTfvhq0pQgbcwLQtlQusYVALtlzSR191MjADNI9zbJDZWBR10BMGr5/4GMADQ0SAMDlht62xUAxy0AmzMEEMnhtIO0ZF2YAH5wITd0hQw/5wE04M1bjDyXZpC2hqMlYGnWAHqBf40APOEYgChI35VSWyasWfGqrAH0WVkOIw4CSC1IG2tDoSy7XJE1gPs8ArDoIG0BmJGk30wBDHgGYFFBOgbAtqwB7GxxAHerC8rOBU0Dt2gQzjYIb8gawDor+6HVhqFdrkzEwhabiAVOTMSkUb+06FLEUVfWgj5q0cW4g64AeNo66ZLlcnTDNmesBN4y8KArAG6QU42ttCEzBVzpCoAO4EfLDeV5SzIEvgHaXdqUP2BlQud1Ux55zj2uZUX02cPRnKalRLmu17qYmPWF5YbymJgVAh8Ay5wCII3ZEZOYm6fURGT2u9X43Mnk3CDHybmfmRVYXExPv9nKEcpLejqSC3SjdY2TBzTesHqB7wc0onTEV2KucxLApXKkJy9HlAI5anuJFwCkYQ/EuCJfD+mdBnYkXOssgHY53un7MdVZ4CVgqVcADAhjMafkfTioHc14P04yvvMApIEXy5F/+7S8y6UKolPyR4BVVf7Wi2IdawwIPhTrmAW+rmZ8bwBIQ7vloXwoVzNWS6UUrwAYy9YfOlqwKZDkgneA5Qu4l3cly84F9sqGhislywLmaozuYoGFXr0DII1ukxP1hxJ6QzR7HqLxRfumZaRzXZ3f4XXZyi7gCeB3kqsnzs+kSb9s5XHgMeD8RTxDLgq3rmeuYuFvNYCoR8wqujNi+L3UWBcu9wAMt3QZ8LiMlk5RuU50teq6kcEDgTolveIRYHUQBOek1O5cFu/ukLz7/ZJgNSm+OirebWpgaPS7slxfAr4EngGuX8jopqUBxGzyrAVuB54EXgc+lV4yLhO8cfn5E+ZqUD8kBu9sQvv0Hzj4rmoEBaAAVBWAAlBVAApAVQEoAFUFoABUFYACUFUACkC1CfofXVRJocowZVYAAAAASUVORK5CYII=); + background-size: contain; + position: absolute; + content: ""; + opacity: .7; + margin-top: -19px; + margin-left: -64px; + -webkit-transition: .2s opacity ease-in-out; + -moz-transition: .2s opacity ease-in-out; + -o-transition: .2s opacity ease-in-out; + transition: .2s opacity ease-in-out; +} + +.landing-video-link:hover { + color: hsla(0, 0%, 100%, 1); +} + +.landing-video-link:hover:before { + opacity: 1; +} + +.landing-social-image { + float: left; + margin-right: 14px; + height: 64px; + width: 64px; +} + +.landing-social-copy { + padding-left: 78px; +} + +.landing-scroll-down-affordance { + position: absolute; + bottom: 0; + width: 100%; + text-align: center; + z-index: 10; +} + +.landing-down-arrow { + padding: 24px; + display: inline-block; + opacity: .5; + -webkit-transition: .2s opacity ease-in-out; + -moz-transition: .2s opacity ease-in-out; + -o-transition: .2s opacity ease-in-out; + transition: .2s opacity ease-in-out; + + -webkit-animation-name: pulse-opacity; + -webkit-animation-duration: 4s; +} + +.landing-down-arrow:hover { + opacity: 1; +} + +.landing-down-arrow img { + height: 28px; + width: 28px; + margin: 0 auto; + display: block; +} + +.landing-divider { + display: inline-block; + height: 2px; + background-color: white; + position: relative; + margin: 10px 0; +} + +/* 3 CLOLUMN LAYOUT */ + +.landing-breakout { + margin-top: 40px; + margin-bottom: 40px; +} + +.landing-breakout img { + margin-bottom: 20px; +} + +.landing-partners img { + margin-bottom: 20px; +} + +.landing-breakout p { + padding: 0 23px; +} + +.landing-breakout.landing-partners img { + margin-bottom: 20px; +} + +.col-3-wide { + display: inline; + float: left; + margin-left: 10px; + margin-right: 10px; +} + +.col-3-wide { + width: 302px; +} + +/** + * ANIMATION + */ + +@-webkit-keyframes pulse-opacity { + 0% { + opacity: .5; + } + 20% { + opacity: .5; + } + 40% { + opacity: 1; + } + 60% { + opacity: .5; + } + 80% { + opacity: 1; + } + 100% { + opacity: .5; + } +} + + + +/** + * VIDEO + */ + +#video-container { + display:none; + position:fixed; + top:0; + left:-10px; + width:102%; + height:100%; + background-color:rgba(0,0,0,0.7); + z-index:99; +} + +#video-frame { + width:940px; + height:526.4px; + margin:80px auto 0; + display:none; +} + +.video-close { +cursor: pointer; +position: relative; +left: 940px; +top: 0; +pointer-events: all; +} + +#icon-video-close { +background-image: url("../images/close.png"); +background-position: 0 0; +height: 36px; +width: 36px; +display:block; +} + + + + +/****************** +Styles for d.a.c/index: +*******************/ + + + +/* Generic full screen carousel styling to be used across pages. */ +.fullscreen-carousel { + margin: 0 -10px; + width: 100%; + overflow: hidden; + position: relative; +} + +.fullscreen-carousel-content { + width: 100%; + height: 100%; + position: relative; + display: table; /* For vertical centering */ +} + +.fullscreen-carousel .vcenter { + display: table-cell; + vertical-align: middle; + position: relative; +} + +.fullscreen-carousel .vcenter > div { + margin: 10px auto; +} + +/* Styles for the full-bleed hero image type. */ +.fullscreen-carousel .hero, .fullscreen-carousel .hero h1 { + color: #fff; +} + +.fullscreen-carousel .hero h1 { + font-weight: 300; + font-size: 60px; + line-height: 68px; + letter-spacing: -1px; + margin-top: 0; +} + +.fullscreen-carousel .hero p { + font-weight: 300; + font-size: 18px; + line-height: 24px; + -webkit-font-smoothing: antialiased; +} + +.fullscreen-carousel .hero .hero-bg { + background-size: cover; + width: 100%; + height: 100%; + position: absolute; + left: 0px; + top: 0px; +} + + +/* Full screen carousel styling for the resource flow layout type of content */ +.fullscreen-carousel .resource-flow-layout:after { + height: 0; /* Dont know why this is set at 10 in default.css */ +} + +.fullscreen-carousel .resource-flow-layout { + margin-bottom: 20px; +} + + + +/* Generic Tab carousel styling to be used across multiple pages. */ + +.tab-carousel .tab-nav { + list-style: none; + position: relative; + text-align: center; +} + +.tab-carousel .tab-nav li { + display: inline-block; + font-size: 22px; + font-weight: 400; + line-height: 50px; + list-style: none; + margin: 0; + padding: 0 25px; + position: relative; +} + +.tab-carousel .tab-nav li a, +.tab-carousel .tab-nav li a:hover { + color: #333 !important; + padding: 10px 10px 13px 10px; + position: relative; + z-index: 1000; +} + +.tab-carousel .tab-nav li:after { + background: #ddd; + bottom: 0; + content: ''; + height: 4px; + left: 0; + position: absolute; + width: 100%; + z-index: 0; +} + +.tab-carousel .tab-nav .highlight { + position: absolute; + height: 4px; + width: 100px; + bottom: 0; + background: #33b5e5; +} + +.tab-carousel .tab-carousel-content { + position: relative; + overflow: hidden; + white-space: nowrap; +} + +.tab-carousel .tab-carousel-content [data-tab] { + display: inline-block; + white-space: normal; +} + + + +/* + Resource styling for the tab carousel. The tab carousel contains either + a 3 column layout of resources or a single full-width resource. The + latter has the 18x12 class applied to it and can be styled differently + that way. +*/ + +.tab-carousel .resource .image { + width: 100%; + height: 250px; + background-repeat: no-repeat; + background-size: contain; + background-position: 50% 50%; +} + +.tab-carousel .resource .info .title { + font-size: 18px; + line-height: 24px; +} + +.tab-carousel .resource .info .summary, +.tab-carousel .resource .info .cta { + line-height: 24px; + font-size: 16px; +} + +.tab-carousel .resource-card-18x12 { + position: relative; + padding-left: 450px; + box-sizing: border-box; + display: table-cell; + vertical-align: middle; +} + +.tab-carousel .resource-card-18x12 .image { + position: absolute; + width: 420px; + height: 100%; + left: 0; + top: 0; +} + +.tab-carousel .resource-card-18x12 .info { + display: inline-block; +} + +.tab-carousel .resource-card-18x12 .info .title { + margin-bottom: 26px; +} + + + + + +/* + Styles for the entity link used in the actions bar and in the cta of + the resources that appear in the tab carousel. +*/ +.actions-bar a:after, +.resource .cta:after { + content: '›'; + font-weight: 400; + font-size: 22px; + left: 5px; + line-height: 1; + position: relative; + top: 1px; + transition: left 190ms ease-out; +} + +.actions-bar a:hover:after, +.resource .cta:hover:after { + left: 10px; +} + + + + +/* + Styles for the actions bar. +*/ +.actions-bar { + background: #9acd00; + margin: 0 -10px; + text-align: center; +} + +.actions-bar .actions { + padding: 30px 0 30px; + text-align: justify; + font-size: 0.1px; + line-height: 0.1px; + margin: 0 10px 0 0; +} + +.actions-bar .actions:after { + content: ''; + width: 100%; + display: inline-block; +} + +.actions-bar .actions > div { + display: inline-block; +} + +.actions-bar a { + font-size: 21px; + line-height: 27px; + color: #fff; + font-weight: 300; + -webkit-font-smoothing: antialiased; +} + +.actions-bar a:after { + top: 0px; + font-size: 22px; +} + +.actions-bar a:hover { + color: #fff !important; +} + + + + + +/* + Specific styles for new home page layout of the carousels. +*/ + +/* Big blue button */ +a.home-new-cta-btn, +.home-new-carousel-1 .resource-card-18x6 .cta { + white-space: nowrap; + display: inline-block; + padding: 14px 32px; + font-size: 18px; + font-weight: 500; + line-height: 24px; + cursor: pointer; + background: #33b5e6; + border-radius: 4px; + margin-top: 20px; + color: #fff; + transition: 0.2s background-color ease-in-out; +} + +.home-new-carousel-1 .resource-card-18x6 .cta:after { + display: none; /* Hide the entity for this button */ +} + +a.home-new-cta-btn:hover, +.home-new-carousel-1 .resource-card-18x6 .cta:hover { + color: #fff !important; + background: #2d9fca; +} + +.home-new-carousel-1 .resource-card-18x6 .cta { + position: absolute; + bottom: 20px; + left: 16px; +} + +/* Fullscreen carousel. */ +.home-new-carousel-1 { + max-height: 700px; /* Set max height so doesn't get too long */ +} + +.home-new-carousel-1 .fullscreen-carousel-content { + min-height: 450px; /* Set min height for all content */ +} + +.home-new-carousel-1 .hero { + background: #000; +} + +.home-new-carousel-1 .hero-bg { + background-image: url(/home-new/images/hero.jpg); + background-position: right center; + opacity: 0.85; +} + +/* + Styling for special top card of full screen layout resource layout. + We need to specifically style the 18x6 card to adjust its size and layout, + since it's not a standard card, not sure if this is unique to the home page + layout or should be namespaced within the fullscreen-carousel container. +*/ +.home-new-carousel-1 .resource-flow-layout.col-16 .resource-card-18x6 { + height: 320px; + background-color:#F9F9F9; + border-radius: 0px; + box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); + +} + +.home-new-carousel-1 .resource-card-18x6 .card-bg { + width: 636px; + height: 100%; +} + +.home-new-carousel-1 .resource-card-18x6 .card-info { + right: 0px; + left: 636px; + height: 100%; + top: 0px; + padding: 15px 22px; +} + +.home-new-carousel-1 .resource-card-18x6 .card-info .util { + display: none; +} + +.home-new-carousel-1 .resource-card-18x6 .card-info .title { + font-size: 20px; + font-weight: 500; + margin-top: 15px; + margin-bottom: 15px; +} + +.home-new-carousel-1 .resource-card-18x6 .card-info .text { + font-size: 15px; + line-height: 21px; +} + + +/* Tabbed carousel. */ +.home-new-carousel-2 { + margin: 35px auto 100px auto; +} + +.home-new-carousel-2 h1 { + font-size: 47px; + font-weight: 100; + line-height: 54px; + text-align: center; +} diff --git a/tools/droiddoc/templates-sdk/assets/css/fullscreen.css b/tools/droiddoc/templates-sdk/assets/css/fullscreen.css index 71cf65b..7912e34 100644 --- a/tools/droiddoc/templates-sdk/assets/css/fullscreen.css +++ b/tools/droiddoc/templates-sdk/assets/css/fullscreen.css @@ -170,7 +170,7 @@ body { max-width: 100%; } -#nav-x .wrap, +#header-wrapper #nav-x div.wrap, #searchResults.wrap { max-width:100%; } @@ -184,9 +184,17 @@ body { left:20px; /* !important ... for IE i think */ } +#sticky-header { + padding: 0 20px; +} +#sticky-header > div { + width: 100%; +} - +.sticky-menu { + width:100%; + left:-20px; } .col-right { diff --git a/tools/droiddoc/templates-sdk/assets/images/android.png b/tools/droiddoc/templates-sdk/assets/images/android.png Binary files differnew file mode 100644 index 0000000..4040f3f --- /dev/null +++ b/tools/droiddoc/templates-sdk/assets/images/android.png diff --git a/tools/droiddoc/templates-sdk/assets/images/breadcrumb.png b/tools/droiddoc/templates-sdk/assets/images/breadcrumb.png Binary files differnew file mode 100644 index 0000000..407a318 --- /dev/null +++ b/tools/droiddoc/templates-sdk/assets/images/breadcrumb.png diff --git a/tools/droiddoc/templates-sdk/assets/images/dac_logo@2x.png b/tools/droiddoc/templates-sdk/assets/images/dac_logo@2x.png Binary files differnew file mode 100644 index 0000000..0f2784d --- /dev/null +++ b/tools/droiddoc/templates-sdk/assets/images/dac_logo@2x.png diff --git a/tools/droiddoc/templates-sdk/assets/images/link-out.png b/tools/droiddoc/templates-sdk/assets/images/link-out.png Binary files differnew file mode 100644 index 0000000..aa55f9a --- /dev/null +++ b/tools/droiddoc/templates-sdk/assets/images/link-out.png diff --git a/tools/droiddoc/templates-sdk/assets/images/preview.png b/tools/droiddoc/templates-sdk/assets/images/preview.png Binary files differnew file mode 100644 index 0000000..e5856db --- /dev/null +++ b/tools/droiddoc/templates-sdk/assets/images/preview.png diff --git a/tools/droiddoc/templates-sdk/assets/images/resource-card-default-android.jpg b/tools/droiddoc/templates-sdk/assets/images/resource-card-default-android.jpg Binary files differnew file mode 100644 index 0000000..8050744 --- /dev/null +++ b/tools/droiddoc/templates-sdk/assets/images/resource-card-default-android.jpg diff --git a/tools/droiddoc/templates-sdk/assets/images/stack-arrow-right.png b/tools/droiddoc/templates-sdk/assets/images/stack-arrow-right.png Binary files differnew file mode 100644 index 0000000..46d6a50 --- /dev/null +++ b/tools/droiddoc/templates-sdk/assets/images/stack-arrow-right.png diff --git a/tools/droiddoc/templates-sdk/assets/images/styles/device_wear_square.png b/tools/droiddoc/templates-sdk/assets/images/styles/device_wear_square.png Binary files differnew file mode 100644 index 0000000..077a7e6 --- /dev/null +++ b/tools/droiddoc/templates-sdk/assets/images/styles/device_wear_square.png diff --git a/tools/droiddoc/templates-sdk/assets/images/styles/device_wear_square_small.png b/tools/droiddoc/templates-sdk/assets/images/styles/device_wear_square_small.png Binary files differnew file mode 100644 index 0000000..e7e1540 --- /dev/null +++ b/tools/droiddoc/templates-sdk/assets/images/styles/device_wear_square_small.png diff --git a/tools/droiddoc/templates-sdk/assets/js/docs.js b/tools/droiddoc/templates-sdk/assets/js/docs.js index 6630bf9..f03fb88 100644 --- a/tools/droiddoc/templates-sdk/assets/js/docs.js +++ b/tools/droiddoc/templates-sdk/assets/js/docs.js @@ -19,7 +19,6 @@ $.ajaxSetup({ /****** ON LOAD SET UP STUFF *********/ -var navBarIsFixed = false; $(document).ready(function() { // load json file for JD doc search suggestions @@ -64,7 +63,12 @@ $(document).ready(function() { $('.scroll-pane').jScrollPane( {verticalGutter:0} ); // add HRs below all H2s (except for a few other h2 variants) - $('h2').not('#qv h2').not('#tb h2').not('.sidebox h2').not('#devdoc-nav h2').not('h2.norule').css({marginBottom:0}).after('<hr/>'); + $('h2').not('#qv h2') + .not('#tb h2') + .not('.sidebox h2') + .not('#devdoc-nav h2') + .not('h2.norule').css({marginBottom:0}) + .after('<hr/>'); // set up the search close button $('.search .close').click(function() { @@ -167,10 +171,24 @@ $(document).ready(function() { // highlight Design tab if ($("body").hasClass("design")) { $("#header li.design a").addClass("selected"); + $("#sticky-header").addClass("design"); + // highlight About tabs + } else if ($("body").hasClass("about")) { + var rootDir = pagePathOriginal.substring(1,pagePathOriginal.indexOf('/', 1)); + if (rootDir == "about") { + $("#nav-x li.about a").addClass("selected"); + } else if (rootDir == "wear") { + $("#nav-x li.wear a").addClass("selected"); + } else if (rootDir == "tv") { + $("#nav-x li.tv a").addClass("selected"); + } else if (rootDir == "auto") { + $("#nav-x li.auto a").addClass("selected"); + } // highlight Develop tab } else if ($("body").hasClass("develop") || $("body").hasClass("google")) { $("#header li.develop a").addClass("selected"); + $("#sticky-header").addClass("develop"); // In Develop docs, also highlight appropriate sub-tab var rootDir = pagePathOriginal.substring(1,pagePathOriginal.indexOf('/', 1)); if (rootDir == "training") { @@ -195,12 +213,34 @@ $(document).ready(function() { // highlight Distribute tab } else if ($("body").hasClass("distribute")) { $("#header li.distribute a").addClass("selected"); + $("#sticky-header").addClass("distribute"); + + var baseFrag = pagePathOriginal.indexOf('/', 1) + 1; + var secondFrag = pagePathOriginal.substring(baseFrag, pagePathOriginal.indexOf('/', baseFrag)); + if (secondFrag == "users") { + $("#nav-x li.users a").addClass("selected"); + } else if (secondFrag == "engage") { + $("#nav-x li.engage a").addClass("selected"); + } else if (secondFrag == "monetize") { + $("#nav-x li.monetize a").addClass("selected"); + } else if (secondFrag == "tools") { + $("#nav-x li.disttools a").addClass("selected"); + } else if (secondFrag == "stories") { + $("#nav-x li.stories a").addClass("selected"); + } else if (secondFrag == "essentials") { + $("#nav-x li.essentials a").addClass("selected"); + } else if (secondFrag == "googleplay") { + $("#nav-x li.googleplay a").addClass("selected"); + } + } else if ($("body").hasClass("about")) { + $("#sticky-header").addClass("about"); } // set global variable so we can highlight the sidenav a bit later (such as for google reference) // and highlight the sidenav mPagePath = pagePath; highlightSidenav(); + buildBreadcrumbs(); // set up prev/next links if they exist var $selNavLink = $('#nav').find('a[href="' + pagePath + '"]'); @@ -215,7 +255,7 @@ $(document).ready(function() { var crossBoundaries = ($("body.design").length > 0) || ($("body.guide").length > 0) ? true : false; // navigate across topic boundaries only in design docs if ($prevListItem.length) { - if ($prevListItem.hasClass('nav-section')) { + if ($prevListItem.hasClass('nav-section') || crossBoundaries) { // jump to last topic of previous section $prevLink = $prevListItem.find('a:last'); } else if (!$selListItem.hasClass('nav-section')) { @@ -238,7 +278,6 @@ false; // navigate across topic boundaries only in design docs // set up next links var $nextLink = []; var startClass = false; - var training = $(".next-class-link").length; // decides whether to provide "next class" link var isCrossingBoundary = false; if ($selListItem.hasClass('nav-section') && $selListItem.children('div.empty').length == 0) { @@ -265,13 +304,15 @@ false; // navigate across topic boundaries only in design docs if ($nextLink.length == 0) { isCrossingBoundary = true; // no more topics in this section, jump to the first topic in the next section - $nextLink = $selListItem.parents('li:eq(0)').next('li.nav-section').find('a:eq(0)'); + $nextLink = $selListItem.parents('li:eq(0)').next('li').find('a:eq(0)'); if (!$nextLink.length) { // Go up another layer to look for next page (lesson > class > course) $nextLink = $selListItem.parents('li:eq(1)').next('li.nav-section').find('a:eq(0)'); if ($nextLink.length == 0) { // if that doesn't work, we're at the end of the list, so disable NEXT link $('.next-page-link').attr('href','').addClass("disabled") .click(function() { return false; }); + // and completely hide the one in the footer + $('.content-footer .next-page-link').hide(); } } } @@ -290,13 +331,19 @@ false; // navigate across topic boundaries only in design docs $('.next-page-link').attr('href','') .removeClass("hide").addClass("disabled") .click(function() { return false; }); + // and completely hide the one in the footer + $('.content-footer .next-page-link').hide(); if ($nextLink.length) { $('.next-class-link').attr('href',$nextLink.attr('href')) - .removeClass("hide").append($nextLink.html()); + .removeClass("hide") + .append(": " + $nextLink.html()); $('.next-class-link').find('.new').empty(); } } else { - $('.next-page-link').attr('href', $nextLink.attr('href')).removeClass("hide"); + $('.next-page-link').attr('href', $nextLink.attr('href')) + .removeClass("hide"); + // for the footer link, also add the next page title + $('.content-footer .next-page-link').append(": " + $nextLink.html()); } if (!startClass && $prevLink.length) { @@ -308,14 +355,6 @@ false; // navigate across topic boundaries only in design docs } } - // If this is a training 'article', there should be no prev/next nav - // ... if the grandparent is the "nav" ... and it has no child list items... - if (training && $selListItem.parents('ul').eq(1).is('[id="nav"]') && - !$selListItem.find('li').length) { - $('.next-page-link,.prev-page-link').attr('href','').addClass("disabled") - .click(function() { return false; }); - } - } @@ -323,7 +362,20 @@ false; // navigate across topic boundaries only in design docs // Set up the course landing pages for Training with class names and descriptions if ($('body.trainingcourse').length) { var $classLinks = $selListItem.find('ul li a').not('#nav .nav-section .nav-section ul a'); - var $classDescriptions = $classLinks.attr('description'); + + // create an array for all the class descriptions + var $classDescriptions = new Array($classLinks.length); + var lang = getLangPref(); + $classLinks.each(function(index) { + var langDescr = $(this).attr(lang + "-description"); + if (typeof langDescr !== 'undefined' && langDescr !== false) { + // if there's a class description in the selected language, use that + $classDescriptions[index] = langDescr; + } else { + // otherwise, use the default english description + $classDescriptions[index] = $(this).attr("description"); + } + }); var $olClasses = $('<ol class="class-list"></ol>'); var $liClass; @@ -335,7 +387,7 @@ false; // navigate across topic boundaries only in design docs $classLinks.each(function(index) { $liClass = $('<li></li>'); $h2Title = $('<a class="title" href="'+$(this).attr('href')+'"><h2>' + $(this).html()+'</h2><span></span></a>'); - $pSummary = $('<p class="description">' + $(this).attr('description') + '</p>'); + $pSummary = $('<p class="description">' + $classDescriptions[index] + '</p>'); $olLessons = $('<ol class="lesson-list"></ol>'); @@ -374,7 +426,7 @@ false; // navigate across topic boundaries only in design docs var stylesheet = $('link[rel="stylesheet"][class="fullscreen"]'); setNavBarLeftPos(); // do this even if sidenav isn't fixed because it could become fixed // make sidenav behave when resizing the window and side-scolling is a concern - if (navBarIsFixed) { + if (sticky) { if ((stylesheet.attr("disabled") == "disabled") || stylesheet.length == 0) { updateSideNavPosition(); } else { @@ -385,70 +437,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(); @@ -522,7 +510,11 @@ false; // navigate across topic boundaries only in design docs } } + // Resize once loading is finished resizeNav(); + // Check if there's an anchor that we need to scroll into view. + // A delay is needed, because some browsers do not immediately scroll down to the anchor + window.setTimeout(offsetScrollForSticky, 100); /* init the language selector based on user cookie for lang */ loadLangPref(); @@ -593,6 +585,28 @@ 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($("<li>").append($selectedSecondNav)) + } + // Add the primary horizontal nav + var $selectedFirstNav = $("div#header-wrap ul.nav-x a.selected").clone().removeClass("selected"); + // If there's no header nav item, use the logo link and title from alt text + if ($selectedFirstNav.length < 1) { + $selectedFirstNav = $("<a>") + .attr('href', $("div#header .logo a").attr('href')) + .text($("div#header .logo img").attr('alt')); + } + $breadcrumbUl.prepend($("<li>").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) @@ -705,9 +719,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. @@ -717,7 +730,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; @@ -903,9 +916,111 @@ function writeCookie(cookie, val, section, expiration) { /* ######### END COOKIES! ########## */ +var sticky = false; +var stickyTop; +var prevScrollLeft = 0; // used to compare current position to previous position of horiz scroll +/* Sets the vertical scoll position at which the sticky bar should appear. + This method is called to reset the position when search results appear or hide */ +function setStickyTop() { + stickyTop = $('#header-wrapper').outerHeight() - $('#sticky-header').outerHeight(); +} + +/* + * Displays sticky nav bar on pages when dac header scrolls out of view + */ +$(window).scroll(function(event) { + + setStickyTop(); + var hiding = false; + var $stickyEl = $('#sticky-header'); + var $menuEl = $('.menu-container'); + // 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; + } + // Account for horizontal scroll + var scrollLeft = $(window).scrollLeft(); + // When the sidenav is fixed and user scrolls horizontally, reposition the sidenav to match + if (sticky && (scrollLeft != prevScrollLeft)) { + updateSideNavPosition(); + prevScrollLeft = scrollLeft; + } + + // Don't continue if the header is sufficently far away + // (to avoid intensive resizing that slows scrolling) + if (sticky == shouldBeSticky) { + return; + } + // If sticky header visible and position is now near top, hide sticky + if (sticky && !shouldBeSticky) { + sticky = false; + hiding = true; + // 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.fadeIn(10); + $menuEl.addClass('sticky-menu'); + + // 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(); + hiding = false; + } + resizeNav(250); // pass true in order to delay the scrollbar re-initialization for performance +}); +/* + * Manages secion card states and nav resize to conclude loading + */ +(function() { + $(document).ready(function() { + // Stack hover states + $('.section-card-menu').each(function(index, el) { + var height = $(el).height(); + $(el).css({height:height+'px', position:'relative'}); + var $cardInfo = $(el).find('.card-info'); + + $cardInfo.css({position: 'absolute', bottom:'0px', left:'0px', right:'0px', overflow:'visible'}); + }); + + }); + +})(); @@ -972,8 +1087,16 @@ function hideNestedItems(list, toggle) { } +/* Call this to add listeners to a <select> element for Studio/Eclipse/Other docs */ +function setupIdeDocToggle() { + $( "select.ide" ).change(function() { + var selected = $(this).find("option:selected").attr("value"); + $(".select-ide").hide(); + $(".select-ide."+selected).show(); - + $("select.ide").val(selected); + }); +} @@ -1724,6 +1847,7 @@ function search_changed(e, kd, toroot) $('.suggest-card').hide(); if ($("#searchResults").is(":hidden") && (search.value != "")) { // if results aren't showing (and text not empty), return true to allow search to execute + $('body,html').animate({scrollTop:0}, '500', 'swing'); return true; } else { // otherwise, results are already showing, so allow ajax to auto refresh the results @@ -1736,8 +1860,12 @@ function search_changed(e, kd, toroot) return false; } } - // Stop here if Google results are showing + // If Google results are showing, return true to allow ajax search to execute else if ($("#searchResults").is(":visible")) { + // Also, if search_results is scrolled out of view, scroll to top to make results visible + if ((sticky ) && (search.value != "")) { + $('body,html').animate({scrollTop:0}, '500', 'swing'); + } return true; } // 38 UP ARROW @@ -2278,13 +2406,13 @@ function submit_search() { var query = document.getElementById('search_autocomplete').value; location.hash = 'q=' + query; loadSearchResults(); - $("#searchResults").slideDown('slow'); + $("#searchResults").slideDown('slow', setStickyTop); return false; } function hideResults() { - $("#searchResults").slideUp(); + $("#searchResults").slideUp('fast', setStickyTop); $(".search .close").addClass("hide"); location.hash = ''; @@ -2401,27 +2529,47 @@ google.setOnLoadCallback(function(){ return; } else { // first time loading search results for this page - $('#searchResults').slideDown('slow'); + $('#searchResults').slideDown('slow', setStickyTop); $(".search .close").removeClass("hide"); loadSearchResults(); } }, true); +/* Adjust the scroll position to account for sticky header, only if the hash matches an id */ +function offsetScrollForSticky() { + var hash = escape(location.hash.substr(1)); + var $matchingElement = $("#"+hash); + // If there's no element with the hash as an ID, then look for an <a name=''> with it. + if ($matchingElement.length < 1) { + $matchingElement = $('a[name="' + hash + '"]'); + } + // Sanity check that there's an element with that ID on the page + if ($matchingElement.length) { + // If the position of the target element is near the top of the page (<20px, where we expect it + // to be because we need to move it down 60px to become in view), then move it down 60px + if (Math.abs($matchingElement.offset().top - $(window).scrollTop()) < 20) { + $(window).scrollTop($(window).scrollTop() - 60); + } + } +} + // when an event on the browser history occurs (back, forward, load) requery hash and do search $(window).hashchange( function(){ - // Exit if the hash isn't a search query or there's an error in the query + // If the hash isn't a search query or there's an error in the query, + // then adjust the scroll position to account for sticky header, then exit. if ((location.hash.indexOf("q=") == -1) || (query == "undefined")) { // If the results pane is open, close it. if (!$("#searchResults").is(":hidden")) { hideResults(); } + offsetScrollForSticky(); return; } // Otherwise, we have a search to do var query = decodeURI(getQuery(location.hash)); searchControl.execute(query); - $('#searchResults').slideDown('slow'); + $('#searchResults').slideDown('slow', setStickyTop); $("#search_autocomplete").focus(); $(".search .close").removeClass("hide"); @@ -2529,7 +2677,7 @@ var maxLevel = 1; } function updateSidenavFixedWidth() { - if (!navBarIsFixed) return; + if (!sticky) return; $('#devdoc-nav').css({ 'width' : $('#side-nav').css('width'), 'margin' : $('#side-nav').css('margin') @@ -2540,7 +2688,7 @@ function updateSidenavFixedWidth() { } function updateSidenavFullscreenWidth() { - if (!navBarIsFixed) return; + if (!sticky) return; $('#devdoc-nav').css({ 'width' : $('#side-nav').css('width'), 'margin' : $('#side-nav').css('margin') @@ -3233,3 +3381,836 @@ function showSamples() { $("#samples").append($ul); } + + + +/* ########################################################## */ +/* ################### RESOURCE CARDS ##################### */ +/* ########################################################## */ + +/** Handle resource queries, collections, and grids (sections). Requires + jd_tag_helpers.js and the *_unified_data.js to be loaded. */ + +(function() { + // Prevent the same resource from being loaded more than once per page. + var addedPageResources = {}; + + $(document).ready(function() { + $('.resource-widget').each(function() { + initResourceWidget(this); + }); + + /* Pass the line height to ellipsisfade() to adjust the height of the + text container to show the max number of lines possible, without + showing lines that are cut off. This works with the css ellipsis + classes to fade last text line and apply an ellipsis char. */ + + //card text currently uses 15px line height. + var lineHeight = 15; + $('.card-info .text').ellipsisfade(lineHeight); + }); + + /* + Three types of resource layouts: + Flow - Uses a fixed row-height flow using float left style. + Carousel - Single card slideshow all same dimension absolute. + Stack - Uses fixed columns and flexible element height. + */ + function initResourceWidget(widget) { + var $widget = $(widget); + var isFlow = $widget.hasClass('resource-flow-layout'), + isCarousel = $widget.hasClass('resource-carousel-layout'), + isStack = $widget.hasClass('resource-stack-layout'); + + // find size of widget by pulling out its class name + var sizeCols = 1; + var m = $widget.get(0).className.match(/\bcol-(\d+)\b/); + if (m) { + sizeCols = parseInt(m[1], 10); + } + + var opts = { + cardSizes: ($widget.data('cardsizes') || '').split(','), + maxResults: parseInt($widget.data('maxresults') || '100', 10), + itemsPerPage: $widget.data('itemsperpage'), + sortOrder: $widget.data('sortorder'), + query: $widget.data('query'), + section: $widget.data('section'), + sizeCols: sizeCols, + /* Added by LFL 6/6/14 */ + resourceStyle: $widget.data('resourcestyle') || 'card', + stackSort: $widget.data('stacksort') || 'true' + }; + + // run the search for the set of resources to show + + var resources = buildResourceList(opts); + + if (isFlow) { + drawResourcesFlowWidget($widget, opts, resources); + } else if (isCarousel) { + drawResourcesCarouselWidget($widget, opts, resources); + } else if (isStack) { + /* Looks like this got removed and is not used, so repurposing for the + homepage style layout. + Modified by LFL 6/6/14 + */ + //var sections = buildSectionList(opts); + opts['numStacks'] = $widget.data('numstacks'); + drawResourcesStackWidget($widget, opts, resources/*, sections*/); + } + } + + /* Initializes a Resource Carousel Widget */ + function drawResourcesCarouselWidget($widget, opts, resources) { + $widget.empty(); + var plusone = true; //always show plusone on carousel + + $widget.addClass('resource-card slideshow-container') + .append($('<a>').addClass('slideshow-prev').text('Prev')) + .append($('<a>').addClass('slideshow-next').text('Next')); + + var css = { 'width': $widget.width() + 'px', + 'height': $widget.height() + 'px' }; + + var $ul = $('<ul>'); + + for (var i = 0; i < resources.length; ++i) { + var $card = $('<a>') + .attr('href', cleanUrl(resources[i].url)) + .decorateResourceCard(resources[i],plusone); + + $('<li>').css(css) + .append($card) + .appendTo($ul); + } + + $('<div>').addClass('frame') + .append($ul) + .appendTo($widget); + + $widget.dacSlideshow({ + auto: true, + btnPrev: '.slideshow-prev', + btnNext: '.slideshow-next' + }); + }; + + /* Initializes a Resource Card Stack Widget (column-based layout) + Modified by LFL 6/6/14 + */ + function drawResourcesStackWidget($widget, opts, resources, sections) { + // Don't empty widget, grab all items inside since they will be the first + // items stacked, followed by the resource query + var plusone = true; //by default show plusone on section cards + var cards = $widget.find('.resource-card').detach().toArray(); + var numStacks = opts.numStacks || 1; + var $stacks = []; + var urlString; + + for (var i = 0; i < numStacks; ++i) { + $stacks[i] = $('<div>').addClass('resource-card-stack') + .appendTo($widget); + } + + var sectionResources = []; + + // Extract any subsections that are actually resource cards + if (sections) { + for (var i = 0; i < sections.length; ++i) { + if (!sections[i].sections || !sections[i].sections.length) { + // Render it as a resource card + sectionResources.push( + $('<a>') + .addClass('resource-card section-card') + .attr('href', cleanUrl(sections[i].resource.url)) + .decorateResourceCard(sections[i].resource,plusone)[0] + ); + + } else { + cards.push( + $('<div>') + .addClass('resource-card section-card-menu') + .decorateResourceSection(sections[i],plusone)[0] + ); + } + } + } + + cards = cards.concat(sectionResources); + + for (var i = 0; i < resources.length; ++i) { + var $card = createResourceElement(resources[i], opts); + + if (opts.resourceStyle.indexOf('related') > -1) { + $card.addClass('related-card'); + } + + cards.push($card[0]); + } + + if (opts.stackSort != 'false') { + for (var i = 0; i < cards.length; ++i) { + // Find the stack with the shortest height, but give preference to + // left to right order. + var minHeight = $stacks[0].height(); + var minIndex = 0; + + for (var j = 1; j < numStacks; ++j) { + var height = $stacks[j].height(); + if (height < minHeight - 45) { + minHeight = height; + minIndex = j; + } + } + + $stacks[minIndex].append($(cards[i])); + } + } + + }; + + /* + Create a resource card using the given resource object and a list of html + configured options. Returns a jquery object containing the element. + */ + function createResourceElement(resource, opts, plusone) { + var $el; + + // The difference here is that generic cards are not entirely clickable + // so its a div instead of an a tag, also the generic one is not given + // the resource-card class so it appears with a transparent background + // and can be styled in whatever way the css setup. + if (opts.resourceStyle == 'generic') { + $el = $('<div>') + .addClass('resource') + .attr('href', cleanUrl(resource.url)) + .decorateResource(resource, opts); + } else { + var cls = 'resource resource-card'; + + $el = $('<a>') + .addClass(cls) + .attr('href', cleanUrl(resource.url)) + .decorateResourceCard(resource, plusone); + } + + return $el; + } + + /* Initializes a flow widget, see distribute.scss for generating accompanying css */ + function drawResourcesFlowWidget($widget, opts, resources) { + $widget.empty(); + var cardSizes = opts.cardSizes || ['6x6']; + var i = 0, j = 0; + var plusone = true; // by default show plusone on resource cards + + while (i < resources.length) { + var cardSize = cardSizes[j++ % cardSizes.length]; + cardSize = cardSize.replace(/^\s+|\s+$/,''); + // Some card sizes do not get a plusone button, such as where space is constrained + // or for cards commonly embedded in docs (to improve overall page speed). + plusone = !((cardSize == "6x2") || (cardSize == "6x3") || + (cardSize == "9x2") || (cardSize == "9x3") || + (cardSize == "12x2") || (cardSize == "12x3")); + + // A stack has a third dimension which is the number of stacked items + var isStack = cardSize.match(/(\d+)x(\d+)x(\d+)/); + var stackCount = 0; + var $stackDiv = null; + + if (isStack) { + // Create a stack container which should have the dimensions defined + // by the product of the items inside. + $stackDiv = $('<div>').addClass('resource-card-stack resource-card-' + isStack[1] + + 'x' + isStack[2] * isStack[3]) .appendTo($widget); + } + + // Build each stack item or just a single item + do { + var resource = resources[i]; + + var $card = createResourceElement(resources[i], opts, plusone); + + $card.addClass('resource-card-' + cardSize + + ' resource-card-' + resource.type); + + if (isStack) { + $card.addClass('resource-card-' + isStack[1] + 'x' + isStack[2]); + if (++stackCount == parseInt(isStack[3])) { + $card.addClass('resource-card-row-stack-last'); + stackCount = 0; + } + } else { + stackCount = 0; + } + + $card.appendTo($stackDiv || $widget); + + } while (++i < resources.length && stackCount > 0); + } + } + + /* Build a site map of resources using a section as a root. */ + function buildSectionList(opts) { + if (opts.section && SECTION_BY_ID[opts.section]) { + return SECTION_BY_ID[opts.section].sections || []; + } + return []; + } + + function buildResourceList(opts) { + var maxResults = opts.maxResults || 100; + + var query = opts.query || ''; + var expressions = parseResourceQuery(query); + var addedResourceIndices = {}; + var results = []; + + for (var i = 0; i < expressions.length; i++) { + var clauses = expressions[i]; + + // build initial set of resources from first clause + var firstClause = clauses[0]; + var resources = []; + switch (firstClause.attr) { + case 'type': + resources = ALL_RESOURCES_BY_TYPE[firstClause.value]; + break; + case 'lang': + resources = ALL_RESOURCES_BY_LANG[firstClause.value]; + break; + case 'tag': + resources = ALL_RESOURCES_BY_TAG[firstClause.value]; + break; + case 'collection': + var urls = RESOURCE_COLLECTIONS[firstClause.value].resources || []; + resources = urls.map(function(url){ return ALL_RESOURCES_BY_URL[url]; }); + break; + case 'section': + var urls = SITE_MAP[firstClause.value].sections || []; + resources = urls.map(function(url){ return ALL_RESOURCES_BY_URL[url]; }); + break; + } + // console.log(firstClause.attr + ':' + firstClause.value); + resources = resources || []; + + // use additional clauses to filter corpus + if (clauses.length > 1) { + var otherClauses = clauses.slice(1); + resources = resources.filter(getResourceMatchesClausesFilter(otherClauses)); + } + + // filter out resources already added + if (i > 1) { + resources = resources.filter(getResourceNotAlreadyAddedFilter(addedResourceIndices)); + } + + // add to list of already added indices + for (var j = 0; j < resources.length; j++) { + // console.log(resources[j].title); + addedResourceIndices[resources[j].index] = 1; + } + + // concat to final results list + results = results.concat(resources); + } + + if (opts.sortOrder && results.length) { + var attr = opts.sortOrder; + + if (opts.sortOrder == 'random') { + var i = results.length, j, temp; + while (--i) { + j = Math.floor(Math.random() * (i + 1)); + temp = results[i]; + results[i] = results[j]; + results[j] = temp; + } + } else { + var desc = attr.charAt(0) == '-'; + if (desc) { + attr = attr.substring(1); + } + results = results.sort(function(x,y) { + return (desc ? -1 : 1) * (parseInt(x[attr], 10) - parseInt(y[attr], 10)); + }); + } + } + + results = results.filter(getResourceNotAlreadyAddedFilter(addedPageResources)); + results = results.slice(0, maxResults); + + for (var j = 0; j < results.length; ++j) { + addedPageResources[results[j].index] = 1; + } + + return results; + } + + + function getResourceNotAlreadyAddedFilter(addedResourceIndices) { + return function(resource) { + return !addedResourceIndices[resource.index]; + }; + } + + + function getResourceMatchesClausesFilter(clauses) { + return function(resource) { + return doesResourceMatchClauses(resource, clauses); + }; + } + + + function doesResourceMatchClauses(resource, clauses) { + for (var i = 0; i < clauses.length; i++) { + var map; + switch (clauses[i].attr) { + case 'type': + map = IS_RESOURCE_OF_TYPE[clauses[i].value]; + break; + case 'lang': + map = IS_RESOURCE_IN_LANG[clauses[i].value]; + break; + case 'tag': + map = IS_RESOURCE_TAGGED[clauses[i].value]; + break; + } + + if (!map || (!!clauses[i].negative ? map[resource.index] : !map[resource.index])) { + return clauses[i].negative; + } + } + return true; + } + + function cleanUrl(url) + { + if (url && url.indexOf('//') === -1) { + url = toRoot + url; + } + + return url; + } + + + function parseResourceQuery(query) { + // Parse query into array of expressions (expression e.g. 'tag:foo + type:video') + var expressions = []; + var expressionStrs = query.split(',') || []; + for (var i = 0; i < expressionStrs.length; i++) { + var expr = expressionStrs[i] || ''; + + // Break expression into clauses (clause e.g. 'tag:foo') + var clauses = []; + var clauseStrs = expr.split(/(?=[\+\-])/); + for (var j = 0; j < clauseStrs.length; j++) { + var clauseStr = clauseStrs[j] || ''; + + // Get attribute and value from clause (e.g. attribute='tag', value='foo') + var parts = clauseStr.split(':'); + var clause = {}; + + clause.attr = parts[0].replace(/^\s+|\s+$/g,''); + if (clause.attr) { + if (clause.attr.charAt(0) == '+') { + clause.attr = clause.attr.substring(1); + } else if (clause.attr.charAt(0) == '-') { + clause.negative = true; + clause.attr = clause.attr.substring(1); + } + } + + if (parts.length > 1) { + clause.value = parts[1].replace(/^\s+|\s+$/g,''); + } + + clauses.push(clause); + } + + if (!clauses.length) { + continue; + } + + expressions.push(clauses); + } + + return expressions; + } +})(); + +(function($) { + + /* + Utility method for creating dom for the description area of a card. + Used in decorateResourceCard and decorateResource. + */ + function buildResourceCardDescription(resource, plusone) { + var $description = $('<div>').addClass('description ellipsis'); + + $description.append($('<div>').addClass('text').html(resource.summary)); + + if (resource.cta) { + $description.append($('<a>').addClass('cta').html(resource.cta)); + } + + if (plusone) { + var plusurl = resource.url.indexOf("//") > -1 ? resource.url : + "//developer.android.com/" + resource.url; + + $description.append($('<div>').addClass('util') + .append($('<div>').addClass('g-plusone') + .attr('data-size', 'small') + .attr('data-align', 'right') + .attr('data-href', plusurl))); + } + + return $description; + } + + + /* Simple jquery function to create dom for a standard resource card */ + $.fn.decorateResourceCard = function(resource,plusone) { + var section = resource.group || resource.type; + var imgUrl = resource.image || + 'assets/images/resource-card-default-android.jpg'; + + if (imgUrl.indexOf('//') === -1) { + imgUrl = toRoot + imgUrl; + } + + $('<div>').addClass('card-bg') + .css('background-image', 'url(' + (imgUrl || toRoot + + 'assets/images/resource-card-default-android.jpg') + ')') + .appendTo(this); + + $('<div>').addClass('card-info' + (!resource.summary ? ' empty-desc' : '')) + .append($('<div>').addClass('section').text(section)) + .append($('<div>').addClass('title').html(resource.title)) + .append(buildResourceCardDescription(resource, plusone)) + .appendTo(this); + + return this; + }; + + /* Simple jquery function to create dom for a resource section card (menu) */ + $.fn.decorateResourceSection = function(section,plusone) { + var resource = section.resource; + //keep url clean for matching and offline mode handling + var urlPrefix = resource.image.indexOf("//") > -1 ? "" : toRoot; + var $base = $('<a>') + .addClass('card-bg') + .attr('href', resource.url) + .append($('<div>').addClass('card-section-icon') + .append($('<div>').addClass('icon')) + .append($('<div>').addClass('section').html(resource.title))) + .appendTo(this); + + var $cardInfo = $('<div>').addClass('card-info').appendTo(this); + + if (section.sections && section.sections.length) { + // Recurse the section sub-tree to find a resource image. + var stack = [section]; + + while (stack.length) { + if (stack[0].resource.image) { + $base.css('background-image', 'url(' + urlPrefix + stack[0].resource.image + ')'); + break; + } + + if (stack[0].sections) { + stack = stack.concat(stack[0].sections); + } + + stack.shift(); + } + + var $ul = $('<ul>') + .appendTo($cardInfo); + + var max = section.sections.length > 3 ? 3 : section.sections.length; + + for (var i = 0; i < max; ++i) { + + var subResource = section.sections[i]; + if (!plusone) { + $('<li>') + .append($('<a>').attr('href', subResource.url) + .append($('<div>').addClass('title').html(subResource.title)) + .append($('<div>').addClass('description ellipsis') + .append($('<div>').addClass('text').html(subResource.summary)) + .append($('<div>').addClass('util')))) + .appendTo($ul); + } else { + $('<li>') + .append($('<a>').attr('href', subResource.url) + .append($('<div>').addClass('title').html(subResource.title)) + .append($('<div>').addClass('description ellipsis') + .append($('<div>').addClass('text').html(subResource.summary)) + .append($('<div>').addClass('util') + .append($('<div>').addClass('g-plusone') + .attr('data-size', 'small') + .attr('data-align', 'right') + .attr('data-href', resource.url))))) + .appendTo($ul); + } + } + + // Add a more row + if (max < section.sections.length) { + $('<li>') + .append($('<a>').attr('href', resource.url) + .append($('<div>') + .addClass('title') + .text('More'))) + .appendTo($ul); + } + } else { + // No sub-resources, just render description? + } + + return this; + }; + + + + + /* Render other types of resource styles that are not cards. */ + $.fn.decorateResource = function(resource, opts) { + var imgUrl = resource.image || + 'assets/images/resource-card-default-android.jpg'; + var linkUrl = resource.url; + + if (imgUrl.indexOf('//') === -1) { + imgUrl = toRoot + imgUrl; + } + + if (linkUrl && linkUrl.indexOf('//') === -1) { + linkUrl = toRoot + linkUrl; + } + + $(this).append( + $('<div>').addClass('image') + .css('background-image', 'url(' + imgUrl + ')'), + $('<div>').addClass('info').append( + $('<h4>').addClass('title').html(resource.title), + $('<p>').addClass('summary').html(resource.summary), + $('<a>').attr('href', linkUrl).addClass('cta').html('Learn More') + ) + ); + + return this; + }; +})(jQuery); + + +/* Calculate the vertical area remaining */ +(function($) { + $.fn.ellipsisfade= function(lineHeight) { + this.each(function() { + // get element text + var $this = $(this); + var remainingHeight = $this.parent().parent().height(); + $this.parent().siblings().each(function () + { + if ($(this).is(":visible")) { + var h = $(this).height(); + remainingHeight = remainingHeight - h; + } + }); + + adjustedRemainingHeight = ((remainingHeight)/lineHeight>>0)*lineHeight + $this.parent().css({'height': adjustedRemainingHeight}); + $this.css({'height': "auto"}); + }); + + return this; + }; +}) (jQuery); + +/* + Fullscreen Carousel + + The following allows for an area at the top of the page that takes over the + entire browser height except for its top offset and an optional bottom + padding specified as a data attribute. + + HTML: + + <div class="fullscreen-carousel"> + <div class="fullscreen-carousel-content"> + <!-- content here --> + </div> + <div class="fullscreen-carousel-content"> + <!-- content here --> + </div> + + etc ... + + </div> + + Control over how the carousel takes over the screen can mostly be defined in + a css file. Setting min-height on the .fullscreen-carousel-content elements + will prevent them from shrinking to far vertically when the browser is very + short, and setting max-height on the .fullscreen-carousel itself will prevent + the area from becoming to long in the case that the browser is stretched very + tall. + + There is limited functionality for having multiple sections since that request + was removed, but it is possible to add .next-arrow and .prev-arrow elements to + scroll between multiple content areas. +*/ + +(function() { + $(document).ready(function() { + $('.fullscreen-carousel').each(function() { + initWidget(this); + }); + }); + + function initWidget(widget) { + var $widget = $(widget); + + var topOffset = $widget.offset().top; + var padBottom = parseInt($widget.data('paddingbottom')) || 0; + var maxHeight = 0; + var minHeight = 0; + var $content = $widget.find('.fullscreen-carousel-content'); + var $nextArrow = $widget.find('.next-arrow'); + var $prevArrow = $widget.find('.prev-arrow'); + var $curSection = $($content[0]); + + if ($content.length <= 1) { + $nextArrow.hide(); + $prevArrow.hide(); + } else { + $nextArrow.click(function() { + var index = ($content.index($curSection) + 1); + $curSection.hide(); + $curSection = $($content[index >= $content.length ? 0 : index]); + $curSection.show(); + }); + + $prevArrow.click(function() { + var index = ($content.index($curSection) - 1); + $curSection.hide(); + $curSection = $($content[index < 0 ? $content.length - 1 : 0]); + $curSection.show(); + }); + } + + // Just hide all content sections except first. + $content.each(function(index) { + if ($(this).height() > minHeight) minHeight = $(this).height(); + $(this).css({position: 'absolute', display: index > 0 ? 'none' : ''}); + }); + + // Register for changes to window size, and trigger. + $(window).resize(resizeWidget); + resizeWidget(); + + function resizeWidget() { + var height = $(window).height() - topOffset - padBottom; + $widget.width($(window).width()); + $widget.height(height < minHeight ? minHeight : + (maxHeight && height > maxHeight ? maxHeight : height)); + } + } +})(); + + + + + +/* + Tab Carousel + + The following allows tab widgets to be installed via the html below. Each + tab content section should have a data-tab attribute matching one of the + nav items'. Also each tab content section should have a width matching the + tab carousel. + + HTML: + + <div class="tab-carousel"> + <ul class="tab-nav"> + <li><a href="#" data-tab="handsets">Handsets</a> + <li><a href="#" data-tab="wearable">Wearable</a> + <li><a href="#" data-tab="tv">TV</a> + </ul> + + <div class="tab-carousel-content"> + <div data-tab="handsets"> + <!--Full width content here--> + </div> + + <div data-tab="wearable"> + <!--Full width content here--> + </div> + + <div data-tab="tv"> + <!--Full width content here--> + </div> + </div> + </div> + +*/ +(function() { + $(document).ready(function() { + $('.tab-carousel').each(function() { + initWidget(this); + }); + }); + + function initWidget(widget) { + var $widget = $(widget); + var $nav = $widget.find('.tab-nav'); + var $anchors = $nav.find('[data-tab]'); + var $li = $nav.find('li'); + var $contentContainer = $widget.find('.tab-carousel-content'); + var $tabs = $contentContainer.find('[data-tab]'); + var $curTab = $($tabs[0]); // Current tab is first tab. + var width = $widget.width(); + + // Setup nav interactivity. + $anchors.click(function(evt) { + evt.preventDefault(); + var query = '[data-tab=' + $(this).data('tab') + ']'; + transitionWidget($tabs.filter(query)); + }); + + // Add highlight for navigation on first item. + var $highlight = $('<div>').addClass('highlight') + .css({left:$li.position().left + 'px', width:$li.outerWidth() + 'px'}) + .appendTo($nav); + + // Store height since we will change contents to absolute. + $contentContainer.height($contentContainer.height()); + + // Absolutely position tabs so they're ready for transition. + $tabs.each(function(index) { + $(this).css({position: 'absolute', left: index > 0 ? width + 'px' : '0'}); + }); + + function transitionWidget($toTab) { + if (!$curTab.is($toTab)) { + var curIndex = $tabs.index($curTab[0]); + var toIndex = $tabs.index($toTab[0]); + var dir = toIndex > curIndex ? 1 : -1; + + // Animate content sections. + $toTab.css({left:(width * dir) + 'px'}); + $curTab.animate({left:(width * -dir) + 'px'}); + $toTab.animate({left:'0'}); + + // Animate navigation highlight. + $highlight.animate({left:$($li[toIndex]).position().left + 'px', + width:$($li[toIndex]).outerWidth() + 'px'}) + + // Store new current section. + $curTab = $toTab; + } + } + } +})();
\ No newline at end of file diff --git a/tools/droiddoc/templates-sdk/components/masthead.cs b/tools/droiddoc/templates-sdk/components/masthead.cs index 47639bb..c880eee 100644 --- a/tools/droiddoc/templates-sdk/components/masthead.cs +++ b/tools/droiddoc/templates-sdk/components/masthead.cs @@ -1,226 +1,160 @@ <?cs def:custom_masthead() ?> +<?cs if:preview ?> + <?cs call:preview_masthead() ?> +<?cs else ?> <a name="top"></a> -<?cs if:!devsite ?><?cs # leave out the global header for devsite; it's in devsite template ?> - <!-- Header --> +<?cs if:!devsite ?><?cs # leave out the global header for devsite; it is in devsite template ?> + <!-- Header --> + <div id="header-wrapper"> <div id="header"> - <div class="wrap" id="header-wrap"> - <div class="col-3 logo"> + <div class="wrap" id="header-wrap"> + <div class="col-3 logo"> <a href="<?cs var:toroot ?>index.html"> - <img src="<?cs var:toroot ?>assets/images/dac_logo.png" width="123" height="25" alt="Android Developers" /> + <img src="<?cs var:toroot ?>assets/images/dac_logo.png" + srcset="<?cs var:toroot ?>assets/images/dac_logo@2x.png 2x" + width="123" height="25" alt="Android Developers" /> </a> <div class="btn-quicknav" id="btn-quicknav"> - <a href="#" class="arrow-inactive">Quicknav</a> - <a href="#" class="arrow-active">Quicknav</a> + <a href="#" class="arrow-inactive">Quicknav</a> + <a href="#" class="arrow-active">Quicknav</a> </div> - </div> - <ul class="nav-x col-9"> - <li class="design"> - <a href="<?cs var:toroot ?>design/index.html" - zh-tw-lang="設計" - zh-cn-lang="设计" - ru-lang="Проектирование" - ko-lang="디자인" - ja-lang="設計" - es-lang="Diseñar" - >Design</a></li> - <li class="develop"><a href="<?cs var:toroot ?>develop/index.html" - zh-tw-lang="開發" - zh-cn-lang="开发" - ru-lang="Разработка" - ko-lang="개발" - ja-lang="開発" - es-lang="Desarrollar" - >Develop</a></li> - <li class="distribute last"><a href="<?cs var:toroot ?>distribute/index.html" - zh-tw-lang="發佈" - zh-cn-lang="分发" - ru-lang="Распространение" - ko-lang="배포" - ja-lang="配布" - es-lang="Distribuir" - >Distribute</a></li> - </ul> - - <!-- New Search --> - <div class="menu-container"> - <div class="moremenu"> - <div id="more-btn"></div> - </div> - <div class="morehover" id="moremenu"> - <div class="top"></div> - <div class="mid"> - <div class="header">Links</div> - <ul> - <li><a href="https://play.google.com/apps/publish/">Google Play Developer Console</a></li> - <li><a href="http://android-developers.blogspot.com/">Android Developers Blog</a></li> - <li><a href="<?cs var:toroot ?>about/index.html">About Android</a></li> - </ul> - <div class="header">Android Sites</div> - <ul> - <li><a href="http://www.android.com">Android.com</a></li> - <li class="active"><a>Android Developers</a></li> - <li><a href="http://source.android.com">Android Open Source Project</a></li> - </ul> - - <?cs # Include language switcher only in online docs ?> - <?cs if:android.whichdoc == "online" ?> - <div class="header">Language</div> - <div id="language" class="locales"> - <select name="language" onChange="changeLangPref(this.value, true)"> - <option value="en">English</option> - <option value="es">Español</option> - <option value="ja">日本語</option> - <option value="ko">한국어</option> - <option value="ru">Русский</option> - <option value="zh-cn">中文 (中国)</option> - <option value="zh-tw">中文 (台灣)</option> - </select> - </div> - <script type="text/javascript"> - <!-- - loadLangPref(); - //--> - </script> - <?cs /if ?> - <?cs # End of lang switcher ?> + </div> + <ul class="nav-x col-9"> + <li class="design"> + <a href="<?cs var:toroot ?>design/index.html" + zh-tw-lang="設計" + zh-cn-lang="设计" + ru-lang="Проектирование" + ko-lang="디자인" + ja-lang="設計" + es-lang="Diseñar" + >Design</a></li> + <li class="develop"><a href="<?cs var:toroot ?>develop/index.html" + zh-tw-lang="開發" + zh-cn-lang="开发" + ru-lang="Разработка" + ko-lang="개발" + ja-lang="開発" + es-lang="Desarrollar" + >Develop</a></li> + <li class="distribute last"><a href="<?cs var:toroot ?>distribute/<?cs + if:android.whichdoc == "offline" ?>googleplay/<?cs /if ?>index.html" + zh-tw-lang="發佈" + zh-cn-lang="分发" + ru-lang="Распространение" + ko-lang="배포" + ja-lang="配布" + es-lang="Distribuir" + >Distribute</a></li> + </ul> - <br class="clearfix" /> - </div> - <div class="bottom"></div> - </div> - <div class="search" id="search-container"> - <div class="search-inner"> - <div id="search-btn"></div> - <div class="left"></div> - <form onsubmit="return submit_search()"> - <input id="search_autocomplete" type="text" value="" autocomplete="off" name="q" -onfocus="search_focus_changed(this, true)" onblur="search_focus_changed(this, false)" -onkeydown="return search_changed(event, true, '<?cs var:toroot ?>')" -onkeyup="return search_changed(event, false, '<?cs var:toroot ?>')" /> - </form> - <div class="right"></div> - <a class="close hide">close</a> - <div class="left"></div> - <div class="right"></div> - </div> - </div> + <?cs # ADD SEARCH AND MENU ?> + <?cs call:header_search_widget() ?> - <div class="search_filtered_wrapper reference"> - <div class="suggest-card reference no-display"> - <ul class="search_filtered"> - </ul> - </div> - </div> - <div class="search_filtered_wrapper docs"> - <div class="suggest-card dummy no-display"> </div> - <div class="suggest-card develop no-display"> - <ul class="search_filtered"> - </ul> - <div class="child-card guides no-display"> - </div> - <div class="child-card training no-display"> - </div> - <div class="child-card samples no-display"> - </div> - </div> - <div class="suggest-card design no-display"> - <ul class="search_filtered"> - </ul> - </div> - <div class="suggest-card distribute no-display"> - <ul class="search_filtered"> - </ul> - </div> - </div> + <!-- Expanded quicknav --> + <div id="quicknav" class="col-13"> + <ul> + <li class="about"> + <ul> + <li><a href="<?cs var:toroot ?>about/index.html">About</a></li> + <li><a href="<?cs var:toroot ?>wear/index.html">Wear</a></li> + <li><a href="<?cs var:toroot ?>tv/index.html">TV</a></li> + <li><a href="<?cs var:toroot ?>auto/index.html">Auto</a></li> + </ul> + </li> + <li class="design"> + <ul> + <li><a href="<?cs var:toroot ?>design/index.html">Get Started</a></li> + <li><a href="<?cs var:toroot ?>design/devices.html">Devices</a></li> + <li><a href="<?cs var:toroot ?>design/style/index.html">Style</a></li> + <li><a href="<?cs var:toroot ?>design/patterns/index.html">Patterns</a></li> + <li><a href="<?cs var:toroot ?>design/building-blocks/index.html">Building Blocks</a></li> + <li><a href="<?cs var:toroot ?>design/downloads/index.html">Downloads</a></li> + <li><a href="<?cs var:toroot ?>design/videos/index.html">Videos</a></li> + </ul> + </li> + <li class="develop"> + <ul> + <li><a href="<?cs var:toroot ?>training/index.html" + zh-tw-lang="訓練課程" + zh-cn-lang="培训" + ru-lang="Курсы" + ko-lang="교육" + ja-lang="トレーニング" + es-lang="Capacitación" + >Training</a></li> + <li><a href="<?cs var:toroot ?>guide/index.html" + zh-tw-lang="API 指南" + zh-cn-lang="API 指南" + ru-lang="Руководства по API" + ko-lang="API 가이드" + ja-lang="API ガイド" + es-lang="Guías de la API" + >API Guides</a></li> + <li><a href="<?cs var:toroot ?>reference/packages.html" + zh-tw-lang="參考資源" + zh-cn-lang="参考" + ru-lang="Справочник" + ko-lang="참조문서" + ja-lang="リファレンス" + es-lang="Referencia" + >Reference</a></li> + <li><a href="<?cs var:toroot ?>sdk/index.html" + zh-tw-lang="相關工具" + zh-cn-lang="工具" + ru-lang="Инструменты" + ko-lang="도구" + ja-lang="ツール" + es-lang="Herramientas" + >Tools</a> + </li> + <li><a href="<?cs var:toroot ?>google/index.html">Google Services</a> + </li> + <?cs if:android.hasSamples ?> + <li><a href="<?cs var:toroot ?>samples/index.html">Samples</a> + </li> + <?cs /if ?> + </ul> + </li> + <li class="distribute last"> + <ul> + <li><a href="<?cs var:toroot ?>distribute/googleplay/index.html">Google Play</a></li> + <li><a href="<?cs var:toroot ?>distribute/essentials/index.html">Essentials</a></li> + <li><a href="<?cs var:toroot ?>distribute/users/index.html">Get Users</a></li> + <li><a href="<?cs var:toroot ?>distribute/engage/index.html">Engage & Retain</a></li> + <li><a href="<?cs var:toroot ?>distribute/monetize/index.html">Monetize</a></li> + <li><a href="<?cs var:toroot ?>distribute/tools/index.html">Tools & Reference</a></li> + <li><a href="<?cs var:toroot ?>distribute/stories/index.html">Developer Stories</a></li> + </ul> + </li> + </ul> + </div><!-- /Expanded quicknav --> + </div><!-- end header-wrap.wrap --> + </div><!-- end header --> - </div> - <!-- /New Search> - - - <!-- Expanded quicknav --> - <div id="quicknav" class="col-9"> - <ul> - <li class="design"> - <ul> - <li><a href="<?cs var:toroot ?>design/index.html">Get Started</a></li> - <li><a href="<?cs var:toroot ?>design/style/index.html">Style</a></li> - <li><a href="<?cs var:toroot ?>design/patterns/index.html">Patterns</a></li> - <li><a href="<?cs var:toroot ?>design/building-blocks/index.html">Building Blocks</a></li> - <li><a href="<?cs var:toroot ?>design/downloads/index.html">Downloads</a></li> - <li><a href="<?cs var:toroot ?>design/videos/index.html">Videos</a></li> - </ul> - </li> - <li class="develop"> - <ul> - <li><a href="<?cs var:toroot ?>training/index.html" - zh-tw-lang="訓練課程" - zh-cn-lang="培训" - ru-lang="Курсы" - ko-lang="교육" - ja-lang="トレーニング" - es-lang="Capacitación" - >Training</a></li> - <li><a href="<?cs var:toroot ?>guide/index.html" - zh-tw-lang="API 指南" - zh-cn-lang="API 指南" - ru-lang="Руководства по API" - ko-lang="API 가이드" - ja-lang="API ガイド" - es-lang="Guías de la API" - >API Guides</a></li> - <li><a href="<?cs var:toroot ?>reference/packages.html" - zh-tw-lang="參考資源" - zh-cn-lang="参考" - ru-lang="Справочник" - ko-lang="참조문서" - ja-lang="リファレンス" - es-lang="Referencia" - >Reference</a></li> - <li><a href="<?cs var:toroot ?>tools/index.html" - zh-tw-lang="相關工具" - zh-cn-lang="工具" - ru-lang="Инструменты" - ko-lang="도구" - ja-lang="ツール" - es-lang="Herramientas" - >Tools</a> - <ul><li><a href="<?cs var:toroot ?>sdk/index.html">Get the SDK</a></li></ul> - </li> - <li><a href="<?cs var:toroot ?>google/index.html">Google Services</a> - </li> - <?cs if:android.hasSamples ?> - <li><a href="<?cs var:toroot ?>samples/index.html">Samples</a> - </li> - <?cs /if ?> - </ul> - </li> - <li class="distribute last"> - <ul> - <li><a href="<?cs var:toroot ?>distribute/index.html">Google Play</a></li> - <li><a href="<?cs var:toroot ?>distribute/googleplay/publish/index.html">Publishing</a></li> - <li><a href="<?cs var:toroot ?>distribute/googleplay/promote/index.html">Promoting</a></li> - <li><a href="<?cs var:toroot ?>distribute/googleplay/quality/index.html">App Quality</a></li> - <li><a href="<?cs var:toroot ?>distribute/googleplay/spotlight/index.html">Spotlight</a></li> - <li><a href="<?cs var:toroot ?>distribute/open.html">Open Distribution</a></li> - </ul> - </li> - </ul> - </div> - <!-- /Expanded quicknav --> + <?cs if:about || wear || tv || auto ?> + <!-- Secondary x-nav --> + <div id="nav-x"> + <div class="wrap"> + <ul class="nav-x col-9 about" style="width:100%"> + <li class="about"><a href="<?cs var:toroot ?>about/index.html" + >About</a></li> + <li class="wear"><a href="<?cs var:toroot ?>wear/index.html" + >Wear</a></li> + <li class="tv"><a href="<?cs var:toroot ?>tv/index.html" + >TV</a></li> + <li class="auto"><a href="<?cs var:toroot ?>auto/index.html" + >Auto</a></li> + </ul> </div> </div> - <!-- /Header --> - - - <div id="searchResults" class="wrap" style="display:none;"> - <h2 id="searchTitle">Results</h2> - <div id="leftSearchControl" class="search-control">Loading...</div> - </div> - - - <?cs if:training || guide || reference || tools || develop || google || samples ?> + <!-- /Sendondary x-nav ABOUT --> + + + + <?cs elif:training || guide || reference || tools || develop || google || samples ?> <!-- Secondary x-nav --> <div id="nav-x"> <div class="wrap"> @@ -231,7 +165,7 @@ onkeyup="return search_changed(event, false, '<?cs var:toroot ?>')" /> ru-lang="Курсы" ko-lang="교육" ja-lang="トレーニング" - es-lang="Capacitación" + es-lang="Capacitación" >Training</a></li> <li class="guide"><a href="<?cs var:toroot ?>guide/index.html" zh-tw-lang="API 指南" @@ -239,7 +173,7 @@ onkeyup="return search_changed(event, false, '<?cs var:toroot ?>')" /> ru-lang="Руководства по API" ko-lang="API 가이드" ja-lang="API ガイド" - es-lang="Guías de la API" + es-lang="Guías de la API" >API Guides</a></li> <li class="reference"><a href="<?cs var:toroot ?>reference/packages.html" zh-tw-lang="參考資源" @@ -247,9 +181,9 @@ onkeyup="return search_changed(event, false, '<?cs var:toroot ?>')" /> ru-lang="Справочник" ko-lang="참조문서" ja-lang="リファレンス" - es-lang="Referencia" + es-lang="Referencia" >Reference</a></li> - <li class="tools"><a href="<?cs var:toroot ?>tools/index.html" + <li class="tools"><a href="<?cs var:toroot ?>sdk/index.html" zh-tw-lang="相關工具" zh-cn-lang="工具" ru-lang="Инструменты" @@ -267,13 +201,101 @@ onkeyup="return search_changed(event, false, '<?cs var:toroot ?>')" /> <?cs /if ?> </ul> </div> - </div> - <!-- /Sendondary x-nav --> + <!-- /Sendondary x-nav DEVELOP --> + + <?cs elif:distribute || googleplay || essentials || users || engage || monetize || disttools || stories ?> + <!-- Secondary distribute x-nav --> + <div id="nav-x"> + <div class="wrap"> + <ul class="nav-x distribute"> + <li class="googleplay"><a href="<?cs var:toroot ?>distribute/googleplay/index.html" + >Google Play</a></li> + <li class="essentials"><a href="<?cs var:toroot ?>distribute/essentials/index.html" + >Essentials</a></li> + <li class="users"><a href="<?cs var:toroot ?>distribute/users/index.html" + >Get Users</a></li> + <li class="engage"><a href="<?cs var:toroot ?>distribute/engage/index.html" + >Engage & Retain</a></li> + <li class="monetize"><a href="<?cs var:toroot ?>distribute/monetize/index.html" + >Monetize</a> + </li> + <li class="disttools"><a href="<?cs var:toroot ?>distribute/tools/index.html" + >Tools</a> + </li> + <li class="stories"><a href="<?cs var:toroot ?>distribute/stories/index.html" + >Stories</a> + </li> + </ul> + <a href="https://play.google.com/apps/publish/" class="developer-console-btn">Developer Console</a> + </div> <!-- /Secondary distribute x-nav --> + </div> + <!-- /Sendondary x-nav DISTRIBUTE --> <?cs /if ?> -<?cs /if ?> -<?cs # end if/else !devsite ?> + <div id="searchResults" class="wrap" style="display:none;"> + <h2 id="searchTitle">Results</h2> + <div id="leftSearchControl" class="search-control">Loading...</div> + </div> + </div> <!--end header-wrapper --> + + <div id="sticky-header"> + <div> + <a class="logo" href="#top"></a> + <a class="top" href="#top"></a> + <ul class="breadcrumb"> + <?cs # More <li> elements added here with javascript ?> + <?cs if:!section.landing ?><li class="current"><?cs var:page.title ?></li><?cs + /if ?> + </ul> + </div> + </div> + +<?cs /if ?><?cs # end if/else !devsite ?> +<?cs /if ?><?cs # end if/else preview ?><?cs +/def ?> + +<?cs def:preview_masthead() ?> +<a name="top"></a> + + +<!-- Header --> +<div id="header-wrapper"> + <div id="header"> + <div class="wrap" id="header-wrap"> + <div class="col_3 logo landing-logo" style="width:240px"> + <a href="<?cs var:toroot ?>preview/index.html"> + <img src="<?cs var:toroot ?>assets/images/android.png" height="25" alt="Android" + style="margin:-3px 0 0" /> + </a> + </div> + <div class="col-8" style="margin:0"><h1 style="margin: 4px 0 0 0px;padding:0;line-height:16px; +color:#666;font-weight:100;font-size:27px;">L Developer Preview</h1></div> + + <?cs # ADD SEARCH AND MENU ?> + <?cs call:header_search_widget() ?> + + </div><!-- end header-wrap --> + </div><!-- /Header --> + + + <div id="searchResults" class="wrap" style="display:none;"> + <h2 id="searchTitle">Results</h2> + <div id="leftSearchControl" class="search-control">Loading...</div> + </div> +</div> <!--end header-wrapper --> + +<div id="sticky-header"> + <div> + <a class="logo" href="#top"></a> + <a class="top" href="#top"></a> + <ul class="breadcrumb"> + <?cs # More <li> elements added here with javascript ?> + <?cs if:!section.landing ?><li class="current"><?cs var:page.title ?></li><?cs + /if ?> + </ul> + </div> +</div> - <?cs + <?cs /def ?> diff --git a/tools/droiddoc/templates-sdk/customizations.cs b/tools/droiddoc/templates-sdk/customizations.cs index ed57f1c..e0e3ca1 100644 --- a/tools/droiddoc/templates-sdk/customizations.cs +++ b/tools/droiddoc/templates-sdk/customizations.cs @@ -7,7 +7,6 @@ def:sdk_nav() ?> <div class="wrap clearfix" id="body-content"> <div class="col-4" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> <div id="devdoc-nav" class="scroll-pane"> -<a class="totop" href="#top" data-g-event="left-nav-top">to top</a> <?cs include:"../../../../frameworks/base/docs/html/sdk/sdk_toc.cs" ?> @@ -15,19 +14,53 @@ def:sdk_nav() ?> </div> </div> <!-- end side-nav --> -<?cs /def ?> +<?cs /def ?><?cs + +def:no_nav() ?> + <div class="wrap clearfix" id="body-content"> +<?cs /def ?><?cs + +def:tools_nav() ?> + <div class="wrap clearfix" id="body-content"> + <div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> + <div id="devdoc-nav" class="scroll-pane"> <?cs -def:resources_tab_nav() ?> + include:"../../../../frameworks/base/docs/html/tools/tools_toc.cs" ?> + + + </div> + </div> <!-- end side-nav --> + <script> + $(document).ready(function() { + scrollIntoView("devdoc-nav"); + }); + </script> +<?cs /def ?> +<?cs +def:training_nav() ?> <div class="wrap clearfix" id="body-content"> - <a <div class="col-4" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> <div id="devdoc-nav" class="scroll-pane"> -<a class="totop" href="#top" data-g-event="left-nav-top">to top</a> + <?cs - include:"../../../../frameworks/base/docs/html/resources/resources_toc.cs" ?> + include:"../../../../frameworks/base/docs/html/training/training_toc.cs" ?> + + </div> + </div> <!-- end side-nav --> + <script> + $(document).ready(function() { + scrollIntoView("devdoc-nav"); + }); + </script> +<?cs /def ?><?cs +def:googleplay_nav() ?> + <div class="wrap clearfix" id="body-content"> + <div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> + <div id="devdoc-nav" class="scroll-pane"> +<?cs include:"../../../../frameworks/base/docs/html/distribute/googleplay/googleplay_toc.cs" ?> </div> </div> <!-- end side-nav --> <script> @@ -35,17 +68,13 @@ def:resources_tab_nav() ?> scrollIntoView("devdoc-nav"); }); </script> -<?cs /def ?> -<?cs -def:tools_nav() ?> +<?cs /def ?><?cs + +def:essentials_nav() ?> <div class="wrap clearfix" id="body-content"> <div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> <div id="devdoc-nav" class="scroll-pane"> -<a class="totop" href="#top" data-g-event="left-nav-top">to top</a> -<?cs - include:"../../../../frameworks/base/docs/html/tools/tools_toc.cs" ?> - - +<?cs include:"../../../../frameworks/base/docs/html/distribute/essentials/essentials_toc.cs" ?> </div> </div> <!-- end side-nav --> <script> @@ -53,19 +82,55 @@ def:tools_nav() ?> scrollIntoView("devdoc-nav"); }); </script> -<?cs /def ?> -<?cs -def:training_nav() ?> +<?cs /def ?><?cs + +def:users_nav() ?> <div class="wrap clearfix" id="body-content"> - <div class="col-4" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> + <div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> <div id="devdoc-nav" class="scroll-pane"> -<a class="totop" href="#top" data-g-event="left-nav-top">to top</a> +<?cs include:"../../../../frameworks/base/docs/html/distribute/users/users_toc.cs" ?> + </div> + </div> <!-- end side-nav --> + <script> + $(document).ready(function() { + scrollIntoView("devdoc-nav"); + }); + </script> +<?cs /def ?><?cs +def:engage_nav() ?> + <div class="wrap clearfix" id="body-content"> + <div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> + <div id="devdoc-nav" class="scroll-pane"> +<?cs include:"../../../../frameworks/base/docs/html/distribute/engage/engage_toc.cs" ?> + </div> + </div> <!-- end side-nav --> + <script> + $(document).ready(function() { + scrollIntoView("devdoc-nav"); + }); + </script> +<?cs /def ?><?cs -<?cs - include:"../../../../frameworks/base/docs/html/training/training_toc.cs" ?> - +def:monetize_nav() ?> + <div class="wrap clearfix" id="body-content"> + <div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> + <div id="devdoc-nav" class="scroll-pane"> +<?cs include:"../../../../frameworks/base/docs/html/distribute/monetize/monetize_toc.cs" ?> + </div> + </div> <!-- end side-nav --> + <script> + $(document).ready(function() { + scrollIntoView("devdoc-nav"); + }); + </script> +<?cs /def ?><?cs +def:disttools_nav() ?> + <div class="wrap clearfix" id="body-content"> + <div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> + <div id="devdoc-nav" class="scroll-pane"> +<?cs include:"../../../../frameworks/base/docs/html/distribute/tools/disttools_toc.cs" ?> </div> </div> <!-- end side-nav --> <script> @@ -73,14 +138,26 @@ def:training_nav() ?> scrollIntoView("devdoc-nav"); }); </script> -<?cs /def ?> -<?cs +<?cs /def ?><?cs + +def:stories_nav() ?> + <div class="wrap clearfix" id="body-content"> + <div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> + <div id="devdoc-nav" class="scroll-pane"> +<?cs include:"../../../../frameworks/base/docs/html/distribute/stories/stories_toc.cs" ?> + </div> + </div> <!-- end side-nav --> + <script> + $(document).ready(function() { + scrollIntoView("devdoc-nav"); + }); + </script> +<?cs /def ?><?cs + def:guide_nav() ?> <div class="wrap clearfix" id="body-content"> <div class="col-4" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> <div id="devdoc-nav" class="scroll-pane"> -<a class="totop" href="#top" data-g-event="left-nav-top">to top</a> - <?cs include:"../../../../frameworks/base/docs/html/guide/guide_toc.cs" ?> @@ -99,7 +176,6 @@ def:design_nav() ?> <div class="wrap clearfix" id="body-content"> <div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> <div id="devdoc-nav" class="scroll-pane"> -<a class="totop" href="#top" data-g-event="left-nav-top">to top</a> <?cs @@ -119,7 +195,6 @@ def:distribute_nav() ?> <div class="wrap clearfix" id="body-content"> <div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> <div id="devdoc-nav" class="scroll-pane"> -<a class="totop" href="#top" data-g-event="left-nav-top">to top</a> <?cs include:"../../../../frameworks/base/docs/html/distribute/distribute_toc.cs" ?> @@ -139,7 +214,6 @@ def:samples_nav() ?> <div class="wrap clearfix" id="body-content"> <div class="col-4" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> <div id="devdoc-nav" class="scroll-pane"> -<a class="totop" href="#top" data-g-event="left-nav-top">to top</a> <?cs include:"../../../../frameworks/base/docs/html/samples/samples_toc.cs" ?> @@ -159,7 +233,6 @@ def:google_nav() ?> <div class="wrap clearfix" id="body-content"> <div class="col-4" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> <div id="devdoc-nav" class="scroll-pane"> -<a class="totop" href="#top" data-g-event="left-nav-top">to top</a> <?cs include:"../../../../frameworks/base/docs/html/google/google_toc.cs" ?> @@ -183,7 +256,6 @@ def:about_nav() ?> <div class="wrap clearfix" id="body-content"> <div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> <div id="devdoc-nav" class="scroll-pane"> -<a class="totop" href="#top" data-g-event="left-nav-top">to top</a> <?cs include:"../../../../frameworks/base/docs/html/about/about_toc.cs" ?> @@ -198,6 +270,42 @@ def:about_nav() ?> </script> <?cs /def ?> + +<?cs +def:wear_nav() ?> + <div class="wrap clearfix" id="body-content"> + <div class="col-4" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> + <div id="devdoc-nav" class="scroll-pane"> + +<?cs + include:"../../../../frameworks/base/docs/html/wear/wear_toc.cs" ?> + + + </div> + </div> <!-- end side-nav --> + <script> + $(document).ready(function() { + scrollIntoView("devdoc-nav"); + }); + </script> +<?cs /def ?> + +<?cs +def:preview_nav() ?> + <div class="wrap clearfix" id="body-content"> + <div class="col-4" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> + <div id="devdoc-nav" class="scroll-pane"> + <?cs + include:"../../../../frameworks/base/docs/html/preview/preview_toc.cs" ?> + </div> + </div> <!-- end side-nav --> + <script> + $(document).ready(function() { + scrollIntoView("devdoc-nav"); + }); + </script> +<?cs /def ?> + <?cs # The default side navigation for the reference docs ?><?cs def:default_left_nav() ?> <?cs if:reference.gcm || reference.gms ?> @@ -206,8 +314,6 @@ def:default_left_nav() ?> <div class="wrap clearfix" id="body-content"> <div class="col-4" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement"> <div id="devdoc-nav"> - -<a class="totop" href="#top" data-g-event="left-nav-top">to top</a> <div id="api-nav-header"> <div id="api-level-toggle"> <label for="apiLevelCheckbox" class="disabled" @@ -247,6 +353,7 @@ def:default_left_nav() ?> <?cs if:subcount(class.package) ?> <ul> + <?cs call:list("Annotations", class.package.annotations) ?> <?cs call:list("Interfaces", class.package.interfaces) ?> <?cs call:list("Classes", class.package.classes) ?> <?cs call:list("Enums", class.package.enums) ?> @@ -255,6 +362,7 @@ def:default_left_nav() ?> </ul><?cs elif:subcount(package) ?> <ul> + <?cs call:class_link_list("Annotations", package.annotations) ?> <?cs call:class_link_list("Interfaces", package.interfaces) ?> <?cs call:class_link_list("Classes", package.classes) ?> <?cs call:class_link_list("Enums", package.enums) ?> @@ -308,10 +416,111 @@ def:default_left_nav() ?> <?cs /def ?> + +<?cs +def:header_search_widget() ?> +<div class="menu-container"> + <div class="moremenu"> + <div id="more-btn"></div> + </div> + <div class="morehover" id="moremenu"> + <div class="top"></div> + <div class="mid"> + <div class="header">Links</div> + <ul> + <li><a href="https://play.google.com/apps/publish/" target="_googleplay">Google Play Developer Console</a></li> + <li><a href="http://android-developers.blogspot.com/">Android Developers Blog</a></li> + <li><a href="<?cs var:toroot ?>about/index.html">About Android</a></li> + </ul> + <div class="header">Android Sites</div> + <ul> + <li><a href="http://www.android.com">Android.com</a></li> + <li class="active"><a>Android Developers</a></li> + <li><a href="http://source.android.com">Android Open Source Project</a></li> + </ul> + + <?cs # Include language switcher only in online docs ?> + <?cs if:android.whichdoc == "online" ?> + <div class="header">Language</div> + <div id="language" class="locales"> + <select name="language" onChange="changeLangPref(this.value, true)"> + <option value="en">English</option> + <option value="es">Español</option> + <option value="ja">日本語</option> + <option value="ko">한국어</option> + <option value="ru">Русский</option> + <option value="zh-cn">中文 (中国)</option> + <option value="zh-tw">中文 (台灣)</option> + </select> + </div> + <script type="text/javascript"> + <!-- + loadLangPref(); + //--> + </script> + <?cs /if ?> + <?cs # End of lang switcher ?> + <br class="clearfix" /> + </div><!-- end 'mid' --> + <div class="bottom"></div> + </div><!-- end 'moremenu' --> + + <div class="search" id="search-container"> + <div class="search-inner"> + <div id="search-btn"></div> + <div class="left"></div> + <form onsubmit="return submit_search()"> + <input id="search_autocomplete" type="text" value="" autocomplete="off" name="q" + onfocus="search_focus_changed(this, true)" onblur="search_focus_changed(this, false)" + onkeydown="return search_changed(event, true, '<?cs var:toroot ?>')" + onkeyup="return search_changed(event, false, '<?cs var:toroot ?>')" /> + </form> + <div class="right"></div> + <a class="close hide">close</a> + <div class="left"></div> + <div class="right"></div> + </div><!-- end search-inner --> + </div><!-- end search-container --> + + <div class="search_filtered_wrapper reference"> + <div class="suggest-card reference no-display"> + <ul class="search_filtered"> + </ul> + </div> + </div> + + <div class="search_filtered_wrapper docs"> + <div class="suggest-card dummy no-display"> </div> + <div class="suggest-card develop no-display"> + <ul class="search_filtered"> + </ul> + <div class="child-card guides no-display"> + </div> + <div class="child-card training no-display"> + </div> + <div class="child-card samples no-display"> + </div> + </div> + <div class="suggest-card design no-display"> + <ul class="search_filtered"> + </ul> + </div> + <div class="suggest-card distribute no-display"> + <ul class="search_filtered"> + </ul> + </div> + </div> +</div><!-- end menu-container (search and menu widget) --> +<?cs /def ?> + + + <?cs def:custom_left_nav() ?><?cs - if:fullpage ?><?cs - call:fullpage() ?><?cs + if:fullpage ?><?cs + call:fullpage() ?><?cs + elif:nonavpage ?><?cs + call:no_nav() ?><?cs elif:guide ?><?cs call:guide_nav() ?><?cs elif:design ?><?cs @@ -324,15 +533,33 @@ def:custom_left_nav() ?><?cs call:google_nav() ?><?cs elif:samples ?><?cs call:samples_nav() ?><?cs - elif:more ?><?cs - call:dist_more_nav() ?><?cs elif:distribute ?><?cs - call:distribute_nav() ?><?cs - elif:about ?><?cs - call:about_nav() ?><?cs - else ?><?cs - call:default_left_nav() ?> <?cs - /if ?><?cs + if:googleplay ?><?cs + call:googleplay_nav() ?><?cs + elif:essentials ?><?cs + call:essentials_nav() ?><?cs + elif:users ?><?cs + call:users_nav() ?><?cs + elif:engage ?><?cs + call:engage_nav() ?><?cs + elif:monetize ?><?cs + call:monetize_nav() ?><?cs + elif:disttools ?><?cs + call:disttools_nav() ?><?cs + elif:stories ?><?cs + call:stories_nav() ?><?cs + /if ?><?cs + elif:about ?><?cs + call:about_nav() ?><?cs + elif:distribute ?><?cs + call:distribute_nav() ?><?cs + elif:wear ?><?cs + call:wear_nav() ?><?cs + elif:preview ?><?cs + call:preview_nav() ?><?cs + else ?><?cs + call:default_left_nav() ?> <?cs + /if ?><?cs /def ?> <?cs # appears at the bottom of every page ?><?cs diff --git a/tools/droiddoc/templates-sdk/docpage.cs b/tools/droiddoc/templates-sdk/docpage.cs index ea462c9..4d1404b 100644 --- a/tools/droiddoc/templates-sdk/docpage.cs +++ b/tools/droiddoc/templates-sdk/docpage.cs @@ -2,19 +2,36 @@ <?cs include:"macros.cs" ?> <html<?cs if:devsite ?> devsite<?cs /if ?>> <?cs include:"head_tag.cs" ?> -<body class="gc-documentation <?cs if:(google || reference.gms || reference.gcm) ?>google<?cs /if ?> - <?cs if:(guide||develop||training||reference||tools||sdk||samples) ?>develop<?cs if:guide ?> guide<?cs /if ?><?cs if:samples ?> samples<?cs /if ?><?cs - elif:about ?>about<?cs +<body class="gc-documentation + +<?cs +if:(google || reference.gms || reference.gcm) ?>google<?cs /if ?><?cs + if:(guide||develop||training||reference||tools||sdk||samples) ?>develop<?cs + if:guide ?> guide<?cs /if ?><?cs + if:samples ?> samples<?cs /if ?><?cs + elif:(distribute||googleplay||essentials||users||engage||monetize||disttools||stories) + ?>distribute<?cs + if:googleplay ?> googleplay<?cs /if ?><?cs + if:essentials ?> essentials<?cs /if ?><?cs + if:users ?> users<?cs /if ?><?cs + if:engage ?> engage<?cs /if ?><?cs + if:monetize ?> monetize<?cs /if ?><?cs + if:disttools ?> disttools<?cs /if ?><?cs + if:stories ?> stories<?cs /if ?><?cs + elif:(about||wear||tv||auto) ?>about<?cs elif:design ?>design<?cs - elif:distribute ?>distribute<?cs - /if ?><?cs - if:page.trainingcourse ?> trainingcourse<?cs /if ?>" itemscope itemtype="http://schema.org/Article"> -<?cs include:"header.cs" ?> +/if ?><?cs +if:page.trainingcourse ?> trainingcourse<?cs +/if ?>" itemscope itemtype="http://schema.org/Article"><?cs +include:"header.cs" ?> -<div <?cs if:fullpage -?>class="fullpage"<?cs elif:design||tools||about||sdk||distribute -?>class="col-13" id="doc-col"<?cs else -?>class="col-12" id="doc-col"<?cs /if ?> > +<div <?cs + if:fullpage + ?>class="fullpage"<?cs + elif:(design||tools||about||sdk||googleplay||essentials||users||monetize||disttools) && !nonavpage + ?>class="col-13" id="doc-col"<?cs + elif:!nonavpage + ?>class="col-12" id="doc-col"<?cs /if ?> > <?cs if:(design||training||walkthru) && !page.trainingcourse && !page.article ?><?cs # header logic for docs that provide previous/next buttons ?> <?cs if:header.hide ?> @@ -73,7 +90,8 @@ </div> <?cs /if ?><?cs # end if training ?> </div> - <?cs /if ?> + <?cs /if ?><?cs # end if header.hide ?> + <?cs elif:samplesProjectIndex ?> <div id="api-info-block"> <div class="sum-details-links"> @@ -83,7 +101,17 @@ </div><!-- end sum-details-links --> </div><!-- end breadcurmb block --> <h1 itemprop="name"><?cs var:projectDir ?></h1> + <?cs else ?> + <?cs if:training ?> +<?cs # horrible horrible hack to move TOC up when the next/prev links are not there ?> +<style> + #tb-wrapper { + margin-top:6px; + } +</style> + <?cs /if ?> + <?cs if:(!fullpage && !header.hide) ?> <?cs if:page.landing ?><?cs # header logic for docs that are landing pages ?> <div class="landing-banner"> @@ -129,25 +157,9 @@ if:fullpage ?>wrap<?cs else ?>layout-content-row<?cs /if ?>" itemscope itemtype="http://schema.org/SiteNavigationElement"> - <div class="layout-content-col <?cs - if:fullpage ?>col-16<?cs - elif:training||guide ?>col-8<?cs - else ?>col-9<?cs /if ?>" style="padding-top:4px"> - <?cs if:!page.noplus ?><?cs if:fullpage ?><style>#___plusone_0 {float:right !important;}</style><?cs /if ?> - <div class="g-plusone" data-size="medium"></div> - <?cs /if ?> - </div> <?cs if:!fullscreen ?> - <div class="paging-links layout-content-col col-4"> + <div class="paging-links layout-content-col col-10"> <?cs if:(design||training||walkthru) && !page.landing && !page.trainingcourse && !footer.hide ?> - <a href="#" class="prev-page-link hide" - zh-tw-lang="上一堂課" - zh-cn-lang="上一课" - ru-lang="Предыдущий" - ko-lang="이전" - ja-lang="前へ" - es-lang="Anterior" - >Previous</a> <a href="#" class="next-page-link hide" zh-tw-lang="下一堂課" zh-cn-lang="下一课" @@ -164,35 +176,29 @@ ja-lang="開始する" es-lang="Empezar" >Get started</a> + <a href="#" class="next-class-link hide">Next class</a> + <?cs /if ?> + </div> + <div class="layout-content-col plus-container col-2" > + <?cs if:!page.noplus ?><?cs if:fullpage ?><style>#___plusone_0 {float:right !important;}</style><?cs /if ?> + <div class="g-plusone" data-size="medium"></div> <?cs /if ?> </div> <?cs /if ?> </div> - <?cs # for training classes, provide a different kind of link when the next page is a different class ?> - <?cs if:training && !page.article ?> - <div class="layout-content-row content-footer next-class" style="display:none" itemscope itemtype="http://schema.org/SiteNavigationElement"> - <a href="#" class="next-class-link hide">Next class: </a> - </div> - <?cs /if ?> - </div> <!-- end jd-content --> <?cs include:"footer.cs" ?> </div><!-- end doc-content --> <?cs include:"trailer.cs" ?> + <script src="https://developer.android.com/ytblogger_lists_unified.js" type="text/javascript"></script> + <script src="<?cs var:toroot ?>jd_lists_unified.js?v=2" type="text/javascript"></script> + <script src="<?cs var:toroot ?>jd_extras.js?v=2" type="text/javascript"></script> + <script src="<?cs var:toroot ?>jd_collections.js?v=2" type="text/javascript"></script> + <script src="<?cs var:toroot ?>jd_tag_helpers.js?v=2" type="text/javascript"></script> -<!-- Start of Tag --> -<script type="text/javascript"> -var axel = Math.random() + ""; -var a = axel * 10000000000000; -document.write('<iframe src="https://2507573.fls.doubleclick.net/activityi;src=2507573;type=other026;cat=googl348;ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>'); -</script> -<noscript> -<iframe src="https://2507573.fls.doubleclick.net/activityi;src=2507573;type=other026;cat=googl348;ord=1?" width="1" height="1" frameborder="0" style="display:none"></iframe> -</noscript> -<!-- End of Tag --> </body> </html> diff --git a/tools/droiddoc/templates-sdk/head_tag.cs b/tools/droiddoc/templates-sdk/head_tag.cs index 54de169..7ecb7f9 100644 --- a/tools/droiddoc/templates-sdk/head_tag.cs +++ b/tools/droiddoc/templates-sdk/head_tag.cs @@ -15,13 +15,13 @@ ?><?cs # END if/else devsite ?> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -<meta name="viewport" content="width=device-width" /> +<meta name="viewport" content="width=<?cs + if:page.viewport_width ?><?cs + var:page.viewport_width ?><?cs + else ?>device-width<?cs /if ?>" /> <?cs if:page.metaDescription ?> <meta name="Description" content="<?cs var:page.metaDescription ?>"><?cs - /if ?><?cs - if:page.customHeadTag ?> -<?cs var:page.customHeadTag ?><?cs /if ?> <link rel="shortcut icon" type="image/x-icon" href="<?cs var:toroot ?>favicon.ico" /> <title><?cs @@ -31,10 +31,16 @@ <!-- STYLESHEETS --> <link rel="stylesheet" -href="<?cs if:android.whichdoc != 'online' ?>http:<?cs /if ?>//fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic,bold" title="roboto"> -<link href="<?cs var:toroot ?>assets/css/default.css" rel="stylesheet" type="text/css"> +href="<?cs +if:android.whichdoc != 'online' ?>http:<?cs +/if ?>//fonts.googleapis.com/css?family=Roboto+Condensed"> +<link rel="stylesheet" href="<?cs +if:android.whichdoc != 'online' ?>http:<?cs +/if ?>//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold" + title="roboto"> +<link href="<?cs var:toroot ?>assets/css/default.css?v=2" rel="stylesheet" type="text/css"> -<?cs if:reference && !(reference.gms || reference.gcm) ?> +<?cs if:reference && !(reference.gms || reference.gcm || preview) ?> <!-- FULLSCREEN STYLESHEET --> <link href="<?cs var:toroot ?>assets/css/fullscreen.css" rel="stylesheet" class="fullscreen" type="text/css"> @@ -47,23 +53,27 @@ if:devsite ?><script src="<?cs var:toroot ?>_static/js/android_3p-bundle.js" type="text/javascript"></script><?cs else ?><script src="<?cs var:toroot ?>assets/js/android_3p-bundle.js" type="text/javascript"></script><?cs -/if ?> +/if ?><?cs + if:page.customHeadTag ?> +<?cs var:page.customHeadTag ?><?cs + /if ?> <script type="text/javascript"> var toRoot = "<?cs var:toroot ?>"; var metaTags = [<?cs var:meta.tags ?>]; var devsite = <?cs if:devsite ?>true<?cs else ?>false<?cs /if ?>; </script> -<script src="<?cs var:toroot ?>assets/js/docs.js" type="text/javascript"></script> +<script src="<?cs var:toroot ?>assets/js/docs.js?v=2" type="text/javascript"></script> -<script type="text/javascript"> - var _gaq = _gaq || []; - _gaq.push(['_setAccount', 'UA-5831155-1']); - _gaq.push(['_trackPageview']); +<script> + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); - (function() { - var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; - ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; - var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); - })(); + ga('create', 'UA-5831155-1', 'android.com'); + ga('create', 'UA-49880327-2', 'android.com', {'name': 'universal'}); // New tracker); + ga('send', 'pageview'); + ga('universal.send', 'pageview'); // Send page view for new tracker. </script> -</head>
\ No newline at end of file + +</head> diff --git a/tools/droiddoc/templates-sdk/package.cs b/tools/droiddoc/templates-sdk/package.cs index 99eaff2..abd49f1 100644 --- a/tools/droiddoc/templates-sdk/package.cs +++ b/tools/droiddoc/templates-sdk/package.cs @@ -45,6 +45,7 @@ <?cs /if ?> <?cs /def ?> +<?cs call:class_table("Annotations", package.annotations) ?> <?cs call:class_table("Interfaces", package.interfaces) ?> <?cs call:class_table("Classes", package.classes) ?> <?cs call:class_table("Enums", package.enums) ?> diff --git a/tools/droiddoc/templates-sdk/sdkpage.cs b/tools/droiddoc/templates-sdk/sdkpage.cs index 95f6596..87c5725 100644 --- a/tools/droiddoc/templates-sdk/sdkpage.cs +++ b/tools/droiddoc/templates-sdk/sdkpage.cs @@ -77,7 +77,7 @@ <table class="download" id="download-table"> <tr> - <th>Platform</th> + <th>Platform<br>(32-bit target)</th> <th>Package</th> <th style="white-space:nowrap">Size (Bytes)</th> <th>MD5 Checksum</th> @@ -183,8 +183,117 @@ <td><?cs var:ndk.linux64.legacy_bytes ?></td> <td><?cs var:ndk.linux64.legacy_checksum ?></td> </tr> --> + + <tr> + <th>Platform<br>(64-bit target)</th> + <th>Package</th> + <th style="white-space:nowrap">Size (Bytes)</th> + <th>MD5 Checksum</th> + </tr> + <tr> + <td>Windows 32-bit</td> + <td> + <a onClick="return onDownload(this)" + href="http://dl.google.com/android/ndk/<?cs var:ndk.win32_64_download ?>"><?cs var:ndk.win32_64_download ?></a> + </td> + <td><?cs var:ndk.win32_64_bytes ?></td> + <td><?cs var:ndk.win32_64_checksum ?></td> + </tr> + <!-- <tr> + <td> + <a onClick="return onDownload(this)" + href="http://dl.google.com/android/ndk/<?cs var:ndk.win32.legacy_download ?>"><?cs var:ndk.win32.legacy_download ?></a> + </td> + <td><?cs var:ndk.win32.legacy_bytes ?></td> + <td><?cs var:ndk.win32.legacy_checksum ?></td> + </tr> --> + <tr> + <td>Windows 64-bit</td> + <td> + <a onClick="return onDownload(this)" + href="http://dl.google.com/android/ndk/<?cs var:ndk.win64_64_download ?>"><?cs var:ndk.win64_64_download ?></a> + </td> + <td><?cs var:ndk.win64_64_bytes ?></td> + <td><?cs var:ndk.win64_64_checksum ?></td> + </tr> + <!-- <tr> + <td> + <a onClick="return onDownload(this)" + href="http://dl.google.com/android/ndk/<?cs var:ndk.win64.legacy_download ?>"><?cs var:ndk.win64.legacy_download ?></a> + </td> + <td><?cs var:ndk.win64.legacy_bytes ?></td> + <td><?cs var:ndk.win64.legacy_checksum ?></td> + </tr> --> + <tr> + <td>Mac OS X 32-bit</td> + <td> + <a onClick="return onDownload(this)" + href="http://dl.google.com/android/ndk/<?cs var:ndk.mac32_64_download ?>"><?cs var:ndk.mac32_64_download ?></a> + </td> + <td><?cs var:ndk.mac32_64_bytes ?></td> + <td><?cs var:ndk.mac32_64_checksum ?></td> + </tr> + <!-- <tr> + <td> + <a onClick="return onDownload(this)" + href="http://dl.google.com/android/ndk/<?cs var:ndk.mac32.legacy_download ?>"><?cs var:ndk.mac32.legacy_download ?></a> + </td> + <td><?cs var:ndk.mac32.legacy_bytes ?></td> + <td><?cs var:ndk.mac32.legacy_checksum ?></td> + </tr> --> + <td>Mac OS X 64-bit</td> + <td> + <a onClick="return onDownload(this)" + href="http://dl.google.com/android/ndk/<?cs var:ndk.mac64_64_download ?>"><?cs var:ndk.mac64_64_download ?></a> + </td> + <td><?cs var:ndk.mac64_64_bytes ?></td> + <td><?cs var:ndk.mac64_64_checksum ?></td> + </tr> + <!-- <tr> + <td> + <a onClick="return onDownload(this)" + href="http://dl.google.com/android/ndk/<?cs var:ndk.mac64.legacy_download ?>"><?cs var:ndk.mac64.legacy_download ?></a> + </td> + <td><?cs var:ndk.mac64.legacy_bytes ?></td> + <td><?cs var:ndk.mac64.legacy_checksum ?></td> + </tr> --> + <tr> + <td>Linux 32-bit (x86)</td> + <td> + <a onClick="return onDownload(this)" + href="http://dl.google.com/android/ndk/<?cs var:ndk.linux32_64_download ?>"><?cs var:ndk.linux32_64_download ?></a> + </td> + <td><?cs var:ndk.linux32_64_bytes ?></td> + <td><?cs var:ndk.linux32_64_checksum ?></td> + </tr> + <!-- <tr> + <td> + <a onClick="return onDownload(this)" + href="http://dl.google.com/android/ndk/<?cs var:ndk.linux32.legacy_download ?>"><?cs var:ndk.linux32.legacy_download ?></a> + </td> + <td><?cs var:ndk.linux32.legacy_bytes ?></td> + <td><?cs var:ndk.linux32.legacy_checksum ?></td> + </tr> --> + <tr> + <td>Linux 64-bit (x86)</td> + <td> + <a onClick="return onDownload(this)" + href="http://dl.google.com/android/ndk/<?cs var:ndk.linux64_64_download ?>"><?cs var:ndk.linux64_64_download ?></a> + </td> + <td><?cs var:ndk.linux64_64_bytes ?></td> + <td><?cs var:ndk.linux64_64_checksum ?></td> + </tr> + <!-- <tr> + <td> + <a onClick="return onDownload(this)" + href="http://dl.google.com/android/ndk/<?cs var:ndk.linux64.legacy_download ?>"><?cs var:ndk.linux64.legacy_download ?></a> + </td> + <td><?cs var:ndk.linux64.legacy_bytes ?></td> + <td><?cs var:ndk.linux64.legacy_checksum ?></td> + </tr> --> + <tr> - <th>Additional Download</th> + <th>Additional Download<br>(32-, 64-bit)</th> <th>Package</th> <th style="white-space:nowrap">Size (Bytes)</th> <th>MD5 Checksum</th> @@ -280,7 +389,7 @@ <h4><a href='' class="expandable" onclick="toggleExpandable(this,'.pax');hideExpandable('.myide,.reqs');return false;" - >DOWNLOAD FOR OTHER PLATFORMS</a></h4> + >VIEW ALL DOWNLOADS AND SIZES</a></h4> <div class="pax col-13 online" style="display:none;margin:0;"> @@ -298,7 +407,7 @@ <td>Windows 32-bit</td> <td> <a onClick="return onDownload(this)" id="win-bundle32" - href="http://dl.google.com/android/adt/<?cs var:sdk.version ?>/<?cs var:sdk.win32_bundle_download ?>"><?cs var:sdk.win32_bundle_download ?></a> + href="http://dl.google.com/android/adt/<?cs var:sdk.win32_bundle_download ?>"><?cs var:sdk.win32_bundle_download ?></a> </td> <td><?cs var:sdk.win32_bundle_bytes ?> bytes</td> <td><?cs var:sdk.win32_bundle_checksum ?></td> @@ -307,7 +416,7 @@ <td>Windows 64-bit</td> <td> <a onClick="return onDownload(this)" id="win-bundle64" - href="http://dl.google.com/android/adt/<?cs var:sdk.version ?>/<?cs var:sdk.win64_bundle_download ?>"><?cs var:sdk.win64_bundle_download ?></a> + href="http://dl.google.com/android/adt/<?cs var:sdk.win64_bundle_download ?>"><?cs var:sdk.win64_bundle_download ?></a> </td> <td><?cs var:sdk.win64_bundle_bytes ?> bytes</td> <td><?cs var:sdk.win64_bundle_checksum ?></td> @@ -316,7 +425,7 @@ <td><nobr>Mac OS X 64-bit</nobr></td> <td> <a onClick="return onDownload(this)" id="mac-bundle64" - href="http://dl.google.com/android/adt/<?cs var:sdk.version ?>/<?cs var:sdk.mac64_bundle_download ?>"><?cs var:sdk.mac64_bundle_download ?></a> + href="http://dl.google.com/android/adt/<?cs var:sdk.mac64_bundle_download ?>"><?cs var:sdk.mac64_bundle_download ?></a> </td> <td><?cs var:sdk.mac64_bundle_bytes ?> bytes</td> <td><?cs var:sdk.mac64_bundle_checksum ?></td> @@ -325,7 +434,7 @@ <td>Linux 32-bit</td> <td> <a onClick="return onDownload(this)" id="linux-bundle32" - href="http://dl.google.com/android/adt/<?cs var:sdk.version ?>/<?cs var:sdk.linux32_bundle_download ?>"><?cs var:sdk.linux32_bundle_download ?></a> + href="http://dl.google.com/android/adt/<?cs var:sdk.linux32_bundle_download ?>"><?cs var:sdk.linux32_bundle_download ?></a> </td> <td><?cs var:sdk.linux32_bundle_bytes ?> bytes</td> <td><?cs var:sdk.linux32_bundle_checksum ?></td> @@ -334,7 +443,7 @@ <td>Linux 64-bit</td> <td> <a onClick="return onDownload(this)" id="linux-bundle64" - href="http://dl.google.com/android/adt/<?cs var:sdk.version ?>/<?cs var:sdk.linux64_bundle_download ?>"><?cs var:sdk.linux64_bundle_download ?></a> + href="http://dl.google.com/android/adt/<?cs var:sdk.linux64_bundle_download ?>"><?cs var:sdk.linux64_bundle_download ?></a> </td> <td><?cs var:sdk.linux64_bundle_bytes ?> bytes</td> <td><?cs var:sdk.linux64_bundle_checksum ?></td> @@ -430,12 +539,12 @@ var:sdk.linux_download /* set up primary adt download button */ $('#download-bundle-button').show(); - $('#download-bundle-button').append("Download the SDK <br/><span class='small'>ADT Bundle for " + os + "</span>"); + $('#download-bundle-button').append("Download Eclipse ADT <br/><span class='small'>with the Android SDK for " + os + "</span>"); $('#download-bundle-button').click(function() {return onDownload(this,true,true);}).attr('href', bundlename); /* set up sdk tools only button */ $('#download-tools-button').show(); - $('#download-tools-button').append("Download the SDK Tools for " + os); + $('#download-tools-button').append("Download the stand-alone Android SDK Tools for " + os); $('#download-tools-button').click(function() {return onDownload(this,true);}).attr('href', $toolslink.attr('href')); } else { $('.pax').show(); @@ -501,9 +610,18 @@ var:sdk.linux_download function onDownloadForRealz(link) { if ($("input#agree").is(':checked') && $("#bitpicker input:checked").length) { $("div.sdk-terms").slideUp(); - $("#sdk-terms-form,.sdk-terms-intro").fadeOut('slow'); - $("#next-steps").fadeIn('slow'); - $("h1#tos-header").text('Get Ready to Code!'); + $("h1#tos-header").text('Now redirecting to the install instructions...'); + $("#sdk-terms-form,.sdk-terms-intro").fadeOut('slow', function() { + setTimeout(function() { + if ($("#downloadForRealz").attr('bundle') == 'true') { + // User downloaded the ADT Bundle + window.location = "/sdk/installing/index.html?pkg=adt"; + } else { + // User downloaded the SDK Tools + window.location = "/sdk/installing/index.html?pkg=tools"; + } + }, 500); + }); _gaq.push(['_trackEvent', 'SDK', 'ADT and Tools', $("#downloadForRealz").html()]); return true; } else { |
