diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index 1dd0534..594e084 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -20,7 +20,3 @@ */ @import "bootstrap-sprockets"; @import "bootstrap"; - -body { - padding: 30px; -} diff --git a/app/assets/stylesheets/menu.scss b/app/assets/stylesheets/menu.scss new file mode 100644 index 0000000..a401ae6 --- /dev/null +++ b/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; + } + } + } +} diff --git a/app/views/application/_menu.html.haml b/app/views/application/_menu.html.haml index 09fe0ac..19cfb9b 100644 --- a/app/views/application/_menu.html.haml +++ b/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" - - 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' + .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 + = 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 diff --git a/app/views/pages/landing.html.haml b/app/views/pages/landing.html.haml index 37d0477..780cfff 100644 --- a/app/views/pages/landing.html.haml +++ b/app/views/pages/landing.html.haml @@ -1,43 +1,32 @@ %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 - %h3.columns-title Pie of Shame - = pie_chart @statistics.shamehash - %h3.columns-title Table of Shame - %table.pure-table.full-table - %thead - %th Shame on - %th Contribution to Zeus' lack of money - %tbody - - @statistics.shameful_users.each do |user| - %tr - %td.shameful-person= user.name - // Won't divide by zero because there won't be any users with - // a shameful debt if the total debt is zero. - %td.shame-percentage= "#{-100 * user.balance / @statistics.total_debt}%" - .pure-u-1.pure-u-md-1-2.landing-column - %h3.columns-title Distribution of Debt Sources - = pie_chart @statistics.by_issuer - %h3.columns-title Top Debt Creators - %table.pure-table.full-table - %thead - %th Issuer - %th Number of Transactions issued - %tbody - - @statistics.creation_counts.each do |name, count| - %tr - %td.shameful-person= name - %td.shame-percentage= count - +%h2.columns-title Cute Little Statistics +.pure-g + .pure-u-1.pure-u-md-1-2.landing-column + %h3.columns-title Pie of Shame + = pie_chart @statistics.shamehash + %h3.columns-title Table of Shame + %table.pure-table.full-table + %thead + %th Shame on + %th Contribution to Zeus' lack of money + %tbody + - @statistics.shameful_users.each do |user| + %tr + %td.shameful-person= user.name + // Won't divide by zero because there won't be any users with + // a shameful debt if the total debt is zero. + %td.shame-percentage= "#{-100 * user.balance / @statistics.total_debt}%" + .pure-u-1.pure-u-md-1-2.landing-column + %h3.columns-title Distribution of Debt Sources + = pie_chart @statistics.by_issuer + %h3.columns-title Top Debt Creators + %table.pure-table.full-table + %thead + %th Issuer + %th Number of Transactions issued + %tbody + - @statistics.creation_counts.each do |name, count| + %tr + %td.shameful-person= name + %td.shame-percentage= count diff --git a/app/views/pages/sign_in.html.haml b/app/views/pages/sign_in.html.haml new file mode 100644 index 0000000..2795a68 --- /dev/null +++ b/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