Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix for sticky contents link overlap issue #1067

Merged
merged 5 commits into from
Jun 8, 2017
+21 −24
Merged

Fix for sticky contents link overlap issue #1067

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1609f6b
Fix for sticky contents link overlap issue
andysellick Jun 5, 2017
af92591
Improved class naming for sticky element
andysellick Jun 5, 2017
446c7ec
Further class name improvements
andysellick Jun 5, 2017
2a38862
Removing unneeded class and fixing bug
andysellick Jun 5, 2017
01af70e
Fix for without JS and cleaning
andysellick Jun 8, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions app/assets/javascripts/modules/sticky-element-container.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
setInterval(checkScroll, _interval);
checkResize();
checkScroll();
$element.addClass('govuk-sticky-element');
$element.addClass('govuk-sticky-element--enabled');
}

function onResize () {
Expand Down Expand Up @@ -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');
}

Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/govuk-component/_govspeak-html-publication-print.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.govuk-govspeak-html-publication {
.sticky-element {
.govuk-sticky-element {
display: none;
}
}
2 changes: 1 addition & 1 deletion app/assets/stylesheets/govuk-component/_govspeak-html-publication.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@
// scss-lint:enable QualifyingElement
}

.sticky-element {
.govuk-sticky-element {
clear: both;
}
}
33 changes: 17 additions & 16 deletions app/assets/stylesheets/modules/_sticky-element-container.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,20 @@
.govuk-sticky-element {
@include transition (opacity, .3s, ease);
opacity: 1;
.js-enabled .govuk-sticky-element {
position: absolute;
bottom: 0;

&--stuck-to-window {
bottom: 0;
position: fixed;
}

&--enabled {
@include transition (opacity, .3s, ease);
opacity: 1;

@include media(mobile) {
position: static;
}
}

&--hidden {
opacity: 0;
Expand All @@ -13,17 +27,4 @@
}
}

&--stuck-to-parent {
bottom: 0;
position: absolute;
}

&--stuck-to-window {
bottom: 0;
position: fixed;
}

@include media(mobile) {
position: static;
}
}
2 changes: 1 addition & 1 deletion app/views/govuk_component/govspeak_html_publication.raw.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
>
<%= render file: 'govuk_component/govspeak.raw', locals: govspeak_locals %>
<% if sticky_footer_html %>
<div data-sticky-element class="sticky-element">
<div data-sticky-element class="govuk-sticky-element">
<%= raw sticky_footer_html %>
</div>
<% end %>
Expand Down
2 changes: 0 additions & 2 deletions spec/javascripts/modules/sticky-element-container.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand All @@ -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);
});
});
});
Expand Down