fix(account-history): adjust history styling to mirror design

nano-wallet-company · Mar 3, 2018 · 8426a37 · 8426a37
1 parent d049f90
commit 8426a37
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 24 deletions.
diff --git a/app/components/account-carousel/component.js b/app/components/account-carousel/component.js
@@ -43,10 +43,12 @@ export default Component.extend({
         initialSlide,
         adaptiveHeight: true,
         centerPadding: '10px',
+        slidesToShow: 4,
+        slidesToScroll: 4,
         dots: true,
         infinite: false,
-        mobileFirst: true,
         speed: 250,
+        arrows: true,
       });
     }
 
@@ -81,28 +83,33 @@ export default Component.extend({
   get breakpoints() {
     return [
       {
-        breakpoint: 1200,
+        breakpoint: 1500,
         settings: {
-          slidesToShow: 4,
+          slidesToShow: 3,
+          slidesToScroll: 3,
         },
       },
       {
-        breakpoint: 992,
+        breakpoint: 1200,
         settings: {
-          slidesToShow: 3,
+          slidesToShow: 2,
+          slidesToScroll: 2,
         },
       },
       {
-        breakpoint: 768,
+        breakpoint: 780,
         settings: {
-          slidesToShow: 2,
+          slidesToShow: 1,
+          slidesToScroll: 1,
         },
       },
       {
-        breakpoint: 576,
+        breakpoint: 430,
         settings: {
           slidesToShow: 1,
+          slidesToScroll: 1,
           arrows: false,
+          draggable: true,
         },
       },
     ];

diff --git a/app/components/account-history-entry/component.js b/app/components/account-history-entry/component.js
@@ -1,4 +1,5 @@
 import Component from '@ember/component';
 
 export default Component.extend({
+  classNames: ['row', 'justify-content-center'],
 });
diff --git a/app/components/account-history-entry/template.hbs b/app/components/account-history-entry/template.hbs
@@ -1,15 +1,15 @@
-<div class="col-lg-10 col-sm-12 history-item send d-flex justify-content-around align-items-center">
+<div class="col-lg-10 col-11 history-item send d-flex justify-content-around align-items-center">
   {{#if (eq model.type 'send')}}
-    {{fa-icon "paper-plane" ariaHidden=true}}
+    {{fa-icon "paper-plane" ariaHidden=true class="send"}}
   {{else}}
-     {{fa-icon "envelope-open" ariaHidden=true}}
+     {{fa-icon "envelope-open" ariaHidden=true class="receive"}}
   {{/if}}
   <p>
     <sup>
       <img src="images/nano-icon.svg" alt="">
-    </sup>{{format-ammount model.amount}}
+    </sup>{{format-amount model.amount precision=2}}
   </p>
-  <p>
+  <p class="text-truncate">
     {{model.account}} {{!--
     <span>xrb_17oqj</span>4rpads4o6ud448yymzk9jot8yzmzyeuteq3bj38cwjpt4rrgxhfx
     <span>fr1</span> --}}

diff --git a/app/components/account-history/template.hbs b/app/components/account-history/template.hbs
@@ -1,9 +1,11 @@
-{{#if model}}
-  {{#each model as |item|}}
+{{#if history}}
+  {{#each history as |item|}}
     {{account-history-entry model=item}}
   {{/each}}
 {{else}}
-  <div class="no-history d-flex justify-content-center align-items-center col-xs-12 col-md-8">
-    <h1>{{t 'wallets.accounts.history.none'}}</h1>
+  <div class="d-flex justify-content-center h-100">
+    <div class="no-history d-flex justify-content-center align-items-center col-xs-12 col-md-8">
+      <h1>{{t 'wallets.accounts.history.none'}}</h1>
+    </div>
   </div>
 {{/if}}
diff --git a/app/styles/history.scss b/app/styles/history.scss
@@ -5,9 +5,6 @@
   overflow: scroll;
 
   > div {
-    align-items: center;
-    display: flex;
-    justify-content: center;
     width: 100%;
   }
 }
@@ -22,11 +19,11 @@
     margin: 0;
   }
 
-  &.send  i {
+  .send {
     color: #538DCA;
   }
 
-  &.receive i {
+  .receive {
     color: #EDA63F;
   }
 

diff --git a/app/wallets/overview/accounts/history/template.hbs b/app/wallets/overview/accounts/history/template.hbs
@@ -18,8 +18,8 @@
 {{#liquid-if (not hideHistory) class="hide-history"}}
   <section>
     <div class="container-fluid">
-      <div class="row history-item-list justify-content-md-center">
-        {{account-history model=history}}
+      <div class="row history-item-list">
+        {{account-history history=model.history}}
       </div>
     </div>
   </section>