Merge pull request #75 from 67P/feature/improve_layout

Improve layout, show contribution details

app/components/proposal-list/template.hbs

@@ -1,12 +1,21 @@
 {{#each proposals as |proposal|}}
-  <li data-proposal-id={{proposal.id}} title="({{proposal.kind}}) {{proposal.description}}">
+  <li data-proposal-id={{proposal.id}} title="{{proposal.description}}"
-    <span class="category {{proposal.kind}}">♥</span>
+      class={{if proposal.isExecuted "confirmed" "unconfirmed"}}>
-    <span class="amount">{{proposal.amount}}</span><span class="symbol">₭S</span>
+    <p class="meta">
-    for <span class="recipient">{{proposal.contributor.name}}</span>
+      <span class="category {{proposal.kind}}">♥ ({{proposal.kind}})</span>
-    <span class="votes">({{proposal.votesCount}}/{{proposal.votesNeeded}} votes)</span>
+      <span class="recipient">{{proposal.contributor.name}}:</span>
-
+    </p>
-    {{#unless proposal.isExecuted}}
+    <p class="kredits-amount">
-      <button {{action "confirm" proposal.id}}>+1</button>
+      <span class="amount">{{proposal.amount}}</span><span class="symbol">₭S</span>
-    {{/unless}}
+    </p>
+    <p class="description">
+      <span class="description">{{proposal.description}}</span>
+    </p>
+    <p class="voting">
+      {{#unless proposal.isExecuted}}
+        <span class="votes">({{proposal.votesCount}}/{{proposal.votesNeeded}} votes)</span>
+        <button {{action "confirm" proposal.id}}>+1</button>
+      {{/unless}}
+    </p>
   </li>
 {{/each}}

app/controllers/application.js

@@ -1,4 +1,6 @@
 import Controller from '@ember/controller';
+import { inject as injectService } from '@ember/service';
 
 export default Controller.extend({
+  kredits: injectService(),
 });

app/styles/_colors.scss

@@ -6,3 +6,8 @@ $yellow: #fbe468;
 $red: #fb6868;
 
 $primaryColor: $blue;
+
+#topbar {
+  background-color: rgba(255,0,255,.2);
+}
+

app/styles/_layout.scss

@@ -1,31 +1,53 @@
-section {
+#topbar {
-  @include outer-container;
+  height: 3rem;
-  margin-bottom: 8rem;
+}
+
+main {
+  padding: 1rem;
+
+  &#index {
+    width: 100%;
+    display: grid;
+    grid-row-gap: 2rem;
+    grid-template-areas:
+      "people"
+      "contributions";
+  }
+}
+
+@media (min-width: 550px) {
+  main {
+    &#index {
+      grid-column-gap: 4rem;
+      grid-row-gap: 2rem;
+      grid-template-columns: 2fr 4fr;
+      grid-template-areas:
+        "people contributions";
+    }
+  }
+}
+
+main section {
+  margin-bottom: 5rem;
+
   &:first-of-type {
-    margin-top: 6rem;
+    margin-top: 2rem;
   }
 
   @include media($mobile) {
     margin-bottom: 5rem;
-    &:first-of-type {
+
-      margin-top: 2rem;
+    &#proposals-open, &#proposals-closed {
+      margin-top: 0;
     }
   }
 
   header {
-    @include span-columns(12);
     padding-bottom: 3rem;
     text-align: center;
-    // background-color: purple;
 
     @include media($mobile) {
-      @include span-columns(10);
-      @include shift(1);
       padding-bottom: 2rem;
     }
-
-    div.content {
-      @include span-columns(12);
-    }
   }
 }

app/styles/app.scss

@@ -2,6 +2,7 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  font-size: 14px;
 }
 
 *:hover, *:active, *:focus {
@@ -24,7 +25,6 @@ body {
   background-repeat: none;
   background-attachment: fixed;
   font-family: $font-family-sans;
-  font-size: 14px;
   font-weight: 300;
   color: #fff;
 }
@@ -43,14 +43,11 @@ h1, h2, h3, h4, h5, input, button {
 
 section {
   h2 {
-    font-size: 2.8rem;
+    font-size: 1.4rem;
     color: $primaryColor;
-    @include media($mobile) {
-      font-size: 2rem;
-    }
   }
 
-  &#contributors {
+  &#people {
     .content {
       p.stats {
         padding-top: 3rem;
@@ -100,6 +97,15 @@ button, input[type=submit] {
   }
 }
 
+@media (min-width: 550px) {
+  section {
+    h2 {
+      font-size: 2rem;
+    }
+  }
+}
+
+@import "components/topbar";
 @import "components/loading-spinner";
 @import "components/contributor-list";
 @import "components/add-contributor";

app/styles/components/_proposal-list.scss

@@ -4,16 +4,46 @@ ul.proposal-list {
   list-style: none;
 
   li {
-    // display: block;
+    display: grid;
-    padding: 0 1.2rem;
+    grid-template-columns: auto 5rem;
-    line-height: 4.2rem;
+    grid-row-gap: 0.5rem;
+    padding: 1rem 1.2rem;
     background-color: rgba(255,255,255,0.1);
-    font-size: 1.4rem;
+    font-size: 1.2rem;
     border-bottom: 1px solid rgba(255,255,255,0.2);
+
     &:first-of-type {
       border-top: 1px solid rgba(255,255,255,0.2);
     }
 
+    p {
+      align-self: center;
+      margin: 0;
+      font-size: inherit;
+      line-height: 2rem;
+
+      &.kredits-amount, &.voting {
+        text-align: right;
+      }
+
+      &.description {
+        grid-column-start: span 2;
+      }
+
+      &.voting {
+        grid-column-start: span 2;
+      }
+    }
+
+    span {
+      font-size: inherit;
+    }
+
+    .description {
+      line-height: 1.4em;
+      font-size: 1rem;
+    }
+
     .category {
       color: $blue;
       padding-right: 0.2rem;
@@ -23,26 +53,28 @@ ul.proposal-list {
       &.docs      { color: $green; }
       &.ops       { color: $purple; }
     }
+
     .amount {
       font-weight: 500;
     }
+
     .symbol {
       font-size: 1rem;
       font-weight: 500;
       padding-left: 0.2rem;
     }
+
     .recipient {
       font-weight: 500;
     }
+
     .votes {
       font-size: 1rem;
       color: $primaryColor;
-      padding-left: 0.5rem;
+      margin-right: 0.5rem;
     }
 
     button {
-      float: right;
-      margin-top: 1.1rem;
       height: 2rem;
       line-height: 2rem;
       padding: 0 0.6rem;
@@ -50,3 +82,39 @@ ul.proposal-list {
   }
 
 }
+
+@media (min-width: 550px) {
+  ul.proposal-list {
+    li {
+      grid-template-columns: auto 10rem;
+      grid-row-gap: 0.5rem;
+
+      p {
+        &.kredits-amount, &.voting {
+          text-align: right;
+        }
+      }
+
+      &.unconfirmed {
+        p {
+          &.kredits-amount, &.voting {
+            text-align: right;
+          }
+
+          &.description {
+            grid-column-start: span 1;
+          }
+
+          &.voting {
+            grid-column-start: span 1;
+          }
+        }
+      }
+
+
+      .description {
+        font-size: inherit;
+      }
+    }
+  }
+}

app/styles/components/_topbar.scss

@@ -0,0 +1,15 @@
+#topbar {
+  padding: 0 1rem;
+  line-height: 3rem;
+  background-color: rgba(0,0,0,.3);
+
+  h1 {
+    display: inline-block;
+    text-transform: uppercase;
+  }
+
+  section#user-account {
+    display: inline-block;
+    float: right;
+  }
+}

app/styles/settings/_neat.scss

@@ -2,4 +2,4 @@
 // $visual-grid-color: red;
 // $visual-grid-index: front;
 // $visual-grid-opacity: 0.5;
-$max-width: em(500, 12);
+$max-width: em(1200, 12);

app/templates/application.hbs

@@ -1,3 +1,16 @@
-<main>
+<header id="topbar">
-  {{outlet}}
+  <h1>Kosmos Kredits</h1>
-</main>
+
+  <section id="user-account">
+    {{#if kredits.hasAccounts }}
+      {{#if kredits.currentUser}}
+        {{kredits.currentUser.name}}
+        {{#if kredits.currentUserIsCore}}(core){{/if}}
+      {{/if}}
+    {{else}}
+      Anonymous
+    {{/if}}
+  </section>
+</header>
+
+{{outlet}}

app/templates/index.hbs

@@ -1,39 +1,42 @@
-{{#if kredits.hasAccounts }}
+<main id="index">
-  <section id="user-account">
-    {{#if kredits.currentUser }}
-      {{ kredits.currentUser.name }}
-      {{#if kredits.currentUserIsCore }}
-        (core)
-      {{/if}}
-      Account: {{kredits.currentUser.account}}
-    {{/if}}
-  </section>
-{{/if}}
 
-<section id="contributors">
+  <section id="people">
-  <header>
-    <h2>Kosmos Contributors</h2>
-  </header>
-  <div class="content">
-    {{contributor-list contributors=contributorsSorted}}
-
-    <p class="stats">
-      <span class="number">{{await kredits.totalSupply}}</span> kredits issued and distributed among
-      <span class="number">{{contributorsWithKredits.length}}</span> contributors.
-    </p>
-  </div>
-</section>
-
-{{#if proposalsOpen}}
-  <section id="proposals-open">
     <header>
-      <h2>Open Proposals</h2>
+      <h2>Contributors</h2>
     </header>
     <div class="content">
-      {{!-- TODO: We need a better naming for kredits.hasAccounts --}}
+      {{contributor-list contributors=contributorsSorted}}
-      {{proposal-list proposals=proposalsOpenSorted
+
-                      confirmProposal=(action "confirmProposal")
+      <p class="stats">
-                      contractInteractionEnabled=kredits.hasAccounts}}
+        <span class="number">{{await kredits.totalSupply}}</span> kredits issued and distributed among
+        <span class="number">{{contributorsWithKredits.length}}</span> contributors.
+      </p>
+    </div>
+  </section>
+
+  <div id="contributions">
+    {{#if proposalsOpen}}
+      <section id="proposals-open">
+        <header>
+          <h2>Unconfirmed Contributions</h2>
+        </header>
+        <div class="content">
+          {{!-- TODO: We need a better naming for kredits.hasAccounts --}}
+          {{proposal-list proposals=proposalsOpenSorted
+                          confirmProposal=(action "confirmProposal")
+                          contractInteractionEnabled=kredits.hasAccounts}}
+        </div>
+      </section>
+    {{/if}}
+
+    <section id="proposals-closed">
+      <header>
+        <h2>Confirmed Contributions</h2>
+      </header>
+      <div class="content">
+        {{proposal-list proposals=proposalsClosedSorted
+                        confirmProposal=(action "confirmProposal")}}
+      </div>
 
       {{!-- TODO: We need a better naming --}}
       {{#if kredits.hasAccounts}}
@@ -41,37 +44,23 @@
           {{#link-to 'proposals.new'}}Create new proposal{{/link-to}}
         </p>
       {{/if}}
-    </div>
+    </section>
-  </section>
-{{/if}}
-
-<section id="proposals-closed">
-  <header>
-    <h2>Closed Proposals</h2>
-  </header>
-  <div class="content">
-    {{proposal-list proposals=proposalsClosedSorted
-                    confirmProposal=(action "confirmProposal")}}
-
-    {{!-- TODO: We need a better naming --}}
-    {{#if kredits.hasAccounts}}
-      <p class="actions">
-        {{#link-to 'proposals.new'}}Create new proposal{{/link-to}}
-      </p>
-    {{/if}}
   </div>
-</section>
 
-<section id="add-contributor">
+  {{#if kredits.hasAccounts}}
-  <header>
+    <section id="add-contributor">
-    <h2>Add Contributor</h2>
+      <header>
-  </header>
+        <h2>Add Contributor</h2>
+      </header>
 
-  <div class="content">
+      <div class="content">
-    {{#if kredits.currentUser.isCore}}
+        {{#if kredits.currentUser.isCore}}
-      {{add-contributor contributors=contributors save=(action 'save')}}
+          {{add-contributor contributors=contributors save=(action 'save')}}
-    {{else}}
+        {{else}}
-      Only core team members can add new contributors. Please ask someone to set you up.
+          Only core team members can add new contributors. Please ask someone to set you up.
-    {{/if}}
+        {{/if}}
-  </div>
+      </div>
-</section>
+    </section>
+  {{/if}}
+
+</main>