kredits/kredits-web
9
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Releases 18 Activity

Improve layout, show contribution details #75

Merged
raucao merged 6 commits from feature/improve_layout into master 2018-06-22 20:27:00 +00:00
Conversation 8 Commits 6 Files Changed 10
+102 -44
5 changed files with 102 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c074ccf460 - Show all commits
app/components/proposal-list/template.hbs
+9 -4
View File
@@ -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
+6 -4
View File
@@ -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
+9 -1
View File
@@ -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
+57 -9
View File
@@ -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 {
margin-bottom: 0.5rem;
&.kredits-amount, &.voting {
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
+21 -26
View File
@@ -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,29 +36,31 @@
<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>
{{!-- TODO: We need a better naming --}}
{{#if kredits.hasAccounts}}
<p class="actions">
{{#link-to 'proposals.new'}}Create new proposal{{/link-to}}
</p>
{{/if}}
</section>
</div>
<section id="add-contributor">
<header>
<h2>Add Contributor</h2>
</header>
{{#if kredits.hasAccounts}}
<section id="add-contributor">
<header>
<h2>Add Contributor</h2>
</header>
<div class="content">
{{#if kredits.currentUser.isCore}}
{{add-contributor contributors=contributors save=(action 'save')}}
{{else}}
Only core team members can add new contributors. Please ask someone to set you up.
{{/if}}
</div>
</section>
<div class="content">
{{#if kredits.currentUser.isCore}}
{{add-contributor contributors=contributors save=(action 'save')}}
{{else}}
Only core team members can add new contributors. Please ask someone to set you up.
{{/if}}
</div>
</section>
{{/if}}
</main>