refactor(list): enhance code style

yannbf · yannbf · commit 5e8b774f2117 · 2017-12-26T16:39:57.000-03:00
diff --git a/src/pages/list/crypto-list/crypto-list.html b/src/pages/list/crypto-list/crypto-list.html
@@ -5,7 +5,7 @@
   </ion-header>
   <div class="welcome-header">
     <div class="content">
-      <div class="title">Cyrpto Currencies</div>
+      <div class="title">Crypto Currencies</div>
       <div class="subtitle">Find The latest info about Crypto currencies</div>
     </div>
     <button ion-fab color="dark" class="refresh"><ion-icon name="md-refresh"></ion-icon></button>
diff --git a/src/pages/list/crypto-list/crypto-list.scss b/src/pages/list/crypto-list/crypto-list.scss
@@ -1,83 +1,99 @@
 page-crypto-list {
   .page-background{
-    background-color: #36455F;
+    background-color: rgb(89, 138, 223);
   }
+
   p{
     margin:0;
   }
+
   .welcome-header{
     position: relative;
     background: linear-gradient(135deg, #8B7FE0, #F75F9D);
     width:100%;
     padding: 30px 0;
     margin-bottom: 20px;
+
     .refresh {
       position: absolute;
       right: 10px;
       background-color: #4c5b79;
       box-shadow: 0px 0px 5px #5b6a89;
     }
+
     .content {
       text-align: center;
       padding: 20px;
       color:white;
+
       img {
         width: 100px;
         margin-bottom: 10px;
       }
+
       .title {
         font-size:20px;
         font-weight: 700;
         text-transform: uppercase;
         margin-bottom: 10px;
       }
+
       .subtitle {
         font-size: 15px;
         font-weight: 400;
         text-align: center;
       }
     }
   }
+
   .body {
     .currencies {
       .currency {
         background: linear-gradient(45deg, #5e6d8c, #384662);
         padding: 10px;
         border-radius: 10px;
         margin: 10px auto;
+
         .image {
           text-align: left;
+
           img {
             width: 50px;
             margin: 0;
             display: block;
           }
         }
+
         .text {
           .name {
             color: #BCC6D4;
             font-size: 15px;
             font-weight: 700;
           }
+
           .rank {
             color: #8b9bbd;
             font-size: 15px;
             font-weight: 500;
           }
+
           .usd{
             color: #BCC6D4;
             font-size: 15px;
             font-weight: 700;
           }
+
           .evolution{
             color:#00CB78;
+
             .red{
               color: #F44447;
             }
             font-size: 16px;
             font-weight: 500;
           }
         }
+
         .indicator {
           position: absolute;
           top: 50%;
@@ -88,5 +104,4 @@ page-crypto-list {
       }
     }
   }
-
 }
diff --git a/src/pages/list/crypto-list/crypto-list.ts b/src/pages/list/crypto-list/crypto-list.ts
@@ -9,55 +9,56 @@ import { IonicPage, NavController, NavParams } from 'ionic-angular';
 export class CryptoListPage {
   data = [
     {
-      "id": "bitcoin",
-      "name": "Bitcoin",
-      "symbol": "btc",
-      "rank": "1",
-      "price_usd": "13208.8",
-      "percent_change_1h": "1.54"
+      id: 'bitcoin',
+      name: 'Bitcoin',
+      symbol: 'btc',
+      rank: '1',
+      price_usd: '13208.8',
+      percent_change_1h: '1.54'
     },
     {
-      "id": "ethereum",
-      "name": "Ethereum",
-      "symbol": "eth",
-      "rank": "2",
-      "price_usd": "658.926",
-      "percent_change_1h": "2.42"
+      id: 'ethereum',
+      name: 'Ethereum',
+      symbol: 'eth',
+      rank: '2',
+      price_usd: '658.926',
+      percent_change_1h: '2.42'
     },
     {
-      "id": "bitcoin-cash",
-      "name": "Bitcoin Cash",
-      "symbol": "bch",
-      "rank": "3",
-      "price_usd": "2758.51",
-      "percent_change_1h": "2.65"
+      id: 'bitcoin-cash',
+      name: 'Bitcoin Cash',
+      symbol: 'bch',
+      rank: '3',
+      price_usd: '2758.51',
+      percent_change_1h: '2.65'
     },
     {
-      "id": "ripple",
-      "name": "Ripple",
-      "symbol": "xrp",
-      "rank": "4",
-      "price_usd": "1.01963",
-      "percent_change_1h": "0.98"
+      id: 'ripple',
+      name: 'Ripple',
+      symbol: 'xrp',
+      rank: '4',
+      price_usd: '1.01963',
+      percent_change_1h: '0.98'
     },
     {
-      "id": "litecoin",
-      "name": "Litecoin",
-      "symbol": "ltc",
-      "rank": "5",
-      "price_usd": "263.913",
-      "percent_change_1h": "2.21"
+      id: 'litecoin',
+      name: 'Litecoin',
+      symbol: 'ltc',
+      rank: '5',
+      price_usd: '263.913',
+      percent_change_1h: '2.21'
     }
   ];
 
-  constructor(public navCtrl: NavController, public navParams: NavParams) {
-  }
+  constructor(public navCtrl: NavController, public navParams: NavParams) {}
 
-  precision(n,m){
+  precision(n,m) {
     return parseFloat(n).toFixed(m);
   }
 
-  evolution(n){
-    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>';
+  evolution(n) {
+    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>';
   }
 }
diff --git a/src/pages/list/users/users.html b/src/pages/list/users/users.html
@@ -7,7 +7,7 @@
   <ion-list no-lines>
     <ion-item *ngFor="let user of users">
       <ion-avatar item-start>
-        <img src="assets/img/misc/img-icon.png">
+        <img src="assets/img/avatar/ian-avatar.png">
       </ion-avatar>
       <h2>John Doe</h2>
       <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>
diff --git a/src/pages/list/users/users.scss b/src/pages/list/users/users.scss
@@ -1,13 +1,16 @@
 page-users {
     .item-md,.item-ios {
         padding-left:0px;
+
         ion-avatar img {
             width:55px;
             height:55px;
         }
+
         ion-avatar[item-start]{
             margin: 0px 30px 8px 0;
         }
+
         .number-circle{
             color:white;
             font-weight: 700;
@@ -18,6 +21,7 @@ page-users {
             text-align: center;
         }
     }
+
     .rating {
       ion-icon {
           font-size: 15px;
diff --git a/src/pages/list/users/users.ts b/src/pages/list/users/users.ts
@@ -1,18 +1,17 @@
 import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
 
-
 @IonicPage()
 @Component({
   selector: 'page-users',
   templateUrl: 'users.html',
 })
 export class UsersPage {
   users = new Array(10);
+
   constructor(
     public navCtrl: NavController,
-    public navParams: NavParams ) {
-
+    public navParams: NavParams) {
   }
 
 }

Original file line number	Diff line number	Diff line change
`@@ -1,13 +1,16 @@`
`1`	`1`	`page-users {`
`2`	`2`	`.item-md,.item-ios {`
`3`	`3`	`padding-left:0px;`
	`4`	`+`
`4`	`5`	`ion-avatar img {`
`5`	`6`	`width:55px;`
`6`	`7`	`height:55px;`
`7`	`8`	`}`
	`9`	`+`
`8`	`10`	`ion-avatar[item-start]{`
`9`	`11`	`margin: 0px 30px 8px 0;`
`10`	`12`	`}`
	`13`	`+`
`11`	`14`	`.number-circle{`
`12`	`15`	`color:white;`
`13`	`16`	`font-weight: 700;`
`@@ -18,6 +21,7 @@ page-users {`
`18`	`21`	`text-align: center;`
`19`	`22`	`}`
`20`	`23`	`}`
	`24`	`+`
`21`	`25`	`.rating {`
`22`	`26`	`ion-icon {`
`23`	`27`	`font-size: 15px;`