Skip to content

Commit 3352928

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 11-26-2024 10:30:13 PM
1 parent f220df3 commit 3352928

File tree

35 files changed

+583
-545
lines changed

35 files changed

+583
-545
lines changed

‎ej2-angular/avatar/how-to/avatar-customization.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ by adding custom class or directly selecting the avatar class from the CSS.
2020
{% include code-snippet/avatar/color-cs2/src/app.component.ts %}
2121
{% endhighlight %}
2222

23+
{% highlight ts tabtitle="styles.css" %}
24+
{% include code-snippet/avatar/color-cs2/src/styles.css %}
25+
{% endhighlight %}
26+
2327
{% highlight ts tabtitle="main.ts" %}
2428
{% include code-snippet/avatar/color-cs2/src/main.ts %}
2529
{% endhighlight %}
@@ -38,6 +42,11 @@ designed in such a way that the width and height will be relative to font-size.
3842
{% include code-snippet/avatar/custom-size-cs2/src/app.component.ts %}
3943
{% endhighlight %}
4044

45+
46+
{% highlight ts tabtitle="styles.css" %}
47+
{% include code-snippet/avatar/custom-size-cs2/src/styles.css %}
48+
{% endhighlight %}
49+
4150
{% highlight ts tabtitle="main.ts" %}
4251
{% include code-snippet/avatar/custom-size-cs2/src/main.ts %}
4352
{% endhighlight %}
@@ -55,6 +64,10 @@ etc. Some of them are given below.
5564
{% include code-snippet/avatar/media-formats-cs2/src/app.component.ts %}
5665
{% endhighlight %}
5766

67+
{% highlight ts tabtitle="styles.css" %}
68+
{% include code-snippet/avatar/media-formats-cs2/src/styles.css %}
69+
{% endhighlight %}
70+
5871
{% highlight ts tabtitle="main.ts" %}
5972
{% include code-snippet/avatar/media-formats-cs2/src/main.ts %}
6073
{% endhighlight %}
@@ -74,6 +87,10 @@ data-source from the server or remote data or AJAX. We have also rendered the av
7487
{% include code-snippet/avatar/angular-avatar-cs2/src/app.component.ts %}
7588
{% endhighlight %}
7689

90+
{% highlight ts tabtitle="styles.css" %}
91+
{% include code-snippet/avatar/angular-avatar-cs2/src/styles.css %}
92+
{% endhighlight %}
93+
7794
{% highlight ts tabtitle="main.ts" %}
7895
{% include code-snippet/avatar/angular-avatar-cs2/src/main.ts %}
7996
{% endhighlight %}

‎ej2-angular/avatar/how-to/integrate-avatar-into-badge.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ badges (.`e-badge-notification`) in the following sample.
1919
{% include code-snippet/avatar/badge-cs2/src/app.component.ts %}
2020
{% endhighlight %}
2121

22+
{% highlight ts tabtitle="styles.css" %}
23+
{% include code-snippet/avatar/badge-cs2/src/styles.css %}
24+
{% endhighlight %}
25+
2226
{% highlight ts tabtitle="main.ts" %}
2327
{% include code-snippet/avatar/badge-cs2/src/main.ts %}
2428
{% endhighlight %}

‎ej2-angular/avatar/types.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@ class to change the appearance of the avatar.
3030
{% include code-snippet/avatar/size-cs1/src/app.component.ts %}
3131
{% endhighlight %}
3232

33+
{% highlight ts tabtitle="styles.css" %}
34+
{% include code-snippet/avatar/size-cs1/src/styles.css %}
35+
{% endhighlight %}
36+
3337
{% highlight ts tabtitle="main.ts" %}
3438
{% include code-snippet/avatar/size-cs1/src/main.ts %}
3539
{% endhighlight %}

‎ej2-angular/code-snippet/avatar/angular-avatar-cs2/index.css

Lines changed: 0 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1 @@
1-
#container {
2-
visibility: hidden;
3-
}
41

5-
#loader {
6-
color: #008cff;
7-
height: 40px;
8-
left: 45%;
9-
position: absolute;
10-
top: 45%;
11-
width: 30%;
12-
}
13-
14-
#element {
15-
display: block;
16-
margin: auto;
17-
border-radius: 3px;
18-
justify-content: center;
19-
}
20-
21-
.e-avatar {
22-
margin: 2px;
23-
}
24-
25-
.sample_container.avatar-badge .avatar-sub-block {
26-
display: inline-block;
27-
position: relative;
28-
margin: 7px
29-
}
30-
31-
.sample_container.avatar-badge .avatar-block {
32-
display: inline-block;
33-
vertical-align: top;
34-
}
35-
36-
/* Media Queries for various devices */
37-
38-
@media only screen and (max-width: 965px) {
39-
.sample_container.avatar-badge {
40-
max-width: 332px;
41-
margin: auto;
42-
margin-top: 0;
43-
}
44-
.circleAvatar {
45-
margin-top: 15px;
46-
}
47-
.e-avatar-showcase.e-card {
48-
width: 320px;
49-
}
50-
}
51-
52-
@media only screen and (min-width: 965px) {
53-
.sample_container.avatar-badge {
54-
max-width: 825px;
55-
margin: auto;
56-
margin-top: 70px;
57-
}
58-
.e-avatar-showcase.e-card {
59-
width: 400px;
60-
}
61-
}
62-
63-
.e-avatar.image {
64-
background-repeat: no-repeat;
65-
background-size: cover;
66-
background-position: center;
67-
}
68-
69-
/* Card Customization */
70-
71-
.e-avatar-showcase.e-card {
72-
height: 140px;
73-
padding: 4px;
74-
margin: 5px;
75-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
76-
border-radius: 8px;
77-
}
78-
79-
.e-avatar-showcase.e-card .e-card-header .e-card-header-title {
80-
align-self: center;
81-
font-size: 18px;
82-
letter-spacing: 1px;
83-
text-shadow: #eaeaea 1px 1px 2px;
84-
}
85-
86-
.e-avatar-showcase.e-card .e-card-header .e-card-sub-title {
87-
color: rgba(0, 0, 0, 0.75);
88-
white-space: pre-line;
89-
font-size: 14px;
90-
text-shadow: #eaeaea 1px 1px 2px;
91-
}
92-
93-
.e-avatar-showcase.e-card .e-card-header .e-card-sub-title p {
94-
margin: 0;
95-
}
96-
97-
.e-avatar-showcase.e-card .e-card-content {
98-
align-self: center;
99-
padding: 10px 11px 10px 0px;
100-
color: rgba(0, 0, 0, 0.75);
101-
overflow: visible;
102-
}

‎ej2-angular/code-snippet/avatar/angular-avatar-cs2/src/app.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { NgModule } from '@angular/core'
22
import { BrowserModule } from '@angular/platform-browser'
3-
43
import { Component } from '@angular/core';
4+
import { CommonModule } from '@angular/common';
55

66
@Component({
77
imports: [
8-
8+
CommonModule
99
],
1010

1111

‎ej2-angular/code-snippet/avatar/angular-avatar-cs2/src/styles.css

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,105 @@
11
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
22
@import 'node_modules/@syncfusion/ej2-layouts/styles/material.css';
3+
4+
#container {
5+
visibility: hidden;
6+
}
7+
8+
#loader {
9+
color: #008cff;
10+
height: 40px;
11+
left: 45%;
12+
position: absolute;
13+
top: 45%;
14+
width: 30%;
15+
}
16+
17+
#element {
18+
display: block;
19+
margin: auto;
20+
border-radius: 3px;
21+
justify-content: center;
22+
}
23+
24+
.e-avatar {
25+
margin: 2px;
26+
}
27+
28+
.sample_container.avatar-badge .avatar-sub-block {
29+
display: inline-block;
30+
position: relative;
31+
margin: 7px
32+
}
33+
34+
.sample_container.avatar-badge .avatar-block {
35+
display: inline-block;
36+
vertical-align: top;
37+
}
38+
39+
/* Media Queries for various devices */
40+
41+
@media only screen and (max-width: 965px) {
42+
.sample_container.avatar-badge {
43+
max-width: 332px;
44+
margin: auto;
45+
margin-top: 0;
46+
}
47+
.circleAvatar {
48+
margin-top: 15px;
49+
}
50+
.e-avatar-showcase.e-card {
51+
width: 320px;
52+
}
53+
}
54+
55+
@media only screen and (min-width: 965px) {
56+
.sample_container.avatar-badge {
57+
max-width: 825px;
58+
margin: auto;
59+
margin-top: 70px;
60+
}
61+
.e-avatar-showcase.e-card {
62+
width: 400px;
63+
}
64+
}
65+
66+
.e-avatar.image {
67+
background-repeat: no-repeat;
68+
background-size: cover;
69+
background-position: center;
70+
}
71+
72+
/* Card Customization */
73+
74+
.e-avatar-showcase.e-card {
75+
height: 140px;
76+
padding: 4px;
77+
margin: 5px;
78+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
79+
border-radius: 8px;
80+
}
81+
82+
.e-avatar-showcase.e-card .e-card-header .e-card-header-title {
83+
align-self: center;
84+
font-size: 18px;
85+
letter-spacing: 1px;
86+
text-shadow: #eaeaea 1px 1px 2px;
87+
}
88+
89+
.e-avatar-showcase.e-card .e-card-header .e-card-sub-title {
90+
color: rgba(0, 0, 0, 0.75);
91+
white-space: pre-line;
92+
font-size: 14px;
93+
text-shadow: #eaeaea 1px 1px 2px;
94+
}
95+
96+
.e-avatar-showcase.e-card .e-card-header .e-card-sub-title p {
97+
margin: 0;
98+
}
99+
100+
.e-avatar-showcase.e-card .e-card-content {
101+
align-self: center;
102+
padding: 10px 11px 10px 0px;
103+
color: rgba(0, 0, 0, 0.75);
104+
overflow: visible;
105+
}

‎ej2-angular/code-snippet/avatar/badge-cs2/index.css

Lines changed: 0 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1 @@
1-
#container {
2-
visibility: hidden;
3-
}
41

5-
#loader {
6-
color: #008cff;
7-
height: 40px;
8-
left: 45%;
9-
position: absolute;
10-
top: 45%;
11-
width: 30%;
12-
}
13-
14-
#element {
15-
display: block;
16-
margin: auto;
17-
border-radius: 3px;
18-
justify-content: center;
19-
}
20-
21-
.sample_container.avatar-badge .avatar-sub-block {
22-
display: inline-block;
23-
position: relative;
24-
margin: 7px
25-
}
26-
27-
.sample_container.avatar-badge .avatar-block {
28-
display: inline-block;
29-
vertical-align: top;
30-
}
31-
32-
/* Media Queries for various devices */
33-
34-
@media only screen and (max-width: 965px) {
35-
.sample_container.avatar-badge {
36-
max-width: 332px;
37-
margin: auto;
38-
margin-top: 0;
39-
}
40-
.circleAvatar {
41-
margin-top: 15px;
42-
}
43-
.e-avatar-showcase.e-card {
44-
width: 320px;
45-
}
46-
}
47-
48-
@media only screen and (min-width: 965px) {
49-
.sample_container.avatar-badge {
50-
max-width: 825px;
51-
margin: auto;
52-
margin-top: 70px;
53-
}
54-
.e-avatar-showcase.e-card {
55-
width: 400px;
56-
}
57-
}
58-
59-
.e-avatar.image {
60-
background-repeat: no-repeat;
61-
background-size: cover;
62-
background-position: center;
63-
}
64-
65-
/* Card Customization */
66-
67-
.e-avatar-showcase.e-card {
68-
height: 140px;
69-
padding: 4px;
70-
margin: 5px;
71-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
72-
border-radius: 8px;
73-
}
74-
75-
.e-avatar-showcase.e-card .e-card-header .e-card-header-title {
76-
align-self: center;
77-
font-size: 18px;
78-
letter-spacing: 1px;
79-
text-shadow: #eaeaea 1px 1px 2px;
80-
}
81-
82-
.e-avatar-showcase.e-card .e-card-header .e-card-sub-title {
83-
color: rgba(0, 0, 0, 0.75);
84-
white-space: pre-line;
85-
font-size: 14px;
86-
text-shadow: #eaeaea 1px 1px 2px;
87-
}
88-
89-
.e-avatar-showcase.e-card .e-card-header .e-card-sub-title p {
90-
margin: 0;
91-
}
92-
93-
.e-avatar-showcase.e-card .e-card-content {
94-
align-self: center;
95-
padding: 10px 11px 10px 0px;
96-
color: rgba(0, 0, 0, 0.75);
97-
overflow: visible;
98-
}

0 commit comments

Comments
 (0)