neo.mjs 7.11.0 → 7.13.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.
- package/apps/ServiceWorker.mjs +2 -2
- package/apps/portal/index.html +1 -1
- package/apps/portal/resources/data/blog.json +733 -782
- package/apps/portal/view/home/FooterContainer.mjs +1 -1
- package/apps/portal/view/home/parts/AfterMath.mjs +7 -10
- package/apps/portal/view/learn/ContentComponent.mjs +1 -1
- package/apps/portal/view/services/Component.mjs +4 -4
- package/examples/ServiceWorker.mjs +2 -2
- package/examples/dialog/DemoDialog.mjs +7 -0
- package/examples/dialog/MainContainer.mjs +1 -0
- package/package.json +1 -1
- package/resources/scss/src/apps/portal/about/MemberContainer.scss +7 -5
- package/resources/scss/src/apps/portal/home/ContentBox.scss +74 -41
- package/resources/scss/src/apps/portal/home/parts/AfterMath.scss +16 -2
- package/resources/scss/src/apps/portal/home/parts/Features.scss +25 -3
- package/resources/scss/src/apps/portal/learn/ContentComponent.scss +19 -20
- package/resources/scss/src/apps/portal/services/Component.scss +23 -8
- package/src/DefaultConfig.mjs +2 -2
- package/src/list/Circle.mjs +1 -0
- package/src/tab/Container.mjs +25 -36
|
@@ -33,17 +33,14 @@ class AfterMath extends BaseContainer {
|
|
|
33
33
|
}, {
|
|
34
34
|
cls : ['neo-content'],
|
|
35
35
|
flex: 'none',
|
|
36
|
+
tag : 'ul',
|
|
37
|
+
|
|
36
38
|
html: `
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
<br>For help starting a project email <a href="mailto:services@neomjs.com">services@neomjs.com</a>.
|
|
43
|
-
<br>For questions about private training email <a href="mailto:training@neomjs.com">training@neomjs.com</a>.
|
|
44
|
-
</p>
|
|
45
|
-
`,
|
|
46
|
-
tag : 'div'
|
|
39
|
+
<li>To learn more about Neo.mjs please read the <a href="#/learn">Learning Section</a> or browse the <a href="#/blog">Blog</a></li>
|
|
40
|
+
<li>To arrange a demo or to talk to an engineer email <a href="mailto:info@neomjs.com">info@neomjs.com</a></li>
|
|
41
|
+
<li>For help starting a project email <a href="mailto:services@neomjs.com">services@neomjs.com</a></li>
|
|
42
|
+
<li>For questions about private training email <a href="mailto:training@neomjs.com">training@neomjs.com</a></li>
|
|
43
|
+
`
|
|
47
44
|
}, {
|
|
48
45
|
flex: 1
|
|
49
46
|
}, {
|
|
@@ -184,7 +184,7 @@ class ContentComponent extends Component {
|
|
|
184
184
|
data = await fetch(path);
|
|
185
185
|
content = await data.text();
|
|
186
186
|
content = me.updateContentSectionsStore(content); // also replaces ## with h2 tags
|
|
187
|
-
content =
|
|
187
|
+
content = `<h1 class='neo-h1'>${record.name}</h1>\n${content}`;
|
|
188
188
|
modifiedHtml = await me.highlightPreContent(content);
|
|
189
189
|
neoComponents = {};
|
|
190
190
|
neoDivs = {};
|
|
@@ -20,9 +20,9 @@ class Component extends BaseComponent {
|
|
|
20
20
|
*/
|
|
21
21
|
vdom:
|
|
22
22
|
{cn: [
|
|
23
|
-
{tag: 'h1', html: 'Services'},
|
|
23
|
+
{tag: 'h1', cls: ['neo-h1'], html: 'Services'},
|
|
24
24
|
{cls: ['info-block'], cn: [
|
|
25
|
-
{tag: 'h2', html: 'Weekly Workshops'},
|
|
25
|
+
{tag: 'h2', cls: ['neo-h2'], html: 'Weekly Workshops'},
|
|
26
26
|
{tag: 'p', html: [
|
|
27
27
|
'We are doing weekly workshops on Thursdays 18:30 CEST (12:30am EST) for 60m free of charge.</br>',
|
|
28
28
|
'Ping us inside our ',
|
|
@@ -31,7 +31,7 @@ class Component extends BaseComponent {
|
|
|
31
31
|
].join('')},
|
|
32
32
|
]},
|
|
33
33
|
{cls: ['info-block'], cn: [
|
|
34
|
-
{tag: 'h2', html: 'Professional Trainings'},
|
|
34
|
+
{tag: 'h2', cls: ['neo-h2'], html: 'Professional Trainings'},
|
|
35
35
|
{tag: 'p', html: [
|
|
36
36
|
'While we do have a self-study based Learning Section online, you can also hire us ',
|
|
37
37
|
'in case you prefer an Instructor-led Training for bringing your team up to speed.'
|
|
@@ -47,7 +47,7 @@ class Component extends BaseComponent {
|
|
|
47
47
|
].join('')},
|
|
48
48
|
]},
|
|
49
49
|
{cls: ['info-block'], cn: [
|
|
50
|
-
{tag: 'h2', html: 'Professional Services'},
|
|
50
|
+
{tag: 'h2', cls: ['neo-h2'], html: 'Professional Services'},
|
|
51
51
|
{tag: 'p', html: [
|
|
52
52
|
'We can help you to ensure your Neo.mjs based projects run successfully.',
|
|
53
53
|
].join('')},
|
|
@@ -48,6 +48,12 @@ class DemoDialog extends Dialog {
|
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
+
/**
|
|
52
|
+
* Custom class field to store the created dialog.Base instance
|
|
53
|
+
* @member {Neo.dialog.Base|null} dialog=null
|
|
54
|
+
*/
|
|
55
|
+
dialog = null
|
|
56
|
+
|
|
51
57
|
/**
|
|
52
58
|
* @param {Object} config
|
|
53
59
|
*/
|
|
@@ -154,6 +160,7 @@ class DemoDialog extends Dialog {
|
|
|
154
160
|
*
|
|
155
161
|
*/
|
|
156
162
|
onWindowClose() {
|
|
163
|
+
this.dialog = null;
|
|
157
164
|
this.getReference('create-dialog-button').disabled = false
|
|
158
165
|
}
|
|
159
166
|
}
|
package/package.json
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
.portal-about-member-container {
|
|
2
|
-
border
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
border : 1px solid var(--sem-color-border-default);
|
|
3
|
+
border-radius: .7em;
|
|
4
|
+
box-shadow : 0 3px 6px rgba(0, 0, 0, 0.3);
|
|
5
|
+
min-width : 600px;
|
|
6
|
+
padding : 1em 1em 4em;
|
|
7
|
+
position : relative;
|
|
7
8
|
|
|
8
9
|
&:not(:nth-child(2)) {
|
|
9
10
|
margin-top: 1em;
|
|
@@ -13,6 +14,7 @@
|
|
|
13
14
|
display: flex;
|
|
14
15
|
|
|
15
16
|
h2.portal-profile-name {
|
|
17
|
+
color : #3E63DD;
|
|
16
18
|
margin: .3em 0;
|
|
17
19
|
}
|
|
18
20
|
|
|
@@ -1,65 +1,98 @@
|
|
|
1
1
|
.portal-content-box {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
background : #ffffff;
|
|
3
|
+
border-radius : 12px;
|
|
4
|
+
box-shadow : 0 4px 16px rgba(0, 0, 0, 0.1);
|
|
5
|
+
color : #3e63dd;
|
|
5
6
|
cursor : pointer;
|
|
6
|
-
|
|
7
|
-
|
|
7
|
+
flex : 0 0 calc(33.33% - 1.5em);
|
|
8
|
+
max-width : 350px;
|
|
9
|
+
min-width : 280px;
|
|
10
|
+
padding : 1em;
|
|
8
11
|
position : relative;
|
|
9
12
|
text-decoration: none;
|
|
13
|
+
transition : transform 0.3s ease-out, box-shadow 0.3s ease-out;
|
|
14
|
+
|
|
15
|
+
&:hover {
|
|
16
|
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
|
17
|
+
transform : translateY(-8px) scale(1.02);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&:active {
|
|
21
|
+
transform: scale(0.98);
|
|
22
|
+
}
|
|
10
23
|
|
|
11
24
|
.portal-content-box-content {
|
|
12
|
-
|
|
13
|
-
|
|
25
|
+
color : #555;
|
|
26
|
+
font-size : 0.95em;
|
|
27
|
+
list-style : none;
|
|
28
|
+
margin-top : 0.5em;
|
|
29
|
+
padding : 8px 8px 8px 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.portal-content-box-content li {
|
|
33
|
+
border-radius: 4px;
|
|
34
|
+
list-style : none;
|
|
35
|
+
margin-top : .4em;
|
|
36
|
+
padding : 8px;
|
|
37
|
+
transition : background-color 0.2s ease-out, color 0.2s ease-out;
|
|
38
|
+
|
|
39
|
+
&:hover {
|
|
40
|
+
background-color: rgba(62, 99, 221, 0.1);
|
|
41
|
+
color : #3e63dd;
|
|
42
|
+
}
|
|
14
43
|
}
|
|
15
44
|
|
|
16
|
-
.portal-content-box-headline {
|
|
17
|
-
border-bottom :
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
45
|
+
h3.portal-content-box-headline {
|
|
46
|
+
border-bottom : 2px solid #3e63dd;
|
|
47
|
+
color : #3e63dd;
|
|
48
|
+
font-size : 1.18em;
|
|
49
|
+
font-weight : 500;
|
|
50
|
+
letter-spacing: 1.5px;
|
|
51
|
+
margin : 0 auto;
|
|
52
|
+
max-width : 90%;
|
|
53
|
+
padding-bottom: 0.4em;
|
|
22
54
|
text-align : center;
|
|
23
|
-
word-spacing : 1.5px;
|
|
24
55
|
}
|
|
25
|
-
}
|
|
26
56
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
57
|
+
&:after {
|
|
58
|
+
align-items : center;
|
|
59
|
+
background-color: rgba(62, 99, 221, 0.05);
|
|
60
|
+
border-radius : 5px;
|
|
61
|
+
bottom : 10px;
|
|
62
|
+
color : #3e63dd;
|
|
63
|
+
content : "\2192";
|
|
64
|
+
display : flex;
|
|
65
|
+
font-size : 1.2em;
|
|
66
|
+
justify-content : center;
|
|
67
|
+
opacity : 0.8;
|
|
68
|
+
padding : 5px 8px;
|
|
69
|
+
position : absolute;
|
|
70
|
+
right : 10px;
|
|
71
|
+
transition : background-color 0.3s ease;
|
|
72
|
+
}
|
|
31
73
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
opacity : 0.7;
|
|
40
|
-
padding : 3px 20px;
|
|
41
|
-
position : absolute;
|
|
42
|
-
right : -1px;
|
|
43
|
-
text-align : center;
|
|
44
|
-
}
|
|
74
|
+
&:after:hover:after {
|
|
75
|
+
background-color: rgba(62, 99, 221, 0.25);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.neo-mouse {
|
|
79
|
+
&:hover {
|
|
80
|
+
background-color: rgba(62, 99, 221, 0.05);
|
|
45
81
|
|
|
46
82
|
.portal-content-box-headline {
|
|
47
|
-
border-bottom-color: #
|
|
83
|
+
border-bottom-color: #1a47b8;
|
|
48
84
|
}
|
|
49
85
|
}
|
|
50
86
|
}
|
|
51
|
-
}
|
|
52
87
|
|
|
53
|
-
.neo-no-mouse {
|
|
54
|
-
.portal-content-box {
|
|
88
|
+
.neo-no-mouse {
|
|
55
89
|
&:after {
|
|
56
|
-
bottom :
|
|
57
|
-
color :
|
|
58
|
-
content :
|
|
59
|
-
font-family: var(--fa-style-family-classic);
|
|
90
|
+
bottom : 20px;
|
|
91
|
+
color : #3e63dd;
|
|
92
|
+
content : "\f08e";
|
|
60
93
|
font-weight: 600;
|
|
61
94
|
position : absolute;
|
|
62
|
-
right : .5em;
|
|
95
|
+
right : 0.5em;
|
|
63
96
|
}
|
|
64
97
|
}
|
|
65
98
|
}
|
|
@@ -1,7 +1,21 @@
|
|
|
1
1
|
.portal-home-aftermath {
|
|
2
2
|
height: 60em;
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
a {
|
|
5
|
+
color: #3E63DD;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
li {
|
|
9
|
+
font-size: var(--core-fontsize-body);
|
|
10
|
+
font-weight: var(--core-fontweight-regular);
|
|
11
|
+
line-height: var(--core-lineheight-paragraph);
|
|
12
|
+
|
|
13
|
+
&::marker {
|
|
14
|
+
color: #3E63DD;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
ul {
|
|
19
|
+
align-self: center;
|
|
6
20
|
}
|
|
7
21
|
}
|
|
@@ -1,17 +1,39 @@
|
|
|
1
1
|
.portal-home-features {
|
|
2
|
-
|
|
2
|
+
align-self : center;
|
|
3
|
+
gap : 1.5em;
|
|
3
4
|
grid-template-columns: repeat(3, 1fr);
|
|
4
|
-
|
|
5
|
-
|
|
5
|
+
justify-content : center;
|
|
6
|
+
max-width : 1200px;
|
|
7
|
+
padding : 1.5em;
|
|
6
8
|
place-content : start;
|
|
9
|
+
scrollbar-color : #3e63dd #f0f0f0;
|
|
10
|
+
scrollbar-width : thin;
|
|
11
|
+
|
|
12
|
+
&::-webkit-scrollbar {
|
|
13
|
+
height: 8px;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&::-webkit-scrollbar-track {
|
|
17
|
+
background : #f0f0f0;
|
|
18
|
+
border-radius: 10px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&::-webkit-scrollbar-thumb {
|
|
22
|
+
background-color: #3e63dd;
|
|
23
|
+
border-radius : 10px;
|
|
24
|
+
}
|
|
7
25
|
|
|
8
26
|
@media (max-width: 1000px) {
|
|
9
27
|
grid-template-columns: repeat(2, 1fr);
|
|
10
28
|
}
|
|
11
29
|
|
|
12
30
|
@media (max-width: 700px) {
|
|
31
|
+
align-self : start;
|
|
13
32
|
grid-template-columns: repeat(6, 1fr);
|
|
33
|
+
margin-bottom : 5em;
|
|
34
|
+
max-width : fill-available; // prefixed by postCSS
|
|
14
35
|
min-height : 50%;
|
|
36
|
+
overflow-x : scroll;
|
|
15
37
|
}
|
|
16
38
|
|
|
17
39
|
@media (max-width: 500px) {
|
|
@@ -29,11 +29,6 @@
|
|
|
29
29
|
margin: 1em 0 1em 0;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
details summary {
|
|
33
|
-
cursor : pointer;
|
|
34
|
-
transition: margin 300ms ease-out;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
32
|
details[open] {
|
|
38
33
|
margin-bottom: 2em;
|
|
39
34
|
}
|
|
@@ -41,9 +36,11 @@
|
|
|
41
36
|
details summary {
|
|
42
37
|
align-items: center;
|
|
43
38
|
color : #555;
|
|
39
|
+
cursor : pointer;
|
|
44
40
|
display : flex;
|
|
45
41
|
font-weight: bold;
|
|
46
42
|
list-style : none;
|
|
43
|
+
transition : margin 300ms ease-out;
|
|
47
44
|
}
|
|
48
45
|
|
|
49
46
|
details summary::before {
|
|
@@ -62,23 +59,12 @@
|
|
|
62
59
|
margin : 0.4em 0.4em 0.4em 0;
|
|
63
60
|
}
|
|
64
61
|
|
|
65
|
-
|
|
66
|
-
|
|
62
|
+
h1.neo-h1 {
|
|
63
|
+
color: #3E63DD;
|
|
67
64
|
}
|
|
68
65
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
|
72
|
-
transition: 0.3s;
|
|
73
|
-
/* Add some padding inside the card container */
|
|
74
|
-
padding : 2px 16px;
|
|
75
|
-
font-size : 1em;
|
|
76
|
-
margin-bottom: 1em;
|
|
77
|
-
|
|
78
|
-
&:hover {
|
|
79
|
-
/* On mouse-over, add a deeper shadow */
|
|
80
|
-
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
|
|
81
|
-
}
|
|
66
|
+
summary::-webkit-details-marker {
|
|
67
|
+
display: none;
|
|
82
68
|
}
|
|
83
69
|
|
|
84
70
|
p {
|
|
@@ -91,6 +77,19 @@
|
|
|
91
77
|
overflow-x : scroll;
|
|
92
78
|
padding : 12px;
|
|
93
79
|
}
|
|
80
|
+
|
|
81
|
+
.lab {
|
|
82
|
+
box-shadow : 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
|
83
|
+
font-size : 1em;
|
|
84
|
+
margin-bottom: 1em;
|
|
85
|
+
padding : 2px 16px;
|
|
86
|
+
transition : 0.3s;
|
|
87
|
+
|
|
88
|
+
&:hover {
|
|
89
|
+
/* On mouse-over, add a deeper shadow */
|
|
90
|
+
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
94
93
|
}
|
|
95
94
|
|
|
96
95
|
.portal-size-large {
|
|
@@ -3,22 +3,37 @@
|
|
|
3
3
|
overflow-y : auto;
|
|
4
4
|
padding : 0.1em 6em 1em 6em;
|
|
5
5
|
|
|
6
|
+
a {
|
|
7
|
+
color: #3E63DD;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
li {
|
|
11
|
+
&::marker {
|
|
12
|
+
color: #3E63DD;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
6
16
|
.info-block {
|
|
7
|
-
border
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
margin-
|
|
11
|
-
margin-
|
|
12
|
-
|
|
13
|
-
|
|
17
|
+
border : 1px solid var(--sem-color-border-default);
|
|
18
|
+
border-radius: .7em;
|
|
19
|
+
box-shadow : 0 3px 6px rgba(0, 0, 0, 0.3);
|
|
20
|
+
margin-left : auto;
|
|
21
|
+
margin-right : auto;
|
|
22
|
+
margin-top : 2em;
|
|
23
|
+
max-width : 800px;
|
|
24
|
+
padding : 0.5em 3em 1em 3em;
|
|
14
25
|
}
|
|
15
26
|
|
|
16
|
-
h1 {
|
|
27
|
+
h1.neo-h1 {
|
|
17
28
|
margin-left : auto;
|
|
18
29
|
margin-right: auto;
|
|
19
30
|
width : fit-content;
|
|
20
31
|
}
|
|
21
32
|
|
|
33
|
+
h2.neo-h2 {
|
|
34
|
+
color: #3e63dd;
|
|
35
|
+
}
|
|
36
|
+
|
|
22
37
|
@media (max-width: 600px) {
|
|
23
38
|
padding: 0.1em 1em 1em 1em;
|
|
24
39
|
|
package/src/DefaultConfig.mjs
CHANGED
|
@@ -262,12 +262,12 @@ const DefaultConfig = {
|
|
|
262
262
|
useVdomWorker: true,
|
|
263
263
|
/**
|
|
264
264
|
* buildScripts/injectPackageVersion.mjs will update this value
|
|
265
|
-
* @default '7.
|
|
265
|
+
* @default '7.13.0'
|
|
266
266
|
* @memberOf! module:Neo
|
|
267
267
|
* @name config.version
|
|
268
268
|
* @type String
|
|
269
269
|
*/
|
|
270
|
-
version: '7.
|
|
270
|
+
version: '7.13.0'
|
|
271
271
|
};
|
|
272
272
|
|
|
273
273
|
Object.assign(DefaultConfig, {
|
package/src/list/Circle.mjs
CHANGED
package/src/tab/Container.mjs
CHANGED
|
@@ -322,43 +322,32 @@ class Container extends BaseContainer {
|
|
|
322
322
|
* @protected
|
|
323
323
|
*/
|
|
324
324
|
getLayoutConfig() {
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
direction: 'row-reverse',
|
|
350
|
-
pack : 'start'
|
|
351
|
-
};
|
|
352
|
-
break
|
|
353
|
-
case 'top':
|
|
354
|
-
layoutConfig = {
|
|
355
|
-
ntype: 'vbox',
|
|
356
|
-
align: 'stretch'
|
|
357
|
-
};
|
|
358
|
-
break
|
|
359
|
-
}
|
|
325
|
+
const layoutMap = {
|
|
326
|
+
'bottom': {
|
|
327
|
+
ntype: 'vbox',
|
|
328
|
+
align: 'stretch',
|
|
329
|
+
direction: 'column-reverse',
|
|
330
|
+
pack: 'start'
|
|
331
|
+
},
|
|
332
|
+
'left': {
|
|
333
|
+
ntype: 'hbox',
|
|
334
|
+
align: 'stretch',
|
|
335
|
+
direction: 'row',
|
|
336
|
+
pack: 'start'
|
|
337
|
+
},
|
|
338
|
+
'right': {
|
|
339
|
+
ntype: 'hbox',
|
|
340
|
+
align: 'stretch',
|
|
341
|
+
direction: 'row-reverse',
|
|
342
|
+
pack: 'start'
|
|
343
|
+
},
|
|
344
|
+
'top': {
|
|
345
|
+
ntype: 'vbox',
|
|
346
|
+
align: 'stretch'
|
|
347
|
+
}
|
|
348
|
+
};
|
|
360
349
|
|
|
361
|
-
return
|
|
350
|
+
return layoutMap[this.tabBarPosition] || null;
|
|
362
351
|
}
|
|
363
352
|
|
|
364
353
|
/**
|