fix(wallet-overview): fix typos and fine tunning

nano-wallet-company · Feb 26, 2018 · 81fe390 · 81fe390
1 parent 5fd5424
commit 81fe390
Show file tree

Hide file tree

Showing 14 changed files with 115 additions and 77 deletions.
diff --git a/app/components/account-card/template.hbs b/app/components/account-card/template.hbs
@@ -3,7 +3,7 @@
     {{#liquid-if hideHistory class="hide-qr"}}
       {{qr-code content=model.id}}
     {{/liquid-if}}
-    <p class="ballance">
+    <p class="balance">
       <sup>
         <img src="images/nano-icon.svg" alt="">
       </sup>{{format-amount model.balance}}

diff --git a/app/components/account-history-entry/template.hbs b/app/components/account-history-entry/template.hbs
@@ -1,5 +1,9 @@
 <div class="col-lg-10 col-sm-12 history-item send d-flex justify-content-around align-items-center">
-  {{fa-icon "paper-plane" ariaHidden=true}} {{model.type}}
+  {{#if (eq model.type 'send')}}
+    {{fa-icon "paper-plane" ariaHidden=true}}
+  {{else}}
+     {{fa-icon "envelope-open" ariaHidden=true}}
+  {{/if}}
   <p>
     <sup>
       <img src="images/nano-icon.svg" alt="">

diff --git a/app/components/account-history/template.hbs b/app/components/account-history/template.hbs
@@ -4,6 +4,6 @@
   {{/each}}
 {{else}}
   <div class="no-history">
-    <h1>No History found</h1>
+    <h1>{{t 'wallets.accounts.history.none'}}</h1>
   </div>
 {{/if}}
diff --git a/...components/ballance-overview/component.js → app/components/balance-overview/component.js b/...components/ballance-overview/component.js → app/components/balance-overview/component.js
diff --git a/...components/ballance-overview/template.hbs → app/components/balance-overview/template.hbs b/...components/ballance-overview/template.hbs → app/components/balance-overview/template.hbs
@@ -18,12 +18,12 @@
     <div class="row">
       <div class="col">
         <div class="text-center">
-          <h1 class="lead">{{t 'wallets.overview.balance' htmlSafe=true balance=(format-amount total)}}</h1>
+          <h1 class="balance">{{t 'wallets.overview.balance' htmlSafe=true balance=(format-amount total)}}</h1>
           <p class="pending">
-            BALLANCE PENDING
+            BALANCE PENDING
             <br>
             <span>
-              100.00
+              {{format-amount 100}}
             </span>
           </p>
         </div>

diff --git a/app/components/navigation-bar/template.hbs b/app/components/navigation-bar/template.hbs
@@ -1,9 +1,9 @@
 <nav class="navbar navbar-expand-lg navbar-dark">
   {{#link-to 'index' class="navbar-brand"}}
-  <picture>
-    <source type="image/svg+xml" srcset="images/brand-dark.svg">
-    <img height="20" src="images/brand-dark.png" alt="{{t 'product'}}">
-  </picture>
+    <picture>
+      <source type="image/svg+xml" srcset="images/brand-dark.svg">
+      <img height="20" src="images/brand-dark.png" alt="{{t 'product'}}">
+    </picture>
   {{/link-to}}
   <div class="ml-auto pr-3">
     <span class="navbar-text pb-0">

diff --git a/app/components/wallet-overview/component.js b/app/components/wallet-overview/component.js
@@ -15,6 +15,27 @@ export default Component.extend(PagedMixin, {
   totals: null,
   contentKey: 'accounts',
 
+  // didRender() {
+  //   this._super(...arguments);
+  //   // this.$('.slick-slider').slick('unslick');
+  //   this.$('.slick-list').remove();
+  //   this.$('.slick-slider').slick('unslick').slick(this.get('settings'));
+  // },
+
+  @computed()
+  get settings() {
+    return {
+      dots: true,
+      slidesToShow: (this.get('accounts.length') <= 3) ? this.get('accounts.length') : 4,
+      slidesToScroll: 1,
+      infinite: false,
+      arrows: true,
+      edgeFriction: true,
+      centerPadding: '10px',
+      responsive: this.get('breakpoints'),
+    };
+  },
+
   @computed()
   get breakpoints() {
     return [

diff --git a/app/components/wallet-overview/template.hbs b/app/components/wallet-overview/template.hbs
@@ -6,8 +6,8 @@
           dots=true
           slidesToShow=(if (lte accounts.length 3) accounts.length 4)
           slidesToScroll=1
+          infinite=false
           arrows=true
-          centerMode=true
           edgeFriction=true
           centerPadding='10px'
           responsive=breakpoints}}

diff --git a/app/styles/account-card.scss b/app/styles/account-card.scss
@@ -4,62 +4,70 @@
   height: 400px;
   justify-content: center;
 
-  .account-card {
-    align-items: center;
-    background-color: #fff;
-    border-radius: 10px;
-    display: flex;
-    flex-direction: column;
-    height: 350px;
-    margin: 0 auto;
-    padding: 30px 20px;
-    transition: 1s;
-    width: 280px;
-
-    sup > img {
-      display: inline-block;
+  a {
+    &:focus,
+    &:active {
+      outline: none;
     }
-
-    .qr-code {
-      height: 157px;
-      margin-bottom: 20px;
-      width: 157px;
-    }
-
-    .ballance {
-      color: $dark-purple;
-      font-size: 20px;
-      line-height: 1;
-      text-align: center;
-    }
-
-    .ballance span {
-      font-size: 13px;
-    }
-
-    .ballance sub {
-      color: $green;
-      font-size: 14px;
-    }
-
-    .account-id {
-      background-color: $dark-purple;
-      color: $white;
-      display: block;
-      font-size: 12px;
-      height: 60px;
-      margin: 0;
-      padding: 10px;
-      overflow-wrap: break-word;
-      width: 100%;
-    }
-
-    .account-id span:first-child {
-      color: $light-blue;
-    }
-
-    .account-id span:last-child {
-      color: $orange;
+
+    .account-card {
+      align-items: center;
+      background-color: #fff;
+      border-radius: 10px;
+      display: flex;
+      flex-direction: column;
+      height: 350px;
+      margin: 0 auto;
+      padding: 30px 20px;
+      transition: 1s;
+      width: 280px;
+
+      sup > img {
+        display: inline-block;
+      }
+
+      .qr-code {
+        height: 157px;
+        margin-bottom: 20px;
+        width: 157px;
+      }
+
+      .balance {
+        color: $dark-purple;
+        font-size: 20px;
+        height: 50px;
+        line-height: 1;
+        text-align: center;
+      }
+
+      .balance span {
+        font-size: 13px;
+      }
+
+      .balance sub {
+        color: $green;
+        font-size: 14px;
+      }
+
+      .account-id {
+        background-color: $dark-purple;
+        color: $white;
+        display: block;
+        font-size: 12px;
+        height: 60px;
+        margin: 0;
+        padding: 10px;
+        overflow-wrap: break-word;
+        width: 100%;
+      }
+
+      .account-id span:first-child {
+        color: $light-blue;
+      }
+
+      .account-id span:last-child {
+        color: $orange;
+      }
     }
   }
 
@@ -87,6 +95,7 @@
 .slick-next {
   height: 50px;
   width: 50px;
+  z-index: 9;
 }
 
 .slick-prev:before, 

diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -8,7 +8,7 @@
 
 @import "utilities";
 
-@import "ballance-overview";
+@import "balance-overview";
 
 @import "navigation-bar";
 

diff --git a/app/styles/ballance-overview.scss → app/styles/balance-overview.scss b/app/styles/ballance-overview.scss → app/styles/balance-overview.scss
@@ -14,10 +14,11 @@
   text-decoration: underline;
 }
 
-.lead {
+.balance {
   border: 0;
   color: $white;
   font-size: 90px;
+  font-weight: 300;
   line-height: 1;
   margin: 0;
   padding: 0;
@@ -28,14 +29,16 @@
   color: $white;
   font-size: 16px;
   letter-spacing: 2px;
-  margin: 20px 0 0;
-  text-align:  center;
+  line-height: 2;
+  margin: 10px 0 0;
+  text-align: center;
   text-transform:  uppercase;
 }
 
 .pending > span {
   color: $green;
   font-size: 30px;
   letter-spacing: 1.33px;
+  line-height: 1.3;
   margin: 0;
 }
diff --git a/app/wallets/overview/accounts/history/template.hbs b/app/wallets/overview/accounts/history/template.hbs
@@ -6,7 +6,7 @@
           <a href="#" class="arrow" {{action 'toggleHistory'}}>
             {{fa-icon "chevron-down"}}
           </a>
-          {{else}}
+        {{else}}
           <a href="#" class="arrow" {{action 'toggleHistory'}}>
             {{fa-icon "chevron-up"}}
           </a>

diff --git a/app/wallets/overview/template.hbs b/app/wallets/overview/template.hbs
@@ -1,12 +1,13 @@
 {{#liquid-if hideHistory class="balance"}}
-  {{ballance-overview}}
+  {{balance-overview}}
 {{/liquid-if}}
 
 {{#liquid-if hideHistory class="balance"}}
   <section>
     <div class="container-fluid">
       <div class="row">
         <hr>
+        {{accounts}}
       </div>
     </div>
   </section>

diff --git a/...nents/ballance-overview/component-test.js → ...onents/balance-overview/component-test.js b/...nents/ballance-overview/component-test.js → ...onents/balance-overview/component-test.js
@@ -3,8 +3,8 @@ import { describe, it } from 'mocha';
 import { setupComponentTest } from 'ember-mocha';
 import hbs from 'htmlbars-inline-precompile';
 
-describe('Integration | Component | ballance-overview', () => {
-  setupComponentTest('ballance-overview', {
+describe('Integration | Component | balance-overview', () => {
+  setupComponentTest('balance-overview', {
     integration: true,
   });
 
@@ -13,12 +13,12 @@ describe('Integration | Component | ballance-overview', () => {
     // Handle any actions with this.on('myAction', function(val) { ... });
     // Template block usage:
     // this.render(hbs`
-    //   {{#ballance-overview}}
+    //   {{#balance-overview}}
     //     template content
-    //   {{/ballance-overview}}
+    //   {{/balance-overview}}
     // `);
 
-    this.render(hbs`{{ballance-overview}}`);
+    this.render(hbs`{{balance-overview}}`);
     expect(this.$()).to.have.length(1);
   });
 });