From 24e3171311b783293e86ee6bcc134bcd91405bda Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Sat, 16 Jun 2018 15:36:21 +0200 Subject: [PATCH 1/6] Add topbar, move account info to top-right corner --- app/controllers/application.js | 2 ++ app/styles/_colors.scss | 5 +++++ app/styles/_layout.scss | 5 ++++- app/styles/app.scss | 3 ++- app/styles/components/_topbar.scss | 15 +++++++++++++++ app/templates/application.hbs | 16 +++++++++++++++- app/templates/index.hbs | 12 ------------ 7 files changed, 43 insertions(+), 15 deletions(-) create mode 100644 app/styles/components/_topbar.scss 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..37d39e2 100644 --- a/app/styles/_layout.scss +++ b/app/styles/_layout.scss @@ -1,4 +1,7 @@ -section { +#topbar { +} + +main section { @include outer-container; margin-bottom: 8rem; &:first-of-type { diff --git a/app/styles/app.scss b/app/styles/app.scss index 8c04cf8..d2560b2 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; } @@ -100,6 +100,7 @@ button, input[type=submit] { } } +@import "components/topbar"; @import "components/loading-spinner"; @import "components/contributor-list"; @import "components/add-contributor"; 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/templates/application.hbs b/app/templates/application.hbs index 1338264..d99b712 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -1,3 +1,17 @@ -
+
+

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..0fe499c 100644 --- a/app/templates/index.hbs +++ b/app/templates/index.hbs @@ -1,15 +1,3 @@ -{{#if kredits.hasAccounts }} -
- {{#if kredits.currentUser }} - {{ kredits.currentUser.name }} - {{#if kredits.currentUserIsCore }} - (core) - {{/if}} - Account: {{kredits.currentUser.account}} - {{/if}} -
-{{/if}} -

Kosmos Contributors

From 44b4340a91ed0ac7e8d7d37320ae66c2fa28f506 Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Sat, 16 Jun 2018 16:09:33 +0200 Subject: [PATCH 2/6] New CSS grid layout --- app/styles/_layout.scss | 37 ++++++++--- app/styles/app.scss | 7 +- app/styles/settings/_neat.scss | 2 +- app/templates/application.hbs | 5 +- app/templates/index.hbs | 118 +++++++++++++++++---------------- 5 files changed, 94 insertions(+), 75 deletions(-) diff --git a/app/styles/_layout.scss b/app/styles/_layout.scss index 37d39e2..c55fab5 100644 --- a/app/styles/_layout.scss +++ b/app/styles/_layout.scss @@ -1,11 +1,36 @@ #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 { - @include outer-container; margin-bottom: 8rem; &:first-of-type { - margin-top: 6rem; + margin-top: 2rem; } @include media($mobile) { @@ -16,19 +41,11 @@ main section { } 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 d2560b2..30476b4 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -43,14 +43,11 @@ h1, h2, h3, h4, h5, input, button { section { h2 { - font-size: 2.8rem; + font-size: 2rem; color: $primaryColor; - @include media($mobile) { - font-size: 2rem; - } } - &#contributors { + &#people { .content { p.stats { padding-top: 3rem; 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 d99b712..aaa3df2 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -12,6 +12,5 @@ {{/if}}
-
- {{outlet}} -
+ +{{outlet}} diff --git a/app/templates/index.hbs b/app/templates/index.hbs index 0fe499c..4caf219 100644 --- a/app/templates/index.hbs +++ b/app/templates/index.hbs @@ -1,65 +1,71 @@ -
-
-

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}} - {{!-- TODO: We need a better naming --}} - {{#if kredits.hasAccounts}} -

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

+

+ {{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}} + + {{!-- TODO: We need a better naming --}} + {{#if kredits.hasAccounts}} +

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

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

Confirmed Contributions

+
+
+ {{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.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}} -
-
-

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.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}} -
-
+
From cf777571dc796a0335e75cdea158020163f8f6d7 Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Sat, 16 Jun 2018 16:37:39 +0200 Subject: [PATCH 3/6] Move contribution info from title to actual content --- app/components/proposal-list/template.hbs | 8 ++++---- app/styles/components/_proposal-list.scss | 6 +++++- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/app/components/proposal-list/template.hbs b/app/components/proposal-list/template.hbs index 87bdbae..713b7f2 100644 --- a/app/components/proposal-list/template.hbs +++ b/app/components/proposal-list/template.hbs @@ -1,9 +1,9 @@ {{#each proposals as |proposal|}} -
  • - ♥ +
  • + ♥ ({{proposal.kind}}) + {{proposal.contributor.name}}: + {{proposal.description}} {{proposal.amount}}₭S - for {{proposal.contributor.name}} - ({{proposal.votesCount}}/{{proposal.votesNeeded}} votes) {{#unless proposal.isExecuted}} diff --git a/app/styles/components/_proposal-list.scss b/app/styles/components/_proposal-list.scss index a35f17c..5a1f01d 100644 --- a/app/styles/components/_proposal-list.scss +++ b/app/styles/components/_proposal-list.scss @@ -8,12 +8,16 @@ ul.proposal-list { padding: 0 1.2rem; line-height: 4.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); } + span { + font-size: inherit; + } + .category { color: $blue; padding-right: 0.2rem; From 32714efeb9fded7b64cc9f0b7c614621eadae7a6 Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Sat, 16 Jun 2018 17:12:53 +0200 Subject: [PATCH 4/6] Improve layout a bit. WIP, because this is not ideal. But now it's readable at least. --- app/components/proposal-list/template.hbs | 22 +++++++++++++--------- app/styles/components/_proposal-list.scss | 22 +++++++++++++++++++--- 2 files changed, 32 insertions(+), 12 deletions(-) diff --git a/app/components/proposal-list/template.hbs b/app/components/proposal-list/template.hbs index 713b7f2..51d8d6e 100644 --- a/app/components/proposal-list/template.hbs +++ b/app/components/proposal-list/template.hbs @@ -1,12 +1,16 @@ {{#each proposals as |proposal|}} -
  • - ♥ ({{proposal.kind}}) - {{proposal.contributor.name}}: - {{proposal.description}} - {{proposal.amount}}₭S - - {{#unless proposal.isExecuted}} - - {{/unless}} +
  • +

    + ♥ ({{proposal.kind}}) + {{proposal.contributor.name}}: + {{proposal.amount}}₭S + ({{proposal.votesCount}}/{{proposal.votesNeeded}} votes) + {{#unless proposal.isExecuted}} + + {{/unless}} +

    +

    + {{proposal.description}} +

    • {{/each}} diff --git a/app/styles/components/_proposal-list.scss b/app/styles/components/_proposal-list.scss index 5a1f01d..e452ecc 100644 --- a/app/styles/components/_proposal-list.scss +++ b/app/styles/components/_proposal-list.scss @@ -4,9 +4,8 @@ ul.proposal-list { list-style: none; li { - // display: block; - padding: 0 1.2rem; - line-height: 4.2rem; + display: block; + 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); @@ -14,10 +13,27 @@ ul.proposal-list { border-top: 1px solid rgba(255,255,255,0.2); } + p { + margin: 0; + font-size: inherit; + line-height: 2rem; + + &.meta { + margin-bottom: 0.5rem; + } + // &.description { + // line-height: 2rem; + // } + } + span { font-size: inherit; } + .description { + line-height: 1.4em; + } + .category { color: $blue; padding-right: 0.2rem; From 5436469128ff242970e3b588a11af5293a2eee52 Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Sun, 17 Jun 2018 15:32:08 +0200 Subject: [PATCH 5/6] Don't show vote count for confirmed contributions --- app/components/proposal-list/template.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/proposal-list/template.hbs b/app/components/proposal-list/template.hbs index 51d8d6e..989f9be 100644 --- a/app/components/proposal-list/template.hbs +++ b/app/components/proposal-list/template.hbs @@ -4,8 +4,8 @@ ♥ ({{proposal.kind}}) {{proposal.contributor.name}}: {{proposal.amount}}₭S - ({{proposal.votesCount}}/{{proposal.votesNeeded}} votes) {{#unless proposal.isExecuted}} + ({{proposal.votesCount}}/{{proposal.votesNeeded}} votes) {{/unless}}

    From c074ccf460968f1d61ad928d18ce20e5fde2a24d Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Sun, 17 Jun 2018 16:15:02 +0200 Subject: [PATCH 6/6] Improve all the things --- app/components/proposal-list/template.hbs | 13 +++-- app/styles/_layout.scss | 10 ++-- app/styles/app.scss | 10 +++- app/styles/components/_proposal-list.scss | 66 +++++++++++++++++++---- app/templates/index.hbs | 47 ++++++++-------- 5 files changed, 102 insertions(+), 44 deletions(-) diff --git a/app/components/proposal-list/template.hbs b/app/components/proposal-list/template.hbs index 989f9be..42e18fe 100644 --- a/app/components/proposal-list/template.hbs +++ b/app/components/proposal-list/template.hbs @@ -1,16 +1,21 @@ {{#each proposals as |proposal|}} -
  • +

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

    +

    {{proposal.amount}}₭S +

    +

    + {{proposal.description}} +

    +

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

    -

    - {{proposal.description}} -

    • {{/each}} diff --git a/app/styles/_layout.scss b/app/styles/_layout.scss index c55fab5..9a8f7af 100644 --- a/app/styles/_layout.scss +++ b/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; } } diff --git a/app/styles/app.scss b/app/styles/app.scss index 30476b4..c04c1b5 100644 --- a/app/styles/app.scss +++ b/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"; diff --git a/app/styles/components/_proposal-list.scss b/app/styles/components/_proposal-list.scss index e452ecc..9edaa6b 100644 --- a/app/styles/components/_proposal-list.scss +++ b/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 { - 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; + } + } + } +} diff --git a/app/templates/index.hbs b/app/templates/index.hbs index 4caf219..bc97449 100644 --- a/app/templates/index.hbs +++ b/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}} -

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

    - {{/if}} {{/if}} @@ -43,29 +36,31 @@
    {{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}}
    + + {{!-- 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}}