Improve all the things

app/components/proposal-list/template.hbs

@@ -1,16 +1,21 @@
 {{#each proposals as |proposal|}}
-  <li data-proposal-id={{proposal.id}} title="{{proposal.description}}">
+  <li data-proposal-id={{proposal.id}} title="{{proposal.description}}"
+      class={{if proposal.isExecuted "confirmed" "unconfirmed"}}>
     <p class="meta">
       <span class="category {{proposal.kind}}">♥ ({{proposal.kind}})</span>
       <span class="recipient">{{proposal.contributor.name}}:</span>
+    </p>
+    <p class="kredits-amount">
       <span class="amount">{{proposal.amount}}</span><span class="symbol">₭S</span>
+    </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>
-    <p class="description">
-      <span class="description">{{proposal.description}}</span>
-    </p>
   </li>
 {{/each}}

app/styles/_layout.scss

@@ -22,21 +22,23 @@ main {
       grid-row-gap: 2rem;
       grid-template-columns: 2fr 4fr;
       grid-template-areas:
-      "people contributions"
+        "people contributions";
     }
   }
 }
 
 main section {
-  margin-bottom: 8rem;
+  margin-bottom: 5rem;
+
   &:first-of-type {
     margin-top: 2rem;
   }
 
   @include media($mobile) {
     margin-bottom: 5rem;
-    &:first-of-type {
+
-      margin-top: 2rem;
+    &#proposals-open, &#proposals-closed {
+      margin-top: 0;
     }
   }
 

app/styles/app.scss

@@ -43,7 +43,7 @@ h1, h2, h3, h4, h5, input, button {
 
 section {
   h2 {
-    font-size: 2rem;
+    font-size: 1.4rem;
     color: $primaryColor;
   }
 
@@ -97,6 +97,14 @@ button, input[type=submit] {
   }
 }
 
+@media (min-width: 550px) {
+  section {
+    h2 {
+      font-size: 2rem;
+    }
+  }
+}
+
 @import "components/topbar";
 @import "components/loading-spinner";
 @import "components/contributor-list";

app/styles/components/_proposal-list.scss

@@ -4,26 +4,35 @@ ul.proposal-list {
   list-style: none;
 
   li {
-    display: block;
+    display: grid;
+    grid-template-columns: auto 5rem;
+    grid-row-gap: 0.5rem;
     padding: 1rem 1.2rem;
     background-color: rgba(255,255,255,0.1);
     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;
 
-      &.meta {
+      &.kredits-amount, &.voting {
-        margin-bottom: 0.5rem;
+        text-align: right;
+      }
+
+      &.description {
+        grid-column-start: span 2;
+      }
+
+      &.voting {
+        grid-column-start: span 2;
       }
-      // &.description {
-      //   line-height: 2rem;
-      // }
     }
 
     span {
@@ -32,6 +41,7 @@ ul.proposal-list {
 
     .description {
       line-height: 1.4em;
+      font-size: 1rem;
     }
 
     .category {
@@ -43,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;
@@ -70,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/templates/index.hbs

@@ -25,13 +25,6 @@
           {{proposal-list proposals=proposalsOpenSorted
                           confirmProposal=(action "confirmProposal")
                           contractInteractionEnabled=kredits.hasAccounts}}
-
-          {{!-- 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>
     {{/if}}
@@ -43,6 +36,7 @@
       <div class="content">
         {{proposal-list proposals=proposalsClosedSorted
                         confirmProposal=(action "confirmProposal")}}
+      </div>
 
       {{!-- TODO: We need a better naming --}}
       {{#if kredits.hasAccounts}}
@@ -50,10 +44,10 @@
           {{#link-to 'proposals.new'}}Create new proposal{{/link-to}}
         </p>
       {{/if}}
-      </div>
     </section>
   </div>
 
+  {{#if kredits.hasAccounts}}
     <section id="add-contributor">
       <header>
         <h2>Add Contributor</h2>
@@ -67,5 +61,6 @@
         {{/if}}
       </div>
     </section>
+  {{/if}}
 
 </main>