From 3c68cdf1227190e076c70f3a1b076bdbffc1f4e5 Mon Sep 17 00:00:00 2001
From: Zarino Zappia <mail@zarino.co.uk>
Date: Fri, 22 Jul 2016 18:00:10 +0100
Subject: [PATCH 1/3] Tabs on term_table page, for navigating between houses
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Makes it easier to move from, for example, a country’s lower to
upper chamber. Will also help people navigate once executive
branch is included (#13297).
---
 Gemfile.lock                |  3 ---
 views/layout.erb            |  1 -
 views/sass/_components.scss | 47 ++++++++++++++++++++++++++++++-------
 views/term_table.erb        | 15 ++++++++++++
 4 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index 756aea72e..27a55b636 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -70,8 +70,5 @@ DEPENDENCIES
   sinatra!
   yajl-ruby
 
-RUBY VERSION
-   ruby 2.0.0p648
-
 BUNDLED WITH
    1.12.5
diff --git a/views/layout.erb b/views/layout.erb
index 35ab18a9b..30d05c43f 100644
--- a/views/layout.erb
+++ b/views/layout.erb
@@ -61,7 +61,6 @@
                         <a href="/"><span class="header-logo">EveryPolitician</span></a>
                       <% end %>
                     </h2>
-                    <% if @house %><h3><%= @house[:name] %></h3><% end %>
                 </div>
                 <div class="site-header__navigation site-header__navigation--primary">
                     <nav role="navigation">
diff --git a/views/sass/_components.scss b/views/sass/_components.scss
index 180dea7a9..28eff74d6 100644
--- a/views/sass/_components.scss
+++ b/views/sass/_components.scss
@@ -498,12 +498,43 @@ p.lead {
 
 // Little round social icons for membership tables
 .person-link {
-  display: inline-block;
-  width: 24px;
-  padding-top: 24px;
-  height: 0;
-  overflow: hidden;
-  vertical-align: middle;
-  border-radius: 100%;
-  margin-right: 0.3em;
+    display: inline-block;
+    width: 24px;
+    padding-top: 24px;
+    height: 0;
+    overflow: hidden;
+    vertical-align: middle;
+    border-radius: 100%;
+    margin-right: 0.3em;
+}
+
+.house-tabs {
+    @extend .unstyled-list;
+    @extend .inline-list;
+    padding-top: 1em;
+
+    @media (min-width: $medium_screen) and (min-height: 600px) {
+        padding-top: 1.5em;
+    }
+}
+
+.house-tab {
+    display: inline-block;
+    padding: 0.5em 1em;
+    border-radius: 5px 5px 0 0;
+    background-color: mix($colour_green, #fff, 25%);
+    background: linear-gradient(180deg, mix($colour_green, #fff, 20%), 50%, mix($colour_green, #fff, 30%));
+    color: darken($colour_green, 10%) !important;
+
+    &:hover,
+    &:focus {
+        background-color: mix($colour_green, #fff, 15%);
+        background: linear-gradient(180deg, mix($colour_green, #fff, 10%), 50%, mix($colour_green, #fff, 20%));
+    }
+}
+
+.house-tab--active,
+.house-tab--active:hover,
+.house-tab--active:focus {
+    background: #fff;
 }
diff --git a/views/term_table.erb b/views/term_table.erb
index 4badb67e2..93d5924d7 100644
--- a/views/term_table.erb
+++ b/views/term_table.erb
@@ -1,3 +1,18 @@
+<div class="page-section page-section--green page-section--no-padding">
+    <div class="container text-center">
+        <ul class="house-tabs">
+          <% @country[:legislatures].each do |house| %>
+            <li>
+                <% latest_term = house[:legislative_periods].sort_by{ |term| term[:start_date] }.last %>
+                <a class="house-tab <% if @house == house %>house-tab--active<% end %>" href="<%= term_table_url(@country, house, latest_term) %>">
+                    <%= house[:name] %>
+                </a>
+            </li>
+          <% end %>
+        </ul>
+    </div>
+</div>
+
 <div class="page-section" id="term">
     <div class="container text-center">
         <h1><span class="avatar"><i class="fa fa-university"></i></span> <%= @term[:name] %></h1>

From dc9ece3c78c1880a408629fdf41c691024c524b8 Mon Sep 17 00:00:00 2001
From: Zarino Zappia <mail@zarino.co.uk>
Date: Mon, 25 Jul 2016 11:04:22 +0100
Subject: [PATCH 2/3] Super quick fix for house tabs on mobile

Also includes some fixes for various term_table page elements
that were causing horizontal scrolling on narrow screens.
---
 views/sass/_components.scss | 15 +++++++++++++++
 views/sass/_mixins.scss     | 15 +++++++++++++++
 views/sass/_typography.scss |  4 ++++
 views/sass/_variables.scss  |  1 +
 4 files changed, 35 insertions(+)

diff --git a/views/sass/_components.scss b/views/sass/_components.scss
index 28eff74d6..481a278f6 100644
--- a/views/sass/_components.scss
+++ b/views/sass/_components.scss
@@ -513,6 +513,17 @@ p.lead {
     @extend .inline-list;
     padding-top: 1em;
 
+    // Make the tabs scroll horizontally on small screens.
+    // TODO: Make this not suck when the currently selected tab is
+    // hidden off to the far right of the line.
+    @media (max-width: $small_screen_max) {
+        text-align: left;
+        white-space: nowrap;
+        overflow: auto;
+        margin: 0 -1em;
+        padding: 1em 0.5em 0 0.5em;
+    }
+
     @media (min-width: $medium_screen) and (min-height: 600px) {
         padding-top: 1.5em;
     }
@@ -538,3 +549,7 @@ p.lead {
 .house-tab--active:focus {
     background: #fff;
 }
+
+.source-credits a {
+    @extend .break-word;
+}
diff --git a/views/sass/_mixins.scss b/views/sass/_mixins.scss
index 4650ca146..5261ae595 100644
--- a/views/sass/_mixins.scss
+++ b/views/sass/_mixins.scss
@@ -121,3 +121,18 @@
         }
     }
 }
+
+.break-word {
+    // https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+
+    -ms-word-break: break-all;
+    word-break: break-all;
+    word-break: break-word;
+
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+}
diff --git a/views/sass/_typography.scss b/views/sass/_typography.scss
index 2c6455aa2..901328834 100644
--- a/views/sass/_typography.scss
+++ b/views/sass/_typography.scss
@@ -171,6 +171,10 @@ textarea {
     -webkit-appearance: none;
 }
 
+select {
+    max-width: 100%;
+}
+
 fieldset {
     padding: 0;
     border: 0;
diff --git a/views/sass/_variables.scss b/views/sass/_variables.scss
index d96ac3a69..df5564321 100644
--- a/views/sass/_variables.scss
+++ b/views/sass/_variables.scss
@@ -34,6 +34,7 @@ $high_dpi_screen: '-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi
 
 $large_screen_max: $giant_screen - (1em * (1px / $size_font-base));
 $medium_screen_max: $large_screen - (1em * (1px / $size_font-base));
+$small_screen_max: $medium_screen - (1em * (1px / $size_font-base));
 
 $animation-short: 0.2s ease-out;
 

From 66f557ba72d5d27bfb6017df4c62e4d0042e8767 Mon Sep 17 00:00:00 2001
From: Zarino Zappia <mail@zarino.co.uk>
Date: Thu, 28 Jul 2016 12:41:34 +0100
Subject: [PATCH 3/3] fixup! Tabs on term_table page, for navigating between
 houses

---
 views/term_table.erb | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/views/term_table.erb b/views/term_table.erb
index 93d5924d7..9b1f13702 100644
--- a/views/term_table.erb
+++ b/views/term_table.erb
@@ -3,8 +3,7 @@
         <ul class="house-tabs">
           <% @country[:legislatures].each do |house| %>
             <li>
-                <% latest_term = house[:legislative_periods].sort_by{ |term| term[:start_date] }.last %>
-                <a class="house-tab <% if @house == house %>house-tab--active<% end %>" href="<%= term_table_url(@country, house, latest_term) %>">
+                <a class="house-tab <% if @house == house %>house-tab--active<% end %>" href="<%= term_table_url(@country, house, house[:legislative_periods].first) %>">
                     <%= house[:name] %>
                 </a>
             </li>