From 3679412b3c13d2cbd23cc0784979ac9e243dbf85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A2u=20Cao?= Date: Wed, 30 Aug 2023 17:17:39 +0200 Subject: [PATCH] Add main navigation menu, replace intro blurb with full About page --- .../main-navigation-menu/template.hbs | 7 ++ app/controllers/dashboard.js | 4 - app/router.js | 4 +- app/routes/about.js | 4 + app/styles/_layout.scss | 56 +++++-------- app/styles/app.scss | 1 + .../components/_main-navigation-menu.scss | 30 +++++++ app/styles/components/_topbar.scss | 1 + app/templates/about.hbs | 78 +++++++++++++++++++ app/templates/application.hbs | 4 +- app/templates/dashboard.hbs | 16 ---- 11 files changed, 146 insertions(+), 59 deletions(-) create mode 100644 app/components/main-navigation-menu/template.hbs create mode 100644 app/routes/about.js create mode 100644 app/styles/components/_main-navigation-menu.scss create mode 100644 app/templates/about.hbs diff --git a/app/components/main-navigation-menu/template.hbs b/app/components/main-navigation-menu/template.hbs new file mode 100644 index 0000000..9a5986a --- /dev/null +++ b/app/components/main-navigation-menu/template.hbs @@ -0,0 +1,7 @@ + diff --git a/app/controllers/dashboard.js b/app/controllers/dashboard.js index eabd50e..0de990e 100644 --- a/app/controllers/dashboard.js +++ b/app/controllers/dashboard.js @@ -35,10 +35,6 @@ export default Controller.extend({ showFullContributionSync: gt('kredits.missingHistoricContributionsCount', 0), - showIntroText: computed('kredits.{hasAccounts,currentUser}', function(){ - return (!this.kredits.hasAccounts || !this.kredits.currentUser); - }), - actions: { vetoContribution (contributionId) { diff --git a/app/router.js b/app/router.js index b26ef15..416cccb 100644 --- a/app/router.js +++ b/app/router.js @@ -11,7 +11,6 @@ Router.map(function() { this.route('contributors', function() { this.route('show', { path: ':id' }); }); - this.route('contributions', function() { this.route('show', { path: ':id' }); }); @@ -31,11 +30,10 @@ Router.map(function() { }); this.route('budget', function() { this.route('expenses'); - this.route('reimbursements', function() {}); }); - this.route('reimbursements', function() { this.route('new'); }); + this.route('about'); }); diff --git a/app/routes/about.js b/app/routes/about.js new file mode 100644 index 0000000..9e0e070 --- /dev/null +++ b/app/routes/about.js @@ -0,0 +1,4 @@ +import Route from '@ember/routing/route'; + +export default class AboutRoute extends Route { +} diff --git a/app/styles/_layout.scss b/app/styles/_layout.scss index 5855c79..e65c4ee 100644 --- a/app/styles/_layout.scss +++ b/app/styles/_layout.scss @@ -1,3 +1,7 @@ +body { + margin-bottom: 10rem; +} + main { padding: 1rem 2rem; @@ -14,7 +18,7 @@ main { "contributions"; } - &#budget { + &#budget, &#about { width: 100%; display: grid; grid-row-gap: 2rem; @@ -56,13 +60,12 @@ main { &.text-lg { p { - font-size: 1.2rem; - margin-bottom: 1em; - line-height: 1.5em; + font-size: 1.35rem; + margin-bottom: 2rem; + line-height: 150%; } } - // TODO Remove after switch to Tailwind CSS &.text-center { text-align: center; } @@ -74,40 +77,23 @@ main { } } } - } -} -#intro { - padding: 2rem; - background-color: rgba(0,0,0,.2); - font-size: 1.6rem; + &.text { + h2 { + margin: 4rem 0 2rem 0; - @include media-max(small) { - padding: 2rem 1rem; - font-size: 1.5rem; - } + &:first-of-type { + margin-top: 0; + } + } - h2 { - font-size: inherit; - margin-bottom: 1em; - } - - p { - margin-bottom: 1em; - line-height: 1.5em; - font-size: 1.2rem; - - &:last-child { - margin-bottom: 0; + p { + font-size: 1.35rem; + margin-bottom: 2rem; + line-height: 150%; + } } - } - a { - text-decoration: none; - - &:hover, &:active { - text-decoration: underline; - } } } @@ -128,7 +114,7 @@ main { } } - &#budget { + &#budget, &#about { grid-column-gap: 3rem; grid-template-columns: 2fr 4fr 2fr; grid-template-areas: diff --git a/app/styles/app.scss b/app/styles/app.scss index 7ab0be3..3697c22 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -98,6 +98,7 @@ section { @import "components/contributor-profile"; @import "components/expense-list"; @import "components/external-account-link"; +@import "components/main-navigation-menu"; @import "components/loading-spinner"; @import "components/reimbursement-list"; @import "components/topbar"; diff --git a/app/styles/components/_main-navigation-menu.scss b/app/styles/components/_main-navigation-menu.scss new file mode 100644 index 0000000..4114070 --- /dev/null +++ b/app/styles/components/_main-navigation-menu.scss @@ -0,0 +1,30 @@ +nav#main-menu { + padding: 2rem; + background-color: rgba(0,0,0,.2); + + ul { + list-style: none; + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + gap: 3rem; + font-size: 1.5rem; + + @include media-max(small) { + justify-content: center; + font-size: 1.2rem; + } + } + + li { + a { + text-decoration: none; + color: #fff; + + &.active, &:hover { + color: $yellow; + } + } + } +} diff --git a/app/styles/components/_topbar.scss b/app/styles/components/_topbar.scss index 2c76be5..a13c804 100644 --- a/app/styles/components/_topbar.scss +++ b/app/styles/components/_topbar.scss @@ -13,6 +13,7 @@ h1 { display: inline-block; text-transform: uppercase; + font-weight: bold; a { color: inherit; diff --git a/app/templates/about.hbs b/app/templates/about.hbs new file mode 100644 index 0000000..a497b43 --- /dev/null +++ b/app/templates/about.hbs @@ -0,0 +1,78 @@ +
+
+
+ +
+
+

What is this?

+

+ You have found the contribution dashboard and budget management app of the + Kosmos + open-source co-operative. +

+

+ We use this app to track what people contribute to all parts of our + projects (not just code), as well as for managing our community's budget. +

+

Why?

+

+ We are trying out a new form of co-operative, native to the Internet, + creating and sharing digital resources the same way traditional + co-operatives share physical ones. +

+

+ By knowing roughly how much people contribute, we are able to reward + co-operative members who contribute their time with money contributed + by the ones who don't. +

+

+ In addition to open-source grant payouts, all contributors can also propose + reimbursements for specific expenses they covered on behalf of the + community. +

+

How?

+

+ Instead of notaries, lawyers, courts, or banks, we record data and manage + certain decisions on a decentralized ledger called + Rootstock, + which is cryptographically tied to the bitcoin timechain. +

+

+ By doing this, we can ensure community control over the budget, as well as + full transparency and verifiability of everything that happens. It also + allows us to quickly, cheaply, and reliably send our open-source grants to + anyone who's contributing, no matter where they are on this beautiful + planet. +

+

Kredits

+

+ All contributions are rewarded with so-called kredits. They are both + credits in the traditional sense of public attribution, as well as a + measure of how much and how regularly someone has added value to the + community and its products and services. +

+

+ Kredits are considered for example for grant payouts, as well as + permissions for certain actions like vetos or votes. They may also be used + to access hosted services for free, + or to unlock additional features on otherwise free services. +

+

Getting started

+

+ We'd be delighted to welcome you as a new contributor! + If you'd like to start collecting kredits for your contributions, you can + create a contributor profile now. +

+

+ Next, you could learn more about + how kredits are proposed and issued. + If you want to dive deeper into how this all works, head over to the + Kredits documentation + page on our (soon to be phased out) wiki. +

+
+
+ +
+
+
\ No newline at end of file diff --git a/app/templates/application.hbs b/app/templates/application.hbs index e4b661c..bab7164 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -1,6 +1,8 @@
-

Kosmos Kredits

+

Kredits

+ + {{outlet}} diff --git a/app/templates/dashboard.hbs b/app/templates/dashboard.hbs index be6609b..4f050af 100644 --- a/app/templates/dashboard.hbs +++ b/app/templates/dashboard.hbs @@ -1,19 +1,3 @@ -{{#if this.showIntroText}} -
-

- Welcome to the contribution dashboard of the - Kosmos project! -

-

- If you want to learn more about what the numbers mean and how this works, - check out the - Kredits documentation. - If you want to start earning kredits for your contributions, - create a contributor profile. -

-
-{{/if}} -