kredits/kredits-web
9
0
Fork 0
Code Issues 22 Pull Requests 1 Actions Releases 18 Activity

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

Browse Source
This commit is contained in:
Râu Cao
2023-08-30 17:17:39 +02:00
parent ea15e69d79
commit 3679412b3c
11 changed files with 146 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/main-navigation-menu/template.hbs
+7
View File
@@ -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/dashboard.js
-4
View File
@@ -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
+1 -3
View File
@@ -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
+4
View File
@@ -0,0 +1,4 @@
import Route from '@ember/routing/route';
export default class AboutRoute extends Route {
}
app/styles/_layout.scss
+21 -35
View File
@@ -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:
app/styles/app.scss
+1
View File
@@ -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
+30
View File
@@ -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
+1
View File
@@ -13,6 +13,7 @@
h1 {
display: inline-block;
text-transform: uppercase;
font-weight: bold;
a {
color: inherit;
app/templates/about.hbs
+78
View File
@@ -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
+3 -1
View File
@@ -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/dashboard.hbs
-16
View File
@@ -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">