Add basic support for rendering dynamic content on pages.
Change-Id: If3ba4f71771a01043ec6d544e3b4a9222ba35daf
diff --git a/tools/droiddoc/templates-sdk-dyn/assets/css/default.css b/tools/droiddoc/templates-sdk-dyn/assets/css/default.css
index 7515360..c8a0fbf 100644
--- a/tools/droiddoc/templates-sdk-dyn/assets/css/default.css
+++ b/tools/droiddoc/templates-sdk-dyn/assets/css/default.css
@@ -528,9 +528,9 @@
width:262px;
}
- .paging-links a.start-class-link {
- width:100%;
- text-align:right;
+ .paging-links a.start-class-link {
+ width:100%;
+ text-align:right;
}
/* list of classes on course landing page */
@@ -1491,7 +1491,8 @@
Header, Login, Nav-X, Search
*/
#header {
- padding: 2.2em 0 0.2em 0;
+ margin: 0;
+ padding: 0;
}
#header:before, #header:after {
content: "";
@@ -1515,12 +1516,11 @@
.develop a.selected {
color: #F80;
}
+
.distribute a.selected {
color: #9C0;
}
-
-
.nav-x li {
display: inline;
margin-right: 45px;
@@ -1631,6 +1631,170 @@
.search-dropdown li a:hover h6, .search-dropdown li a:hover .desc {
color: #33b5e5
}
+
+/************ STICKY NAV BAR ******************/
+
+#header-wrapper {
+ background: #f9f9f9;
+ margin: 0 -10px 0 -10px;
+ padding: 31px 10px 0px 10px;
+ position: relative;
+}
+#header-wrapper #nav-x div.wrap {
+ max-width: 940px;
+ height: 38px;
+}
+#header-wrapper #nav-x ul.nav-x li {
+ margin-right: 36px !important;
+ margin-top: 5px;
+ margin-bottom: 0px;
+ height: 30px;
+}
+#header-wrapper #nav-x > div.wrap ul.nav-x li.active {
+ color: #669900;
+ border-bottom: 3px solid #669900;
+}
+#header-wrapper #nav-x > div.wrap ul.nav-x li.active a {
+ color: #669900;
+}
+#header-wrapper #nav-x > div.wrap ul.nav-x a {
+ font-size: 14.5px;
+}
+#header-wrapper .developer-console-btn {
+ float: right;
+ background: #fefefe;
+ border-radius: 4px;
+ padding: 8px 14px;
+ box-shadow: 1px 1px 0px #7a7a7a;
+ font-size: 14px;
+ margin-top: -6px;
+ cursor: pointer;
+ color: #464646;
+ margin-right: 20px;
+}
+/* not currently used */
+#header-wrapper .shadow {
+ width: 1034px;
+ height: 4px;
+ position: absolute;
+ left: 50%;
+ margin-left: -517px;
+ bottom: -4px;
+ background-image: url(../images/header-shadow.png);
+}
+
+#context {
+ clear: both;
+ padding-top: 14px;
+}
+#context .breadcrumb {
+ float: left;
+ margin-bottom: 10px;
+}
+#context .util {
+ float: right;
+ margin-right: 20px;
+}
+
+.breadcrumb {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ position: relative;
+}
+.breadcrumb li {
+ float: left;
+ padding: 0 20px 0 0;
+ color: #000;
+}
+.breadcrumb li a {
+ color: #000;
+}
+.breadcrumb li:after {
+ content: url(../images/breadcrumb.png);
+ position: relative;
+ top: 1px;
+ left: 10px;
+ width: 5px;
+ height: 10px;
+}
+.breadcrumb li.current {
+ font-weight: 700;
+}
+.breadcrumb li.current:after {
+ display: none;
+}
+
+/* Sticky Nav overrides */
+.sticky-menu {
+ position: fixed;
+ width: 940px;
+ height: 0px;
+ z-index: 51;
+ top: 12px;
+}
+#sticky-header {
+ display: none;
+ padding: 0 10px;
+ position: fixed;
+ background: #f9f9f9;
+ top: 0px;
+ left: 0px;
+ right: 0px;
+ height: 45px;
+ box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
+ border-bottom: 1px solid #a5c43a;
+ z-index: 50;
+ opacity: 0;
+ -webkit-transition: opacity 0.25s;
+ -moz-transition: opacity 0.25s;
+ -o-transition: opacity 0.25s;
+ transition: opacity 0.25s;
+}
+#sticky-header.design {
+ border-bottom: 1px solid #33b5e5;
+}
+#sticky-header.develop {
+ border-bottom: 1px solid #F80;
+}
+#sticky-header.distribute {
+ border-bottom: 1px solid #9C0;
+}
+#sticky-header > div {
+ overflow: hidden;
+ *zoom: 1;
+ width: 940px;
+ margin: 0 auto;
+ clear: both;
+ padding-top: 9px;
+}
+#sticky-header > div .logo {
+ float: left;
+ width: 26px;
+ height: 25px;
+ background: url(../images/dac_logo.png);
+ z-index: 52;
+ position: relative;
+}
+#sticky-header > div .top {
+ float: left;
+ width: 38px;
+ height: 38px;
+ position: relative;
+ background: url(../images/styles/gototop.png);
+ z-index: 52;
+}
+#sticky-header > div .breadcrumb {
+ float: left;
+ padding: 0 0 0 10px;
+ border-left: 1px solid #d2d2d2;
+ line-height: 24px;
+ font-size: 14px;
+ position: relative;
+ top: 0px;
+ z-index: 52;
+}
+
/* --------------------------------------------------------------------------
Buttons
*/
@@ -1828,8 +1992,8 @@
#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:0 0 0 30px; /* negative top-margin to counter the content-header bottom margin */
+ padding:0 0 30px;
}
#tb-wrapper {
@@ -1900,7 +2064,6 @@
.sidebox h5 {
font-weight:bold;
margin:0 0 10px;
- line-height: 16px;
}
.sidebox * {
@@ -4782,53 +4945,6 @@
-/************ 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,
@@ -4872,22 +4988,16 @@
.landing-docs a {
color:#333 !important;
}
-
.landing-docs a:hover,
.landing-docs a:hover * {
color:#7AA1B0 !important
}
-
.landing-docs .normal-links a {
color:#258aaf !important;
}
-
.plusone {
float:right;
}
-
-
-
.next-docs {
border-top:1px solid #ccc;
margin:40px 0 0;
@@ -4901,14 +5011,13 @@
.next-docs div:last-child {
margin-right:0;
}
-
.next-docs h2 {
font-size:14px;
line-height:21px;
color:#555;
text-transform:uppercase;
border-bottom:none;
- margin:0 0 1em;
+ margin:0;
padding:5px 0 0;
}
@@ -5006,3 +5115,1180 @@
.fullpage #footer {
margin-top: -40px;
}
+
+/************ DISTRIBUTE PAGES ******************/
+
+/* Article page header line fix */
+.headerLine {
+ overflow: hidden;
+}
+.headerLine h1 {
+ float: left;
+ padding-right: 20px;
+ margin-bottom: 0px;
+ font-size: 20px;
+ color: #363636;
+}
+.headerLine hr {
+ overflow: hidden;
+ margin: 42px 0 0 0;
+}
+
+.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:10px;
+ 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: 0px 1px 5px rgba(0, 0, 0, 0.2);
+ 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.4);
+ -webkit-transition: opacity 0.5s;
+ -moz-transition: opacity 0.5s;
+ -o-transition: opacity 0.5s;
+ transition: opacity 0.5s;
+}
+.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: 4px;
+ margin-bottom: -2px;
+ font-size: 16px;
+}
+.card-info .description {
+ position: relative;
+ overflow: hidden;
+}
+.card-info .description .text {
+ color: #464646;
+ font: 13px/15px Roboto Condensed;
+ overflow: hidden;
+ padding-right: 70px;
+ height: 30px;
+}
+.card-info .description .util {
+ position: absolute;
+ right: 0px;
+ bottom: -3px;
+ 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;
+}
+
+/* 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;
+ clear: both;
+ visibility: hidden;
+}
+
+.resource-card:hover {
+ cursor: pointer;
+}
+.resource-card:hover .card-bg:after {
+ opacity: 0;
+}
+.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;
+}
+
+/* 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-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;
+}
+
+/* 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;
+}
+
+/*
+ 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;
+}
diff --git a/tools/droiddoc/templates-sdk-dyn/assets/images/breadcrumb.png b/tools/droiddoc/templates-sdk-dyn/assets/images/breadcrumb.png
new file mode 100644
index 0000000..407a318
--- /dev/null
+++ b/tools/droiddoc/templates-sdk-dyn/assets/images/breadcrumb.png
Binary files differ
diff --git a/tools/droiddoc/templates-sdk-dyn/assets/images/link-out.png b/tools/droiddoc/templates-sdk-dyn/assets/images/link-out.png
new file mode 100644
index 0000000..aa55f9a
--- /dev/null
+++ b/tools/droiddoc/templates-sdk-dyn/assets/images/link-out.png
Binary files differ
diff --git a/tools/droiddoc/templates-sdk-dyn/assets/images/resource-card-default-android.jpg b/tools/droiddoc/templates-sdk-dyn/assets/images/resource-card-default-android.jpg
new file mode 100644
index 0000000..8050744
--- /dev/null
+++ b/tools/droiddoc/templates-sdk-dyn/assets/images/resource-card-default-android.jpg
Binary files differ
diff --git a/tools/droiddoc/templates-sdk-dyn/assets/images/stack-arrow-right.png b/tools/droiddoc/templates-sdk-dyn/assets/images/stack-arrow-right.png
new file mode 100644
index 0000000..46d6a50
--- /dev/null
+++ b/tools/droiddoc/templates-sdk-dyn/assets/images/stack-arrow-right.png
Binary files differ
diff --git a/tools/droiddoc/templates-sdk-dyn/assets/js/docs.js b/tools/droiddoc/templates-sdk-dyn/assets/js/docs.js
index 6630bf9..3688c93 100644
--- a/tools/droiddoc/templates-sdk-dyn/assets/js/docs.js
+++ b/tools/droiddoc/templates-sdk-dyn/assets/js/docs.js
@@ -167,10 +167,12 @@
// highlight Design tab
if ($("body").hasClass("design")) {
$("#header li.design a").addClass("selected");
+ $("#sticky-header").addClass("design");
// 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,8 +197,26 @@
// 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");
+ }
+ }
// set global variable so we can highlight the sidenav a bit later (such as for google reference)
// and highlight the sidenav
mPagePath = pagePath;
@@ -906,6 +926,86 @@
+/*
+ * Displays sticky nav bar on pages when dac header scrolls out of view
+ */
+
+(function() {
+ $(document).ready(function() {
+
+ // Sticky nav position
+ var stickyTop = $('#header-wrapper').outerHeight();
+ var sticky = false;
+ var hiding = false;
+ var $stickyEl = $('#sticky-header');
+ var $menuEl = $('.menu-container');
+ //var scrollThrottle = -1;
+ var lastScroll = 0;
+ var autoScrolling = false;
+
+ $(window).scroll(function() {
+ var top = $(window).scrollTop();
+
+ if (sticky && top < stickyTop) {
+ sticky = false;
+ hiding = true;
+ $stickyEl.css({'opacity': 0});
+ setTimeout(function() {
+ $menuEl.removeClass('sticky-menu');
+ $stickyEl.hide();
+ hiding = false;
+ }, 250);
+ } else if (!sticky && top >= stickyTop) {
+ sticky = true;
+ $stickyEl.show();
+ $menuEl.addClass('sticky-menu');
+
+ setTimeout(function() {
+ $stickyEl.css({'opacity': 1});
+ }, 10);
+
+ // If its a jump then make sure to modify the scroll because of the
+ // sticky nav
+ if (!autoScrolling && Math.abs(top - lastScroll > 100)) {
+ autoScrolling = true;
+ $('body,html').animate({scrollTop:(top = top - 60)}, '250', 'swing', function() { autoScrolling = false; });
+ }
+ } else if (hiding && top < 15) {
+ $menuEl.removeClass('sticky-menu');
+ $stickyEl.hide();
+ hiding = false;
+ }
+
+ lastScroll = top;
+ });
+
+ // 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'});
+ });
+
+ // Auto scroll anchors and account for sticky nav
+ $('a[href^=#]').click(function(e){
+ e.preventDefault();
+ var tmp = $.attr(this, 'href').substr(1);
+ var el = document.getElementById(tmp) ||
+ ((tmp = document.getElementsByName(tmp)).length ?
+ tmp[0] : null);
+
+ if (el) {
+ var top = $(el).offset().top - 60;
+ autoScrolling = true;
+ $('body,html').animate({scrollTop:top}, '500', 'swing', function() { autoScrolling = false; });
+ }
+ });
+
+ });
+
+})();
@@ -1724,6 +1824,7 @@
$('.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', function() { autoScrolling = false; });
return true;
} else {
// otherwise, results are already showing, so allow ajax to auto refresh the results
@@ -3233,3 +3334,603 @@
$("#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);
+ });
+
+ // Might remove this, but adds ellipsis to card descriptions rather
+ // than just cutting them off, not sure if it performs well
+ $('.card-info .text').ellipsis();
+ });
+
+ /*
+ Three types of resource layouts:
+ Flow - Uses a fixed row-height flow using float left style.
+ Carousel - Single card slideshow all same dimension absoute.
+ 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
+ };
+
+ // 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) {
+ 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();
+
+ $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) {
+ //keep url clean for matching and offline mode handling
+ var urlPrefix = resources[i].url.indexOf("//") > -1 ? "" : toRoot;
+ var $card = $('<a>')
+ .attr('href', urlPrefix + resources[i].url)
+ .decorateResourceCard(resources[i]);
+
+ $('<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) */
+ 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 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
+ for (var i = 0; i < sections.length; ++i) {
+ if (!sections[i].sections || !sections[i].sections.length) {
+ //keep url clean for matching and offline mode handling
+ urlPrefix = sections[i].url.indexOf("//") > -1 ? "" : toRoot;
+ // Render it as a resource card
+
+ sectionResources.push(
+ $('<a>')
+ .addClass('resource-card section-card')
+ .attr('href', urlPrefix + sections[i].resource.url)
+ .decorateResourceCard(sections[i].resource)[0]
+ );
+
+ } else {
+ cards.push(
+ $('<div>')
+ .addClass('resource-card section-card-menu')
+ .decorateResourceSection(sections[i])[0]
+ );
+ }
+ }
+
+ cards = cards.concat(sectionResources);
+
+ for (var i = 0; i < resources.length; ++i) {
+ //keep url clean for matching and offline mode handling
+ urlPrefix = resources[i].url.indexOf("//") > -1 ? "" : toRoot;
+ var $card = $('<a>')
+ .addClass('resource-card related-card')
+ .attr('href', urlPrefix + resources[i].url)
+ .decorateResourceCard(resources[i]);
+
+ cards.push($card[0]);
+ }
+
+ 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]));
+ }
+
+ };
+
+ /* 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;
+
+ while (i < resources.length) {
+ var cardSize = cardSizes[j++ % cardSizes.length];
+ cardSize = cardSize.replace(/^\s+|\s+$/,'');
+
+ // 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];
+ //keep url clean for matching and offline mode handling
+ urlPrefix = resource.url.indexOf("//") > -1 ? "" : toRoot;
+ var $card = $('<a>')
+ .addClass('resource-card resource-card-' + cardSize + ' resource-card-' + resource.type)
+ .attr('href', urlPrefix + resource.url);
+
+ 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.decorateResourceCard(resource)
+ .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 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($) {
+ /* Simple jquery function to create dom for a standard resource card */
+ $.fn.decorateResourceCard = function(resource) {
+ var section = resource.group || resource.type;
+ var imgUrl;
+ if (resource.image) {
+ //keep url clean for matching and offline mode handling
+ var urlPrefix = resource.image.indexOf("//") > -1 ? "" : toRoot;
+ imgUrl = urlPrefix + resource.image;
+ }
+
+ $('<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($('<div>').addClass('description')
+ .append($('<div>').addClass('text').html(resource.summary))
+ .append($('<div>').addClass('util')
+ .append($('<div>').addClass('g-plusone')
+ .attr('data-size', 'small')
+ .attr('data-align', 'right')
+ .attr('data-href', resource.url))))
+ .appendTo(this);
+
+ return this;
+ };
+
+ /* Simple jquery function to create dom for a resource section card (menu) */
+ $.fn.decorateResourceSection = function(section) {
+ 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];
+ $('<li>')
+ .append($('<a>').attr('href', subResource.url)
+ .append($('<div>').addClass('title').html(subResource.title))
+ .append($('<div>').addClass('description')
+ .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;
+ };
+})(jQuery);
+
+
+(function($) {
+ $.fn.ellipsis = function(options) {
+
+ // default option
+ var defaults = {
+ 'row' : 1, // show rows
+ 'onlyFullWords': true, // set to true to avoid cutting the text in the middle of a word
+ 'char' : '...', // ellipsis
+ 'callback': function() {},
+ 'position': 'tail' // middle, tail
+ };
+
+ options = $.extend(defaults, options);
+
+ this.each(function() {
+ // get element text
+ var $this = $(this);
+
+ var targetHeight = $this.height();
+ $this.css({'height': 'auto'});
+ var text = $this.text();
+ var origText = text;
+ var origLength = origText.length;
+ var origHeight = $this.height();
+
+ if (origHeight <= targetHeight) {
+ $this.text(text);
+ options.callback.call(this);
+ return;
+ }
+
+ var start = 1, length = 0;
+ var end = text.length;
+
+ if(options.position === 'tail') {
+ while (start < end) { // Binary search for max length
+ length = Math.ceil((start + end) / 2);
+
+ $this.text(text.slice(0, length) + options['char']);
+
+ if ($this.height() <= targetHeight) {
+ start = length;
+ } else {
+ end = length - 1;
+ }
+ }
+
+ text = text.slice(0, start);
+
+ if (options.onlyFullWords) {
+ // remove fragment of the last word together with possible soft-hyphen chars
+ text = text.replace(/[\u00AD\w\uac00-\ud7af]+$/, '');
+ }
+ text += options['char'];
+
+ }else if(options.position === 'middle') {
+
+ var sliceLength = 0;
+ while (start < end) { // Binary search for max length
+ length = Math.ceil((start + end) / 2);
+ sliceLength = Math.max(origLength - length, 0);
+
+ $this.text(
+ origText.slice(0, Math.floor((origLength - sliceLength) / 2)) +
+ options['char'] +
+ origText.slice(Math.floor((origLength + sliceLength) / 2), origLength)
+ );
+
+ if ($this.height() <= targetHeight) {
+ start = length;
+ } else {
+ end = length - 1;
+ }
+ }
+
+ sliceLength = Math.max(origLength - start, 0);
+ var head = origText.slice(0, Math.floor((origLength - sliceLength) / 2));
+ var tail = origText.slice(Math.floor((origLength + sliceLength) / 2), origLength);
+
+ if (options.onlyFullWords) {
+ // remove fragment of the last or first word together with possible soft-hyphen characters
+ head = head.replace(/[\u00AD\w\uac00-\ud7af]+$/, '');
+ }
+
+ text = head + options['char'] + tail;
+ }
+
+ $this.text(text);
+ options.callback.call(this);
+ });
+
+ return this;
+ };
+}) (jQuery);
\ No newline at end of file
diff --git a/tools/droiddoc/templates-sdk-dyn/components/masthead.cs b/tools/droiddoc/templates-sdk-dyn/components/masthead.cs
index 47639bb..a365462 100644
--- a/tools/droiddoc/templates-sdk-dyn/components/masthead.cs
+++ b/tools/droiddoc/templates-sdk-dyn/components/masthead.cs
@@ -1,7 +1,7 @@
<?cs def:custom_masthead() ?>
<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">
@@ -31,7 +31,8 @@
ja-lang="開発"
es-lang="Desarrollar"
>Develop</a></li>
- <li class="distribute last"><a href="<?cs var:toroot ?>distribute/index.html"
+ <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="Распространение"
@@ -51,7 +52,7 @@
<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="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>
@@ -139,87 +140,79 @@
<!-- /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 -->
+ <!-- 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/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/stories/index.html">Developer Stories</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div><!-- /Expanded quicknav -->
+
</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>
-
-
+ </div><!-- /Header -->
+
<?cs if:training || guide || reference || tools || develop || google || samples ?>
<!-- Secondary x-nav -->
<div id="nav-x">
@@ -270,10 +263,71 @@
</div>
<!-- /Sendondary x-nav -->
+
+ <?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>
+
<?cs /if ?>
+</div> <!--end headerwrap -->
-<?cs /if ?>
-<?cs # end if/else !devsite ?>
+<div id="sticky-header">
+ <div>
+ <a class="logo" href="/index.html"></a>
+ <a class="top" href="#top"></a>
+ <ul class="breadcrumb">
+ <?cs
+if:design ?><li class="design"><a href="<?cs var:toroot ?>design/index.html">Design</a></li><?cs
+elif:(develop || training || guide || reference || tools || sdk || google || samples) ?><li class="develop"><a href="<?cs var:toroot ?>develop/index.html">Develop</a></li><?cs
+elif:distribute ?><li class="distribute"><a href="<?cs var:toroot ?>distribute/index.html">Distribute</a></li><?cs
+elif:about ?><li class="about"><a href="<?cs var:toroot ?>about/index.html">About Android</a></li><?cs
+/if ?><?cs
+if:training ?><li><a href="<?cs var:toroot ?>training/index.html">Training</a></li><?cs
+elif:guide ?><li><a href="<?cs var:toroot ?>guide/index.html">API Guides</a></li><?cs
+elif:reference ?><li><a href="<?cs var:toroot ?>reference/index.html">Reference</a></li><?cs
+elif:tools ?><li><a href="<?cs var:toroot ?>tools/index.html">Tools</a></li><?cs
+elif:google ?><li><a href="<?cs var:toroot ?>google/index.html">Google Services</a></li><?cs
+elif:samples ?><li><a href="<?cs var:toroot ?>samples/index.html">Samples</a></li><?cs
+elif:googleplay ?><li><a href="<?cs var:toroot ?>distribute/googleplay/index.html">Google Play</a></li><?cs
+elif:essentials ?><li><a href="<?cs var:toroot ?>distribute/essentials/index.html">Essentials</a></li><?cs
+elif:users ?><li><a href="<?cs var:toroot ?>distribute/users/index.html">Get Users</a></li><?cs
+elif:engage ?><li><a href="<?cs var:toroot ?>distribute/engage/index.html">Engage & Retain</a></li><?cs
+elif:monetize ?><li><a href="<?cs var:toroot ?>distribute/monetize/index.html">Monetize Your Apps</a></li><?cs
+elif:disttools ?><li><a href="<?cs var:toroot ?>distribute/tools/index.html">Tools & Reference</a></li><?cs
+elif:stories ?><li><a href="<?cs var:toroot ?>distribute/stories/index.html">Developer Stories</a></li><?cs
+/if ?> <?cs
+if:!section.landing ?><li class="current"><?cs var:page.title ?></li><?cs
+/if ?></ul>
+ </div>
+</div>
- <?cs
-/def ?>
+<div id="searchResults" class="wrap" style="display:none;">
+ <h2 id="searchTitle">Results</h2>
+ <div id="leftSearchControl" class="search-control">Loading...</div>
+</div>
+
+<?cs /if ?><?cs # end if/else !devsite ?><?cs
+/def ?>
\ No newline at end of file
diff --git a/tools/droiddoc/templates-sdk-dyn/customizations.cs b/tools/droiddoc/templates-sdk-dyn/customizations.cs
index ed57f1c..64ae118 100644
--- a/tools/droiddoc/templates-sdk-dyn/customizations.cs
+++ b/tools/droiddoc/templates-sdk-dyn/customizations.cs
@@ -15,28 +15,12 @@
</div>
</div> <!-- end side-nav -->
-<?cs /def ?>
-<?cs
-def:resources_tab_nav() ?>
+<?cs /def ?><?cs
+
+def:no_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 /def ?><?cs
-<?cs
- include:"../../../../frameworks/base/docs/html/resources/resources_toc.cs" ?>
-
-
- </div>
- </div> <!-- end side-nav -->
- <script>
- $(document).ready(function() {
- scrollIntoView("devdoc-nav");
- });
- </script>
-<?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">
@@ -73,8 +57,113 @@
scrollIntoView("devdoc-nav");
});
</script>
-<?cs /def ?>
-<?cs
+<?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">
+<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
+<?cs include:"../../../../frameworks/base/docs/html/distribute/googleplay/googleplay_toc.cs" ?>
+ </div>
+ </div> <!-- end side-nav -->
+ <script>
+ $(document).ready(function() {
+ scrollIntoView("devdoc-nav");
+ });
+ </script>
+<?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/distribute/essentials/essentials_toc.cs" ?>
+ </div>
+ </div> <!-- end side-nav -->
+ <script>
+ $(document).ready(function() {
+ scrollIntoView("devdoc-nav");
+ });
+ </script>
+<?cs /def ?><?cs
+
+def:users_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/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">
+<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
+<?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
+
+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">
+<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
+<?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">
+<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
+<?cs include:"../../../../frameworks/base/docs/html/distribute/tools/disttools_toc.cs" ?>
+ </div>
+ </div> <!-- end side-nav -->
+ <script>
+ $(document).ready(function() {
+ scrollIntoView("devdoc-nav");
+ });
+ </script>
+<?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">
+<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
+<?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">
@@ -310,8 +399,10 @@
<?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 +415,29 @@
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
+ 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-dyn/docpage.cs b/tools/droiddoc/templates-sdk-dyn/docpage.cs
index ea462c9..e6b7a5b 100644
--- a/tools/droiddoc/templates-sdk-dyn/docpage.cs
+++ b/tools/droiddoc/templates-sdk-dyn/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
+<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 ?>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 ?>
@@ -74,6 +91,7 @@
<?cs /if ?><?cs # end if training ?>
</div>
<?cs /if ?>
+
<?cs elif:samplesProjectIndex ?>
<div id="api-info-block">
<div class="sum-details-links">
@@ -83,7 +101,10 @@
</div><!-- end sum-details-links -->
</div><!-- end breadcurmb block -->
<h1 itemprop="name"><?cs var:projectDir ?></h1>
+
<?cs else ?>
+
+
<?cs if:(!fullpage && !header.hide) ?>
<?cs if:page.landing ?><?cs # header logic for docs that are landing pages ?>
<div class="landing-banner">
@@ -181,8 +202,6 @@
<?cs include:"footer.cs" ?>
</div><!-- end doc-content -->
-<?cs include:"trailer.cs" ?>
-
<!-- Start of Tag -->
<script type="text/javascript">
var axel = Math.random() + "";
@@ -193,6 +212,16 @@
<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 -->
+
+
+<?cs include:"trailer.cs" ?>
+ <script src="http://androiddevdocs-exp.appspot.com/ytblogger_lists_unified.js" type="text/javascript"></script>
+ <script src="<?cs var:toroot ?>jd_lists_unified.js" type="text/javascript"></script>
+ <script src="<?cs var:toroot ?>jd_articles.js" type="text/javascript"></script>
+ <script src="<?cs var:toroot ?>jd_collections.js" type="text/javascript"></script>
+ <script src="<?cs var:toroot ?>jd_site_map.js" type="text/javascript"></script>
+ <script src="<?cs var:toroot ?>jd_tag_helpers.js" type="text/javascript"></script>
+
</body>
</html>
diff --git a/tools/droiddoc/templates-sdk-dyn/head_tag.cs b/tools/droiddoc/templates-sdk-dyn/head_tag.cs
index 54de169..70ad760 100644
--- a/tools/droiddoc/templates-sdk-dyn/head_tag.cs
+++ b/tools/droiddoc/templates-sdk-dyn/head_tag.cs
@@ -31,9 +31,15 @@
<!-- 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:regular,medium,thin,italic,mediumitalic,bold"
+ title="roboto">
+<link href="<?cs var:toroot ?>assets/css/default.css" rel="stylesheet" type="text/css">
<?cs if:reference && !(reference.gms || reference.gcm) ?>
<!-- FULLSCREEN STYLESHEET -->
<link href="<?cs var:toroot ?>assets/css/fullscreen.css" rel="stylesheet" class="fullscreen"
