diff --git a/app/components/proposal-list/template.hbs b/app/components/proposal-list/template.hbs index 87bdbae..42e18fe 100644 --- a/app/components/proposal-list/template.hbs +++ b/app/components/proposal-list/template.hbs @@ -1,12 +1,21 @@ {{#each proposals as |proposal|}} -
  • - - {{proposal.amount}}₭S - for {{proposal.contributor.name}} - ({{proposal.votesCount}}/{{proposal.votesNeeded}} votes) - - {{#unless proposal.isExecuted}} - - {{/unless}} +
  • +

    + ♥ ({{proposal.kind}}) + {{proposal.contributor.name}}: +

    +

    + {{proposal.amount}}₭S +

    +

    + {{proposal.description}} +

    +

    + {{#unless proposal.isExecuted}} + ({{proposal.votesCount}}/{{proposal.votesNeeded}} votes) + + {{/unless}} +

  • {{/each}} diff --git a/app/controllers/application.js b/app/controllers/application.js index d630f31..2fe85e2 100644 --- a/app/controllers/application.js +++ b/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(), }); diff --git a/app/styles/_colors.scss b/app/styles/_colors.scss index 9578f1d..d01df0f 100644 --- a/app/styles/_colors.scss +++ b/app/styles/_colors.scss @@ -6,3 +6,8 @@ $yellow: #fbe468; $red: #fb6868; $primaryColor: $blue; + +#topbar { + background-color: rgba(255,0,255,.2); +} + diff --git a/app/styles/_layout.scss b/app/styles/_layout.scss index e3b93d0..9a8f7af 100644 --- a/app/styles/_layout.scss +++ b/app/styles/_layout.scss @@ -1,31 +1,53 @@ -section { - @include outer-container; - margin-bottom: 8rem; +#topbar { + height: 3rem; +} + +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); - } } } diff --git a/app/styles/app.scss b/app/styles/app.scss index 8c04cf8..c04c1b5 100644 --- a/app/styles/app.scss +++ b/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"; diff --git a/app/styles/components/_proposal-list.scss b/app/styles/components/_proposal-list.scss index a35f17c..9edaa6b 100644 --- a/app/styles/components/_proposal-list.scss +++ b/app/styles/components/_proposal-list.scss @@ -4,16 +4,46 @@ ul.proposal-list { list-style: none; li { - // display: block; - padding: 0 1.2rem; - line-height: 4.2rem; + 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.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; + } + } + } +} diff --git a/app/styles/components/_topbar.scss b/app/styles/components/_topbar.scss new file mode 100644 index 0000000..48ed6c1 --- /dev/null +++ b/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; + } +} diff --git a/app/styles/settings/_neat.scss b/app/styles/settings/_neat.scss index 3ed8174..eb91b1d 100644 --- a/app/styles/settings/_neat.scss +++ b/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); diff --git a/app/templates/application.hbs b/app/templates/application.hbs index 1338264..aaa3df2 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -1,3 +1,16 @@ -
    - {{outlet}} -
    +
    +

    Kosmos Kredits

    + +
    + {{#if kredits.hasAccounts }} + {{#if kredits.currentUser}} + {{kredits.currentUser.name}} + {{#if kredits.currentUserIsCore}}(core){{/if}} + {{/if}} + {{else}} + Anonymous + {{/if}} +
    +
    + +{{outlet}} diff --git a/app/templates/index.hbs b/app/templates/index.hbs index 99ccd78..bc97449 100644 --- a/app/templates/index.hbs +++ b/app/templates/index.hbs @@ -1,39 +1,42 @@ -{{#if kredits.hasAccounts }} -
    - {{#if kredits.currentUser }} - {{ kredits.currentUser.name }} - {{#if kredits.currentUserIsCore }} - (core) - {{/if}} - Account: {{kredits.currentUser.account}} - {{/if}} -
    -{{/if}} +
    -
    -
    -

    Kosmos Contributors

    -
    -
    - {{contributor-list contributors=contributorsSorted}} - -

    - {{await kredits.totalSupply}} kredits issued and distributed among - {{contributorsWithKredits.length}} contributors. -

    -
    -
    - -{{#if proposalsOpen}} -
    +
    -

    Open Proposals

    +

    Contributors

    - {{!-- TODO: We need a better naming for kredits.hasAccounts --}} - {{proposal-list proposals=proposalsOpenSorted - confirmProposal=(action "confirmProposal") - contractInteractionEnabled=kredits.hasAccounts}} + {{contributor-list contributors=contributorsSorted}} + +

    + {{await kredits.totalSupply}} kredits issued and distributed among + {{contributorsWithKredits.length}} contributors. +

    +
    +
    + +
    + {{#if proposalsOpen}} +
    +
    +

    Unconfirmed Contributions

    +
    +
    + {{!-- TODO: We need a better naming for kredits.hasAccounts --}} + {{proposal-list proposals=proposalsOpenSorted + confirmProposal=(action "confirmProposal") + contractInteractionEnabled=kredits.hasAccounts}} +
    +
    + {{/if}} + +
    +
    +

    Confirmed Contributions

    +
    +
    + {{proposal-list proposals=proposalsClosedSorted + confirmProposal=(action "confirmProposal")}} +
    {{!-- TODO: We need a better naming --}} {{#if kredits.hasAccounts}} @@ -41,37 +44,23 @@ {{#link-to 'proposals.new'}}Create new proposal{{/link-to}}

    {{/if}} -
    -
    -{{/if}} - -
    -
    -

    Closed Proposals

    -
    -
    - {{proposal-list proposals=proposalsClosedSorted - confirmProposal=(action "confirmProposal")}} - - {{!-- TODO: We need a better naming --}} - {{#if kredits.hasAccounts}} -

    - {{#link-to 'proposals.new'}}Create new proposal{{/link-to}} -

    - {{/if}} +
    - -
    -
    -

    Add Contributor

    -
    + {{#if kredits.hasAccounts}} +
    +
    +

    Add Contributor

    +
    -
    - {{#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}} -
    -
    +
    + {{#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}} +
    +
    + {{/if}} + +