From 5564335a04104af9fd674b4c81ba8535a6f33ac5 Mon Sep 17 00:00:00 2001 From: Zarino Zappia Date: Thu, 1 Sep 2016 17:50:13 +0100 Subject: [PATCH 1/3] 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). --- views/sass/_components.scss | 47 ++++++++++++++++++++++++++++++------- views/term_table.erb | 16 +++++++++++++ 2 files changed, 55 insertions(+), 8 deletions(-) diff --git a/views/sass/_components.scss b/views/sass/_components.scss index 180dea7a9..a3be665cb 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 a11c9604a..93bba62b1 100644 --- a/views/term_table.erb +++ b/views/term_table.erb @@ -1,3 +1,19 @@ +
+
+ +
+
+

<%= @page.current_term.name %>

From ec2eaa1d47f22a69df762ea716b75571334cb943 Mon Sep 17 00:00:00 2001 From: Zarino Zappia Date: Fri, 2 Sep 2016 11:40:24 +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 | 17 ++++++++++++++++- views/sass/_mixins.scss | 15 +++++++++++++++ views/sass/_typography.scss | 4 ++++ views/sass/_variables.scss | 1 + 4 files changed, 36 insertions(+), 1 deletion(-) diff --git a/views/sass/_components.scss b/views/sass/_components.scss index a3be665cb..ffd53e92b 100644 --- a/views/sass/_components.scss +++ b/views/sass/_components.scss @@ -513,7 +513,18 @@ p.lead { @extend .inline-list; padding-top: 1em; - @media (min-width: $medium_screen) and (min-height: 600px) { + // 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 fd1e2c5a42a8855c2c06ea90a62f362620b244b7 Mon Sep 17 00:00:00 2001 From: octopusinvitro Date: Fri, 2 Sep 2016 11:49:50 +0100 Subject: [PATCH 3/3] Test that tabs are shown properly in the term table --- t/web/tab_component.rb | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 t/web/tab_component.rb diff --git a/t/web/tab_component.rb b/t/web/tab_component.rb new file mode 100644 index 000000000..53e052c47 --- /dev/null +++ b/t/web/tab_component.rb @@ -0,0 +1,34 @@ +# frozen_string_literal: true +require 'test_helper' +require_relative '../../app' + +describe 'Tab component in term table' do + subject { Nokogiri::HTML(last_response.body) } + + before do + stub_everypolitician_data_request('6139efe/data/Australia/Representatives/ep-popolo-v1.0.json') + get '/australia/representatives/term-table/44.html' + end + + it 'should have as many tabs as houses' do + subject.css('.house-tab').count.must_equal 2 + end + + describe 'active tab' do + it 'should be the House of Representatives' do + subject.css('.house-tab--active').text.strip.must_equal 'House of Representatives' + end + end + + describe 'tab links' do + let(:tabs) { subject.css('.house-tab/@href') } + + it 'links to first term in House of Representatives' do + tabs.first.text.must_equal '/australia/representatives/term-table/44.html' + end + + it 'links to first term in Senate' do + tabs.last.text.must_equal '/australia/senate/term-table/44.html' + end + end +end