Skip to content

Embeddable code labs! #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Feb 1, 2016
Merged

Embeddable code labs! #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b4a5829
Initial cut at embed layout
ebidel Jan 30, 2016
c4bbdb9
Adds noToolbar, noArrows, noHighlight properties
ebidel Jan 30, 2016
6b3e570
Add time remaining to left nav
ebidel Jan 30, 2016
5727191
No padding for embed
ebidel Jan 30, 2016
dcd8d92
Unbreak tests
ebidel Jan 31, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 43 additions & 40 deletions codelab-style.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,6 @@
<template strip-whitespace>
<style>

:root {
--google-codelab-background: var(--paper-grey-100);
--google-codelab-header-background: var(--paper-blue-600);
--google-codelab-fab-background: var(--paper-blue-700);
--google-codelab-footer-text-color: #777;
--google-codelab-width: 800px;
}

:host {
display: block;
line-height: 24px;
Expand All @@ -38,25 +30,32 @@
padding: 0;
};
--paper-drawer-panel-left-drawer-container: {
background: var(--google-codelab-background);
background: var(--google-codelab-background, --paper-grey-100);
overflow-y: auto;
};
--paper-drawer-panel-main-container: {
background: var(--paper-grey-300);
background: var(--google-codelab-background, --paper-grey-300);
};
}

[drawer] {

:host([theme="minimal"]) {
position: relative;
}

:host(:not([theme="minimal"])) [drawer] {
height: auto !important; /* override default styling */
margin: 16px 16px 16px 12px;
}


#drawer[narrow] #controls {
width: 100%;
}

paper-toolbar {
background: var(--google-codelab-header-background);
background: var(--google-codelab-header-background, --paper-blue-600);
color: #fff;
}

paper-toolbar .title {
Expand All @@ -68,35 +67,39 @@
}

paper-fab {
--paper-fab-keyboard-focus-background: var(--google-codelab-fab-background);
--paper-fab-background: var(--google-codelab-fab-background);
--paper-fab-keyboard-focus-background: var(--google-codelab-fab-background, --paper-blue-700);
--paper-fab-background: var(--google-codelab-fab-background, --paper-blue-700);
flex-shrink: 0;
}

h1 {
font-size: 22px;
font-weight: 300;
line-height: 1em;
color: white;
padding: 0;
margin: 0.67em 8px;
/* override external styles */
:host([theme="minimal"]) #resumeDialog > * {
margin-top: 20px;
padding: 0 24px;
}

#countdown {
text-align: right;
vertical-align: bottom;
font-weight: 400;
min-width: 80px;
color: white;
:host([theme="minimal"]) #resumeDialog .buttons {
padding: 8px 8px 8px 24px;
margin: 0;
}

#countdown iron-icon {
.countdown iron-icon {
margin-right: 3px;
--iron-icon-fill-color: rgba(255, 255, 255, 0.8);
}

:host(:not([theme="minimal"])) [drawer] .countdown {
display: none;
}

:host([theme="minimal"]) [drawer] .countdown {
padding: 0 16px 16px 16px;
font-style: italic;
color: var(--paper-blue-500);
}

#controls {
position: fixed;
position: absolute;
right: 0;
bottom: 16px;
padding: 0 16px;
width: calc(100% - 256px); /* width of drawer */
Expand Down Expand Up @@ -134,6 +137,7 @@
overflow: hidden;
border-radius: 4px;
padding: 6px 16px;
box-sizing: content-box; /* override users that set * selector box-sizing. */
}

.toc-item i {
Expand Down Expand Up @@ -195,26 +199,25 @@
display: none;
}

#feedback {
color: var(--google-codelab-footer-text-color);
font-size: 0.9em;
position: fixed;
bottom: 16px;
#metadata {
color: var(--google-codelab-footer-text-color, #777);
font-size: 0.7em;
}

#last-updated {
color: var(--google-codelab-footer-text-color);
font-size: 0.9em;
:host(:not([theme="minimal"])) #metadata {
position: fixed;
bottom: 32px;
bottom: 8px;
background-color: var(--paper-grey-100);
padding: 4px 8px;
}

#feedback a {
color: currentcolor;
text-decoration: underline;
}

@media (min-width: 641px) {
#pages {
:host(:not([theme="minimal"])) #pages {
margin-top: 32px;
}
#controls {
Expand Down
7 changes: 7 additions & 0 deletions demo/codelab.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,16 @@
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>codelab demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="stylesheet"
href="//fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,500italic,700,700italic|Roboto+Mono:400,700">
<link rel="import" href="../../iron-icons/iron-icons.html">
<link rel="import" href="../../paper-button/paper-button.html">
<link rel="import" href="../google-codelab-elements.html">
<style>
body {
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
}
</style>
</head>
<body unresolved class="fullbleed">

Expand Down
49 changes: 45 additions & 4 deletions demo/embed.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,55 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>codelab demo</title>
<title>Embeddable codelab demo</title>
<link rel="stylesheet"
href="//fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,500italic,700,700italic|Roboto+Mono:400,700|Material+Icons">
<link rel="stylesheet"
href="https://developers.google.com/_static/80c6b067d5/css/devsite-google-blue.css">
<link rel="stylesheet" href="https://developers.google.com/maps/styles/common.css">

<script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="../../iron-icons/iron-icons.html">
<link rel="import" href="../../paper-button/paper-button.html">
<link rel="import" href="../google-codelab-elements.html">
<style is="custom-style">
#container {
display: flex;
justify-content: center;
flex-direction: column;
max-width: 1000px;
margin: 0 auto;
}
google-codelab {
height: 700px;
/*background-color: #eee;*/
}
:root {
--google-codelab-background: transparent;

/* Other customizations */
/*--google-codelab-step-link-color: initial;*/
/*--google-codelab-fab-background: red;*/
/*--google-codelab-footer-text-color: green;*/
}
</style>
</head>
<body unresolved class="fullbleed">
<body unresolved>

<div id="container">

<h1>Codelabs > Build Google Maps Using Web Components & No Code!</h1>

<google-codelab title="Build Google Maps Using Web Components & No Code!"
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis dolor vel arcu blandit tristique. Proin vestibulum nec felis non fringilla. Pellentesque vulputate dui ut risus bibendum, sed egestas arcu ullamcorper. Quisque eget eros pellentesque, aliquet tortor placerat, vehicula lectus. Fusce sit amet mattis turpis, et tempus orci. Vestibulum mauris velit, vulputate a risus quis, imperdiet hendrerit ante. Nunc sollicitudin risus tortor, ac venenatis sem volutpat malesuada. Mauris neque metus, ornare eget porta id, tincidunt vitae magna. In scelerisque quam auctor maximus pellentesque. Sed laoreet ex mi, vel lacinia urna consectetur id. Sed est quam, finibus eget orci in, vulputate tempus diam</p>

<google-codelab theme="minimal"
title="Build Google Maps Using Web Components & No Code!"
feedback-link="https://github.com/googlecodelabs"
environment="web"
hide-toolbar>
last-updated="2015-01-28"
no-toolbar
no-arrows
no-highlight>

<google-codelab-step label="Overview" duration="2">

Expand Down Expand Up @@ -146,5 +183,9 @@ <h3 class="faq">Frequently Asked Questions</h3>

</google-codelab>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis dolor vel arcu blandit tristique. Proin vestibulum nec felis non fringilla. Pellentesque vulputate dui ut risus bibendum, sed egestas arcu ullamcorper. Quisque eget eros pellentesque, aliquet tortor placerat, vehicula lectus. Fusce sit amet mattis turpis, et tempus orci. Vestibulum mauris velit, vulputate a risus quis, imperdiet hendrerit ante. Nunc sollicitudin risus tortor, ac venenatis sem volutpat malesuada. Mauris neque metus, ornare eget porta id, tincidunt vitae magna. In scelerisque quam auctor maximus pellentesque. Sed laoreet ex mi, vel lacinia urna consectetur id. Sed est quam, finibus eget orci in, vulputate tempus diam</p>

</div>

</body>
</html>
7 changes: 7 additions & 0 deletions google-codelab-step.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,13 @@ <h2 id="title"><span>{{step}}</span>. <span>{{label}}</span></h2>
_isHighlighted: false,

_activeChanged: function() {
var codelab = Polymer.dom(this).parentNode;

// Don't syntax highlight code if google-codelab requests it.
if (codelab.localName === 'google-codelab' && codelab.noHighlight) {
return;
}

if (this.active && !this._isHighlighted) {

// Minimize jank by waiting one click to do syntax highlighting.
Expand Down
Loading