WIP new "page" layout

The "page" classes should come in useful for other static pages that we want a nice chunky header and centred content on, like About and the Home page.
everypolitician · Jun 23, 2016 · 99a0df8 · 99a0df8
1 parent 89796c4
commit 99a0df8
Show file tree

Hide file tree

Showing 8 changed files with 245 additions and 59 deletions.
diff --git a/app.rb b/app.rb
@@ -169,7 +169,7 @@
 
 get '/reports/:country' do
   @country = Everypolitician.country(slug: params[:country])
-  erb :report
+  erb :report, :layout => :layout_page
 end
 
 get '/_stats' do

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
@@ -1,12 +1,70 @@
+<% content_for :body_class do %>report-page<% end %>
+
 <% content_for :back_button do %>
-    <a class="app-header__back" href="/countries"><i class="fa fa-chevron-left"></i></a>
+    <a class="page-header__back" href="/countries"><i class="fa fa-chevron-left"></i> Countries</a>
 <% end %>
 
-<h2 class="page-title"><%= @country[:country] %></h2>
-<p class="report-actions">
-    <a href="#" class="button button--small">Play this country!</a>
-    <a href="#" class="button button--small">Download data</a>
-</p>
+<div class="page-section page-section--blue">
+    <div class="container">
+        <h1 class="page-title"><%= @country[:country] %></h1>
+        <p class="report-actions">
+            <a href="#" class="button button--small">Play this country!</a>
+            <a href="#" class="button button--small">Download data</a>
+        </p>
+    </div>
+</div>
+
+<div class="page-section page-section--white">
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-6">
+                <p>legislature 1 goes here</p>
+            </div>
+            <div class="col-sm-6">
+                <p>legislature 2 goes here</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="page-section page-section--white">
+    <div class="container">
+
+        <h2 class="page-title">Legislature 1</h2>
+
+        <div class="row">
+            <div class="col-sm-6">
+                <h3>Gender balance by term:</h3>
+                <p>bar charts go here</p>
+            </div>
+            <div class="col-sm-6">
+                <h3>Gender balance by party:</h3>
+                <p>bar charts go here</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="page-section page-section--white">
+    <div class="container">
+
+        <h2 class="page-title">Legislature 2</h2>
+
+        <div class="row">
+            <div class="col-sm-6">
+                <h3>Gender balance by term:</h3>
+                <p>bar charts go here</p>
+            </div>
+            <div class="col-sm-6">
+                <h3>Gender balance by party:</h3>
+                <p>bar charts go here</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<!--
 
 <h3 class="report-legislature">Galactic Senate</h3>
 
@@ -145,4 +203,6 @@
             </div>
         </div>
     </div>
-</div>
+</div>
+
+-->
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/_page.scss b/views/sass/_page.scss
@@ -0,0 +1,71 @@
+// Most of gender-balance is focussed around "app-like" screens with a
+// minimal header and tight gutters. But the rest of the site is made
+// from mostly static "page" type pages. These styles are for them.
+
+body.page {
+    padding-top: 0;
+}
+
+.page-header {
+    text-align: center;
+    padding: 0.5em 0;
+    background-color: $color_white;
+    position: relative;
+
+    @media (min-width: $screen_medium_min) {
+        padding: 1em 0;
+    }
+
+    .container {
+        position: relative;
+    }
+
+    a, h1 {
+        line-height: 1.1em;
+        font-size: 1em;
+        margin: 0;
+    }
+}
+
+.page-header__back {
+    position: absolute;
+    text-decoration: none;
+    font-size: 0.9em;
+    padding: 0.5em;
+
+    left: 0;
+    top: -0.5em; // vertically centre in header
+
+    @media (min-width: $screen_medium_min) {
+        font-size: 1em;
+        left: 0.5em;
+    }
+
+    .fa {
+        vertical-align: middle;
+    }
+}
+
+.page-section {
+    padding: 1em 0;
+
+    @media (min-width: $screen_medium_min) and (min-height: 700px) {
+        padding: 2em 0;
+    }
+
+    .container {
+        @include remove-margin-from-children();
+    }
+}
+
+.page-section--white {
+    background-color: $color_white;
+
+    & + & {
+        border-top: 1px solid $color_off_white;
+    }
+}
+
+.page-section--blue {
+    background-color: $color_off_white;
+}
diff --git a/views/sass/_report.scss b/views/sass/_report.scss
@@ -1,54 +1,3 @@
-.report-card {
-  @extend .list__item--disabled;
-
-  display: table;
-
-  & + & {
-      margin-top: 1em;
-  }
-
-  h4 {
-    margin: 0;
-    color: $color_mid_grey;
-    white-space: nowrap;
-  }
-
-  .progress-bar {
-    margin-top: 0.4em;
-  }
-}
-
-.report-card__row {
-  display: table-row;
-}
-
-.report-card__label,
-.report-card__value {
-  display: table-cell;
-  padding: 1.5em;
-  vertical-align: top;
-
-  .report-card__row + .report-card__row & {
-    padding-top: 0;
-  }
-}
-
-.report-card__value {
-  width: 100%;
-  padding-left: 0;
-}
-
-.report-legislature {
-  text-align: center;
-  margin-top: 3em;
-  padding-bottom: 0.5em;
-  border-bottom: 1px solid $color_light_grey;
-
-  .page-title + & {
-    margin-top: 1em;
-  }
-}
-
 .report-actions {
   text-align: center;
 

diff --git a/views/sass/_variables.scss b/views/sass/_variables.scss
@@ -49,3 +49,5 @@ $screen_large_max: $screen_xlarge_min - $one_pixel_in_root_ems;
 $screen_xlarge_max: $screen_huge_min - $one_pixel_in_root_ems;
 
 $high_dpi_screen: '-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi';
+
+$grid-breakpoint-sm: $screen_medium_min;
diff --git a/views/sass/main.scss b/views/sass/main.scss
@@ -51,6 +51,7 @@ body {
     }
 }
 
+@import 'grid';
 @import 'typography';
 @import 'components';
 @import 'header';
@@ -59,4 +60,5 @@ body {
 @import 'messages';
 @import 'countries';
 @import 'person';
+@import 'page';
 @import 'report';
Original file line number	Diff line number	Diff line change
Expand Up		@@ -49,3 +49,5 @@ $screen_large_max: $screen_xlarge_min - $one_pixel_in_root_ems;
		$screen_xlarge_max: $screen_huge_min - $one_pixel_in_root_ems;

		$high_dpi_screen: '-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi';

		$grid-breakpoint-sm: $screen_medium_min;