Style reimbursement list items

app/components/contribution-list/template.hbs

@@ -33,7 +33,7 @@
   {{#each this.contributionsFiltered as |contribution|}}
     <li role="button" data-contribution-id={{contribution.id}}
         {{action "openContributionDetails" contribution}}
-        class="{{contribution-status contribution}}{{if (eq contribution.id @selectedContributionId) " selected"}}">
+        class="{{item-status contribution}}{{if (eq contribution.id @selectedContributionId) " selected"}}">
       <p class="meta">
         <span class="recipient"><UserAvatar @contributor={{contribution.contributor}} /></span>
         <span class="category {{contribution.kind}}">({{contribution.kind}})</span>

app/components/reimbursement-list/template.hbs

@@ -1,14 +1,24 @@
-<ul class="item-list">
+<ul class="item-list reimbursement-list {{if @loading 'loading'}}">
   {{#each this.itemsSorted as |reimbursement|}}
-    <li>
+    <li data-reimbursement-id={{reimbursement.id}}
-      {{reimbursement.id}}<br>
+        class="{{item-status reimbursement}}">
-      {{sats-to-btc reimbursement.amount}} WBTC<br>
+      <p class="meta">
-      vetoed: {{reimbursement.vetoed}}<br>
+        <span class="recipient"><UserAvatar @contributor={{reimbursement.contributor}} /></span>
-      pay out to: {{reimbursement.contributor.name}}<br>
+        <span class="title">Expenses covered by {{reimbursement.contributor.name}}</span>
-
+      </p>
+      <p class="token-amount">
+        <span class="amount">
+          <!-- <img src="/img/bitcoin.svg" class="currency&#45;logo"> -->
+          {{sats-to-btc reimbursement.amount}}</span>&#8239;<span class="symbol">WBTC</span>
+      </p>
+      <table>
         {{#each reimbursement.expenses as |expense|}}
-        {{expense.date}}: {{expense.title}} - {{fmt-fiat-currency expense.amount expense.currency}}<br>
+          <tr>
+            <td class="description">{{expense.title}} &ndash; {{expense.description}}</td>
+            <td class="amount">{{fmt-fiat-currency expense.amount expense.currency}}</td>
+          </tr>
         {{/each}}
+      </table>
     </li>
   {{/each}}
 </ul>

app/helpers/contribution-status.js

@@ -1,56 +0,0 @@
-import Helper from '@ember/component/helper';
-import { inject as service } from '@ember/service';
-import { alias } from '@ember/object/computed';
-import { once } from '@ember/runloop';
-
-export default Helper.extend({
-
-  kredits: service(),
-  currentBlock: alias('kredits.currentBlock'),
-
-  compute([contribution]) {
-    this.setupRecompute(contribution);
-
-    let status = [];
-
-    if (contribution.vetoed) {
-      status.push('vetoed');
-    } else if (contribution.confirmedAt > this.currentBlock) {
-      status.push('unconfirmed');
-    } else {
-      status.push('confirmed');
-    }
-
-    if (contribution.hasPendingChanges) {
-      status.push('pending');
-    }
-
-    return status.join(' ');
-  },
-
-  destroy () {
-    if (this.teardown) this.teardown();
-    this._super(...arguments);
-  },
-
-  setupRecompute (contribution) {
-    if (this.teardown) this.teardown();
-
-    contribution.addObserver('vetoed' , this, this.triggerRecompute);
-    contribution.addObserver('confirmedAt' , this, this.triggerRecompute);
-    contribution.addObserver('currentBlock' , this, this.triggerRecompute);
-    contribution.addObserver('hasPendingChanges' , this, this.triggerRecompute);
-
-    this.teardown = () => {
-      contribution.removeObserver('vetoed', this, this.triggerRecompute);
-      contribution.removeObserver('confirmedAt', this, this.triggerRecompute);
-      contribution.removeObserver('currentBlock', this, this.triggerRecompute);
-      contribution.removeObserver('hasPendingChanges', this, this.triggerRecompute);
-    };
-  },
-
-  triggerRecompute () {
-    once(this, this.recompute);
-  }
-
-});

app/helpers/item-status.js

@@ -0,0 +1,56 @@
+import Helper from '@ember/component/helper';
+import { inject as service } from '@ember/service';
+import { alias } from '@ember/object/computed';
+import { once } from '@ember/runloop';
+
+export default Helper.extend({
+
+  kredits: service(),
+  currentBlock: alias('kredits.currentBlock'),
+
+  compute([item]) {
+    this.setupRecompute(item);
+
+    let status = [];
+
+    if (item.vetoed) {
+      status.push('vetoed');
+    } else if (item.confirmedAt > this.currentBlock) {
+      status.push('unconfirmed');
+    } else {
+      status.push('confirmed');
+    }
+
+    if (item.hasPendingChanges) {
+      status.push('pending');
+    }
+
+    return status.join(' ');
+  },
+
+  destroy () {
+    if (this.teardown) this.teardown();
+    this._super(...arguments);
+  },
+
+  setupRecompute (item) {
+    if (this.teardown) this.teardown();
+
+    item.addObserver('vetoed' , this, this.triggerRecompute);
+    item.addObserver('confirmedAt' , this, this.triggerRecompute);
+    item.addObserver('currentBlock' , this, this.triggerRecompute);
+    item.addObserver('hasPendingChanges' , this, this.triggerRecompute);
+
+    this.teardown = () => {
+      item.removeObserver('vetoed', this, this.triggerRecompute);
+      item.removeObserver('confirmedAt', this, this.triggerRecompute);
+      item.removeObserver('currentBlock', this, this.triggerRecompute);
+      item.removeObserver('hasPendingChanges', this, this.triggerRecompute);
+    };
+  },
+
+  triggerRecompute () {
+    once(this, this.recompute);
+  }
+
+});

app/helpers/sats-to-btc.js

@@ -1,5 +1,5 @@
 import { helper } from '@ember/component/helper';
 
-export default helper(function satsToBtc(params/*, hash*/) {
+export default helper(function satsToBtc(amount/*, hash*/) {
-  return params;
+  return amount / 100000000;
 });

app/styles/_item-list.scss

@@ -2,9 +2,10 @@ ul.item-list {
   list-style: none;
 
   li {
+    padding: 0.8rem 1.2rem;
+    font-size: 1.2rem;
     background-color: $item-background-color;
     border-bottom: 1px solid $item-border-color;
-    font-size: 1.2rem;
 
     &:first-of-type {
       border-top: 1px solid $item-border-color;

app/styles/app.scss

@@ -91,12 +91,13 @@ section {
 @import "sugar";
 @import "item-list";
 
-@import "components/contribution-list";
 @import "components/contribution-details";
+@import "components/contribution-list";
 @import "components/contributor-list";
 @import "components/contributor-profile";
 @import "components/external-account-link";
 @import "components/loading-spinner";
+@import "components/reimbursement-list";
 @import "components/topbar";
 @import "components/topbar-account-panel";
 @import "components/user-avatar";

app/styles/components/_contribution-list.scss

@@ -24,13 +24,11 @@ main section {
 ul.contribution-list {
   clear: both;
   width: 100%;
-  list-style: none;
 
   li {
     display: grid;
     grid-template-columns: auto 5rem 5rem;
     grid-row-gap: 0.5rem;
-    padding: 0.8rem 1.2rem;
     cursor: pointer;
 
     &.confirmed {

app/styles/components/_reimbursement-list.scss

@@ -0,0 +1,52 @@
+ul.reimbursement-list {
+  width: 100%;
+
+  li {
+    display: grid;
+    grid-template-columns: auto auto;
+    grid-row-gap: 0.5rem;
+    padding-top: 1.6rem;
+
+    .token-amount {
+      text-align: right;
+
+      img {
+        height: 1em;
+        vertical-align: middle;
+        margin-top: -2px;
+      }
+
+      .amount {
+        font-weight: 500;
+      }
+
+      .symbol {
+        font-size: 0.8rem;
+        padding-left: 0.2rem;
+      }
+    }
+
+    table {
+      grid-column-start: span 2;
+      width: 100%;
+      margin-top: 0.8rem;
+      border-collapse: collapse;
+
+      tr {
+        border-top: 1px solid $item-border-color;
+      }
+
+      td {
+        padding: 0.8rem 0;
+
+        &.amount {
+          text-align: right;
+        }
+      }
+
+      @include media-max(small) {
+        td.date { display: none; }
+      }
+    }
+  }
+}

app/templates/dashboard/contributions/show.hbs

@@ -19,7 +19,7 @@
     <h3>{{this.model.description}}</h3>
     <p>
       Kind: {{this.model.kind}}
-      <br>Status: {{contribution-status this.model}}
+      <br>Status: {{item-status this.model}}
     </p>
     {{#if this.model.url}}
       <p>

public/img/bitcoin.svg

@@ -0,0 +1,7 @@
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="64" width="64" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+<g transform="translate(0.00630876,-0.00301984)">
+<path fill="#f7931a" d="m63.033,39.744c-4.274,17.143-21.637,27.576-38.782,23.301-17.138-4.274-27.571-21.638-23.295-38.78,4.272-17.145,21.635-27.579,38.775-23.305,17.144,4.274,27.576,21.64,23.302,38.784z"/>
+<path fill="#FFF" d="m46.103,27.444c0.637-4.258-2.605-6.547-7.038-8.074l1.438-5.768-3.511-0.875-1.4,5.616c-0.923-0.23-1.871-0.447-2.813-0.662l1.41-5.653-3.509-0.875-1.439,5.766c-0.764-0.174-1.514-0.346-2.242-0.527l0.004-0.018-4.842-1.209-0.934,3.75s2.605,0.597,2.55,0.634c1.422,0.355,1.679,1.296,1.636,2.042l-1.638,6.571c0.098,0.025,0.225,0.061,0.365,0.117-0.117-0.029-0.242-0.061-0.371-0.092l-2.296,9.205c-0.174,0.432-0.615,1.08-1.609,0.834,0.035,0.051-2.552-0.637-2.552-0.637l-1.743,4.019,4.569,1.139c0.85,0.213,1.683,0.436,2.503,0.646l-1.453,5.834,3.507,0.875,1.439-5.772c0.958,0.26,1.888,0.5,2.798,0.726l-1.434,5.745,3.511,0.875,1.453-5.823c5.987,1.133,10.489,0.676,12.384-4.739,1.527-4.36-0.076-6.875-3.226-8.515,2.294-0.529,4.022-2.038,4.483-5.155zm-8.022,11.249c-1.085,4.36-8.426,2.003-10.806,1.412l1.928-7.729c2.38,0.594,10.012,1.77,8.878,6.317zm1.086-11.312c-0.99,3.966-7.1,1.951-9.082,1.457l1.748-7.01c1.982,0.494,8.365,1.416,7.334,5.553z"/>
+</g>
+</svg>

tests/unit/helpers/item-status-test.js

@@ -2,11 +2,11 @@ import { module, test } from 'qunit';
 import { setupTest } from 'ember-qunit';
 import Contribution from 'kredits-web/models/contribution';
 
-module('Unit | Helper | contribution-status', function (hooks) {
+module('Unit | Helper | item-status', function (hooks) {
   setupTest(hooks);
 
   test('returns the appropriate status', function (assert) {
-    const contributionStatus = this.owner.factoryFor('helper:contribution-status').create();
+    const contributionStatus = this.owner.factoryFor('helper:item-status').create();
     const kredits = this.owner.lookup('service:kredits');
 
     kredits.set('currentBlock', 23000);