Override proposal sticky top property when anchored

It's known that Foundation Sticky causes some renderization problems
when rendering sticky elements in anchored position.

The problem seems to be that Foundation Sticky is showing the
support box on medium and up devices overlapped with "Share" and
"Community" sidebar boxes when loading proposal page through
Turbolinks and when restoring the page from brwoser history.
Foundation seems to be doing some top property dynamic calculation
(javascript) and is setting top property to `206px` when it should be
`0px`. Notice that this do not happen on page first load (without
Turbolinks). Check foundation/foundation-sites issue 11098.

Another workaround could be to remove sticky feature for bigger that
small devices (medium large xlarge xxlarge).
Check foundation/foundation-sites issue 9892.
This commit is contained in:
Senén Rodero Rodríguez
2020-08-21 14:49:34 +02:00
parent 1ab1e68832
commit b2196561e2
3 changed files with 23 additions and 0 deletions

View File

@@ -26,3 +26,4 @@
@import "autocomplete_overrides"; @import "autocomplete_overrides";
@import "jquery-ui/sortable"; @import "jquery-ui/sortable";
@import "leaflet"; @import "leaflet";
@import "sticky_overrides";

View File

@@ -0,0 +1,9 @@
// Overrides styles of foundation-sticky
// Patch authored by shashabeep
// Check https://github.com/foundation/foundation-sites/issues/11098#issuecomment-528363771
.proposal-show {
.sticky.is-anchored {
top: 0 !important;
}
}

View File

@@ -212,6 +212,19 @@ describe "Proposals" do
end end
end end
describe "Sticky support button on medium and up screens", :js do
scenario "is shown anchored to top" do
proposal = create(:proposal)
visit proposals_path
click_link proposal.title
within("#proposal_sticky") do
expect(find(".is-anchored")).to match_style(top: "0px")
end
end
end
describe "Show sticky support button on mobile screens", :js do describe "Show sticky support button on mobile screens", :js do
let!(:window_size) { Capybara.current_window.size } let!(:window_size) { Capybara.current_window.size }