kredits/kredits-web
9
0
Fork 0
Code Issues 22 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
+232 -103
10 changed files with 232 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/proposal-list/template.hbs
+18 -9
View File
@@ -1,12 +1,21 @@
{{#each proposals as |proposal|}} {{#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> </li>
{{/each}} {{/each}}
app/controllers/application.js
+2
View File
@@ -1,4 +1,6 @@
import Controller from '@ember/controller'; import Controller from '@ember/controller';
import { inject as injectService } from '@ember/service';
export default Controller.extend({ export default Controller.extend({
kredits: injectService(),
}); });
app/styles/_colors.scss
+5
View File
@@ -6,3 +6,8 @@ $yellow: #fbe468;
$red: #fb6868; $red: #fb6868;
$primaryColor: $blue; $primaryColor: $blue;
#topbar {
background-color: rgba(255,0,255,.2);
}
app/styles/_layout.scss
+36 -14
View File
@@ -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 { &:first-of-type {
margin-top: 6rem; margin-top: 2rem;
} }
@include media($mobile) { @include media($mobile) {
margin-bottom: 5rem; margin-bottom: 5rem;
&:first-of-type {
margin-top: 2rem; &#proposals-open, &#proposals-closed {
margin-top: 0;
} }
} }
header { header {
@include span-columns(12);
padding-bottom: 3rem; padding-bottom: 3rem;
text-align: center; text-align: center;
// background-color: purple;
@include media($mobile) { @include media($mobile) {
@include span-columns(10);
@include shift(1);
padding-bottom: 2rem; padding-bottom: 2rem;
} }
div.content {
@include span-columns(12);
}
} }
} }
app/styles/app.scss
+12 -6
View File
@@ -2,6 +2,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-size: 14px;
} }
*:hover, *:active, *:focus { *:hover, *:active, *:focus {
@@ -24,7 +25,6 @@ body {
background-repeat: none; background-repeat: none;
background-attachment: fixed; background-attachment: fixed;
font-family: $font-family-sans; font-family: $font-family-sans;
font-size: 14px;
font-weight: 300; font-weight: 300;
color: #fff; color: #fff;
} }
@@ -43,14 +43,11 @@ h1, h2, h3, h4, h5, input, button {
section { section {
h2 { h2 {
font-size: 2.8rem; font-size: 1.4rem;
color: $primaryColor; color: $primaryColor;
@include media($mobile) {
font-size: 2rem;
}
} }
&#contributors { &#people {
.content { .content {
p.stats { p.stats {
padding-top: 3rem; 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/loading-spinner";
@import "components/contributor-list"; @import "components/contributor-list";
@import "components/add-contributor"; @import "components/add-contributor";
app/styles/components/_proposal-list.scss
+75 -7
View File
@@ -4,16 +4,46 @@ ul.proposal-list {
list-style: none; list-style: none;
li { 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); 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); border-bottom: 1px solid rgba(255,255,255,0.2);
&:first-of-type { &:first-of-type {
border-top: 1px solid rgba(255,255,255,0.2); 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 { .category {
color: $blue; color: $blue;
padding-right: 0.2rem; padding-right: 0.2rem;
@@ -23,26 +53,28 @@ ul.proposal-list {
&.docs { color: $green; } &.docs { color: $green; }
&.ops { color: $purple; } &.ops { color: $purple; }
} }
.amount { .amount {
font-weight: 500; font-weight: 500;
} }
.symbol { .symbol {
font-size: 1rem; font-size: 1rem;
font-weight: 500; font-weight: 500;
padding-left: 0.2rem; padding-left: 0.2rem;
} }
.recipient { .recipient {
font-weight: 500; font-weight: 500;
} }
.votes { .votes {
font-size: 1rem; font-size: 1rem;
color: $primaryColor; color: $primaryColor;
padding-left: 0.5rem; margin-right: 0.5rem;
} }
button { button {
float: right;
margin-top: 1.1rem;
height: 2rem; height: 2rem;
line-height: 2rem; line-height: 2rem;
padding: 0 0.6rem; 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
+15
View File
@@ -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
+1 -1
View File
@@ -2,4 +2,4 @@
// $visual-grid-color: red; // $visual-grid-color: red;
// $visual-grid-index: front; // $visual-grid-index: front;
// $visual-grid-opacity: 0.5; // $visual-grid-opacity: 0.5;
$max-width: em(500, 12); $max-width: em(1200, 12);
app/templates/application.hbs
+16 -3
View File
@@ -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}}
fsmanuel commented 2018-06-18 10:50:13 +00:00 (Migrated from github.com)
Review
Copy Link
Copy Source

Can we make it

{{#if (and kredits.hasAccounts kredits.currentUser}}
{{else}
Can we make it ```hbs {{#if (and kredits.hasAccounts kredits.currentUser}} {{else} ```
raucao commented 2018-06-18 10:57:42 +00:00 (Migrated from github.com)
Review
Copy Link
Copy Source

Sounds to me like that should be a single computed property.

Sounds to me like that should be a single computed property.
fsmanuel commented 2018-06-18 11:14:39 +00:00 (Migrated from github.com)
Review
Copy Link
Copy Source

As far as I understand the code we already handle hasAccounts in getCurrentUser:
https://github.com/67P/kredits-web/blob/master/app/services/kredits.js#L147-L162

As far as I understand the code we already handle `hasAccounts` in `getCurrentUser`: https://github.com/67P/kredits-web/blob/master/app/services/kredits.js#L147-L162
{{/if}}
{{else}}
Anonymous
{{/if}}
</section>
</header>
{{outlet}}
app/templates/index.hbs
+52 -63
View File
@@ -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> <header>
<h2>Open Proposals</h2> <h2>Contributors</h2>
</header> </header>
<div class="content"> <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 --}} {{!-- TODO: We need a better naming --}}
{{#if kredits.hasAccounts}} {{#if kredits.hasAccounts}}
@@ -41,37 +44,23 @@
{{#link-to 'proposals.new'}}Create new proposal{{/link-to}} {{#link-to 'proposals.new'}}Create new proposal{{/link-to}}
</p> </p>
{{/if}} {{/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> </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>