From b2196561e24a1773d46e0a70fed39d04d590b57a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sen=C3=A9n=20Rodero=20Rodr=C3=ADguez?= Date: Fri, 21 Aug 2020 14:49:34 +0200 Subject: [PATCH] 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. --- app/assets/stylesheets/application.scss | 1 + app/assets/stylesheets/sticky_overrides.scss | 9 +++++++++ spec/system/proposals_spec.rb | 13 +++++++++++++ 3 files changed, 23 insertions(+) create mode 100644 app/assets/stylesheets/sticky_overrides.scss diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index da217b874..5158c724d 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -26,3 +26,4 @@ @import "autocomplete_overrides"; @import "jquery-ui/sortable"; @import "leaflet"; +@import "sticky_overrides"; diff --git a/app/assets/stylesheets/sticky_overrides.scss b/app/assets/stylesheets/sticky_overrides.scss new file mode 100644 index 000000000..f00d7417e --- /dev/null +++ b/app/assets/stylesheets/sticky_overrides.scss @@ -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; + } +} diff --git a/spec/system/proposals_spec.rb b/spec/system/proposals_spec.rb index cd84e2c5b..cb67e8ee3 100644 --- a/spec/system/proposals_spec.rb +++ b/spec/system/proposals_spec.rb @@ -212,6 +212,19 @@ describe "Proposals" do 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 let!(:window_size) { Capybara.current_window.size }