Add main navigation menu, replace intro blurb with full About page

app/components/main-navigation-menu/template.hbs

@@ -0,0 +1,7 @@
+<nav id="main-menu">
+ <ul>
+ <li><LinkTo @route="dashboard">Dashboard</LinkTo></li>
+ <li><LinkTo @route="budget">Budget</LinkTo></li>
+ <li><LinkTo @route="about">About</LinkTo></li>
+ </ul>
+</nav>

app/controllers/application.js

@@ -1,6 +1,6 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 
-export default Controller.extend({
- kredits: service(),
-});
+export default class ApplicationController extends Controller {
+ @service kredits;
+}

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) {

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');
 });

app/routes/about.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class AboutRoute extends Route {
+}

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;
 
- @include media-max(small) {
- padding: 2rem 1rem;
- font-size: 1.5rem;
- }
-
- h2 {
- font-size: inherit;
- margin-bottom: 1em;
- }
+ &.text {
+ h2 {
+ margin: 4rem 0 2rem 0;
 
- p {
- margin-bottom: 1em;
- line-height: 1.5em;
- font-size: 1.2rem;
+  &:first-of-type {
+  margin-top: 0;
+  }
+  }
 
- &: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:

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";

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;
+ }
+ }
+ }
+}

app/styles/components/_topbar.scss

@@ -13,6 +13,7 @@
  h1 {
  display: inline-block;
  text-transform: uppercase;
+ font-weight: bold;
 
  a {
  color: inherit;

app/templates/about.hbs

@@ -0,0 +1,78 @@
+<main id="about">
+ <div id="aside">
+ </div>
+
+ <div id="content">
+ <section class="text">
+ <h2>What is this?</h2>
+ <p>
+ You have found the contribution dashboard and budget management app of the
+ <a href="https://kosmos.org" target="_blank" rel="noreferrer noopener">Kosmos</a>
+ open-source co-operative.
+ </p>
+ <p>
+ 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.
+ </p>
+ <h2>Why?</h2>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+ <p>
+ In addition to open-source grant payouts, all contributors can also propose
+ reimbursements for specific expenses they covered on behalf of the
+ community.
+ </p>
+ <h2>How?</h2>
+ <p>
+ Instead of notaries, lawyers, courts, or banks, we record data and manage
+ certain decisions on a decentralized ledger called
+ <a href="https://rootstock.io/" target="_blank" rel="noreferrer noopener">Rootstock</a>,
+ which is cryptographically tied to the bitcoin timechain.
+ </p>
+ <p>
+ 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.
+ </p>
+ <h2>Kredits</h2>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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 <a href="https://kosmos.org/services/">hosted services</a> for free,
+ or to unlock additional features on otherwise free services.
+ </p>
+ <h2>Getting started</h2>
+ <p>
+ We'd be delighted to welcome you as a new contributor!
+ If you'd like to start collecting kredits for your contributions, you can
+ <LinkTo @route="signup">create a contributor profile</LinkTo> now.
+ </p>
+ <p>
+ Next, you could learn more about
+ <a href="https://community.kosmos.org/t/how-kredits-for-contributions-are-proposed-and-confirmed/176">how kredits are proposed and issued</a>.
+ If you want to dive deeper into how this all works, head over to the
+ <a href="https://wiki.kosmos.org/Kredits">Kredits documentation</a>
+ page on our (soon to be phased out) wiki.
+ </p>
+ </section>
+ </div>
+
+ <div id="empty">
+ </div>
+</main>

app/templates/application.hbs

@@ -1,6 +1,8 @@
 <header id="topbar">
- <h1><LinkTo @route="dashboard">Kosmos Kredits</LinkTo></h1>
+ <h1><LinkTo @route="dashboard">Kredits</LinkTo></h1>
  <TopbarAccountPanel />
 </header>
 
+<MainNavigationMenu />
+
 {{outlet}}

app/templates/budget.hbs

@@ -45,7 +45,7 @@
  {{#if this.reimbursementsConfirmed}}
  <section id="expenses-confirmed">
  <header class="with-nav">
- <h2>Confirmed Expenses</h2>
+ <h2>Confirmed Reimbursements</h2>
  <nav>
  <LinkTo @route="reimbursements.new" @title="Submit a reimbursement" class="button small green">add</LinkTo>
  </nav>

app/templates/dashboard.hbs

@@ -1,19 +1,3 @@
-{{#if this.showIntroText}}
- <div id="intro" class={{if this.showDetailsPane "with-details"}}>
- <h2>
- Welcome to the contribution dashboard of the
- <a href="https://kosmos.org" target="_blank" rel="noreferrer noopener">Kosmos</a> project!
- </h2>
- <p>
- If you want to learn more about what the numbers mean and how this works,
- check out the
- <a href="https://wiki.kosmos.org/Kredits" target="_blank" rel="noreferrer noopener">Kredits documentation</a>.
- If you want to start earning kredits for your contributions,
- <LinkTo @route="signup">create a contributor profile</LinkTo>.
- </p>
- </div>
-{{/if}}
-
 <main id="dashboard" class={{if this.showDetailsPane "with-details"}}>
 
  <div id="stats">
@@ -66,7 +50,7 @@
  </h2>
  <nav>
  <button type="button"
  onclick={{action "toggleQuickFilterUnconfirmed"}}
  class="small {{if this.showQuickFilterUnconfirmed "active"}}">
  filter
  </button>
@@ -80,7 +64,7 @@
  <div class="content">
  {{!-- TODO: We need a better naming for kredits.hasAccounts --}}
  <ContributionList @contributions={{this.contributionsUnconfirmedSorted}}
  @vetoContribution={{action "vetoContribution"}}
  @contractInteractionEnabled={{this.kredits.hasAccounts}}
  @selectedContributionId={{this.selectedContributionId}}
  @showQuickFilter={{this.showQuickFilterUnconfirmed}}
@@ -95,7 +79,7 @@
  <h2>Confirmed Contributions</h2>
  <nav>
  <button type="button"
  onclick={{action "toggleQuickFilterConfirmed"}}
  class="small {{if this.showQuickFilterConfirmed "active"}}">
  filter
  </button>
@@ -103,7 +87,7 @@
  </header>
  <div class="content">
  <ContributionList @contributions={{this.contributionsConfirmedSorted}}
  @vetoContribution={{action "vetoContribution"}}
  @selectedContributionId={{this.selectedContributionId}}
  @showQuickFilter={{this.showQuickFilterConfirmed}} />
  </div>