Skip to content

Commit 37f9e88

Browse files
khoadnguyenkhoadnguyen
authored
Merge branch 'dev' into 65-wizard-validation-erro-message
2 parents b284f4b + 59004dd commit 37f9e88

24 files changed

Lines changed: 915 additions & 316 deletions

‎package-lock.json‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
"zone.js": "0.8.26"
4848
},
4949
"devDependencies": {
50+
"@fortawesome/fontawesome-free": "^5.3.1",
5051
"@ionic/app-scripts": "^3.2.0",
5152
"@types/jest": "^23.3.3",
5253
"jest": "^23.6.0",

‎src/app/app.module.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { ErrorHandler, NgModule } from '@angular/core';
33
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
44
import { SplashScreen } from '@ionic-native/splash-screen';
55
import { StatusBar } from '@ionic-native/status-bar';
6+
import { HttpClientModule } from '@angular/common/http';
67

78
import { MyApp } from './app.component';
89
import { HomePage } from '../pages/home/home';
@@ -14,6 +15,11 @@ import { ProfilePage } from '../pages/profile/profile';
1415
import { TransitionPage } from '../pages/transition/transition';
1516
import { AssessmentPage } from '../pages/assessment/assessment';
1617
import { TimelinePage } from '../pages/timeline/timeline';
18+
import { TimelineComponent } from '../components/timeline/timeline';
19+
import { TimelineItemComponent } from '../components/timeline/timeline';
20+
import { TimelineTimeComponent } from '../components/timeline/timeline';
21+
22+
import { ChartsModule } from 'ng2-charts';
1723
import { UserProvider } from '../providers/user/user';
1824

1925
@NgModule({
@@ -27,10 +33,14 @@ import { UserProvider } from '../providers/user/user';
2733
ProfilePage,
2834
TransitionPage,
2935
AssessmentPage,
30-
TimelinePage
36+
TimelinePage,
37+
TimelineComponent,
38+
TimelineItemComponent,
39+
TimelineTimeComponent
3140
],
3241
imports: [
3342
BrowserModule,
43+
HttpClientModule,
3444
IonicModule.forRoot(MyApp)
3545
],
3646
bootstrap: [IonicApp],

‎src/components/components.module.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { NgModule } from '@angular/core';
2+
import { TimelineComponent } from './timeline/timeline';
3+
@NgModule({
4+
declarations: [TimelineComponent],
5+
imports: [],
6+
exports: [TimelineComponent]
7+
})
8+
export class ComponentsModule {}

‎src/components/timeline/timeline.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!-- Generated template for the TimelineComponent component -->
2+
<div class="timeline">
3+
4+
<ion-list>
5+
<ng-template #recursiveList let-list>
6+
<!-- <div class="cd-timeline__img cd-timeline__img--5"></div> -->
7+
<ion-list *ngFor="let item of list">
8+
9+
<h2 *ngIf="!item.checkmark" (click)="toggleItem(item)">{{item.title}} </h2>
10+
11+
<ion-item *ngIf="item.checkmark">
12+
<ion-label>{{item.title}}</ion-label>
13+
<ion-checkbox color="dark" checked="false"></ion-checkbox>
14+
</ion-item>
15+
16+
<ion-item *ngIf="item.itemExpand && item.children.length > 0 && !item.checkmark">
17+
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
18+
</ion-item>
19+
<!-- <ion-item *ngIf="item.checkmark">
20+
<ion-checkbox color="dark" checked="false"></ion-checkbox>
21+
</ion-item> -->
22+
</ion-list>
23+
</ng-template>
24+
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"></ng-container>
25+
</ion-list>
26+
27+
<!-- <ng-content></ng-content>
28+
29+
<timeline-item>
30+
<ion-icon class="" [name]="endIcon"></ion-icon>
31+
</timeline-item> -->
32+
33+
</div>

‎src/components/timeline/timeline.scss‎

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
timeline {
2+
3+
h2{
4+
padding-bottom: 15px;
5+
}
6+
7+
.label-ios{
8+
margin: auto !important;
9+
}
10+
11+
12+
}
13+
14+
.cd-timeline__img {
15+
position: absolute;
16+
top: 0;
17+
left: 0;
18+
width: 40px;
19+
height: 40px;
20+
border-radius: 50%;
21+
-webkit-box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
22+
box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
23+
}
24+
25+
.cd-timeline__img img {
26+
display: block;
27+
width: 24px;
28+
height: 24px;
29+
position: relative;
30+
left: 50%;
31+
top: 50%;
32+
margin-left: -12px;
33+
margin-top: -12px;
34+
}
35+
36+
.cd-timeline__img.cd-timeline__img--5 {
37+
background: #64c5b1;
38+
}
39+
40+
.timeline {
41+
margin: 30px 0 0 0;
42+
padding: 0;
43+
position: relative;
44+
45+
&:before {
46+
content: '';
47+
position: absolute;
48+
top: 0;
49+
bottom: 0;
50+
width: 10px;
51+
background: #afdcf8;
52+
left: 20%;
53+
margin-left: -10px;
54+
}
55+
timeline-item {
56+
position: relative;
57+
display: inline-block;
58+
59+
timeline-time {
60+
display: block;
61+
width: 20%;
62+
padding-right: 50px;
63+
position: absolute;
64+
span {
65+
display: block;
66+
text-align: right;
67+
&:last-child {
68+
font-size: 2.9em;
69+
color: #3594cb;
70+
}
71+
}
72+
}
73+
/* Right content */
74+
ion-card {
75+
margin-left: 25% !important;
76+
width: 75% !important;
77+
position: relative;
78+
}
79+
ion-icon {
80+
width: 40px;
81+
height: 40px;
82+
font-size: 1.4em;
83+
position: absolute;
84+
color: #fff;
85+
background: #46a4da;
86+
border-radius: 50%;
87+
box-shadow: 0 0 0 8px #afdcf8;
88+
text-align: center;
89+
left: 20%;
90+
top: 0;
91+
margin: 0 0 0 -25px;
92+
line-height: 40px;
93+
&:after {
94+
left: 46px;
95+
border: solid transparent;
96+
content: " ";
97+
height: 0;
98+
width: 0;
99+
position: absolute;
100+
pointer-events: none;
101+
border-left-color: #afdcf8;
102+
border-width: 10px;
103+
top: 10px;
104+
}
105+
}
106+
&:last-child{
107+
width: 100%;
108+
ion-icon{
109+
box-shadow: none;
110+
&:after{
111+
border-width: 0;
112+
}
113+
}
114+
}
115+
}
116+
117+
118+
.list-ios > .item-block:last-child, .list-ios > .item-wrapper:last-child .item-block{
119+
border-bottom: none;
120+
}
121+
122+
.list-ios > .item-block:first-child {
123+
border-top: none;
124+
}
125+
126+
.list-ios {
127+
margin: -1px 0 20px !important;
128+
}
129+
130+
131+
132+
&:before {
133+
left: 3% !important;
134+
}
135+
.list, .list-md{
136+
margin-left:3% !important;
137+
}
138+
139+
.item.item-md .checkbox-md {
140+
margin: -6px 14px 8px -35px !important;
141+
padding-left: 4%;
142+
padding-top: 2%;
143+
}
144+
145+
.checkbox-ios {
146+
// position: absolute !important;
147+
margin: -6px 14px 8px -35px !important;
148+
padding-left: 4%;
149+
padding-top: 2%;
150+
}
151+
152+
153+
@media screen and (max-width: map-get($grid-breakpoints,'lg')){
154+
.list-ios{
155+
margin-top: -1px;
156+
margin-right: 25px;
157+
margin-bottom: 32px;
158+
margin-left: 25px;
159+
}
160+
timeline-item{
161+
timeline-time{
162+
font-size: 0.7em;
163+
}
164+
}
165+
}
166+
@media screen and (max-width: map-get($grid-breakpoints,'md')){
167+
&:before{
168+
left: 30px;
169+
}
170+
timeline-item{
171+
ion-card{
172+
margin-left: 80px !important;
173+
}
174+
ion-icon{
175+
left: 30px;
176+
}
177+
timeline-time{
178+
font-size: 0.8em;
179+
width: 100%;
180+
left: 80px;
181+
position: relative;
182+
span{
183+
text-align: left;
184+
}
185+
186+
}
187+
}
188+
}
189+
@media screen and (max-width: map-get($grid-breakpoints, 'sm' )){
190+
&:before{
191+
display: none;
192+
}
193+
timeline-item{
194+
&:last-child{
195+
visibility: hidden;
196+
}
197+
ion-icon{
198+
position: relative;
199+
float: right;
200+
left: auto;
201+
margin: -55px 5px 0 0;
202+
&:after{
203+
border-left-color: transparent;
204+
border-top-color: #afdcf8;
205+
top: 46px;
206+
left: 10px;
207+
}
208+
}
209+
timeline-time{
210+
width: 100%;
211+
position: relative;
212+
padding: 0 0 20px 0;
213+
left: 20px;
214+
span{
215+
text-align: left;
216+
}
217+
}
218+
219+
ion-card{
220+
width: calc(100% - 20px) !important;
221+
margin-left: 10px !important;
222+
}
223+
}
224+
}
225+
}

0 commit comments

Comments
 (0)