From 1609f6b3969469e1309267fbac3d76426fbe47fc Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Mon, 5 Jun 2017 14:05:57 +0000 Subject: [PATCH 1/5] Fix for sticky contents link overlap issue * At foot of page was possible to get 'Contents' fixed position link to briefly overlap content below it * Problem was due to height of parent element including height of Contents link, then changing after it was set to position fixed * Fixed by defaulting Contents link to position absolute so it never adds any height to the parent --- .../modules/_sticky-element-container.scss | 47 ++++++++++--------- 1 file changed, 26 insertions(+), 21 deletions(-) diff --git a/app/assets/stylesheets/modules/_sticky-element-container.scss b/app/assets/stylesheets/modules/_sticky-element-container.scss index c85dfef28..ed38be798 100644 --- a/app/assets/stylesheets/modules/_sticky-element-container.scss +++ b/app/assets/stylesheets/modules/_sticky-element-container.scss @@ -1,29 +1,34 @@ -.govuk-sticky-element { - @include transition (opacity, .3s, ease); - opacity: 1; +.sticky-element { + position: absolute; + bottom: 0; - &--hidden { - opacity: 0; - pointer-events: none; + &.govuk-sticky-element { + @include transition (opacity, .3s, ease); + opacity: 1; - @include ie-lte(8) { - // XXX: Would be nice to `@include .visuallyhidden`. - position: absolute; - left: -9999em; + &--hidden { + opacity: 0; + pointer-events: none; + + @include ie-lte(8) { + // XXX: Would be nice to `@include .visuallyhidden`. + position: absolute; + left: -9999em; + } } - } - &--stuck-to-parent { - bottom: 0; - position: absolute; - } + &--stuck-to-parent { + bottom: 0; + position: absolute; + } - &--stuck-to-window { - bottom: 0; - position: fixed; - } + &--stuck-to-window { + bottom: 0; + position: fixed; + } - @include media(mobile) { - position: static; + @include media(mobile) { + position: static; + } } } From af92591435da045a5acb7b115d71f6cd80d40272 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Mon, 5 Jun 2017 14:28:29 +0000 Subject: [PATCH 2/5] Improved class naming for sticky element --- .../modules/sticky-element-container.js | 14 +++++++------- .../_govspeak-html-publication-print.scss | 2 +- .../_govspeak-html-publication.scss | 2 +- .../modules/_sticky-element-container.scss | 4 ++-- .../govspeak_html_publication.raw.html.erb | 2 +- .../modules/sticky-element-container.spec.js | 14 +++++++------- 6 files changed, 19 insertions(+), 19 deletions(-) diff --git a/app/assets/javascripts/modules/sticky-element-container.js b/app/assets/javascripts/modules/sticky-element-container.js index 697ad9be2..8102ac5f6 100644 --- a/app/assets/javascripts/modules/sticky-element-container.js +++ b/app/assets/javascripts/modules/sticky-element-container.js @@ -46,7 +46,7 @@ setInterval(checkScroll, _interval); checkResize(); checkScroll(); - $element.addClass('govuk-sticky-element'); + $element.addClass('enabled'); } function onResize () { @@ -98,21 +98,21 @@ } function stickToWindow () { - $element.addClass('govuk-sticky-element--stuck-to-window'); - $element.removeClass('govuk-sticky-element--stuck-to-parent'); + $element.addClass('enabled--stuck-to-window'); + $element.removeClass('enabled--stuck-to-parent'); } function stickToParent () { - $element.addClass('govuk-sticky-element--stuck-to-parent'); - $element.removeClass('govuk-sticky-element--stuck-to-window'); + $element.addClass('enabled--stuck-to-parent'); + $element.removeClass('enabled--stuck-to-window'); } function show () { - $element.removeClass('govuk-sticky-element--hidden'); + $element.removeClass('enabled--hidden'); } function hide () { - $element.addClass('govuk-sticky-element--hidden'); + $element.addClass('enabled--hidden'); } }; }; diff --git a/app/assets/stylesheets/govuk-component/_govspeak-html-publication-print.scss b/app/assets/stylesheets/govuk-component/_govspeak-html-publication-print.scss index 77eab6dc6..156a072b0 100644 --- a/app/assets/stylesheets/govuk-component/_govspeak-html-publication-print.scss +++ b/app/assets/stylesheets/govuk-component/_govspeak-html-publication-print.scss @@ -1,5 +1,5 @@ .govuk-govspeak-html-publication { - .sticky-element { + .govuk-sticky-element { display: none; } } diff --git a/app/assets/stylesheets/govuk-component/_govspeak-html-publication.scss b/app/assets/stylesheets/govuk-component/_govspeak-html-publication.scss index cf72009db..3f7cccf9d 100644 --- a/app/assets/stylesheets/govuk-component/_govspeak-html-publication.scss +++ b/app/assets/stylesheets/govuk-component/_govspeak-html-publication.scss @@ -195,7 +195,7 @@ // scss-lint:enable QualifyingElement } - .sticky-element { + .govuk-sticky-element { clear: both; } } diff --git a/app/assets/stylesheets/modules/_sticky-element-container.scss b/app/assets/stylesheets/modules/_sticky-element-container.scss index ed38be798..a731540d0 100644 --- a/app/assets/stylesheets/modules/_sticky-element-container.scss +++ b/app/assets/stylesheets/modules/_sticky-element-container.scss @@ -1,8 +1,8 @@ -.sticky-element { +.govuk-sticky-element { position: absolute; bottom: 0; - &.govuk-sticky-element { + &.enabled { @include transition (opacity, .3s, ease); opacity: 1; diff --git a/app/views/govuk_component/govspeak_html_publication.raw.html.erb b/app/views/govuk_component/govspeak_html_publication.raw.html.erb index 7be675944..8dc346411 100644 --- a/app/views/govuk_component/govspeak_html_publication.raw.html.erb +++ b/app/views/govuk_component/govspeak_html_publication.raw.html.erb @@ -14,7 +14,7 @@ > <%= render file: 'govuk_component/govspeak.raw', locals: govspeak_locals %> <% if sticky_footer_html %> -
+
<%= raw sticky_footer_html %>
<% end %> diff --git a/spec/javascripts/modules/sticky-element-container.spec.js b/spec/javascripts/modules/sticky-element-container.spec.js index 4621fd0e8..a1c3e8d8f 100644 --- a/spec/javascripts/modules/sticky-element-container.spec.js +++ b/spec/javascripts/modules/sticky-element-container.spec.js @@ -35,7 +35,7 @@ describe('A sticky-element-container module', function () { it('hides the element, when scrolled at the top', function () { instance.start($element); - expect($footer.hasClass('govuk-sticky-element--hidden')).toBe(true); + expect($footer.hasClass('enabled--hidden')).toBe(true); }); it('shows the element, stuck to the window, when scrolled in the middle', function () { @@ -46,9 +46,9 @@ describe('A sticky-element-container module', function () { }; instance.start($element); - expect($footer.hasClass('govuk-sticky-element--hidden')).toBe(false); - expect($footer.hasClass('govuk-sticky-element--stuck-to-window')).toBe(true); - expect($footer.hasClass('govuk-sticky-element--stuck-to-parent')).toBe(false); + expect($footer.hasClass('enabled--hidden')).toBe(false); + expect($footer.hasClass('enabled--stuck-to-window')).toBe(true); + expect($footer.hasClass('enabled--stuck-to-parent')).toBe(false); }); it('shows the element, stuck to the parent, when scrolled at the bottom', function () { @@ -59,9 +59,9 @@ describe('A sticky-element-container module', function () { }; instance.start($element); - expect($footer.hasClass('govuk-sticky-element--hidden')).toBe(false); - expect($footer.hasClass('govuk-sticky-element--stuck-to-window')).toBe(false); - expect($footer.hasClass('govuk-sticky-element--stuck-to-parent')).toBe(true); + expect($footer.hasClass('enabled--hidden')).toBe(false); + expect($footer.hasClass('enabled--stuck-to-window')).toBe(false); + expect($footer.hasClass('enabled--stuck-to-parent')).toBe(true); }); }); }); From 446c7ec45a62113da372341891aebf2c4d7cd3cb Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Mon, 5 Jun 2017 14:46:37 +0000 Subject: [PATCH 3/5] Further class name improvements --- .../modules/sticky-element-container.js | 14 +++---- .../modules/_sticky-element-container.scss | 39 ++++++++++--------- .../modules/sticky-element-container.spec.js | 14 +++---- 3 files changed, 34 insertions(+), 33 deletions(-) diff --git a/app/assets/javascripts/modules/sticky-element-container.js b/app/assets/javascripts/modules/sticky-element-container.js index 8102ac5f6..c15f4de88 100644 --- a/app/assets/javascripts/modules/sticky-element-container.js +++ b/app/assets/javascripts/modules/sticky-element-container.js @@ -46,7 +46,7 @@ setInterval(checkScroll, _interval); checkResize(); checkScroll(); - $element.addClass('enabled'); + $element.addClass('govuk-sticky-element--enabled'); } function onResize () { @@ -98,21 +98,21 @@ } function stickToWindow () { - $element.addClass('enabled--stuck-to-window'); - $element.removeClass('enabled--stuck-to-parent'); + $element.addClass('govuk-sticky-element--stuck-to-window'); + $element.removeClass('govuk-sticky-element--stuck-to-parent'); } function stickToParent () { - $element.addClass('enabled--stuck-to-parent'); - $element.removeClass('enabled--stuck-to-window'); + $element.addClass('govuk-sticky-element--stuck-to-parent'); + $element.removeClass('govuk-sticky-element--stuck-to-window'); } function show () { - $element.removeClass('enabled--hidden'); + $element.removeClass('govuk-sticky-element--hidden'); } function hide () { - $element.addClass('enabled--hidden'); + $element.addClass('govuk-sticky-element--hidden'); } }; }; diff --git a/app/assets/stylesheets/modules/_sticky-element-container.scss b/app/assets/stylesheets/modules/_sticky-element-container.scss index a731540d0..b22877e03 100644 --- a/app/assets/stylesheets/modules/_sticky-element-container.scss +++ b/app/assets/stylesheets/modules/_sticky-element-container.scss @@ -2,33 +2,34 @@ position: absolute; bottom: 0; - &.enabled { + &--enabled { @include transition (opacity, .3s, ease); opacity: 1; - &--hidden { - opacity: 0; - pointer-events: none; - - @include ie-lte(8) { - // XXX: Would be nice to `@include .visuallyhidden`. - position: absolute; - left: -9999em; - } + @include media(mobile) { + position: static; } + } + + &--hidden { + opacity: 0; + pointer-events: none; - &--stuck-to-parent { - bottom: 0; + @include ie-lte(8) { + // XXX: Would be nice to `@include .visuallyhidden`. position: absolute; + left: -9999em; } + } - &--stuck-to-window { - bottom: 0; - position: fixed; - } + &--stuck-to-parent { + bottom: 0; + position: absolute; + } - @include media(mobile) { - position: static; - } + &--stuck-to-window { + bottom: 0; + position: fixed; } + } diff --git a/spec/javascripts/modules/sticky-element-container.spec.js b/spec/javascripts/modules/sticky-element-container.spec.js index a1c3e8d8f..4621fd0e8 100644 --- a/spec/javascripts/modules/sticky-element-container.spec.js +++ b/spec/javascripts/modules/sticky-element-container.spec.js @@ -35,7 +35,7 @@ describe('A sticky-element-container module', function () { it('hides the element, when scrolled at the top', function () { instance.start($element); - expect($footer.hasClass('enabled--hidden')).toBe(true); + expect($footer.hasClass('govuk-sticky-element--hidden')).toBe(true); }); it('shows the element, stuck to the window, when scrolled in the middle', function () { @@ -46,9 +46,9 @@ describe('A sticky-element-container module', function () { }; instance.start($element); - expect($footer.hasClass('enabled--hidden')).toBe(false); - expect($footer.hasClass('enabled--stuck-to-window')).toBe(true); - expect($footer.hasClass('enabled--stuck-to-parent')).toBe(false); + expect($footer.hasClass('govuk-sticky-element--hidden')).toBe(false); + expect($footer.hasClass('govuk-sticky-element--stuck-to-window')).toBe(true); + expect($footer.hasClass('govuk-sticky-element--stuck-to-parent')).toBe(false); }); it('shows the element, stuck to the parent, when scrolled at the bottom', function () { @@ -59,9 +59,9 @@ describe('A sticky-element-container module', function () { }; instance.start($element); - expect($footer.hasClass('enabled--hidden')).toBe(false); - expect($footer.hasClass('enabled--stuck-to-window')).toBe(false); - expect($footer.hasClass('enabled--stuck-to-parent')).toBe(true); + expect($footer.hasClass('govuk-sticky-element--hidden')).toBe(false); + expect($footer.hasClass('govuk-sticky-element--stuck-to-window')).toBe(false); + expect($footer.hasClass('govuk-sticky-element--stuck-to-parent')).toBe(true); }); }); }); From 2a38862fbec78b03bd585d83fd432ae1c306228e Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Mon, 5 Jun 2017 15:25:32 +0000 Subject: [PATCH 4/5] Removing unneeded class and fixing bug * CSS precedence was broken making contents link still be visible at top of page when it shouldn't have been --- .../modules/sticky-element-container.js | 2 -- .../modules/_sticky-element-container.scss | 21 +++++++++---------- .../modules/sticky-element-container.spec.js | 2 -- 3 files changed, 10 insertions(+), 15 deletions(-) diff --git a/app/assets/javascripts/modules/sticky-element-container.js b/app/assets/javascripts/modules/sticky-element-container.js index c15f4de88..090a6a463 100644 --- a/app/assets/javascripts/modules/sticky-element-container.js +++ b/app/assets/javascripts/modules/sticky-element-container.js @@ -99,11 +99,9 @@ function stickToWindow () { $element.addClass('govuk-sticky-element--stuck-to-window'); - $element.removeClass('govuk-sticky-element--stuck-to-parent'); } function stickToParent () { - $element.addClass('govuk-sticky-element--stuck-to-parent'); $element.removeClass('govuk-sticky-element--stuck-to-window'); } diff --git a/app/assets/stylesheets/modules/_sticky-element-container.scss b/app/assets/stylesheets/modules/_sticky-element-container.scss index b22877e03..6bfe118bc 100644 --- a/app/assets/stylesheets/modules/_sticky-element-container.scss +++ b/app/assets/stylesheets/modules/_sticky-element-container.scss @@ -2,6 +2,16 @@ position: absolute; bottom: 0; + &--stuck-to-parent { + bottom: 0; + position: absolute; + } + + &--stuck-to-window { + bottom: 0; + position: fixed; + } + &--enabled { @include transition (opacity, .3s, ease); opacity: 1; @@ -21,15 +31,4 @@ left: -9999em; } } - - &--stuck-to-parent { - bottom: 0; - position: absolute; - } - - &--stuck-to-window { - bottom: 0; - position: fixed; - } - } diff --git a/spec/javascripts/modules/sticky-element-container.spec.js b/spec/javascripts/modules/sticky-element-container.spec.js index 4621fd0e8..5e9191afa 100644 --- a/spec/javascripts/modules/sticky-element-container.spec.js +++ b/spec/javascripts/modules/sticky-element-container.spec.js @@ -48,7 +48,6 @@ describe('A sticky-element-container module', function () { expect($footer.hasClass('govuk-sticky-element--hidden')).toBe(false); expect($footer.hasClass('govuk-sticky-element--stuck-to-window')).toBe(true); - expect($footer.hasClass('govuk-sticky-element--stuck-to-parent')).toBe(false); }); it('shows the element, stuck to the parent, when scrolled at the bottom', function () { @@ -61,7 +60,6 @@ describe('A sticky-element-container module', function () { expect($footer.hasClass('govuk-sticky-element--hidden')).toBe(false); expect($footer.hasClass('govuk-sticky-element--stuck-to-window')).toBe(false); - expect($footer.hasClass('govuk-sticky-element--stuck-to-parent')).toBe(true); }); }); }); From 01af70e83e6e2912c6121edcbd9bf8929e6e6094 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Thu, 8 Jun 2017 10:13:11 +0000 Subject: [PATCH 5/5] Fix for without JS and cleaning * Fixed styles so link appears correctly if JS disabled * Removed unnecessary class --stuck-to-parent --- .../stylesheets/modules/_sticky-element-container.scss | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/modules/_sticky-element-container.scss b/app/assets/stylesheets/modules/_sticky-element-container.scss index 6bfe118bc..c2bb022ed 100644 --- a/app/assets/stylesheets/modules/_sticky-element-container.scss +++ b/app/assets/stylesheets/modules/_sticky-element-container.scss @@ -1,12 +1,7 @@ -.govuk-sticky-element { +.js-enabled .govuk-sticky-element { position: absolute; bottom: 0; - &--stuck-to-parent { - bottom: 0; - position: absolute; - } - &--stuck-to-window { bottom: 0; position: fixed; @@ -31,4 +26,5 @@ left: -9999em; } } + }