Merge pull request #216 from 67P/feature/main_nav

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