@anmiles/google-api-wrapper 15.2.0 → 15.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/dist/lib/renderer.d.ts +4 -2
  3. package/dist/lib/renderer.js +6 -3
  4. package/dist/lib/renderer.js.map +1 -1
  5. package/dist/templates/auth.html +2 -1
  6. package/dist/templates/css.html +111 -0
  7. package/dist/templates/page.html +1 -110
  8. package/package.json +1 -1
  9. package/src/lib/__tests__/renderer.test.ts +4 -3
  10. package/src/lib/renderer.ts +6 -3
  11. package/src/templates/auth.html +2 -1
  12. package/src/templates/css.html +111 -0
  13. package/src/templates/page.html +1 -110
package/CHANGELOG.md CHANGED
@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
5
5
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6
6
  and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
7
 
8
+ ## [15.3.0](../../tags/v15.3.0) - 2023-11-06
9
+ ### Changed
10
+ - Focus button when opening auth page
11
+ - Fix vulnerable dependency
12
+
8
13
  ## [15.2.0](../../tags/v15.2.0) - 2023-10-26
9
14
  ### Changed
10
15
  - Small visual improvements for auth page
package/dist/lib/renderer.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  export { templates, renderAuth, renderDone };
2
2
  declare const templates: {
3
- readonly page: readonly ["content"];
3
+ readonly page: readonly ["css", "content"];
4
+ readonly css: readonly [];
4
5
  readonly auth: readonly ["profile", "authUrl", "scopesList"];
5
6
  readonly scope: readonly ["type", "title", "name"];
6
7
  readonly done: readonly ["profile"];
@@ -18,7 +19,8 @@ declare function render<T extends TemplateName>(templateName: T, values: Record<
18
19
  declare function getTemplate(templateName: TemplateName): string;
19
20
  declare const _default: {
20
21
  templates: {
21
- readonly page: readonly ["content"];
22
+ readonly page: readonly ["css", "content"];
23
+ readonly css: readonly [];
22
24
  readonly auth: readonly ["profile", "authUrl", "scopesList"];
23
25
  readonly scope: readonly ["type", "title", "name"];
24
26
  readonly done: readonly ["profile"];
package/dist/lib/renderer.js CHANGED
@@ -8,7 +8,8 @@ const fs_1 = __importDefault(require("fs"));
8
8
  const renderer_1 = __importDefault(require("./renderer"));
9
9
  const paths_1 = require("./paths");
10
10
  const templates = {
11
- page: ['content'],
11
+ page: ['css', 'content'],
12
+ css: [],
12
13
  auth: ['profile', 'authUrl', 'scopesList'],
13
14
  scope: ['type', 'title', 'name'],
14
15
  done: ['profile'],
@@ -21,13 +22,15 @@ function renderAuth({ profile, authUrl, scope }) {
21
22
  title: s.endsWith('.readonly') ? 'Readonly (cannot change or delete your data)' : 'Writable (can change or delete your data)',
22
23
  type: s.endsWith('.readonly') ? 'readonly' : '',
23
24
  })).join('\n');
25
+ const css = render('css', {});
24
26
  const content = render('auth', { profile, authUrl, scopesList });
25
- return render('page', { content });
27
+ return render('page', { css, content });
26
28
  }
27
29
  exports.renderAuth = renderAuth;
28
30
  function renderDone({ profile }) {
31
+ const css = render('css', {});
29
32
  const content = render('done', { profile });
30
- return render('page', { content });
33
+ return render('page', { css, content });
31
34
  }
32
35
  exports.renderDone = renderDone;
33
36
  // TODO: Use react
package/dist/lib/renderer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"renderer.js","sourceRoot":"","sources":["../../src/lib/renderer.ts"],"names":[],"mappings":";;;;;;AAAA,4CAAoB;AACpB,0DAAkC;AAClC,mCAA0C;AAI1C,MAAM,SAAS,GAAG;IACjB,IAAI,EAAI,CAAE,SAAS,CAAW;IAC9B,IAAI,EAAI,CAAE,SAAS,EAAE,SAAS,EAAE,YAAY,CAAE;IAC9C,KAAK,EAAG,CAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAW;IAC5C,IAAI,EAAI,CAAE,SAAS,CAAW;CACrB,CAAC;AAPF,8BAAS;AAWlB,MAAM,OAAO,GAAG,EAAkC,CAAC;AAEnD,SAAS,UAAU,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAyD;IACrG,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE;QACnD,IAAI,EAAI,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAY;QACpC,KAAK,EAAG,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,8CAA8C,CAAC,CAAC,CAAC,2CAA2C;QAC9H,IAAI,EAAI,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;KACjD,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEf,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAAC;IACjE,OAAO,MAAM,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC;AACpC,CAAC;AAtBmB,gCAAU;AAwB9B,SAAS,UAAU,CAAC,EAAE,OAAO,EAAuB;IACnD,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC;IAC5C,OAAO,MAAM,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC;AACpC,CAAC;AA3B+B,gCAAU;AA6B1C,kBAAkB;AAClB,SAAS,MAAM,CAAyB,YAAe,EAAE,MAAmD;IAC3G,IAAI,IAAI,GAAU,kBAAQ,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IACrD,MAAM,SAAS,GAAG,MAAgE,CAAC;IAEnF,KAAK,MAAM,QAAQ,IAAI,SAAS,CAAC,YAAY,CAAC,EAAE;QAC/C,MAAM,KAAK,GAAG,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACxC,IAAI,GAAU,IAAI,CAAC,OAAO,CAAC,MAAM,QAAQ,GAAG,EAAE,KAAK,CAAC,CAAC;KACrD;IAED,OAAO,IAAI,CAAC;AACb,CAAC;AAED,SAAS,WAAW,CAAC,YAA0B;IAC9C,IAAI,CAAC,CAAC,YAAY,IAAI,OAAO,CAAC,EAAE;QAC/B,MAAM,IAAI,GAAc,IAAA,uBAAe,EAAC,YAAY,CAAC,CAAC;QACtD,MAAM,QAAQ,GAAU,YAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;QACzD,OAAO,CAAC,YAAY,CAAC,GAAG,QAAQ,CAAC;KACjC;IAED,OAAO,OAAO,CAAC,YAAY,CAAC,CAAC;AAC9B,CAAC;AAED,kBAAe,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC"}
1
+ {"version":3,"file":"renderer.js","sourceRoot":"","sources":["../../src/lib/renderer.ts"],"names":[],"mappings":";;;;;;AAAA,4CAAoB;AACpB,0DAAkC;AAClC,mCAA0C;AAI1C,MAAM,SAAS,GAAG;IACjB,IAAI,EAAI,CAAE,KAAK,EAAE,SAAS,CAAW;IACrC,GAAG,EAAK,EAAY;IACpB,IAAI,EAAI,CAAE,SAAS,EAAE,SAAS,EAAE,YAAY,CAAE;IAC9C,KAAK,EAAG,CAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAW;IAC5C,IAAI,EAAI,CAAE,SAAS,CAAW;CACrB,CAAC;AARF,8BAAS;AAYlB,MAAM,OAAO,GAAG,EAAkC,CAAC;AAEnD,SAAS,UAAU,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAyD;IACrG,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE;QACnD,IAAI,EAAI,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAY;QACpC,KAAK,EAAG,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,8CAA8C,CAAC,CAAC,CAAC,2CAA2C;QAC9H,IAAI,EAAI,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;KACjD,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEf,MAAM,GAAG,GAAO,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IAClC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAAC;IACjE,OAAO,MAAM,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,CAAC;AACzC,CAAC;AAxBmB,gCAAU;AA0B9B,SAAS,UAAU,CAAC,EAAE,OAAO,EAAuB;IACnD,MAAM,GAAG,GAAO,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IAClC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC;IAC5C,OAAO,MAAM,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,CAAC;AACzC,CAAC;AA9B+B,gCAAU;AAgC1C,kBAAkB;AAClB,SAAS,MAAM,CAAyB,YAAe,EAAE,MAAmD;IAC3G,IAAI,IAAI,GAAU,kBAAQ,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IACrD,MAAM,SAAS,GAAG,MAAgE,CAAC;IAEnF,KAAK,MAAM,QAAQ,IAAI,SAAS,CAAC,YAAY,CAAC,EAAE;QAC/C,MAAM,KAAK,GAAG,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACxC,IAAI,GAAU,IAAI,CAAC,OAAO,CAAC,MAAM,QAAQ,GAAG,EAAE,KAAK,CAAC,CAAC;KACrD;IAED,OAAO,IAAI,CAAC;AACb,CAAC;AAED,SAAS,WAAW,CAAC,YAA0B;IAC9C,IAAI,CAAC,CAAC,YAAY,IAAI,OAAO,CAAC,EAAE;QAC/B,MAAM,IAAI,GAAc,IAAA,uBAAe,EAAC,YAAY,CAAC,CAAC;QACtD,MAAM,QAAQ,GAAU,YAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;QACzD,OAAO,CAAC,YAAY,CAAC,GAAG,QAAQ,CAAC;KACjC;IAED,OAAO,OAAO,CAAC,YAAY,CAAC,CAAC;AAC9B,CAAC;AAED,kBAAe,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC"}
package/dist/templates/auth.html CHANGED
@@ -3,4 +3,5 @@
3
3
  <ul>
4
4
  ${scopesList}
5
5
  </ul>
6
- <a href="${authUrl}">Continue</a>
6
+ <a id="button" href="${authUrl}">Continue</a>
7
+ <script type="text/javascript">document.addEventListener('DOMContentLoaded', function(){ document.getElementById('button').focus(); });</script>
package/dist/templates/css.html ADDED
@@ -0,0 +1,111 @@
1
+ <style type="text/css">
2
+ * {
3
+ box-sizing: border-box;
4
+ }
5
+
6
+ html, body {
7
+ width: 100%;
8
+ height: 100%;
9
+ margin: 0;
10
+ padding: 0;
11
+ }
12
+
13
+ body {
14
+ font-family: Arial, sans-serif;
15
+ font-size: 17px;
16
+ display: flex;
17
+ align-items: center;
18
+ justify-content: center;
19
+ padding: 30px 0;
20
+ }
21
+
22
+ .box {
23
+ width: 450px;
24
+ min-height: 500px;
25
+ max-height: 100%;
26
+ padding: 82px 40px 28px 40px;
27
+ margin: 1em;
28
+ border: 1px solid #dadce0;
29
+ border-radius: 8px;
30
+ position: relative;
31
+ display: flex;
32
+ flex-direction: column;
33
+ align-items: center;
34
+ }
35
+
36
+ .box:before {
37
+ width: 100%;
38
+ height: 34px;
39
+ border-bottom: 1px solid #dadce0;
40
+ position: absolute;
41
+ top: 0;
42
+ display: block;
43
+ content: '';
44
+ }
45
+
46
+ h1 {
47
+ font-size: 24px;
48
+ line-height: 40px;
49
+ font-weight: normal;
50
+ margin: 0;
51
+ }
52
+
53
+ p {
54
+ line-height: 32px;
55
+ margin: 0;
56
+ }
57
+
58
+ ul {
59
+ width: 100%;
60
+ margin: 18px 0 30px 0;
61
+ padding-left: 0;
62
+ border-top: 1px solid #dadce0;
63
+ list-style-type: none;
64
+ overflow: auto;
65
+ }
66
+
67
+ li {
68
+ line-height: 48px;
69
+ color: brown;
70
+ border-bottom: 1px solid #dadce0;
71
+ display: flex;
72
+ align-items: center;
73
+ }
74
+
75
+ li:before {
76
+ content: 'W';
77
+ width: 28px;
78
+ height: 28px;
79
+ border-radius: 50%;
80
+ border: 2px solid currentColor;
81
+ display: flex;
82
+ align-items: center;
83
+ justify-content: center;
84
+ font-size: 14px;
85
+ margin-right: 10px;
86
+ }
87
+
88
+ li.readonly {
89
+ color: darkgreen;
90
+ }
91
+
92
+ li.readonly:before {
93
+ content: 'R';
94
+ }
95
+
96
+ a {
97
+ width: 50%;
98
+ padding: 0 24px;
99
+ line-height: 36px;
100
+ margin: auto;
101
+ color: #ffffff;
102
+ background: #1a73e8;
103
+ border-radius: 4px;
104
+ outline: none;
105
+ display: block;
106
+ text-align: center;
107
+ text-decoration: none;
108
+ font-weight: bold;
109
+ font-size: 15px;
110
+ }
111
+ </style>
package/dist/templates/page.html CHANGED
@@ -1,113 +1,4 @@
1
- <style type="text/css">
2
- * {
3
- box-sizing: border-box;
4
- }
5
-
6
- html, body {
7
- width: 100%;
8
- height: 100%;
9
- margin: 0;
10
- padding: 0;
11
- }
12
-
13
- body {
14
- font-family: Arial, sans-serif;
15
- font-size: 17px;
16
- display: flex;
17
- align-items: center;
18
- justify-content: center;
19
- padding: 30px 0;
20
- }
21
-
22
- .box {
23
- width: 450px;
24
- min-height: 500px;
25
- max-height: 100%;
26
- padding: 82px 40px 28px 40px;
27
- margin: 1em;
28
- border: 1px solid #dadce0;
29
- border-radius: 8px;
30
- position: relative;
31
- display: flex;
32
- flex-direction: column;
33
- align-items: center;
34
- }
35
-
36
- .box:before {
37
- width: 100%;
38
- height: 34px;
39
- border-bottom: 1px solid #dadce0;
40
- position: absolute;
41
- top: 0;
42
- display: block;
43
- content: '';
44
- }
45
-
46
- h1 {
47
- font-size: 24px;
48
- line-height: 40px;
49
- font-weight: normal;
50
- margin: 0;
51
- }
52
-
53
- p {
54
- line-height: 32px;
55
- margin: 0;
56
- }
57
-
58
- ul {
59
- width: 100%;
60
- margin: 18px 0 30px 0;
61
- padding-left: 0;
62
- border-top: 1px solid #dadce0;
63
- list-style-type: none;
64
- overflow: auto;
65
- }
66
-
67
- li {
68
- line-height: 48px;
69
- color: brown;
70
- border-bottom: 1px solid #dadce0;
71
- display: flex;
72
- align-items: center;
73
- }
74
-
75
- li:before {
76
- content: 'W';
77
- width: 28px;
78
- height: 28px;
79
- border-radius: 50%;
80
- border: 2px solid currentColor;
81
- display: flex;
82
- align-items: center;
83
- justify-content: center;
84
- font-size: 14px;
85
- margin-right: 10px;
86
- }
87
-
88
- li.readonly {
89
- color: darkgreen;
90
- }
91
-
92
- li.readonly:before {
93
- content: 'R';
94
- }
95
-
96
- a {
97
- width: 50%;
98
- padding: 0 24px;
99
- line-height: 36px;
100
- margin: auto;
101
- color: #ffffff;
102
- background: #1a73e8;
103
- border-radius: 4px;
104
- display: block;
105
- text-align: center;
106
- text-decoration: none;
107
- font-weight: bold;
108
- font-size: 15px;
109
- }
110
- </style>
1
+ ${css}
111
2
  <div class="box">
112
3
  ${content}
113
4
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anmiles/google-api-wrapper",
3
- "version": "15.2.0",
3
+ "version": "15.3.0",
4
4
  "description": "Provides quick interface for getting google API data",
5
5
  "keywords": [
6
6
  "google",
package/src/lib/__tests__/renderer.test.ts CHANGED
@@ -36,7 +36,8 @@ jest.mock<Partial<typeof paths>>('../paths', () => ({
36
36
  }));
37
37
 
38
38
  const mockTemplates: Record<TemplateName, string> = {
39
- page : 'page content = (${content})',
39
+ page : 'page css = (${css}) content = (${content})',
40
+ css : 'css',
40
41
  auth : 'auth profile = (${profile}) authUrl = (${authUrl}) scopesList = (${scopesList})',
41
42
  scope : 'scope type = (${type}) title = (${title}) name = (${name})',
42
43
  done : 'done profile = (${profile})',
@@ -50,14 +51,14 @@ describe('src/lib/renderer', () => {
50
51
  describe('renderAuth', () => {
51
52
  it('should return auth page', () => {
52
53
  const result = original.renderAuth({ authUrl, profile, scope });
53
- expect(result).toEqual('page content = (auth profile = (username) authUrl = (https://authUrl) scopesList = (scope type = (readonly) title = (Readonly (cannot change or delete your data)) name = (scope1.readonly)\nscope type = () title = (Writable (can change or delete your data)) name = (scope2)))');
54
+ expect(result).toEqual('page css = (css) content = (auth profile = (username) authUrl = (https://authUrl) scopesList = (scope type = (readonly) title = (Readonly (cannot change or delete your data)) name = (scope1.readonly)\nscope type = () title = (Writable (can change or delete your data)) name = (scope2)))');
54
55
  });
55
56
  });
56
57
 
57
58
  describe('renderDone', () => {
58
59
  it('should return done page', () => {
59
60
  const result = original.renderDone({ profile });
60
- expect(result).toEqual('page content = (done profile = (username))');
61
+ expect(result).toEqual('page css = (css) content = (done profile = (username))');
61
62
  });
62
63
  });
63
64
 
package/src/lib/renderer.ts CHANGED
@@ -5,7 +5,8 @@ import { getTemplateFile } from './paths';
5
5
  export { templates, renderAuth, renderDone };
6
6
 
7
7
  const templates = {
8
- page : [ 'content' ] as const,
8
+ page : [ 'css', 'content' ] as const,
9
+ css : [ ] as const,
9
10
  auth : [ 'profile', 'authUrl', 'scopesList' ],
10
11
  scope : [ 'type', 'title', 'name' ] as const,
11
12
  done : [ 'profile' ] as const,
@@ -22,13 +23,15 @@ function renderAuth({ profile, authUrl, scope }: { profile: string, authUrl: str
22
23
  type : s.endsWith('.readonly') ? 'readonly' : '',
23
24
  })).join('\n');
24
25
 
26
+ const css = render('css', {});
25
27
  const content = render('auth', { profile, authUrl, scopesList });
26
- return render('page', { content });
28
+ return render('page', { css, content });
27
29
  }
28
30
 
29
31
  function renderDone({ profile }: { profile: string }): string {
32
+ const css = render('css', {});
30
33
  const content = render('done', { profile });
31
- return render('page', { content });
34
+ return render('page', { css, content });
32
35
  }
33
36
 
34
37
  // TODO: Use react
package/src/templates/auth.html CHANGED
@@ -3,4 +3,5 @@
3
3
  <ul>
4
4
  ${scopesList}
5
5
  </ul>
6
- <a href="${authUrl}">Continue</a>
6
+ <a id="button" href="${authUrl}">Continue</a>
7
+ <script type="text/javascript">document.addEventListener('DOMContentLoaded', function(){ document.getElementById('button').focus(); });</script>
package/src/templates/css.html ADDED
@@ -0,0 +1,111 @@
1
+ <style type="text/css">
2
+ * {
3
+ box-sizing: border-box;
4
+ }
5
+
6
+ html, body {
7
+ width: 100%;
8
+ height: 100%;
9
+ margin: 0;
10
+ padding: 0;
11
+ }
12
+
13
+ body {
14
+ font-family: Arial, sans-serif;
15
+ font-size: 17px;
16
+ display: flex;
17
+ align-items: center;
18
+ justify-content: center;
19
+ padding: 30px 0;
20
+ }
21
+
22
+ .box {
23
+ width: 450px;
24
+ min-height: 500px;
25
+ max-height: 100%;
26
+ padding: 82px 40px 28px 40px;
27
+ margin: 1em;
28
+ border: 1px solid #dadce0;
29
+ border-radius: 8px;
30
+ position: relative;
31
+ display: flex;
32
+ flex-direction: column;
33
+ align-items: center;
34
+ }
35
+
36
+ .box:before {
37
+ width: 100%;
38
+ height: 34px;
39
+ border-bottom: 1px solid #dadce0;
40
+ position: absolute;
41
+ top: 0;
42
+ display: block;
43
+ content: '';
44
+ }
45
+
46
+ h1 {
47
+ font-size: 24px;
48
+ line-height: 40px;
49
+ font-weight: normal;
50
+ margin: 0;
51
+ }
52
+
53
+ p {
54
+ line-height: 32px;
55
+ margin: 0;
56
+ }
57
+
58
+ ul {
59
+ width: 100%;
60
+ margin: 18px 0 30px 0;
61
+ padding-left: 0;
62
+ border-top: 1px solid #dadce0;
63
+ list-style-type: none;
64
+ overflow: auto;
65
+ }
66
+
67
+ li {
68
+ line-height: 48px;
69
+ color: brown;
70
+ border-bottom: 1px solid #dadce0;
71
+ display: flex;
72
+ align-items: center;
73
+ }
74
+
75
+ li:before {
76
+ content: 'W';
77
+ width: 28px;
78
+ height: 28px;
79
+ border-radius: 50%;
80
+ border: 2px solid currentColor;
81
+ display: flex;
82
+ align-items: center;
83
+ justify-content: center;
84
+ font-size: 14px;
85
+ margin-right: 10px;
86
+ }
87
+
88
+ li.readonly {
89
+ color: darkgreen;
90
+ }
91
+
92
+ li.readonly:before {
93
+ content: 'R';
94
+ }
95
+
96
+ a {
97
+ width: 50%;
98
+ padding: 0 24px;
99
+ line-height: 36px;
100
+ margin: auto;
101
+ color: #ffffff;
102
+ background: #1a73e8;
103
+ border-radius: 4px;
104
+ outline: none;
105
+ display: block;
106
+ text-align: center;
107
+ text-decoration: none;
108
+ font-weight: bold;
109
+ font-size: 15px;
110
+ }
111
+ </style>
package/src/templates/page.html CHANGED
@@ -1,113 +1,4 @@
1
- <style type="text/css">
2
- * {
3
- box-sizing: border-box;
4
- }
5
-
6
- html, body {
7
- width: 100%;
8
- height: 100%;
9
- margin: 0;
10
- padding: 0;
11
- }
12
-
13
- body {
14
- font-family: Arial, sans-serif;
15
- font-size: 17px;
16
- display: flex;
17
- align-items: center;
18
- justify-content: center;
19
- padding: 30px 0;
20
- }
21
-
22
- .box {
23
- width: 450px;
24
- min-height: 500px;
25
- max-height: 100%;
26
- padding: 82px 40px 28px 40px;
27
- margin: 1em;
28
- border: 1px solid #dadce0;
29
- border-radius: 8px;
30
- position: relative;
31
- display: flex;
32
- flex-direction: column;
33
- align-items: center;
34
- }
35
-
36
- .box:before {
37
- width: 100%;
38
- height: 34px;
39
- border-bottom: 1px solid #dadce0;
40
- position: absolute;
41
- top: 0;
42
- display: block;
43
- content: '';
44
- }
45
-
46
- h1 {
47
- font-size: 24px;
48
- line-height: 40px;
49
- font-weight: normal;
50
- margin: 0;
51
- }
52
-
53
- p {
54
- line-height: 32px;
55
- margin: 0;
56
- }
57
-
58
- ul {
59
- width: 100%;
60
- margin: 18px 0 30px 0;
61
- padding-left: 0;
62
- border-top: 1px solid #dadce0;
63
- list-style-type: none;
64
- overflow: auto;
65
- }
66
-
67
- li {
68
- line-height: 48px;
69
- color: brown;
70
- border-bottom: 1px solid #dadce0;
71
- display: flex;
72
- align-items: center;
73
- }
74
-
75
- li:before {
76
- content: 'W';
77
- width: 28px;
78
- height: 28px;
79
- border-radius: 50%;
80
- border: 2px solid currentColor;
81
- display: flex;
82
- align-items: center;
83
- justify-content: center;
84
- font-size: 14px;
85
- margin-right: 10px;
86
- }
87
-
88
- li.readonly {
89
- color: darkgreen;
90
- }
91
-
92
- li.readonly:before {
93
- content: 'R';
94
- }
95
-
96
- a {
97
- width: 50%;
98
- padding: 0 24px;
99
- line-height: 36px;
100
- margin: auto;
101
- color: #ffffff;
102
- background: #1a73e8;
103
- border-radius: 4px;
104
- display: block;
105
- text-align: center;
106
- text-decoration: none;
107
- font-weight: bold;
108
- font-size: 15px;
109
- }
110
- </style>
1
+ ${css}
111
2
  <div class="box">
112
3
  ${content}
113
4
  </div>