Merge pull request #166 from 67P/feature/welcome_text

Add intro, fix topbar on mobile, fix filter button

app/components/topbar-account-panel/template.hbs

@@ -8,7 +8,7 @@
         <span class="core-flag">(core)</span>
       {{/if}}
     {{else}}
-      Anonymous
+      <span class="anonymous">Anonymous</span>
       <button {{action "signup"}} class="small">Sign up</button>
       {{#if showConnectButton}}
         <button {{action "connectAccount"}} class="small green">Connect account</button>

app/controllers/dashboard.js

@@ -33,6 +33,10 @@ export default Controller.extend({
   showQuickFilterUnconfirmed: false,
   showQuickFilterConfirmed: false,
 
+  showIntroText: computed('kredits.{hasAccounts,currentUser}', function(){
+    return (!this.kredits.hasAccounts || !this.kredits.currentUser);
+  }),
+
   actions: {
 
     vetoContribution (contributionId) {

app/styles/_colors.scss

@@ -8,8 +8,3 @@ $red: #fb6868;
 $primary-color: $blue;
 
 $body-text-color: #fff;
-
-#topbar {
-  background-color: rgba(255, 0, 255, .2);
-}
-

app/styles/_layout.scss

@@ -61,6 +61,40 @@ 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.4rem;
+  }
+
+  h2 {
+    font-size: inherit;
+    margin-bottom: 1em;
+  }
+
+  p {
+    margin-bottom: 1em;
+    line-height: 1.5em;
+    font-size: 1.2rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    text-decoration: none;
+
+    &:hover, &:active {
+      text-decoration: underline;
+    }
+  }
+}
+
 @media (min-width: 550px) {
   main {
     &#dashboard {

app/styles/components/_topbar-account-panel.scss

@@ -8,4 +8,10 @@ header#topbar section#user-account {
     margin-left: 0.6rem;
   }
 
+  @include media-max(small) {
+    .anonymous {
+      display: none;
+    }
+  }
+
 }

app/templates/dashboard.hbs

@@ -1,3 +1,19 @@
+{{#if showIntroText}}
+  <div id="intro">
+    <h2>
+      Welcome to the contribution dashboard of the
+      <a href="https://kosmos.org" target="_blank" rel="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="noopener">Kredits documentation</a>.
+      If you want to start earning kredits for your contributions,
+      {{link-to "create a contributor profile" "signup"}}.
+    </p>
+  </div>
+{{/if}}
+
 <main id="dashboard" class={{if showDetailsPane "with-details"}}>
 
   <div id="stats">
@@ -41,12 +57,12 @@
       <section id="contributions-unconfirmed">
         <header class="with-nav">
           <h2>Latest Contributions</h2>
-          {{#if kredits.hasAccounts}}
           <nav>
             <button {{action "toggleQuickFilterUnconfirmed"}} class="small {{if showQuickFilterUnconfirmed "active"}}">filter</button>
+            {{#if kredits.hasAccounts}}
               {{link-to "add" "contributions.new" title="Submit a contribution" class="button small green"}}
-            </nav>
             {{/if}}
+          </nav>
         </header>
         <div class="content">
           {{!-- TODO: We need a better naming for kredits.hasAccounts --}}