Skip to content
This repository was archived by the owner on Sep 10, 2022. It is now read-only.

Commit da40666

Browse files
addyosmaniaddyosmani
committed
Merge pull request #33 from addyosmani/shared-layout
Shared layout with Partial + Deletion of unused files.
2 parents 60007f6 + d12a81b commit da40666

File tree

6 files changed

+116
-185
lines changed

6 files changed

+116
-185
lines changed

‎gulp-tasks/service-worker.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,5 +53,5 @@ gulp.task('service-worker', function(cb) {
5353
stripPrefix: GLOBAL.config.dest,
5454
navigateFallback: '/app-shell',
5555
cacheId: packageName
56-
}, cb);
56+
}).then(cb);
5757
});

‎server/views/layouts/app-shell.handlebars

Lines changed: 4 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,15 @@
1-
<!--
1+
{{> open-page}}
2+
<main class="main js-global-main" aria-role="main">
23

3-
Copyright 2015 Google Inc. All rights reserved.
4-
5-
Licensed under the Apache License, Version 2.0 (the "License");
6-
you may not use this file except in compliance with the License.
7-
You may obtain a copy of the License at
8-
9-
http://www.apache.org/licenses/LICENSE-2.0
10-
11-
Unless required by applicable law or agreed to in writing, software
12-
distributed under the License is distributed on an "AS IS" BASIS,
13-
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14-
See the License for the specific language governing permissions and
15-
limitations under the License.
16-
17-
-->
18-
19-
<!DOCTYPE html>
20-
<html>
21-
<head>
22-
<meta charset="utf-8">
23-
<title>App Shell</title>
24-
25-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
26-
<meta name="viewport" content="width=device-width, initial-scale=1">
27-
<meta id="theme-color" name="theme-color" content="#4527A0">
28-
29-
<link rel="manifest" href="/manifest.json">
30-
<link rel="icon" href="/images/chrome-touch-icon-192x192.png" sizes="192x192" type="image/png">
31-
32-
<style type="text/css">{{{inlineStyles}}}</style>
33-
</head>
34-
<body class="{{ deeplink_class }}">
35-
36-
<!-- Header element -->
37-
<header class="header">
38-
<button role="tab" class="header__menu js-toggle-menu">
39-
Toggle nav menu
40-
</button>
41-
42-
<h1 class="header__title">App Shell</h1>
43-
</header>
44-
45-
<!-- Main Content goes here -->
46-
<main class="main js-global-main" aria-role="main">
47-
48-
</main>
49-
50-
<!-- Navigation Drawer -->
51-
<section class="side-nav js-side-nav">
52-
<div class="side-nav__content js-side-nav-content">
53-
<div class="side-nav__header">
54-
<h1 class="side-nav__title">App shell</h1>
55-
</div>
56-
57-
<div class="side-nav__body" tabindex="0">
58-
<a role="tab" tabindex="0" class="side-nav__blog-post" href="/">Index</a>
59-
<a role="tab" tabindex="0" class="side-nav__blog-post" href="/url-1">URL 1</a>
60-
<a role="tab" tabindex="0" class="side-nav__blog-post" href="/url-2">URL 2</a>
61-
</div>
62-
63-
<div class="side-nav__version">Version @VERSION@</div>
64-
</div>
65-
</section>
4+
</main>
665

676
<aside class="toast-view js-toast-view"></aside>
687

698
<!-- Loading Dialog For use by Activities -->
709
<div class="loader js-global-loader is-hidden">
7110
<svg viewBox="0 0 32 32" width="32" height="32">
72-
<style>
73-
#spinner {
74-
box-sizing: border-box;
75-
stroke: #673AB7;
76-
stroke-width: 3px;
77-
transform-origin: 50%;
78-
79-
-webkit-animation: line 1.6s cubic-bezier(0.4, 0.0, 0.2, 1) infinite, rotate 1.6s linear infinite;
80-
}
81-
82-
@-webkit-keyframes rotate {
83-
84-
from {
85-
transform: rotate(0)
86-
}
87-
88-
to {
89-
transform: rotate(450deg);
90-
}
91-
}
92-
93-
@-webkit-keyframes line {
94-
0% {
95-
stroke-dasharray: 2, 85.964;
96-
transform: rotate(0);
97-
}
98-
99-
50% {
100-
stroke-dasharray: 65.973, 21.9911;
101-
stroke-dashoffset: 0;
102-
}
103-
104-
100% {
105-
stroke-dasharray: 2, 85.964;
106-
stroke-dashoffset: -65.973;
107-
transform: rotate(90deg);
108-
}
109-
}
110-
</style>
11111
<circle id="spinner" cx="16" cy="16" r="14" fill="none"></circle>
11212
</svg>
11313
</div>
11414

115-
{{> async-css }}
116-
117-
{{#each remoteScripts}}
118-
<script src="{{this}}" async></script>
119-
{{~/each}}
120-
</body>
121-
</html>
15+
{{> close-page}}

‎server/views/layouts/default.handlebars

Lines changed: 5 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,5 @@
1-
<!--
2-
3-
Copyright 2015 Google Inc. All rights reserved.
4-
5-
Licensed under the Apache License, Version 2.0 (the "License");
6-
you may not use this file except in compliance with the License.
7-
You may obtain a copy of the License at
8-
9-
http://www.apache.org/licenses/LICENSE-2.0
10-
11-
Unless required by applicable law or agreed to in writing, software
12-
distributed under the License is distributed on an "AS IS" BASIS,
13-
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14-
See the License for the specific language governing permissions and
15-
limitations under the License.
16-
17-
-->
18-
19-
<!DOCTYPE html>
20-
<html>
21-
<head>
22-
<meta charset="utf-8">
23-
<title>App Shell</title>
24-
25-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
26-
<meta name="viewport" content="width=device-width, initial-scale=1">
27-
<meta id="theme-color" name="theme-color" content="#4527A0">
28-
29-
<link rel="manifest" href="/manifest.json">
30-
<link rel="icon" href="/images/chrome-touch-icon-192x192.png" sizes="192x192" type="image/png">
31-
32-
<style type="text/css">{{{inlineStyles}}}</style>
33-
</head>
34-
<body>
35-
36-
<header class="header">
37-
<button role="tab" class="header__menu js-toggle-menu">
38-
Toggle nav menu
39-
</button>
40-
41-
<h1 class="header__title">App Shell</h1>
42-
</header>
43-
44-
<main class="main js-main" aria-role="main">
45-
{{{body}}}
46-
</main>
47-
48-
<section class="side-nav js-side-nav">
49-
<div class="side-nav__content js-side-nav-content">
50-
<div class="side-nav__header">
51-
<h1 class="side-nav__title">App shell</h1>
52-
</div>
53-
54-
<div class="side-nav__body">
55-
<a role="tab" tabindex="0" class="side-nav__blog-post" href="/">Index</a>
56-
<a role="tab" tabindex="0" class="side-nav__blog-post" href="/url-1">URL 1</a>
57-
<a role="tab" tabindex="0" class="side-nav__blog-post" href="/url-2">URL 2</a>
58-
</div>
59-
60-
<div class="side-nav__version">Version @VERSION@</div>
61-
</div>
62-
</section>
63-
64-
<aside class="toast-view js-toast-view"></aside>
65-
66-
{{> async-css }}
67-
68-
{{#each remoteScripts}}
69-
<script src="{{this}}" async></script>
70-
{{~/each}}
71-
</body>
72-
</html>
1+
{{> open-page}}
2+
<main class="main js-global-main" aria-role="main">
3+
{{{body}}}
4+
</main>
5+
{{> close-page}}

‎server/views/partials/close-page.handlebars

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<section class="side-nav js-side-nav">
2+
<div class="side-nav__content js-side-nav-content">
3+
<div class="side-nav__header">
4+
<h1 class="side-nav__title">App shell</h1>
5+
</div>
6+
7+
<div class="side-nav__body">
8+
<a role="tab" tabindex="0" class="side-nav__blog-post" href="/">Index</a>
9+
<a role="tab" tabindex="0" class="side-nav__blog-post" href="/url-1">URL 1</a>
10+
<a role="tab" tabindex="0" class="side-nav__blog-post" href="/url-2">URL 2</a>
11+
</div>
12+
13+
<div class="side-nav__version">Version @VERSION@</div>
14+
</div>
15+
</section>
16+
17+
<aside class="toast-view js-toast-view"></aside>
18+
19+
{{> async-css }}
20+
21+
{{#each remoteScripts}}
22+
<script src="{{this}}" async></script>
23+
{{~/each}}
24+
</body>
25+
</html>

‎server/views/partials/open-page.handlebars

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!--
2+
3+
Copyright 2015 Google Inc. All rights reserved.
4+
5+
Licensed under the Apache License, Version 2.0 (the "License");
6+
you may not use this file except in compliance with the License.
7+
You may obtain a copy of the License at
8+
9+
http://www.apache.org/licenses/LICENSE-2.0
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS,
13+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
See the License for the specific language governing permissions and
15+
limitations under the License.
16+
17+
-->
18+
19+
<!DOCTYPE html>
20+
<html>
21+
<head>
22+
<meta charset="utf-8">
23+
<title>App Shell</title>
24+
25+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
26+
<meta name="viewport" content="width=device-width, initial-scale=1">
27+
<meta id="theme-color" name="theme-color" content="#4527A0">
28+
29+
<link rel="manifest" href="/manifest.json">
30+
<link rel="icon" href="/images/chrome-touch-icon-192x192.png" sizes="192x192" type="image/png">
31+
32+
<style type="text/css">{{{inlineStyles}}}</style>
33+
</head>
34+
<body>
35+
36+
<header class="header">
37+
<button role="tab" class="header__menu js-toggle-menu">
38+
Toggle nav menu
39+
</button>
40+
41+
<h1 class="header__title">App Shell</h1>
42+
</header>

‎src/styles/core/_loader.scss

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,43 @@
1919
left: 50%;
2020
top: 50%;
2121
position: fixed;
22-
-webkit-transform: translate(-50%, -50%);
23-
transform: translate(-50%, -50%);
22+
transform: translate(-50%, -50%);
23+
24+
#spinner {
25+
box-sizing: border-box;
26+
stroke: #673AB7;
27+
stroke-width: 3px;
28+
transform-origin: 50%;
29+
30+
animation: line 1.6s cubic-bezier(0.4, 0.0, 0.2, 1) infinite, rotate 1.6s linear infinite;
31+
}
32+
33+
@keyframes rotate {
34+
35+
from {
36+
transform: rotate(0)
37+
}
38+
39+
to {
40+
transform: rotate(450deg);
41+
}
42+
}
43+
44+
@keyframes line {
45+
0% {
46+
stroke-dasharray: 2, 85.964;
47+
transform: rotate(0);
48+
}
49+
50+
50% {
51+
stroke-dasharray: 65.973, 21.9911;
52+
stroke-dashoffset: 0;
53+
}
54+
55+
100% {
56+
stroke-dasharray: 2, 85.964;
57+
stroke-dashoffset: -65.973;
58+
transform: rotate(90deg);
59+
}
60+
}
2461
}

0 commit comments

Comments
 (0)