Fix mobile layout, add contribution kind to props

This commit is contained in:
2017-06-07 12:46:03 +02:00
parent 33072900e9
commit cbb15f4d6f
7 changed files with 28 additions and 14 deletions
+2 -2
View File
@@ -1,6 +1,6 @@
{{#each proposals as |proposal|}} {{#each proposals as |proposal|}}
<li> <li data-proposal-id={{proposal.id}}>
<span class="id">#{{proposal.id}}</span> <span class="category {{proposal.kind}}">♥</span>
<span class="amount">{{proposal.amount}}</span><span class="symbol">₭S</span> <span class="amount">{{proposal.amount}}</span><span class="symbol">₭S</span>
for <span class="recipient" title="{{proposal.recipientAddress}}">{{proposal.recipientName}}</span> for <span class="recipient" title="{{proposal.recipientAddress}}">{{proposal.recipientName}}</span>
<span class="votes">({{proposal.votesCount}}/{{proposal.votesNeeded}} votes)</span> <span class="votes">({{proposal.votesCount}}/{{proposal.votesNeeded}} votes)</span>
+8
View File
@@ -0,0 +1,8 @@
$blue: #68d7fb;
$purple: #8f68fb;
$pink: #e068fb;
$green: #97fb68;
$yellow: #fbe468;
$red: #fb6868;
$primaryColor: $blue;
+6 -5
View File
@@ -15,6 +15,7 @@
@import "neat"; @import "neat";
@import "settings/breakpoints"; @import "settings/breakpoints";
@import "layout"; @import "layout";
@import "colors";
$font-family-sans: 'Open Sans', sans-serif; $font-family-sans: 'Open Sans', sans-serif;
@@ -43,7 +44,7 @@ h1, h2, h3, h4, h5, input, button {
section { section {
h2 { h2 {
font-size: 2.8rem; font-size: 2.8rem;
color: lightblue; color: $primaryColor;
@include media($mobile) { @include media($mobile) {
font-size: 2rem; font-size: 2rem;
} }
@@ -54,7 +55,7 @@ section {
p.stats { p.stats {
padding-top: 3rem; padding-top: 3rem;
font-size: 1rem; font-size: 1rem;
color: lightblue; color: white;
text-align: center; text-align: center;
span.number { span.number {
font-weight: 600; font-weight: 600;
@@ -70,14 +71,14 @@ section {
.actions { .actions {
padding-top: 3rem; padding-top: 3rem;
font-size: 1rem; font-size: 1rem;
color: lightblue; color: $primaryColor;
text-align: center; text-align: center;
@include media($mobile) { @include media($mobile) {
padding-top: 2rem; padding-top: 2rem;
} }
a { a {
color: lightblue; color: $primaryColor;
} }
} }
} }
@@ -87,7 +88,7 @@ button, input[type=submit] {
display: inline-block; display: inline-block;
border: 1px solid rgba(22, 21, 40, 1); border: 1px solid rgba(22, 21, 40, 1);
background-color: rgba(22, 21, 40, 0.6); background-color: rgba(22, 21, 40, 0.6);
color: lightblue; color: $primaryColor;
border-radius: 3px; border-radius: 3px;
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
+1 -1
View File
@@ -9,7 +9,7 @@ section#add-contributor, section#add-proposal {
padding-top: 1rem; padding-top: 1rem;
text-align: center; text-align: center;
a { a {
color: lightblue; color: $primaryColor;
margin-left: 1rem; margin-left: 1rem;
} }
} }
+1 -1
View File
@@ -22,7 +22,7 @@ table.contributor-list {
} }
a { a {
color: lightblue; color: $primaryColor;
&:hover, &:active { &:hover, &:active {
color: #fff; color: #fff;
} }
+2 -2
View File
@@ -11,7 +11,7 @@
margin-top: 12rem; margin-top: 12rem;
text-align: center; text-align: center;
font-size: 1.4rem; font-size: 1.4rem;
color: lightblue; color: $primaryColor;
@include media($mobile) { @include media($mobile) {
margin-top: 6rem; margin-top: 6rem;
@@ -23,7 +23,7 @@
margin-bottom: 2rem; margin-bottom: 2rem;
#path-comet { #path-comet {
fill: lightblue; fill: $primaryColor;
opacity: 0.1; opacity: 0.1;
animation-name: pulse; animation-name: pulse;
+8 -3
View File
@@ -14,9 +14,14 @@ ul.proposal-list {
border-top: 1px solid rgba(255,255,255,0.2); border-top: 1px solid rgba(255,255,255,0.2);
} }
.id { .category {
color: lightblue; color: $blue;
padding-right: 0.2rem; padding-right: 0.2rem;
&.community { color: $red; }
&.dev { color: $pink; }
&.design { color: $yellow; }
&.docs { color: $green; }
&.ops { color: $purple; }
} }
.amount { .amount {
font-weight: 500; font-weight: 500;
@@ -31,7 +36,7 @@ ul.proposal-list {
} }
.votes { .votes {
font-size: 1rem; font-size: 1rem;
color: lightblue; color: $primaryColor;
padding-left: 0.5rem; padding-left: 0.5rem;
} }