Basic contribution details

Adds a details pane for contribution records, similar to contributor
profiles.

Just the basic details for now. Can be extended with all kinds of
data, links, icons, etc. from here on.

app/models/contribution.js

@@ -1,4 +1,4 @@
-import EmberObject from '@ember/object';
+import EmberObject, { computed } from '@ember/object';
 import bignumber from 'kredits-web/utils/cps/bignumber';
 
 export default EmberObject.extend({
@@ -18,11 +18,17 @@ export default EmberObject.extend({
   description: null,
   details: null,
   url: null,
+  date: null,
+  time: null,
   ipfsData: '',
 
   init () {
     this._super(...arguments);
     this.set('details', {});
-  }
+  },
+
+  iso8601Date: computed('date', 'time', function() {
+    return this.time ? `${this.date}T${this.time}` : this.date;
+  })
 
 });

app/styles/app.scss

@@ -99,6 +99,7 @@ section {
 @import "forms";
 
 @import "components/contribution-list";
+@import "components/contribution-details";
 @import "components/contributor-list";
 @import "components/contributor-profile";
 @import "components/external-account-link";

app/styles/components/_contribution-details.scss

@@ -0,0 +1,60 @@
+section#contribution-details {
+  header {
+    nav {
+      .amount {
+        font-size: 1.5rem;
+      }
+
+      .symbol {
+        // font-size: 0.8rem;
+        padding-left: 0.2rem;
+      }
+    }
+  }
+
+  .content {
+    width: 100%;
+    margin: 0 0 1.5rem;
+    padding: 2rem 2rem;
+
+    border-top: 1px solid rgba(255,255,255,0.2);
+    border-bottom: 1px solid rgba(255,255,255,0.2);
+    background-color: rgba(255,255,255,0.1);
+
+    h3 {
+      font-size: 1.5rem;
+      margin-bottom: 2rem;
+    }
+
+    p {
+      margin-bottom: 2rem;
+
+      span {
+        font-size: inherit;
+      }
+
+      &.who-what-when {
+        font-size: 1.2rem;
+        margin-bottom: 1.2rem;
+      }
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+
+    a {
+      color: $primary-color;
+      text-decoration: none;
+      font-size: inherit;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .actions {
+    text-align: center;
+  }
+}

app/templates/dashboard/contributions/show.hbs

@@ -1,16 +1,47 @@
 <section id="contribution-details">
-  <header>
-    <h2>Details</h2>
+  <header class="with-nav">
+    <h2>Contribution #{{model.id}}</h2>
+    <nav>
+      <span class="amount">{{model.amount}}</span>&nbsp;
+      <span class="symbol">₭S</span>
+    </nav>
   </header>
 
   <div class="content">
+    <p class="who-what-when">
+      <span class="contributor">
+        {{user-avatar contributor=model.contributor}}
+        {{link-to model.contributor.name "dashboard.contributors.show" model.contributor}}
+      </span>
+      contributed
+      <span class="date" title={{model.iso8601Date}}>{{moment-from model.iso8601Date}}</span>:
+    </p>
     <h3>{{model.description}}</h3>
-    <a href={{model.url}}
-       title={{model.description}}
-       class="button"
-       target="_blank"
-       rel="noopener">
-      Open URL
-    </a>
+    <p>
+      Kind: {{model.kind}}
+      <br>Status: {{contribution-status model}}
+    </p>
+    {{#if model.url}}
+      <p>
+        <a href={{model.url}}
+           title={{model.description}}
+           class="button"
+           target="_blank"
+           rel="noopener">
+          Open URL
+        </a>
+      </p>
+    {{/if}}
+  </div>
+
+  <div class="actions">
+    <p>
+      {{#if model.ipfsHash}}
+        <a href="https://ipfs.io/ipfs/{{model.ipfsHash}}"
+           class="button small" target="_blank" rel="noopener">
+          Inspect IPFS data
+        </a>
+      {{/if}}
+    </p>
   </div>
 </section>