Tabs on term_table page, for navigating between houses

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

@@ -70,8 +70,5 @@ DEPENDENCIES
   sinatra!
   yajl-ruby
 
-RUBY VERSION
-   ruby 2.0.0p648
-
 BUNDLED WITH
    1.12.5

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">

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;
 }

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>