From 0a2f44cec8f95c95c705deba87fd1678a7a24878 Mon Sep 17 00:00:00 2001
From: Sebastian Kippe <sebastian@kip.pe>
Date: Sun, 19 Feb 2017 10:30:56 +0800
Subject: [PATCH] Add metadata row to contributor list

Contains links to Ethereum address and IPFS content.
---
 app/components/contributor-list/template.hbs | 12 ++++
 app/services/kredits.js                      |  3 +-
 app/styles/components/_contributor-list.scss | 64 +++++++++++++++++---
 3 files changed, 71 insertions(+), 8 deletions(-)

diff --git a/app/components/contributor-list/template.hbs b/app/components/contributor-list/template.hbs
index e163997..d402dac 100644
--- a/app/components/contributor-list/template.hbs
+++ b/app/components/contributor-list/template.hbs
@@ -10,5 +10,17 @@
         <span class="symbol">₭S</span>
       </td>
     </tr>
+    <tr class="metadata visible {{if contributor.isCurrentUser 'current-user'}}">
+      <td colspan="2">
+        <dl>
+          <dt>Ethereum address</dt>
+          <dd><a href="https://testnet.etherscan.io/address/{{contributor.address}}">{{contributor.address}}</a></dd>
+          {{#if contributor.ipfsHash}}
+            <dt>IPFS profile data</dt>
+            <dd><a href="https://ipfs.io/ipfs/{{contributor.ipfsHash}}">{{contributor.ipfsHash}}</a></dd>
+          {{/if}}
+        </dl>
+      </td>
+    </tr>
   {{/each}}
 </tbody>
diff --git a/app/services/kredits.js b/app/services/kredits.js
index 6479360..d109acd 100644
--- a/app/services/kredits.js
+++ b/app/services/kredits.js
@@ -65,11 +65,12 @@ export default Ember.Service.extend({
       this.getValueFromContract('contributorAddresses', i).then(address => {
         this.getValueFromContract('contributors', address).then(person => {
           this.getValueFromContract('balanceOf', address).then(balance => {
+            console.debug('person', person);
             let contributor = Contributor.create({
               address: address,
               github_username: person[1],
               github_uid: person[0],
-              ipfsHash: person[3],
+              ipfsHash: person[2],
               kredits: balance.toNumber(),
               isCurrentUser: this.get('currentUserAccounts').includes(address)
             });
diff --git a/app/styles/components/_contributor-list.scss b/app/styles/components/_contributor-list.scss
index 748de1e..63554e9 100644
--- a/app/styles/components/_contributor-list.scss
+++ b/app/styles/components/_contributor-list.scss
@@ -7,12 +7,68 @@ table.contributor-list {
     &:first-of-type {
       border-top: 1px solid rgba(255,255,255,0.2);
     }
+    background-color: rgba(255,255,255,0.1);
+
+    &.current-user {
+      background-color: rgba(255,255,255,0.2);
+    }
+
+    &.metadata {
+      height: 0;
+
+      td {
+        padding: 0 1.2rem;
+        transition: all 0.2s ease-out;
+      }
+
+      a {
+        color: lightblue;
+        &:hover, &:active {
+          color: #fff;
+        }
+      }
+
+      dl {
+        display: block;
+        width: 100%;
+        font-size: 1rem;
+        dt, dd {
+          display: inline-block;
+          overflow: hidden;
+          height: 0;
+          line-height: 1.6rem;
+          transition: all 0.2s ease-out;
+        }
+        dt {
+          clear: both;
+          float: left;
+          width: 30%;
+        }
+        dd {
+          float: right;
+          width: 70%;
+          text-align: right;
+        }
+      }
+
+      &.visible {
+        td {
+          padding: 1rem 1.2rem;
+        }
+
+        dl {
+          dt, dd {
+            height: auto;
+          }
+        }
+      }
+
+    }
 
     td {
       padding: 0 1.2rem;
       line-height: 4.2rem;
 
-      background-color: rgba(255,255,255,0.1);
       &.person {
         text-align: left;
         font-size: 1.4rem;
@@ -36,11 +92,5 @@ table.contributor-list {
         }
       }
     }
-
-    &.current-user {
-      td {
-        background-color: rgba(255,255,255,0.2);
-      }
-    }
   }
 }