Skip to content

Commit 2f84ce5

Browse files
yannbfyannbf
authored
Merge pull request yannbf#69 from Sletheren/origin/feature/add-custom-lists
feat(list): add currencies listing + users listing
2 parents 3321e0a + 89b0f3c commit 2f84ce5

File tree

16 files changed

+326
-2
lines changed

16 files changed

+326
-2
lines changed

‎.all-contributorsrc

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,16 @@
114114
"contributions": [
115115
"code"
116116
]
117+
},
118+
{
119+
"login": "Sletheren",
120+
"name": "Abdelghafour Rakhma",
121+
"avatar_url": "https://avatars2.githubusercontent.com/u/12659402?v=4",
122+
"profile": "http://www.fahrenbyte.com",
123+
"contributions": [
124+
"code",
125+
"design"
126+
]
117127
}
118128
]
119129
}

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# Ionic Advanced Components [![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badge/)
2-
[![All Contributors](https://img.shields.io/badge/all_contributors-11-orange.svg?style=flat-square)](#contributors)
2+
[![All Contributors](https://img.shields.io/badge/all_contributors-12-orange.svg?style=flat-square)](#contributors)
33

44
_Currently this project is using the latest versions of all: Ionic and Angular 4_
55

@@ -69,7 +69,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
6969
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
7070
| [<img src="https://avatars1.githubusercontent.com/u/6360216?v=4" width="100px;"/><br /><sub><b>Damodar Lohani</b></sub>](http://www.dlohani.com.np)<br />[💻](https://github.com/yannbf/ionic3-components/commits?author=lohanidamodar "Code") [📢](#talk-lohanidamodar "Talks") [🎨](#design-lohanidamodar "Design") [📝](#blog-lohanidamodar "Blogposts") | [<img src="https://avatars0.githubusercontent.com/u/6452188?v=4" width="100px;"/><br /><sub><b>Cory McArthur</b></sub>](https://github.com/corysmc)<br />[💻](https://github.com/yannbf/ionic3-components/commits?author=corysmc "Code") [📢](#talk-corysmc "Talks") [🎨](#design-corysmc "Design") | [<img src="https://avatars1.githubusercontent.com/u/1894500?v=4" width="100px;"/><br /><sub><b>mike-carr</b></sub>](http://ServiciosGlobalesTecnologicos.com/)<br />[🔌](#plugin-miguelcarrascoq "Plugin/utility libraries") | [<img src="https://avatars3.githubusercontent.com/u/7361737?v=4" width="100px;"/><br /><sub><b>Fernando del olmo</b></sub>](https://fdom-website.firebaseapp.com/)<br />[💻](https://github.com/yannbf/ionic3-components/commits?author=Fdom92 "Code") | [<img src="https://avatars1.githubusercontent.com/u/13787877?v=4" width="100px;"/><br /><sub><b>medeirosrafael</b></sub>](https://github.com/medeirosrafael)<br />[🐛](https://github.com/yannbf/ionic3-components/issues?q=author%3Amedeirosrafael "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/12940555?v=4" width="100px;"/><br /><sub><b>Javier</b></sub>](https://github.com/javico2609)<br />[💻](https://github.com/yannbf/ionic3-components/commits?author=javico2609 "Code") [🎨](#design-javico2609 "Design") | [<img src="https://avatars0.githubusercontent.com/u/5886788?v=4" width="100px;"/><br /><sub><b>Mohd Mazlan Bin Mohd Nor</b></sub>](http://mazlan.my)<br />[💻](https://github.com/yannbf/ionic3-components/commits?author=mazlanmohdnor "Code") [🎨](#design-mazlanmohdnor "Design") |
7171
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
72-
| [<img src="https://avatars2.githubusercontent.com/u/15234844?v=4" width="100px;"/><br /><sub><b>Daniel Sogl</b></sub>](https://github.com/danielsogl)<br />[💻](https://github.com/yannbf/ionic3-components/commits?author=danielsogl "Code") [🚇](#infra-danielsogl "Infrastructure (Hosting, Build-Tools, etc)") | [<img src="https://avatars0.githubusercontent.com/u/16031907?v=4" width="100px;"/><br /><sub><b>Jerônimo do Nascimento</b></sub>](https://github.com/jeronimonascimento)<br />[💻](https://github.com/yannbf/ionic3-components/commits?author=jeronimonascimento "Code") | [<img src="https://avatars2.githubusercontent.com/u/19319404?v=4" width="100px;"/><br /><sub><b>Mateus Duraes</b></sub>](http://mateusduraes.github.io/)<br />[💻](https://github.com/yannbf/ionic3-components/commits?author=mateusduraes "Code") [🎨](#design-mateusduraes "Design") | [<img src="https://avatars1.githubusercontent.com/u/1672303?v=4" width="100px;"/><br /><sub><b>Nazır Doğan</b></sub>](https://github.com/nazrdogan)<br />[💻](https://github.com/yannbf/ionic3-components/commits?author=nazrdogan "Code") |
72+
| [<img src="https://avatars2.githubusercontent.com/u/15234844?v=4" width="100px;"/><br /><sub><b>Daniel Sogl</b></sub>](https://github.com/danielsogl)<br />[💻](https://github.com/yannbf/ionic3-components/commits?author=danielsogl "Code") [🚇](#infra-danielsogl "Infrastructure (Hosting, Build-Tools, etc)") | [<img src="https://avatars0.githubusercontent.com/u/16031907?v=4" width="100px;"/><br /><sub><b>Jerônimo do Nascimento</b></sub>](https://github.com/jeronimonascimento)<br />[💻](https://github.com/yannbf/ionic3-components/commits?author=jeronimonascimento "Code") | [<img src="https://avatars2.githubusercontent.com/u/19319404?v=4" width="100px;"/><br /><sub><b>Mateus Duraes</b></sub>](http://mateusduraes.github.io/)<br />[💻](https://github.com/yannbf/ionic3-components/commits?author=mateusduraes "Code") [🎨](#design-mateusduraes "Design") | [<img src="https://avatars1.githubusercontent.com/u/1672303?v=4" width="100px;"/><br /><sub><b>Nazır Doğan</b></sub>](https://github.com/nazrdogan)<br />[💻](https://github.com/yannbf/ionic3-components/commits?author=nazrdogan "Code") | [<img src="https://avatars2.githubusercontent.com/u/12659402?v=4" width="100px;"/><br /><sub><b>Abdelghafour Rakhma</b></sub>](http://www.fahrenbyte.com)<br />[💻](https://github.com/yannbf/ionic3-components/commits?author=Sletheren "Code") [🎨](#design-Sletheren "Design") |
7373
<!-- ALL-CONTRIBUTORS-LIST:END -->
7474

7575
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

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

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

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
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+
precision(n,m) {
56+
return parseFloat(n).toFixed(m);
57+
}
58+
59+
evolution(n) {
60+
return n > 0
61+
? '<span>' + parseFloat(n).toFixed(2) + '&nbsp;<i class="fa fa-caret-up"></i></span>'
62+
: '<span class="red">' + parseFloat(n).toFixed(2) + '&nbsp;<i class="fa fa-caret-down"></i></span>';
63+
}
64+
}

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

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

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

0 commit comments

Comments
 (0)