am e7eeb400: add support for microsites
* commit 'e7eeb4002938fdc52820fb8aa02896d536c82a9e': add support for microsites
This commit is contained in:
Robert Ly
Android Git Automerger
commit
cbc14812af
5 changed files with 1299 additions and 86 deletions
|
|
@ -4174,13 +4174,13 @@ EndColorStr='#ececec');
|
|||
}
|
||||
|
||||
|
||||
#header-wrap .logo.wear-logo {
|
||||
#header-wrap .logo.landing-logo {
|
||||
width:220px;
|
||||
margin:0;
|
||||
padding:0;
|
||||
margin-bottom:22px;
|
||||
}
|
||||
#header-wrap .logo.wear-logo img {
|
||||
#header-wrap .logo.landing-logo img {
|
||||
padding:0 0 0 10px;
|
||||
}
|
||||
|
||||
|
|
@ -6382,3 +6382,875 @@ 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% - 70px);
|
||||
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% - 70px);
|
||||
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% - 70px);
|
||||
min-height: 504px;
|
||||
margin-top: -5px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
background-image: url(../../tv/images/living-room.jpg);
|
||||
background-size: cover;
|
||||
background-position: right center;
|
||||
color: white;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.auto-hero {
|
||||
height: calc(100% - 70px);
|
||||
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%, 54%); /* #dc4b35 */
|
||||
color: #f8f8f8;
|
||||
}
|
||||
|
||||
.landing-button.landing-primary:hover {
|
||||
background-color: hsl(8, 70%, 44%); /* #bf3722 */
|
||||
}
|
||||
|
||||
.landing-button.landing-primary:active {
|
||||
background-color: hsl(8, 70%, 36%); /* # */
|
||||
}
|
||||
|
||||
.landing-button.landing-secondary {
|
||||
background-color: hsl(8, 70%, 44%);
|
||||
}
|
||||
|
||||
.landing-button.landing-secondary:hover {
|
||||
background-color: hsl(8, 70%, 36%);
|
||||
}
|
||||
|
||||
.landing-button.landing-secondary:active {
|
||||
background-color: hsl(8, 70%, 30%);
|
||||
}
|
||||
|
||||
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,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);
|
||||
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-inset-video-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.landing-inset-video-container img.gif {
|
||||
max-width: 222px;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
img.landing-bezel-only {
|
||||
height:302px;
|
||||
width:302px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.col-2-wide {
|
||||
display: inline;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.col-2-wide {
|
||||
width: 402px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
margin-top:-20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.actions-bar .actions {
|
||||
padding: 30px 0 30px;
|
||||
text-align: justify;
|
||||
font-size: 0.1px;
|
||||
line-height: 0.1px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.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 */
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.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: 334px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
@ -3429,7 +3429,10 @@ function showSamples() {
|
|||
sortOrder: $widget.data('sortorder'),
|
||||
query: $widget.data('query'),
|
||||
section: $widget.data('section'),
|
||||
sizeCols: sizeCols
|
||||
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
|
||||
|
|
@ -3441,9 +3444,13 @@ function showSamples() {
|
|||
} else if (isCarousel) {
|
||||
drawResourcesCarouselWidget($widget, opts, resources);
|
||||
} else if (isStack) {
|
||||
var sections = buildSectionList(opts);
|
||||
/* 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);
|
||||
drawResourcesStackWidget($widget, opts, resources/*, sections*/);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -3462,10 +3469,8 @@ function showSamples() {
|
|||
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)
|
||||
.attr('href', cleanUrl(resources[i].url))
|
||||
.decorateResourceCard(resources[i],plusone);
|
||||
|
||||
$('<li>').css(css)
|
||||
|
|
@ -3484,7 +3489,9 @@ function showSamples() {
|
|||
});
|
||||
};
|
||||
|
||||
/* Initializes a Resource Card Stack Widget (column-based layout) */
|
||||
/* 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
|
||||
|
|
@ -3502,59 +3509,87 @@ function showSamples() {
|
|||
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
|
||||
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]
|
||||
);
|
||||
|
||||
sectionResources.push(
|
||||
$('<a>')
|
||||
.addClass('resource-card section-card')
|
||||
.attr('href', urlPrefix + 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]
|
||||
);
|
||||
} 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) {
|
||||
//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],plusone);
|
||||
|
||||
var $card = createResourceElement(resources[i], opts);
|
||||
|
||||
if (opts.resourceStyle.indexOf('related') > -1) {
|
||||
$card.addClass('related-card');
|
||||
}
|
||||
|
||||
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;
|
||||
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;
|
||||
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]));
|
||||
$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) {
|
||||
|
|
@ -3587,12 +3622,12 @@ function showSamples() {
|
|||
// 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);
|
||||
|
||||
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])) {
|
||||
|
|
@ -3603,8 +3638,7 @@ function showSamples() {
|
|||
stackCount = 0;
|
||||
}
|
||||
|
||||
$card.decorateResourceCard(resource,plusone)
|
||||
.appendTo($stackDiv || $widget);
|
||||
$card.appendTo($stackDiv || $widget);
|
||||
|
||||
} while (++i < resources.length && stackCount > 0);
|
||||
}
|
||||
|
|
@ -3743,6 +3777,15 @@ function showSamples() {
|
|||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function cleanUrl(url)
|
||||
{
|
||||
if (url && url.indexOf('//') === -1) {
|
||||
url = toRoot + url;
|
||||
}
|
||||
|
||||
return url;
|
||||
}
|
||||
|
||||
|
||||
function parseResourceQuery(query) {
|
||||
|
|
@ -3791,42 +3834,55 @@ function showSamples() {
|
|||
})();
|
||||
|
||||
(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;
|
||||
if (resource.image) {
|
||||
//keep url clean for matching and offline mode handling
|
||||
var urlPrefix = resource.image.indexOf("//") > -1 ? "" : toRoot;
|
||||
imgUrl = urlPrefix + resource.image;
|
||||
var imgUrl = resource.image ||
|
||||
'assets/images/resource-card-default-android.jpg';
|
||||
|
||||
if (imgUrl.indexOf('//') === -1) {
|
||||
imgUrl = toRoot + imgUrl;
|
||||
}
|
||||
//add linkout logic here. check url or type, assign a class, map to css :after
|
||||
$('<div>')
|
||||
.addClass('card-bg')
|
||||
.css('background-image', 'url(' + (imgUrl || toRoot + 'assets/images/resource-card-default-android.jpg') + ')')
|
||||
|
||||
$('<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);
|
||||
if (!plusone) {
|
||||
$('<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 ellipsis')
|
||||
.append($('<div>').addClass('text').html(resource.summary))
|
||||
.append($('<div>').addClass('util')))
|
||||
.appendTo(this);
|
||||
} else {
|
||||
var plusurl = resource.url.indexOf("//") > -1 ? resource.url : "//developer.android.com/" + resource.url;
|
||||
$('<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 ellipsis')
|
||||
.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', plusurl))))
|
||||
.appendTo(this);
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
|
@ -3909,7 +3965,39 @@ function showSamples() {
|
|||
|
||||
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) {
|
||||
|
|
@ -3931,3 +4019,189 @@ function showSamples() {
|
|||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
|
@ -1,4 +1,7 @@
|
|||
<?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 is in devsite template ?>
|
||||
<!-- Header -->
|
||||
|
|
@ -247,5 +250,51 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<?cs /if ?><?cs # end if/else !devsite ?><?cs
|
||||
<?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 ?>index.html">
|
||||
<img src="<?cs var:toroot ?>preview/images/android.png"
|
||||
style="margin-top:8px" height="16" alt="L Developer Preview" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-8" style="margin:0"><h1 style="margin: 8px 0 0 0px;padding:0;line-height:16px;
|
||||
color:#666;font-weight:100;font-size:24px;">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
|
||||
/def ?>
|
||||
|
|
@ -290,6 +290,22 @@ def:wear_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 ?>
|
||||
|
|
@ -537,6 +553,8 @@ def:custom_left_nav() ?><?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
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ if:android.whichdoc != 'online' ?>http:<?cs
|
|||
title="roboto">
|
||||
<link href="<?cs var:toroot ?>assets/css/default.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<?cs if:reference && !(reference.gms || reference.gcm || wear) ?>
|
||||
<?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">
|
||||
|
|
|
|||
Loading…
Reference in a new issue