everypolitician · chrismytton · Jun 30, 2016 · Jun 21, 2016 · Jun 21, 2016 · Jun 23, 2016
diff --git a/app.rb b/app.rb
@@ -6,6 +6,7 @@
 require 'tilt/sass'
 require 'active_support/core_ext'
 require 'open-uri'
+require 'json'
 require 'csv'
 
 $LOAD_PATH << File.expand_path('../lib', __FILE__)
@@ -167,6 +168,16 @@
   erb :term
 end
 
+get '/reports/:country' do
+  redirect to('/login') unless current_user
+  @country = Everypolitician.country(slug: params[:country])
+  stats_raw = JSON.parse(open('https://everypolitician.github.io/gender-balance-country-stats/stats.json').read, symbolize_names: true)
+  stats = Hash[stats_raw.map { |c| [c[:slug], c] }]
+  @country_stats = stats[params[:country]]
+  @legislature_stats = Hash[@country_stats[:legislatures].map {|l| [l[:slug], l]}]
+  erb :report, :layout => :layout_page
+end
+
 get '/_stats' do
   @players = Vote.join(:users, id: :user_id).group_and_count(:users__id)
   erb :stats

diff --git a/public/js/main.js b/public/js/main.js
@@ -316,4 +316,57 @@ $(function(){
     ga('send', 'event', 'filterElements', 'focus', label);
   });
 
+  $('[data-scroll-to-id]').on('click', function(e){
+    e.preventDefault();
+
+    if( this.hasAttribute('href') ){
+      var $target = $($(this).attr('href'));
+    } else {
+      var $target = $('#' + $(this).attr('data-scroll-to-id'));
+    }
+
+    $('html, body').animate({
+      scrollTop: $target.offset().top
+    }, 250);
+  });
+
+  // Prototypes that should be replaced eventually with real code.
+  $('[data-display-by-term]').on('click', function(){
+    var $report = $(this).parents('.report');
+    var $reportList = $(this).parents('.report-list');
+    id = '#terms-' + $report.attr('id');
+    var $terms = $(this).parents('.page-section').find(id);
+
+    var wasAlreadyOpen = $report.next('.report-list--child').length;
+
+    $reportList.find('.report-list--child').slideUp(100, function(){
+      $(this).remove();
+    });
+
+    if( ! wasAlreadyOpen ){
+      var $clone = $terms.clone().addClass('report-list--child').removeClass('report-list--hidden');
+      $clone.find('.report__action').remove();
+      $clone.hide().insertAfter($report).slideDown(100);
+    }
+  });
+
+  $('[data-display-by-group]').on('click', function(){
+    var $report = $(this).parents('.report');
+    var $reportList = $(this).parents('.report-list');
+    id = '#parties-' + $report.attr('id');
+    var $groups = $(this).parents('.page-section').find(id);
+
+    var wasAlreadyOpen = $report.next('.report-list--child').length;
+
+    $reportList.find('.report-list--child').slideUp(100, function(){
+      $(this).remove();
+    });
+
+    if( ! wasAlreadyOpen ){
+      var $clone = $groups.clone().addClass('report-list--child').removeClass('report-list--hidden');
+      $clone.find('.report__action').remove();
+      $clone.hide().insertAfter($report).slideDown(100);
+    }
+  });
+
 });
diff --git a/views/layout_page.erb b/views/layout_page.erb
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Gender Balance</title>
+
+        <meta property="og:title" content="What’s the Gender Balance of world politics? Help us find out.">
+        <meta property="og:url" content="http://www.gender-balance.org">
+        <meta property="og:site_name" content="Gender Balance">
+        <meta property="og:type" content="website">
+        <meta property="og:description" content="By playing this simple game, you can help uncover the true gender balance across individual parliaments, and the world. Swipe left, right, up, or down, and work your way to the top of our leaderboard!">
+        <meta property="og:image" content="<%= request.base_url %>/banner.jpg">
+        <meta property="og:image:width" content="1200">
+        <meta property="og:image:height" content="630">
+
+        <meta name="twitter:card" content="summary">
+        <meta name="twitter:site" content="@mysociety">
+        <meta name="twitter:title" content="Play Gender Balance online">
+        <meta name="twitter:description" content="By playing this simple game, you can help uncover the true gender balance across individual parliaments, and the world. Swipe left, right, up, or down, and work your way to the top of our leaderboard!">
+        <meta name="twitter:image" content="<%= request.base_url %>/banner.jpg">
+        <meta name="twitter:image:width" content="1200">
+        <meta name="twitter:image:height" content="630">
+
+        <link href="https://fonts.googleapis.com/css?family=Roboto:400,900,700,500,300,400italic" rel="stylesheet" type="text/css">
+        <link href="<%= url '/main.css' %>" rel="stylesheet">
+        <!--[if lt IE 9]>
+            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+        <![endif]-->
+        <script src="/js/jquery-1.11.3.min.js"></script>
+        <script src="/js/jquery.transform2d.js"></script>
+        <script src="/js/jquery.cardswipe.js"></script>
+        <script src="/js/main.js"></script>
+        <script>
+          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+          })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+          ga('create', 'UA-660910-35', 'auto');
+          ga('send', 'pageview');
+        </script>
+    </head>
+    <body class="page <%= yield_content :body_class %>">
+        <div class="app-messages">
+            <%= erb :flash %>
+        </div>
+        <div class="page-header">
+            <div class="container">
+                <%= yield_content :back_button %>
+                <h1>Gender Balance</h1>
+                <%= yield_content :undo_button %>
+            </div>
+        </div>
+        <div class="page-content">
+            <%= yield %>
+        </div>
+    </body>
+</html>
diff --git a/views/report.erb b/views/report.erb
@@ -0,0 +1,136 @@
+<% content_for :body_class do %>report-page<% end %>
+
+<% content_for :back_button do %>
+    <a class="page-header__back" href="/countries"><i class="fa fa-chevron-left"></i> Countries</a>
+<% end %>
+
+<div class="page-section page-section--blue">
+    <div class="container">
+
+        <% unless params[:nobanner] %>
+        <div class="alert alert--info" role="alert">
+            <p><b>Under construction</b>: these stats may be incorrect, please do not share or publish until this notice is removed.</p>
+        </div>
+        <% end %>
+
+        <h1 class="page-title"><%= @country[:country] %></h1>
+
+        <p class="report-actions">
+            <a href="<%= url("/countries/#{params[:country]}") %>" class="button button--small">Play this country!</a>
+            <a href="http://everypolitician.org/<%= params[:country].downcase %>/download.html" class="button button--small">Download data</a>
+        </p>
+
+        <div class="report-legislatures">
+            <% @country.legislatures.each_slice(2) do |legislatures| %>
+            <div class="row">
+                <% legislatures.each do |legislature| %>
+                <%
+                    stats = @legislature_stats[legislature.slug][:totals]
+                    total = stats[:overall][:total].to_f
+                    male = stats[:overall][:male].to_f
+                    female = stats[:overall][:female].to_f
+                    total = male + female
+                %>
+                <div class="col-sm-6">
+
+                    <a class="list__item country" href="#<%= legislature.slug %>" data-scroll-to-id>
+                        <h3 class="country__name"><%= legislature.name %></h3>
+                        <div class="country__progress">
+                            <p class="country__progress__intro">Known gender balance for <%= legislature.name %>:</p>
+                            <div class="progress-bar progress-bar--gendered progress-bar--labelled">
+                                <div class="progress-bar__males" style="width: <%= male / total * 100 %>%">
+                                    <span class="progress-bar__label"><%= male.to_i %> <%= male.to_i == 1 ? 'man' : 'men' %></span>
+                                </div>
+                                <div class="progress-bar__females" style="width: <%= female / total * 100 %>%">
+                                    <span class="progress-bar__label"><%= female.to_i %> <%= female.to_i == 1 ? 'woman' : 'women' %></span>
+                                </div>
+                            </div>
+                        </div>
+                    </a>
+
+                </div>
+                <% end %>
+            </div>
+            <% end %>
+        </div>
+    </div>
+</div>
+
+<% @country.legislatures.each do |legislature| %>
+<div class="page-section page-section--white" id="<%= legislature.slug %>">
+    <div class="container">
+
+        <h2 class="page-title"><%= legislature.name %></h2>
+
+        <div class="row">
+            <div class="col-sm-6">
+                <h3>Gender balance by term:</h3>
+                <div class="report-list report-list--by-term">
+                    <% legislature.legislative_periods.each do |term| %>
+                        <% term_slug = 'term/' + term.slug
+                        term_stats = @legislature_stats[legislature.slug][:terms][term_slug.to_sym] %>
+                        <%= erb :report_partial, locals: {
+                            report: {
+                                id: term.slug,
+                                title: term.name,
+                                total: term_stats[:overall][:total].to_f,
+                                total_male: term_stats[:overall][:male].to_f,
+                                total_female: term_stats[:overall][:female].to_f,
+                                action: 'display-by-group'
+                            }
+                        } %>
+                        <div class="report-list report-list--hidden" id="parties-<%= term.slug %>">
+                        <% term_stats[:parties].each do |slug, group| %>
+                        <%= erb :report_partial, locals: {
+                            report: {
+                                title: group[:name],
+                                total: group[:total].to_f,
+                                total_male: group[:male].to_f,
+                                total_female: group[:female].to_f,
+                            }
+                        } %>
+                        <% end %>
+                        </div>
+                    <% end %>
+                </div>
+            </div>
+            <div class="col-sm-6">
+                <h3>Gender balance by group:</h3>
+                <% stats = @legislature_stats[legislature.slug][:totals] %>
+                <div class="report-list report-list--by-group">
+                    <% stats[:parties].each do |slug, data|
+                        id_slug = slug.to_s.sub('/', '-') %>
+                    <%= erb :report_partial, locals: {
+                        report: {
+                            id: id_slug,
+                            title: data[:name],
+                            total: data[:total].to_f,
+                            total_male: data[:male].to_f,
+                            total_female: data[:female].to_f,
+                            action: 'display-by-term'
+                        }
+                    } %>
+                    <div class="report-list report-list--hidden" id="terms-<%= id_slug %>">
+                    <% legislature.legislative_periods.each do |term|
+                        term_slug = 'term/' + term.slug
+                        term_stats = @legislature_stats[legislature.slug][:terms][term_slug.to_sym]
+                        group = term_stats[:parties][slug]
+                        if group %>
+                        <%= erb :report_partial, locals: {
+                            report: {
+                                title: term[:name],
+                                total: group[:total].to_f,
+                                total_male: group[:male].to_f,
+                                total_female: group[:female].to_f,
+                            }
+                        } %>
+                    <% end %>
+                    <% end %>
+                    </div>
+                    <% end %>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<% end %>
diff --git a/views/report_partial.erb b/views/report_partial.erb
@@ -0,0 +1,25 @@
+<div class="report <% if report[:headline] %>report--headline<% end %>" id="<%= report[:id] %>">
+
+    <h3 class="report__title"><%= report[:title] %></h3>
+
+  <% if report[:action] == 'display-by-group' %>
+    <a class="report__action" data-display-by-group>Display by group</a>
+  <% elsif report[:action] == 'display-by-term' %>
+    <a class="report__action" data-display-by-term>Display by term</a>
+  <% end %>
+
+    <div class="progress-bar progress-bar--gendered progress-bar--labelled">
+        <div class="progress-bar__males" style="width: <%= report[:total_male] / report[:total] * 100 %>%">
+            <span class="progress-bar__label"><%= report[:total_male].to_i %> <%= report[:total_male].to_i == 1 ? 'man' : 'men' %></span>
+        </div>
+      <% if (report[:total_male] + report[:total_female] != report[:total]) %>
+        <div class="progress-bar__empty" style="width: <%= (report[:total] - report[:total_male] - report[:total_female]) / report[:total] * 100 %>%">
+        </div>
+      <% end %>
+        <div class="progress-bar__females" style="width: <%= report[:total_female] / report[:total] * 100 %>%">
+            <span class="progress-bar__label"><%= report[:total_female].to_i %> <%= report[:total_female].to_i == 1 ? 'woman' : 'women' %></span>
+        </div>
+    </div>
+
+</div>
+
diff --git a/views/sass/_components.scss b/views/sass/_components.scss
@@ -230,6 +230,10 @@
     background-color: $color_red;
 }
 
+.progress-bar__empty {
+    background-color: transparent;
+}
+
 .progress-bar--gendered {
     .progress-bar__males {
         background-color: $color_orange;

diff --git a/views/sass/_grid.scss b/views/sass/_grid.scss
@@ -0,0 +1,42 @@
+$grid-max-width: 960px !default;
+$grid-gutter: 2em !default;
+$grid-breakpoint-sm: 768px !default;
+
+.container {
+    margin-right: auto;
+    margin-left: auto;
+    padding-left: $grid-gutter / 2;
+    padding-right: $grid-gutter / 2;
+    max-width: $grid-max-width;
+}
+
+.row {
+    @include clearfix();
+    margin-left: $grid-gutter / -2;
+    margin-right: $grid-gutter / -2;
+}
+
+%col {
+    padding-left: $grid-gutter / 2;
+    padding-right: $grid-gutter / 2;
+    min-height: 1px;
+}
+
+@for $i from 1 through 12 {
+    .col-sm-#{$i} {
+        @extend %col;
+    }
+}
+
+@media(min-width: $grid-breakpoint-sm) {
+    %col-float {
+        float: left;
+    }
+
+    @for $i from 1 through 12 {
+        .col-sm-#{$i} {
+            @extend %col-float;
+            width: 100% / 12 * $i;
+        }
+    }
+}
diff --git a/views/sass/_messages.scss b/views/sass/_messages.scss
@@ -8,21 +8,21 @@
     transform: translate(0,-120%);
     @include vendor-prefix(transition, transform 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275));
 
-    .alert {
-        padding: 0.7em 1em;
-        margin-top: 1em;
-        background: $color_light_yellow;
-        text-align: center;
-        border-radius: $border_radius;
-        box-shadow: 0.3em 0.3em 0 rgba(0,0,0,0.05);
-    }
-
-    .alert--danger {
-        background: $color_light_red;
-        color: mix($color_dark_red, #000, 50%);
-    }
-
     &.slide-in {
         transform: translate(0,0);
     }
-}
+}
+
+.alert {
+    padding: 0.7em 1em;
+    margin-top: 1em;
+    background: $color_light_yellow;
+    text-align: center;
+    border-radius: $border_radius;
+    box-shadow: 0.3em 0.3em 0 rgba(0,0,0,0.05);
+}
+
+.alert--danger {
+    background: $color_light_red;
+    color: mix($color_dark_red, #000, 50%);
+}