Skip to content

Commit 142b6b6

Browse files
SletherenSletheren
committed
Adding Currencies listing + Users listing
1 parent 3321e0a commit 142b6b6

File tree

14 files changed

+295
-0
lines changed

14 files changed

+295
-0
lines changed

‎src/assets/img/currencies/bch.png

8.58 KB
Loading

‎src/assets/img/currencies/btc.png

8.52 KB
Loading

‎src/assets/img/currencies/eth.png

9.63 KB
Loading

‎src/assets/img/currencies/ltc.png

6.35 KB
Loading

‎src/assets/img/currencies/xrp.png

7.59 KB
Loading

‎src/pages/list/crypto-list/crypto-list.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<ion-content class="page-background transparent-header">
2+
<ion-header>
3+
<ion-navbar>
4+
</ion-navbar>
5+
</ion-header>
6+
<div class="welcome-header">
7+
<div class="content">
8+
<div class="title">Cyrpto Currencies</div>
9+
<div class="subtitle">Find The latest info about Crypto currencies</div>
10+
</div>
11+
<button ion-fab color="dark" class="refresh"><ion-icon name="md-refresh"></ion-icon></button>
12+
</div>
13+
<div class="body" padding>
14+
<div class="currencies">
15+
<ion-row class="currency" *ngFor="let d of data">
16+
<ion-col class="image">
17+
<img src="{{'assets/img/currencies/'+d.symbol+'.png'}}" alt="">
18+
</ion-col>
19+
<ion-col col-4 class="text">
20+
<p class="rank">Rank {{d.rank}}</p>
21+
<p class="name">{{d.name}}</p>
22+
</ion-col>
23+
<ion-col col-4 class="text">
24+
<p class="usd">{{ precision(d.price_usd,1) }} $</p>
25+
<p class="evolution" [innerHtml]="evolution(d.percent_change_1h)"></p>
26+
</ion-col>
27+
<ion-col col-1>
28+
<span class="indicator"><ion-icon icon="md-arrow-dropright"></ion-icon></span>
29+
</ion-col>
30+
</ion-row>
31+
</div>
32+
</div>
33+
</ion-content>

‎src/pages/list/crypto-list/crypto-list.module.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { NgModule } from '@angular/core';
2+
import { IonicPageModule } from 'ionic-angular';
3+
import { CryptoListPage } from './crypto-list';
4+
5+
@NgModule({
6+
declarations: [
7+
CryptoListPage,
8+
],
9+
imports: [
10+
IonicPageModule.forChild(CryptoListPage)
11+
],
12+
})
13+
export class CryptoListPageModule {}

‎src/pages/list/crypto-list/crypto-list.scss

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
page-crypto-list {
2+
.page-background{
3+
background-color: #36455F;
4+
}
5+
p{
6+
margin:0;
7+
}
8+
.welcome-header{
9+
position: relative;
10+
background: linear-gradient(135deg, #8B7FE0, #F75F9D);
11+
width:100%;
12+
padding: 30px 0;
13+
margin-bottom: 20px;
14+
.refresh {
15+
position: absolute;
16+
right: 10px;
17+
background-color: #4c5b79;
18+
box-shadow: 0px 0px 5px #5b6a89;
19+
}
20+
.content {
21+
text-align: center;
22+
padding: 20px;
23+
color:white;
24+
img {
25+
width: 100px;
26+
margin-bottom: 10px;
27+
}
28+
.title {
29+
font-size:20px;
30+
font-weight: 700;
31+
text-transform: uppercase;
32+
margin-bottom: 10px;
33+
}
34+
.subtitle {
35+
font-size: 15px;
36+
font-weight: 400;
37+
text-align: center;
38+
}
39+
}
40+
}
41+
.body {
42+
.currencies {
43+
.currency {
44+
background: linear-gradient(45deg, #5e6d8c, #384662);
45+
padding: 10px;
46+
border-radius: 10px;
47+
margin: 10px auto;
48+
.image {
49+
text-align: left;
50+
img {
51+
width: 50px;
52+
margin: 0;
53+
display: block;
54+
}
55+
}
56+
.text {
57+
.name {
58+
color: #BCC6D4;
59+
font-size: 15px;
60+
font-weight: 700;
61+
}
62+
.rank {
63+
color: #8b9bbd;
64+
font-size: 15px;
65+
font-weight: 500;
66+
}
67+
.usd{
68+
color: #BCC6D4;
69+
font-size: 15px;
70+
font-weight: 700;
71+
}
72+
.evolution{
73+
color:#00CB78;
74+
.red{
75+
color: #F44447;
76+
}
77+
font-size: 16px;
78+
font-weight: 500;
79+
}
80+
}
81+
.indicator {
82+
position: absolute;
83+
top: 50%;
84+
margin-top: -7px;
85+
right: 0;
86+
color: rgba(236, 236, 236, 0.3);
87+
}
88+
}
89+
}
90+
}
91+
92+
}

‎src/pages/list/crypto-list/crypto-list.ts

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { Component } from '@angular/core';
2+
import { IonicPage, NavController, NavParams } from 'ionic-angular';
3+
4+
@IonicPage()
5+
@Component({
6+
selector: 'page-crypto-list',
7+
templateUrl: 'crypto-list.html',
8+
})
9+
export class CryptoListPage {
10+
data = [
11+
{
12+
"id": "bitcoin",
13+
"name": "Bitcoin",
14+
"symbol": "btc",
15+
"rank": "1",
16+
"price_usd": "13208.8",
17+
"percent_change_1h": "1.54"
18+
},
19+
{
20+
"id": "ethereum",
21+
"name": "Ethereum",
22+
"symbol": "eth",
23+
"rank": "2",
24+
"price_usd": "658.926",
25+
"percent_change_1h": "2.42"
26+
},
27+
{
28+
"id": "bitcoin-cash",
29+
"name": "Bitcoin Cash",
30+
"symbol": "bch",
31+
"rank": "3",
32+
"price_usd": "2758.51",
33+
"percent_change_1h": "2.65"
34+
},
35+
{
36+
"id": "ripple",
37+
"name": "Ripple",
38+
"symbol": "xrp",
39+
"rank": "4",
40+
"price_usd": "1.01963",
41+
"percent_change_1h": "0.98"
42+
},
43+
{
44+
"id": "litecoin",
45+
"name": "Litecoin",
46+
"symbol": "ltc",
47+
"rank": "5",
48+
"price_usd": "263.913",
49+
"percent_change_1h": "2.21"
50+
}
51+
];
52+
53+
constructor(public navCtrl: NavController, public navParams: NavParams) {
54+
}
55+
56+
precision(n,m){
57+
return parseFloat(n).toFixed(m);
58+
}
59+
60+
evolution(n){
61+
return n>0 ? '<span>'+parseFloat(n).toFixed(2)+'&nbsp;<i class="fa fa-caret-up"></i></span>' : '<span class="red">'+parseFloat(n).toFixed(2)+'&nbsp;<i class="fa fa-caret-down"></i></span>';
62+
}
63+
}

‎src/pages/list/list.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,14 @@ export class ListPage {
2424
{
2525
title: 'Delete Items',
2626
page: 'DeleteItemsPage'
27+
},
28+
{
29+
title: 'Users Listing',
30+
page: 'UsersPage'
31+
},
32+
{
33+
title: 'Crypto Currencies',
34+
page: 'CryptoListPage'
2735
}
2836
];
2937
}

‎src/pages/list/users/users.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<ion-header>
2+
<ion-navbar>
3+
<ion-title>Users</ion-title>
4+
</ion-navbar>
5+
</ion-header>
6+
<ion-content padding>
7+
<ion-list no-lines>
8+
<ion-item *ngFor="let user of users">
9+
<ion-avatar item-start>
10+
<img src="assets/img/misc/img-icon.png">
11+
</ion-avatar>
12+
<h2>John Doe</h2>
13+
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam sint consectetur, neque cum porro iste aperiam eveniet, corporis earum error similique. Cupiditate consequuntur autem doloribus nihil totam quibusdam aliquid omnis? </p>
14+
<div class="rating">
15+
<ion-icon icon="md-star"></ion-icon>
16+
<ion-icon icon="md-star"></ion-icon>
17+
<ion-icon icon="md-star"></ion-icon>
18+
<ion-icon icon="md-star"></ion-icon>
19+
<ion-icon icon="md-star"></ion-icon>
20+
</div>
21+
<button ion-button clear item-end>
22+
<span class="number-circle">5</span>
23+
</button>
24+
</ion-item>
25+
</ion-list>
26+
</ion-content>

‎src/pages/list/users/users.module.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { NgModule } from '@angular/core';
2+
import { IonicPageModule } from 'ionic-angular';
3+
import { UsersPage } from './users';
4+
5+
@NgModule({
6+
declarations: [
7+
UsersPage,
8+
],
9+
imports: [
10+
IonicPageModule.forChild(UsersPage)
11+
],
12+
})
13+
export class UsersPageModule {}

‎src/pages/list/users/users.scss

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
page-users {
2+
.item-md,.item-ios {
3+
padding-left:0px;
4+
ion-avatar img {
5+
width:55px;
6+
height:55px;
7+
}
8+
ion-avatar[item-start]{
9+
margin: 0px 30px 8px 0;
10+
}
11+
.number-circle{
12+
color:white;
13+
font-weight: 700;
14+
border-radius: 50%;
15+
background-color:red;
16+
width: 20px;height:20px;
17+
line-height: 20px;
18+
text-align: center;
19+
}
20+
}
21+
.rating {
22+
ion-icon {
23+
font-size: 15px;
24+
padding: 0px 1px !important;
25+
background: none;
26+
color:color($colors,primary);
27+
}
28+
}
29+
}

‎src/pages/list/users/users.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Component } from '@angular/core';
2+
import { IonicPage, NavController, NavParams } from 'ionic-angular';
3+
4+
5+
@IonicPage()
6+
@Component({
7+
selector: 'page-users',
8+
templateUrl: 'users.html',
9+
})
10+
export class UsersPage {
11+
users = new Array(10);
12+
constructor(
13+
public navCtrl: NavController,
14+
public navParams: NavParams ) {
15+
16+
}
17+
18+
}

0 commit comments

Comments
 (0)