Merge pull request 'Add main navigation bar' (#20) from feature/main_nav into master

Reviewed-on: #20

app/assets/stylesheets/_variables.scss

@@ -0,0 +1,13 @@
+$content-width: 800px;
+$content-max-width: 100%;
+
+$text-color-body: #222;
+$text-color-discreet: #888;
+
+$background-color-notice: #efffc4;
+$background-color-alert: #fff4c2;
+
+$color-blue: #0d4f99;
+$color-purple: #8955a0;
+$color-red-bright: #c00;
+$color-red-dark: #990c0e;

app/assets/stylesheets/admin.scss

@@ -0,0 +1,22 @@
+@import "variables";
+
+body#admin-panel {
+  #wrapper {
+    > header {
+      background: $color-red-bright;
+      background: linear-gradient(35deg, $color-purple 0, $color-red-dark 100%);
+    }
+  }
+
+  #main-nav {
+    ul {
+      li {
+        a {
+          &.active {
+            border-bottom: 2px solid $color-red-bright;
+          }
+        }
+      }
+    }
+  }
+}

app/assets/stylesheets/fonts.scss

@@ -1,3 +1,5 @@
+@import "variables";
+
 @font-face {
   font-family: 'Raleway';
   src: url('/fonts/raleway-light.woff') format('woff2');
@@ -8,6 +10,7 @@
 body {
   font-family: "Open Sans", Helvetica, Arial, sans-serif;
   font-weight: 400;
+  color: $text-color-body;
 }
 
 h1, h2, h3 {

app/assets/stylesheets/layout.scss

@@ -1,11 +1,6 @@
+@import "variables";
 @import "mediaqueries";
 
-$content-width: 800px;
-$content-max-width: 100%;
-
-body {
-}
-
 #wrapper {
   width: 100%;
   text-align: center;
@@ -14,8 +9,8 @@ body {
     margin: 0 auto;
     padding: 4rem 0;
     text-align: center;
-    background: #0d4f99;
+    background: $color-blue;
-    background: linear-gradient(35deg, #8955a0 0, #0d4f99 100%);
+    background: linear-gradient(35deg, $color-purple 0, $color-blue 100%);
 
     @include media-max(small) {
       padding: 3rem 0;
@@ -77,18 +72,18 @@ body {
   padding: 2rem 0;
 
   &.notice {
-    background: #efffc4;
+    background: $background-color-notice;
   }
 
   &.alert {
-    background: #fff4c2;
+    background: $background-color-alert;
   }
 }
 
 main {
   width: $content-width;
   max-width: $content-max-width;
-  margin: 4rem auto;
+  margin: 4rem auto 6rem auto;
   text-align: left;
 
   @include media-max(medium) {
@@ -135,8 +130,8 @@ main {
 
   section {
     border-bottom: 1px dotted #ccc;
-    padding-bottom: 4rem;
+    padding-bottom: 3rem;
-    margin-bottom: 4rem;
+    margin-bottom: 3rem;
 
     @include media-max(small) {
       padding-bottom: 3rem;
@@ -169,9 +164,13 @@ main {
 
     .grid-item {
       p {
-        color: #888;
+        color: $text-color-discreet;
         font-size: 0.85rem;
       }
     }
   }
 }
+
+.text-centered {
+  text-align: center;
+}

app/assets/stylesheets/main_nav.scss

@@ -0,0 +1,51 @@
+@import "variables";
+@import "mediaqueries";
+
+#main-nav {
+  width: 100%;
+  text-align: center;
+  background-color: #efefef;
+
+  .wrapper {
+    width: $content-width;
+    max-width: $content-max-width;
+    margin: 0 auto;
+  }
+
+  ul {
+    @include media-max(large) {
+      display: grid;
+      grid-template-columns: repeat(1fr);
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+
+    li {
+      @include media-min(large) {
+        display: inline;
+      }
+
+      @include media-max(large) {
+        display: block;
+      }
+
+      a {
+        display: inline-block;
+        padding: 1.5rem 2rem;
+        text-decoration: none;
+        color: $text-color-discreet;
+
+        @include media-max(large) {
+          display: block;
+          text-align: center;
+          padding-left: 0;
+          padding-right: 0;
+        }
+
+        &.active {
+          color: $text-color-body;
+          border-bottom: 2px solid #ffd000;
+        }
+      }
+    }
+  }
+}

app/controllers/admin/base_controller.rb

@@ -3,4 +3,6 @@ class Admin::BaseController < ApplicationController
   before_action :authenticate_user!
   before_action :authorize_admin
 
+  layout "admin"
+
 end

app/controllers/admin/dashboard_controller.rb

@@ -1,4 +1,5 @@
 class Admin::DashboardController < Admin::BaseController
   def index
+    @current_section = :dashboard
   end
 end

app/controllers/admin/donations_controller.rb

@@ -1,5 +1,6 @@
 class Admin::DonationsController < Admin::BaseController
   before_action :set_donation, only: [:show, :edit, :update, :destroy]
+  before_action :set_current_section, only: [:index, :show, :new, :edit]
 
   # GET /donations
   # GET /donations.json
@@ -71,4 +72,8 @@ class Admin::DonationsController < Admin::BaseController
     def donation_params
       params.require(:donation).permit(:user_id, :amount_sats, :amount_eur, :amount_usd, :public_name, :paid_at)
     end
+
+    def set_current_section
+      @current_section = :donations
+    end
 end

app/controllers/admin/ldap_users_controller.rb

@@ -1,4 +1,6 @@
 class Admin::LdapUsersController < Admin::BaseController
+  before_action :set_current_section
+
   def index
     attributes = %w{dn cn uid mail admin}
     filter = Net::LDAP::Filter.eq("uid", "*")
@@ -38,4 +40,8 @@ class Admin::LdapUsersController < Admin::BaseController
   def ldap_config
     ldap_config ||= YAML.load(ERB.new(File.read("#{Rails.root}/config/ldap.yml")).result)[Rails.env]
   end
+
+  def set_current_section
+    @current_section = :ldap_users
+  end
 end

app/controllers/dashboard_controller.rb

@@ -2,5 +2,6 @@ class DashboardController < ApplicationController
   before_action :require_user_signed_in
 
   def index
+    @current_section = :dashboard
   end
 end

app/controllers/donations_controller.rb

@@ -5,5 +5,6 @@ class DonationsController < ApplicationController
   # GET /donations.json
   def index
     @donations = current_user.donations.completed
+    @current_section = :contributions
   end
 end

app/controllers/invitations_controller.rb

@@ -8,6 +8,7 @@ class InvitationsController < ApplicationController
   def index
     @invitations_unused = current_user.invitations.unused
     @invitations_used   = current_user.invitations.used
+    @current_section = :invitations
   end
 
   # GET /invitations/a-random-invitation-token

app/views/admin/dashboard/index.html.erb

@@ -1,8 +1,3 @@
-<h2>Admin Panel</h2>
+<p class="text-centered">
-<p>
+  With great power comes great responsibility.
-  Ohai there, admin human.
 </p>
-<ul>
-  <li><%= link_to 'LDAP users', admin_ldap_users_path %></li>
-  <li><%= link_to 'Donations', admin_donations_path %></li>
-</ul>

app/views/invitations/index.html.erb

@@ -24,23 +24,25 @@
 </section>
 
 <% if @invitations_used.any? %>
-  <h3>Accepted Invitations</h3>
+  <section>
-  <table>
+    <h3>Accepted Invitations</h3>
-    <thead>
+    <table>
-      <tr>
+      <thead>
-        <th>URL</th>
-        <th>Accepted</th>
-        <th>Invited user</th>
-      </tr>
-    </thead>
-    <tbody>
-      <% @invitations_used.each do |invitation| %>
         <tr>
-          <td><%= invitation_url(invitation.token) %></td>
+          <th>URL</th>
-          <td><%= invitation.used_at.strftime("%Y-%m-%d") %></td>
+          <th>Accepted</th>
-          <td><%= User.find(invitation.invited_user_id).address %></td>
+          <th>Invited user</th>
         </tr>
-      <% end %>
+      </thead>
-    </tbody>
+      <tbody>
-  </table>
+        <% @invitations_used.each do |invitation| %>
+          <tr>
+            <td class="overflow-ellipsis"><%= invitation_url(invitation.token) %></td>
+            <td><%= invitation.used_at.strftime("%Y-%m-%d") %></td>
+            <td><%= User.find(invitation.invited_user_id).address %></td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </section>
 <% end %>

app/views/layouts/admin.html.erb

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Admin Panel | Kosmos Accounts</title>
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+  </head>
+
+  <body id="admin-panel">
+    <div id="wrapper">
+      <header>
+        <h1>
+          <span class ="project-name">Kosmos</span>
+          <span class ="site-name">Akkounts</span>
+          <span class="beta"><span class="bolt">⚡</span> beta</span>
+        </h1>
+        <% if user_signed_in? %>
+          <p class="current-user">
+            Signed in as <strong><%= current_user.cn %>@kosmos.org</strong>.
+            <%= link_to "Log out", destroy_user_session_path, method: :delete %>
+          </p>
+        <% end %>
+      </header>
+
+      <% if user_signed_in? && current_user.confirmed? %>
+        <%= render partial: 'shared/admin_nav' %>
+      <% end %>
+
+      <% flash.each do |type, msg| %>
+        <div class="flash-msg <%= type %>">
+          <p><%= msg %></p>
+        </div>
+      <% end %>
+
+      <main>
+        <%= yield %>
+      </main>
+    </div>
+  </body>
+</html>

app/views/layouts/application.html.erb

@@ -27,6 +27,10 @@
         <% end %>
       </header>
 
+      <% if user_signed_in? && current_user.confirmed? %>
+        <%= render partial: 'shared/main_nav' %>
+      <% end %>
+
       <% flash.each do |type, msg| %>
         <div class="flash-msg <%= type %>">
           <p><%= msg %></p>

app/views/shared/_admin_nav.html.erb

@@ -0,0 +1,18 @@
+<nav id="main-nav">
+  <div class="wrapper">
+    <ul class="pages">
+      <li>
+        <%= link_to "Dashboard", admin_root_path,
+             class: @current_section == :dashboard ? "active" : nil %>
+      </li>
+      <li>
+        <%= link_to "Donations", admin_donations_path,
+              class: @current_section == :donations ? "active" : nil %>
+      </li>
+      <li>
+        <%= link_to "LDAP Users", admin_ldap_users_path,
+              class: @current_section == :ldap_users ? "active" : nil %>
+      </li>
+    </ul>
+  </div>
+</nav>

app/views/shared/_main_nav.html.erb

@@ -0,0 +1,18 @@
+<nav id="main-nav">
+  <div class="wrapper">
+    <ul class="pages">
+      <li>
+        <%= link_to "Services", root_path,
+             class: @current_section == :dashboard ? "active" : nil %>
+      </li>
+      <li>
+        <%= link_to "Donations", donations_path,
+              class: @current_section == :contributions ? "active" : nil %>
+      </li>
+      <li>
+        <%= link_to "Invitations", invitations_path,
+              class: @current_section == :invitations ? "active" : nil %>
+      </li>
+    </ul>
+  </div>
+</nav>

spec/features/admin/dashboard_spec.rb

@@ -10,6 +10,6 @@ RSpec.describe 'Admin dashboard', type: :feature do
 
   scenario 'View dashboard' do
     visit admin_root_path
-    expect(page).to have_content('Admin Panel')
+    expect(page).to have_content('great power')
   end
 end