Skip to content

Commit ac172d2

Browse files
khoadnguyenkhoadnguyen
authored
Merge pull request #102 from SoftStackFactory/dev
Dev
2 parents cc889e4 + 4174f23 commit ac172d2

26 files changed

Lines changed: 1431 additions & 427 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: 12 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,7 +15,13 @@ 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';
24+
import { HttpClientModule } from '@angular/common/http';
1825

1926
@NgModule({
2027
declarations: [
@@ -27,10 +34,14 @@ import { UserProvider } from '../providers/user/user';
2734
ProfilePage,
2835
TransitionPage,
2936
AssessmentPage,
30-
TimelinePage
37+
TimelinePage,
38+
TimelineComponent,
39+
TimelineItemComponent,
40+
TimelineTimeComponent
3141
],
3242
imports: [
3343
BrowserModule,
44+
HttpClientModule,
3445
IonicModule.forRoot(MyApp)
3546
],
3647
bootstrap: [IonicApp],

‎src/app/app.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,20 @@
11
// http://ionicframework.com/docs/theming/
22

3+
.branchRadio .alert-wrapper{
4+
// background-color: blue;
5+
width: 40vw;
6+
max-width: 500px;
7+
//height: 50vw;
8+
font-size: 20px;
9+
//font-size: 50px;
10+
}
11+
12+
@media screen and (min-width: 765) {
13+
.branchRadio .alert-wrapper{
14+
font-size: 50px;
15+
}
16+
}
17+
318

419
// App Global Sass
520
// --------------------------------------------------

‎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: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
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+
.label-md{
117+
margin: 13px 8px -15px 0;
118+
}
119+
120+
&:before {
121+
left: 3% !important;
122+
}
123+
.list, .list-md{
124+
margin-left:3% !important;
125+
}
126+
127+
.checkbox-ios {
128+
// position: absolute !important;
129+
margin: -6px 14px 8px -35px !important;
130+
}
131+
132+
133+
@media screen and (max-width: map-get($grid-breakpoints,'lg')){
134+
.list-ios{
135+
margin-top: -1px;
136+
margin-right: 25px;
137+
margin-bottom: 32px;
138+
margin-left: 25px;
139+
}
140+
timeline-item{
141+
timeline-time{
142+
font-size: 0.7em;
143+
}
144+
}
145+
}
146+
@media screen and (max-width: map-get($grid-breakpoints,'md')){
147+
&:before{
148+
left: 30px;
149+
}
150+
timeline-item{
151+
ion-card{
152+
margin-left: 80px !important;
153+
}
154+
ion-icon{
155+
left: 30px;
156+
}
157+
timeline-time{
158+
font-size: 0.8em;
159+
width: 100%;
160+
left: 80px;
161+
position: relative;
162+
span{
163+
text-align: left;
164+
}
165+
166+
}
167+
}
168+
}
169+
@media screen and (max-width: map-get($grid-breakpoints, 'sm' )){
170+
&:before{
171+
display: none;
172+
}
173+
timeline-item{
174+
&:last-child{
175+
visibility: hidden;
176+
}
177+
ion-icon{
178+
position: relative;
179+
float: right;
180+
left: auto;
181+
margin: -55px 5px 0 0;
182+
&:after{
183+
border-left-color: transparent;
184+
border-top-color: #afdcf8;
185+
top: 46px;
186+
left: 10px;
187+
}
188+
}
189+
timeline-time{
190+
width: 100%;
191+
position: relative;
192+
padding: 0 0 20px 0;
193+
left: 20px;
194+
span{
195+
text-align: left;
196+
}
197+
}
198+
199+
ion-card{
200+
width: calc(100% - 20px) !important;
201+
margin-left: 10px !important;
202+
}
203+
}
204+
}
205+
}

0 commit comments

Comments
 (0)