Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 9c9882a

Browse files
updated auth page, refactored code and fixed chat
1 parent 71204b0 commit 9c9882a

File tree

15 files changed

+182
-116
lines changed

15 files changed

+182
-116
lines changed

‎changelog.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# Changelog
22

3+
## [1.0.9] - 09/27/2021
4+
### Updated
5+
6+
- Updated auth page;
7+
- Refactored code, fixed chat;
8+
39
## [1.0.8] - 09/14/2021
410
### Updated
511

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-material-admin",
3-
"version": "1.0.8",
3+
"version": "1.0.9",
44
"scripts": {
55
"ng": "ng",
66
"start": "ng serve",
Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,51 @@
11
<div class="auth-page">
2-
<div class="auth-page__content-block">
3-
<div class="auth-page__content-wrapper">
4-
<mat-tab-group class="auth-page__group" mat-stretch-tabs>
2+
<div class="content-block">
3+
<div class="content-wrapper">
4+
<mat-tab-group class="group" mat-stretch-tabs>
55
<mat-tab label="Login">
6-
<h4 class="auth-page__group-title">Good Morning, User</h4>
7-
<div class="auth-page__google-button-wrapper">
8-
<button (click)="googleLogin()" mat-raised-button class="auth-page__google-button">
9-
<img class="auth-page__google-button-icon" src="./assets/auth/google.svg" alt="google">Sign in with Google
6+
<h4 class="group-title">Good Morning, User</h4>
7+
<div class="google-button-wrapper">
8+
<button (click)="googleLogin()" mat-raised-button class="google-button">
9+
<img class="google-button-icon" src="./assets/auth/google.svg" alt="google">Sign in with Google
1010
</button>
1111
</div>
1212

13-
<div class="auth-page__border-wrapper">
14-
<div class="auth-page__border-line"></div>
15-
<p class="auth-page__border-title">or</p>
16-
<div class="auth-page__border-line"></div>
13+
<div class="border-wrapper">
14+
<div class="border-line"></div>
15+
<p class="border-title">or</p>
16+
<div class="border-line"></div>
1717
</div>
1818

1919
<app-login-form (sendLoginForm)="sendLoginForm($event)"></app-login-form>
2020

2121
</mat-tab>
2222
<mat-tab label="New User">
23-
<h4 class="auth-page__group-title">Welcome!</h4>
24-
<p class="auth-page__group-sub-title">Create your account</p>
23+
<h4 class="group-title">Welcome!</h4>
24+
<p class="group-sub-title">Create your account</p>
2525

2626
<app-sign-form (sendSignForm)="sendSignForm($event)"></app-sign-form>
2727

28-
<div class="auth-page__border-wrapper">
29-
<div class="auth-page__border-line"></div>
30-
<p class="auth-page__border-title">or</p>
31-
<div class="auth-page__border-line"></div>
28+
<div class="border-wrapper">
29+
<div class="border-line"></div>
30+
<p class="border-title">or</p>
31+
<div class="border-line"></div>
3232
</div>
3333

34-
<div class="auth-page__google-button-wrapper">
35-
<button (click)="googleLogin()" mat-raised-button class="auth-page__google-button">
36-
<img class="auth-page__google-button-icon" src="./assets/auth/google.svg" alt="google">Sign in with Google
34+
<div class="google-button-wrapper">
35+
<button (click)="googleLogin()" mat-raised-button class="google-button">
36+
<img class="google-button-icon" src="./assets/auth/google.svg" alt="google">Sign in with Google
3737
</button>
3838
</div>
3939
</mat-tab>
4040
</mat-tab-group>
4141

42-
<p class="auth-page__footer-title">© 2014-{{todayDate | year}} <a href="https://flatlogic.com">Flatlogic</a>, LLC. All rights reserved.</p>
42+
<p class="footer-title">© 2014-{{todayDate | year}} <a href="https://flatlogic.com">Flatlogic</a>, LLC. All rights reserved.</p>
4343
</div>
4444
</div>
45-
<div class="auth-page__logo">
46-
<div class="auth-page__logo-wrapper">
47-
<img class="auth-page__logo-img" src="./assets/auth/logo.svg" alt="logo">
48-
<h6 class="auth-page__logo-title">Material Admin</h6>
45+
<div class="logo">
46+
<div class="logo-wrapper">
47+
<img class="logo-img" src="./assets/auth/logo.svg" alt="logo">
48+
<h6 class="logo-title">Material Admin</h6>
4949
</div>
5050
</div>
5151
</div>

‎src/app/modules/auth/containers/auth-page/auth-page.component.scss‎

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,16 @@
77
height: 100%;
88
display: flex;
99

10+
.mat-tab-label {
11+
font-size: $fs-medium;
12+
}
13+
1014
@media (max-width: $medium) {
1115
flex-direction: column;
1216
}
1317

14-
&__content-block {
15-
width: 37%;
18+
.content-block {
19+
width: 40%;
1620
height: 100%;
1721
background-color: $white;
1822
display: flex;
@@ -24,8 +28,8 @@
2428
}
2529
}
2630

27-
&__content-wrapper {
28-
width: 45%;
31+
.content-wrapper {
32+
width: 55%;
2933
height: 100%;
3034
padding: 16px;
3135
display: flex;
@@ -41,21 +45,21 @@
4145
}
4246
}
4347

44-
&__group {
48+
.group {
4549
margin-top: 28px;
4650
}
4751

48-
&__group-title {
49-
font-size: 32px;
52+
.group-title {
53+
font-size: 3rem;
5054
font-weight: $fw-normal;
5155
margin-top: 37px;
52-
letter-spacing: -0.7px;
5356
text-align: center;
54-
line-height: 37px;
57+
line-height: 3.125rem;
58+
letter-spacing: normal;
5559
color: $dark-grey;
5660
}
5761

58-
&__group-sub-title {
62+
.group-sub-title {
5963
font-size: $fs-large;
6064
font-weight: $fw-normal;
6165
margin-bottom: 30px;
@@ -65,7 +69,7 @@
6569
color: $dark-grey;
6670
}
6771

68-
&__google-button-wrapper {
72+
.google-button-wrapper {
6973
margin-top: 32px;
7074
margin-bottom: 10px;
7175
width: 100%;
@@ -74,40 +78,42 @@
7478
align-items: center;
7579
}
7680

77-
&__google-button {
81+
.google-button {
7882
width: 95%;
7983
padding: 0;
84+
font-size: .875rem;
8085
background-color: $white;
8186
box-shadow: 0 0 11px 0 $shadow-white, 0 0 0 -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;
8287
}
8388

84-
&__google-button-icon {
89+
.google-button-icon {
8590
width: 20px;
8691
margin-right: 16px;
8792
}
8893

89-
&__border-wrapper {
94+
.border-wrapper {
9095
align-items: center;
9196
display: flex;
9297
justify-content: center;
9398
margin: 32px 0;
9499
}
95100

96-
&__border-line {
101+
.border-line {
97102
height: 1px;
98103
width: 100%;
99104
background-color: $light-grey;
100105
opacity: 0.3;
101106
}
102107

103-
&__border-title {
104-
font-size: $fs-xs;
108+
.border-title {
109+
font-size: $fs-small;
110+
font-family: Roboto,Helvetica,Arial,sans-serif;
105111
padding: 0 16px;
106112
margin: 0;
107-
color: $dark-grey
113+
color: black;
108114
}
109115

110-
&__logo {
116+
.logo {
111117
width: 63%;
112118
height: 100%;
113119
background-color: $blue;
@@ -119,27 +125,27 @@
119125
}
120126
}
121127

122-
&__logo-wrapper {
128+
.logo-wrapper {
123129
width: 100%;
124130
display: flex;
125131
justify-content: center;
126132
flex-direction: column;
127133
align-items: center;
128134
}
129135

130-
&__logo-img {
136+
.logo-img {
131137
margin-bottom: 50px;
132138
}
133139

134-
&__logo-title {
140+
.logo-title {
135141
font-size: 62px;
136142
color: $white;
137143
font-weight: 500;
138144
letter-spacing: -1.5px;
139145
line-height: 62px;
140146
}
141147

142-
&__footer-title {
148+
.footer-title {
143149
color: $blue;
144150
font-size: 10px;
145151
opacity: 0.7;

‎src/app/modules/auth/containers/auth-page/auth-page.component.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component } from '@angular/core';
1+
import { Component,ViewEncapsulation } from '@angular/core';
22
import { ActivatedRoute, Router } from '@angular/router';
33

44
import { AuthService } from '../../services';
@@ -7,7 +7,8 @@ import { routes } from '../../../../consts';
77
@Component({
88
selector: 'app-auth-page',
99
templateUrl: './auth-page.component.html',
10-
styleUrls: ['./auth-page.component.scss']
10+
styleUrls: ['./auth-page.component.scss'],
11+
encapsulation: ViewEncapsulation.None
1112
})
1213
export class AuthPageComponent {
1314
public todayDate: Date = new Date();
@@ -17,7 +18,7 @@ export class AuthPageComponent {
1718
private route: ActivatedRoute,
1819
private router: Router) {
1920
if (this.authService.isAuthenticated()) {
20-
this.authService.receiveLogin();
21+
this.authService.logoutUser();
2122
}
2223

2324
this.route.queryParams.subscribe((params) => {

‎src/app/modules/dashboard/components/daily-line-chart/daily-line-chart.component.ts‎

Lines changed: 20 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -60,45 +60,37 @@ export class DailyLineChartComponent implements OnInit, OnChanges, AfterViewInit
6060

6161
public ngOnChanges(changes: SimpleChanges): void {
6262
if (changes.currentTheme && changes.currentTheme.currentValue && this.chartObj) {
63-
this.chartObj.updateOptions({
64-
colors: [
65-
this.currentTheme === 'blue'
66-
? colors.BLUE
67-
: this.currentTheme === 'green'
68-
? colors.GREEN
69-
: colors.PINK,
70-
this.currentMode === 'dark'
71-
? colors.DARK_BLUE
72-
: colors.LIGHT_BLUE,
73-
colors.YELLOW
74-
]
75-
})
63+
this.updateChartOptions();
7664
}
77-
7865
if (changes.currentMode && changes.currentMode.currentValue && this.chartObj) {
79-
this.chartObj.updateOptions({
80-
colors: [
81-
this.currentTheme === 'blue'
82-
? colors.BLUE
83-
: this.currentTheme === 'green'
84-
? colors.GREEN
85-
: colors.PINK,
86-
this.currentMode === 'dark'
87-
? colors.DARK_BLUE
88-
: colors.LIGHT_BLUE,
89-
colors.YELLOW
90-
]
91-
})
66+
this.updateChartOptions();
9267
}
9368
}
9469

9570
public ngAfterViewInit() {
9671
this.chartObj = new ApexCharts(
9772
this.chart.nativeElement,
9873
this.chartOptions
99-
)
74+
);
10075

10176
this.chartObj.render();
77+
this.updateChartOptions();
78+
}
79+
80+
private updateChartOptions(): void {
81+
this.chartObj.updateOptions({
82+
colors: [
83+
this.currentTheme === 'blue'
84+
? colors.BLUE
85+
: this.currentTheme === 'green'
86+
? colors.GREEN
87+
: colors.PINK,
88+
this.currentMode === 'dark'
89+
? colors.DARK_BLUE
90+
: colors.LIGHT_BLUE,
91+
colors.YELLOW
92+
]
93+
});
10294
}
10395

10496
public initChart(data: TimeData, labels: string[]): void {

‎src/app/modules/dashboard/components/revenue-chart/revenue-chart.component.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,10 @@
2929
&__content {
3030
display: flex;
3131
align-items: center;
32-
justify-content: space-between;
3332

3433
&-chart {
3534
height: 140px;
36-
width: 50%;
35+
width: 60%;
3736
max-width: 218px
3837
}
3938
}

‎src/app/modules/templates/ui-elements/components/badge-page/badge-page.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
<mat-card-title>
66
<p>Badge Example</p>
77
</mat-card-title>
8-
<mat-card-subtitle>
8+
<mat-card-subtitleclass="subtitle">
99
<p>Badge generates a small badge to the top-right of its child(ren)</p>
1010
</mat-card-subtitle>
1111

1212
<mat-card-content>
13-
<h1 class="text h1" matBadge="Primary" matBadgeOverlap="false" matBadgeColor="primary">Example heading</h1>
14-
<h2 class="text" matBadge="Accent" matBadgeOverlap="false" matBadgeColor="accent">Example heading</h2>
13+
<h1 class="text h1" matBadge="Primary" matBadgePosition="above after" matBadgeOverlap="false" matBadgeColor="primary">Example heading</h1>
14+
<h2 class="text" matBadge="Accent" matBadgePosition="after" matBadgeOverlap="false" matBadgeColor="accent">Example heading</h2>
1515
<h3 class="text" matBadge="Warn" matBadgeOverlap="false" matBadgeColor="warn">Example heading</h3>
1616
<h4 class="text" matBadge="Info" matBadgeOverlap="false" matBadgeColor="info">Example heading</h4>
1717
<h5 class="text" matBadge="Success" matBadgeOverlap="false" matBadgeColor="success">Example heading</h5>

‎src/app/modules/templates/ui-elements/components/badge-page/badge-page.component.scss‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,21 @@
1414
width: 50%;
1515
margin-right: 18px;
1616

17+
.subtitle {
18+
margin-bottom: 22px;
19+
}
20+
1721
@media (max-width: $small) {
1822
width: 100%;
1923
margin-right: 0;
2024
}
2125
}
2226

27+
.mat-badge-medium.mat-badge-above .mat-badge-content {
28+
margin-right: -21px;
29+
top: -20px;
30+
}
31+
2332
.second-subtitle {
2433
padding-top: 24px;
2534
}
@@ -55,7 +64,8 @@
5564
width: 100%;
5665

5766
& span.mat-badge-content {
58-
right: -22px;
67+
margin-right: -10px !important;
68+
top: -12px !important;
5969
padding: 0;
6070
width: 22px;
6171
height: 22px;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /