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>
-      {{reimbursement.id}}<br>
-      {{sats-to-btc reimbursement.amount}} WBTC<br>
-      vetoed: {{reimbursement.vetoed}}<br>
-      pay out to: {{reimbursement.contributor.name}}<br>
-
-      {{#each reimbursement.expenses as |expense|}}
-        {{expense.date}}: {{expense.title}} - {{fmt-fiat-currency expense.amount expense.currency}}<br>
-      {{/each}}
+    <li data-reimbursement-id={{reimbursement.id}}
+        class="{{item-status reimbursement}}">
+      <p class="meta">
+        <span class="recipient"><UserAvatar @contributor={{reimbursement.contributor}} /></span>
+        <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|}}
+          <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*/) {
-  return params;
+export default helper(function satsToBtc(amount/*, hash*/) {
+  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>