Split up landing page for signed in and signed out users, and add new menu

app/assets/stylesheets/application.css.scss

@@ -20,7 +20,3 @@
  */
 @import "bootstrap-sprockets";
 @import "bootstrap";
-
-body {
-  padding: 30px;
-}

app/assets/stylesheets/menu.scss

@@ -0,0 +1,53 @@
+$background-color: #f3f3f3;
+$border-color: #cfcfcf;
+$color: #777;
+
+.menu {
+  width: 100%;
+  height: 70px;
+  background: $background-color;
+  border-bottom: 1px solid $border-color;
+
+  .menu-item {
+    display: inline-block;
+    vertical-align: middle;
+    height: 100%;
+    padding: 20px;
+    color: $color;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  .menu-heading {
+    font-weight: bold;
+  }
+
+  .menu-list {
+    display: inline-block;
+    border-left: 1px solid $border-color;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+
+    .menu-item {
+      border-right: 1px dotted $border-color;
+
+      .badge {
+        display: inline-block;
+        min-width: 10px;
+        padding: 3px 7px;
+        font-size: 12px;
+        font-weight: bold;
+        color: white;
+        line-height: 1;
+        vertical-align: baseline;
+        white-space: nowrap;
+        text-align: center;
+        background-color: $color;
+        border-radius: 10px;
+      }
+    }
+  }
+}

app/views/application/_menu.html.haml

@@ -1,17 +1,19 @@
 .pure-u-1
-  .pure-menu.pure-menu-horizontal
-    = link_to "Tab", root_path, class: "pure-menu-heading pure-menu-link"
-    %ul.pure-menu-list
-      %li.pure-menu-item
-        = link_to current_user.name.capitalize, current_user, class: "pure-menu-link"
+  .menu
+    = link_to 'Tab', root_path, class: 'menu-heading menu-item'
+    .menu-list
+      = link_to 'Transactions', current_user, class: 'menu-item'
+      = link_to user_requests_path(current_user), class: 'menu-item' do
+        Requests
+        %span.badge= current_user.incoming_requests.size
+      = link_to user_notifications_path(current_user), class: 'menu-item' do
+        Notifications
+        %span.badge= current_user.notifications.size
       - if current_user.penning
-          %li.pure-menu-item
-            =link_to "Zeus", User.zeus, class: "pure-menu-link"
-          %li.pure-menu-item
-            = link_to "Requests (#{User.zeus.incoming_requests.size})", user_requests_path(User.zeus), class: 'pure-menu-link'
-          %li.pure-menu-item
-            = link_to "Notifications (#{User.zeus.notifications.size})", user_notifications_path(User.zeus), class: 'pure-menu-link'
-        %li.pure-menu-item
-          = link_to "Requests (#{current_user.incoming_requests.size})", user_requests_path(current_user), class: 'pure-menu-link'
-        %li.pure-menu-item
-          = link_to "Notifications (#{current_user.notifications.size})", user_notifications_path(current_user), class: 'pure-menu-link'
+        = link_to 'Zeus', User.zeus, class: 'menu-item'
+        = link_to user_requests_path(User.zeus), class: 'menu-item' do
+          Zeus Requests
+          %span.badge= User.zeus.incoming_requests.size
+        = link_to user_notifications_path(User.zeus), class: 'menu-item' do
+          Zeus Notifications
+          %span.badge= User.zeus.notifications.size

app/views/pages/landing.html.haml

@@ -1,15 +1,5 @@
 %h1.columns-title Tab
 = javascript_include_tag "//www.google.com/jsapi", "chartkick"
-- unless user_signed_in?
-  .pure-g.landing_columns
-    .pure-u-1.pure-u-md-1-2
-      %h2 Authentication
-      %p Log een keer in en betaal uw schulden!
-      %p= link_to "Log in met Zeus WPI", user_omniauth_authorize_path(:zeuswpi), class: "pure-button pure-button-primary login-button"
-    .pure-u-1.pure-u-md-1-2
-      %h2 Pie of Shame
-      = pie_chart @statistics.shamehash
-- else
 %h2.columns-title Cute Little Statistics
 .pure-g
   .pure-u-1.pure-u-md-1-2.landing-column
@@ -40,4 +30,3 @@
           %tr
             %td.shameful-person= name
             %td.shame-percentage= count
-

app/views/pages/sign_in.html.haml

@@ -0,0 +1,10 @@
+%h1.columns-title Tab
+= javascript_include_tag "//www.google.com/jsapi", "chartkick"
+.pure-g.landing_columns
+  .pure-u-1.pure-u-md-1-2
+    %h2 Authentication
+    %p Log een keer in en betaal uw schulden!
+    %p= link_to "Log in met Zeus WPI", user_omniauth_authorize_path(:zeuswpi), class: "pure-button pure-button-primary login-button"
+  .pure-u-1.pure-u-md-1-2
+    %h2 Pie of Shame
+    = pie_chart @statistics.shamehash