Skip to content

Commit b4a5829

Browse files
ebidelebidel
committed
Initial cut at embed layout
1 parent f54f788 commit b4a5829

File tree

5 files changed

+171
-76
lines changed

5 files changed

+171
-76
lines changed

‎codelab-style.html‎

Lines changed: 18 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,6 @@
2020
<template strip-whitespace>
2121
<style>
2222

23-
:root {
24-
--google-codelab-background: var(--paper-grey-100);
25-
--google-codelab-header-background: var(--paper-blue-600);
26-
--google-codelab-fab-background: var(--paper-blue-700);
27-
--google-codelab-footer-text-color: #777;
28-
--google-codelab-width: 800px;
29-
}
30-
3123
:host {
3224
display: block;
3325
line-height: 24px;
@@ -38,25 +30,31 @@
3830
padding: 0;
3931
};
4032
--paper-drawer-panel-left-drawer-container: {
41-
background: var(--google-codelab-background);
33+
background: var(--google-codelab-background, --paper-grey-100);
4234
overflow-y: auto;
4335
};
4436
--paper-drawer-panel-main-container: {
45-
background: var(--paper-grey-300);
37+
background: var(--google-codelab-background, --paper-grey-300);
4638
};
4739
}
4840

49-
[drawer] {
41+
42+
:host([theme="minimal"]) {
43+
position: relative;
44+
}
45+
46+
:host(:not([theme="minimal"])) [drawer] {
5047
height: auto !important; /* override default styling */
5148
margin: 16px 16px 16px 12px;
5249
}
5350

51+
5452
#drawer[narrow] #controls {
5553
width: 100%;
5654
}
5755

5856
paper-toolbar {
59-
background: var(--google-codelab-header-background);
57+
background: var(--google-codelab-header-background, --paper-blue-600);
6058
}
6159

6260
paper-toolbar .title {
@@ -68,8 +66,8 @@
6866
}
6967

7068
paper-fab {
71-
--paper-fab-keyboard-focus-background: var(--google-codelab-fab-background);
72-
--paper-fab-background: var(--google-codelab-fab-background);
69+
--paper-fab-keyboard-focus-background: var(--google-codelab-fab-background, --paper-blue-700);
70+
--paper-fab-background: var(--google-codelab-fab-background, --paper-blue-700);
7371
flex-shrink: 0;
7472
}
7573

@@ -96,7 +94,8 @@
9694
}
9795

9896
#controls {
99-
position: fixed;
97+
position: absolute;
98+
right: 0;
10099
bottom: 16px;
101100
padding: 0 16px;
102101
width: calc(100% - 256px); /* width of drawer */
@@ -119,7 +118,7 @@
119118
}
120119

121120
.navbutton.prevbutton[disabled] {
122-
background: var(--google-codelab-fab-background);
121+
background: var(--google-codelab-fab-background, );
123122
color: white;
124123
transform: scale(0);
125124
}
@@ -195,26 +194,17 @@
195194
display: none;
196195
}
197196

198-
#feedback {
199-
color: var(--google-codelab-footer-text-color);
200-
font-size: 0.9em;
201-
position: fixed;
202-
bottom: 16px;
203-
}
204-
205-
#last-updated {
206-
color: var(--google-codelab-footer-text-color);
197+
#metadata {
198+
color: var(--google-codelab-footer-text-color, #777);
207199
font-size: 0.9em;
208-
position: fixed;
209-
bottom: 32px;
210200
}
211201

212202
#feedback a {
213203
color: currentcolor;
214204
}
215205

216206
@media (min-width: 641px) {
217-
#pages {
207+
:host(:not([theme="minimal"])) #pages {
218208
margin-top: 32px;
219209
}
220210
#controls {

‎demo/embed.html‎

Lines changed: 49 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,18 +19,59 @@
1919
<head>
2020
<meta charset="utf-8">
2121
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
22-
<title>codelab demo</title>
22+
<title>Embeddable codelab demo</title>
2323
<script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
2424
<link rel="import" href="../../iron-icons/iron-icons.html">
2525
<link rel="import" href="../../paper-button/paper-button.html">
2626
<link rel="import" href="../google-codelab-elements.html">
27+
<style is="custom-style">
28+
html, body {
29+
height: 100%;
30+
}
31+
body {
32+
padding: 40px;
33+
color: #212121;
34+
font: 400 16px/24px Roboto,sans-serif;
35+
}
36+
#container {
37+
display: flex;
38+
justify-content: center;
39+
flex-direction: column;
40+
max-width: 1000px;
41+
margin: 0 auto;
42+
}
43+
google-codelab {
44+
height: 600px;
45+
/*background-color: #eee;*/
46+
}
47+
h1, h2 {
48+
font-weight: inherit;
49+
}
50+
:root {
51+
--google-codelab-background: transparent;
52+
--google-codelab-step-background: transparent;
53+
54+
/* Other customizations */
55+
/*--google-codelab-step-link-color: initial;*/
56+
/*--google-codelab-fab-background: red;*/
57+
/*--google-codelab-footer-text-color: green;*/
58+
}
59+
</style>
2760
</head>
28-
<body unresolved class="fullbleed">
61+
<body unresolved>
2962

30-
<google-codelab title="Build Google Maps Using Web Components & No Code!"
63+
<div id="container">
64+
65+
<h1>Codelabs > Build Google Maps Using Web Components & No Code!</h1>
66+
67+
<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>
68+
69+
<google-codelab theme="minimal"
70+
title="Build Google Maps Using Web Components & No Code!"
3171
feedback-link="https://github.com/googlecodelabs"
3272
environment="web"
33-
hide-toolbar>
73+
hide-toolbar
74+
last-updated="2015-01-28">
3475

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

@@ -146,5 +187,9 @@ <h3 class="faq">Frequently Asked Questions</h3>
146187

147188
</google-codelab>
148189

190+
<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>
191+
192+
</div>
193+
149194
</body>
150195
</html>

‎google-codelab.html‎

Lines changed: 41 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@
1818
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
1919
<link rel="import" href="../iron-icons/iron-icons.html">
2020
<link rel="import" href="../iron-localstorage/iron-localstorage.html">
21-
<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
2221
<link rel="import" href="../neon-animation/neon-animated-pages.html">
2322
<link rel="import" href="../neon-animation/animations/slide-from-right-animation.html">
2423
<link rel="import" href="../neon-animation/animations/slide-from-left-animation.html">
@@ -35,6 +34,7 @@
3534
<link rel="import" href="../paper-item/paper-item.html">
3635

3736
<link rel="import" href="shared-style.html">
37+
<link rel="import" href="layout-style.html">
3838
<link rel="import" href="codelab-style.html">
3939
<link rel="import" href="analytics-behavior.html">
4040

@@ -59,16 +59,17 @@
5959
<dom-module id="google-codelab">
6060
<template strip-whitespace>
6161
<style include="shared-style"></style>
62+
<style include="layout-style"></style>
6263
<style include="codelab-style"></style>
6364

64-
<iron-localstorage name="{{title}}" value="{{state}}"
65+
<iron-localstorage name="{{title}}" value="{{state}}" hidden
6566
on-iron-localstorage-load-empty="_stateInit"
6667
on-iron-localstorage-load="_stateLoaded">
6768
</iron-localstorage>
6869

69-
<paper-drawer-panel narrow="{{_narrow}}" selected="{{currDrawer}}" id="drawer">
70+
<paper-drawer-panel id="drawer" narrow="{{_narrow}}" selected="{{currDrawer}}">
7071

71-
<div drawer>
72+
<div drawer class="layout vertical justified">
7273
<paper-menu id="toc" selected="{{selected}}"
7374
on-iron-select="_allowCodelabComplete">
7475
<template is="dom-repeat" items="{{steps}}" strip-whitespace>
@@ -78,18 +79,18 @@
7879
</template>
7980
</paper-menu>
8081

81-
<template is="dom-if" if="{{feedbackLink}}" strip-whitespace>
82-
<div id="feedback">
83-
Did you find a mistake?
84-
<a target="_blank" href$="{{feedbackLink}}">Please file a bug</a>.
85-
</div>
86-
</template>
82+
<div id="metadata">
83+
<template is="dom-if" if="{{feedbackLink}}" strip-whitespace>
84+
<div id="feedback">
85+
Did you find a mistake?
86+
<a target="_blank" href$="{{feedbackLink}}">Please file a bug</a>.
87+
</div>
88+
</template>
8789

88-
<template is="dom-if" if="{{lastUpdated}}" strip-whitespace>
89-
<div id="last-updated">
90-
Last updated on {{lastUpdated}}.
91-
</div>
92-
</template>
90+
<template is="dom-if" if="{{lastUpdated}}" strip-whitespace>
91+
<div id="last-updated">Last updated on {{lastUpdated}}.</div>
92+
</template>
93+
</div>
9394

9495
</div>
9596

@@ -114,35 +115,35 @@ <h1 class="title">{{title}}</h1>
114115
<content select="google-codelab-step"></content>
115116
</neon-animated-pages>
116117

117-
<footer id="controls">
118-
<div class="fabs layout horizontal justified">
119-
<paper-fab raised class="navbutton prevbutton" icon="chevron-left"
120-
on-tap="selectPrevious"
121-
title="Previous step"
122-
disabled$="{{_isFirstStep(selected)}}">
123-
</paper-fab>
124-
125-
<div>
126-
<template is="dom-if" if="{{_showNextFab(selected, steps)}}" strip-whitespace>
127-
<paper-fab icon="chevron-right" raised class="navbutton nextbutton"
128-
title="{{_nextFabTitle(selected)}}"
129-
on-tap="selectNext">
130-
</paper-fab>
131-
</template>
132-
133-
<template is="dom-if" if="{{_showDoneFab(selected, steps)}}" strip-whitespace>
134-
<paper-fab icon="done" raised class="navbutton donebutton"
135-
on-tap="_goToHome" title="Complete codelab">
136-
</paper-fab>
137-
</template>
138-
</div>
139-
</div>
140-
</footer>
141-
142118
</paper-scroll-header-panel>
143119

144120
</paper-drawer-panel>
145121

122+
<footer id="controls">
123+
<div class="fabs layout horizontal justified">
124+
<paper-fab raised class="navbutton prevbutton" icon="chevron-left"
125+
on-tap="selectPrevious"
126+
title="Previous step"
127+
disabled$="{{_isFirstStep(selected)}}">
128+
</paper-fab>
129+
130+
<div>
131+
<template is="dom-if" if="{{_showNextFab(selected, steps)}}" strip-whitespace>
132+
<paper-fab icon="chevron-right" raised class="navbutton nextbutton"
133+
title="{{_nextFabTitle(selected)}}"
134+
on-tap="selectNext">
135+
</paper-fab>
136+
</template>
137+
138+
<template is="dom-if" if="{{_showDoneFab(selected, steps)}}" strip-whitespace>
139+
<paper-fab icon="done" raised class="navbutton donebutton"
140+
on-tap="_goToHome" title="Complete codelab">
141+
</paper-fab>
142+
</template>
143+
</div>
144+
</div>
145+
</footer>
146+
146147
<paper-dialog id="resumeDialog" modal>
147148
<h2>Would you like to resume where you left off?</h2>
148149
<p>Step <span>{{_storedStep.step}}</span>: <span>{{_storedStep.label}}</span></p>

‎layout-style.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!--
2+
Copyright (c) 2016 Google Inc.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License"); you may not
5+
use this file except in compliance with the License. You may obtain a copy of
6+
the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
12+
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
13+
License for the specific language governing permissions and limitations under
14+
the License.
15+
-->
16+
17+
<link rel="import" href="../polymer/polymer.html">
18+
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
19+
20+
<dom-module id="layout-style">
21+
<template>
22+
<style>
23+
.layout {
24+
@apply(--layout);
25+
}
26+
.layout.horizontal {
27+
@apply(--layout-horizontal);
28+
}
29+
.layout.vertical {
30+
@apply(--layout-vertical);
31+
}
32+
.layout.center {
33+
@apply(--layout-center);
34+
}
35+
.layout.center-center {
36+
@apply(--layout-center-center);
37+
}
38+
.flex {
39+
@apply(--layout-flex);
40+
}
41+
.two {
42+
@apply(--layout-flex-2);
43+
}
44+
.end-justified {
45+
@apply(--layout-end-justified);
46+
}
47+
.end {
48+
@apply(--layout-end);
49+
}
50+
.justified {
51+
@apply(--layout-justified);
52+
}
53+
.self-center {
54+
@apply(--layout-self-center);
55+
}
56+
.wrap {
57+
@apply(--layout-wrap);
58+
}
59+
</style>
60+
</template>
61+
</dom-module>

0 commit comments

Comments
 (0)