From 86848358570394f069e58ec4cf98aa385a77bee0 Mon Sep 17 00:00:00 2001 From: decabeza Date: Fri, 14 Dec 2018 14:32:24 +0100 Subject: [PATCH 01/10] Adds sticky on proposals supports for mobile version --- .../javascripts/foundation_extras.js.coffee | 1 + app/assets/stylesheets/layout.scss | 2 + app/assets/stylesheets/participation.scss | 9 +++ app/views/proposals/show.html.erb | 56 ++++++++++++------- 4 files changed, 47 insertions(+), 21 deletions(-) diff --git a/app/assets/javascripts/foundation_extras.js.coffee b/app/assets/javascripts/foundation_extras.js.coffee index 720b62047..69602f4e8 100644 --- a/app/assets/javascripts/foundation_extras.js.coffee +++ b/app/assets/javascripts/foundation_extras.js.coffee @@ -3,3 +3,4 @@ App.FoundationExtras = initialize: -> $(document).foundation() $(window).trigger "load.zf.sticky" + $(window).trigger "resize" diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index ed1322275..a796ab5e8 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -446,6 +446,8 @@ header { background: $brand; border-bottom: 1px solid $border; margin-bottom: $line-height; + position: relative; + z-index: 10; .selected { border-bottom: 1px solid #fff; diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index a9b4aca69..74f943349 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -551,6 +551,15 @@ } } +.fixed-mobile-content { + + @include breakpoint(medium down) { + background: #fff; + margin-bottom: rem-calc(-1) !important; + padding-top: $line-height / 2; + } +} + // 04. List participation // ---------------------- diff --git a/app/views/proposals/show.html.erb b/app/views/proposals/show.html.erb index a9f65c763..d87a27865 100644 --- a/app/views/proposals/show.html.erb +++ b/app/views/proposals/show.html.erb @@ -62,30 +62,44 @@ <% end %> -
-

<%= t("votes.supports") %>

-
- <% if @proposal.draft? %> -
-

<%= t('.draft') %>

+
+
+
+
+

<%= t("votes.supports") %>

+ +
+ <% if @proposal.draft? %> +
+

<%= t('.draft') %>

+
+ <% elsif @proposal.successful? %> +

+ <%= t("proposals.proposal.successful") %> +

+ <% elsif @proposal.archived? %> +
+

+ <%= t("proposals.proposal.supports", count: @proposal.total_votes) %> +

+

<%= t("proposals.proposal.archived") %>

+
+ <% else %> + <%= render "votes", + { proposal: @proposal, vote_url: vote_proposal_path(@proposal, value: "yes") } %> + <% end %> +
- <% elsif @proposal.successful? %> -

- <%= t("proposals.proposal.successful") %> -

- <% elsif @proposal.archived? %> -
-

- <%= t("proposals.proposal.supports", count: @proposal.total_votes) %> -

-

<%= t("proposals.proposal.archived") %>

-
- <% else %> - <%= render "votes", - { proposal: @proposal, vote_url: vote_proposal_path(@proposal, value: "yes") } %> - <% end %> +
+
+ <%= render "proposals/social_share", proposal: @proposal, share_title: t("proposals.show.share") %> <% if current_user %> From 0237565ece47d34de1e6d6c62482271bd2b83aa3 Mon Sep 17 00:00:00 2001 From: Julian Herrero Date: Mon, 4 Feb 2019 16:56:41 +0100 Subject: [PATCH 02/10] Set correct attributes for data-sticky component --- app/views/proposals/show.html.erb | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/views/proposals/show.html.erb b/app/views/proposals/show.html.erb index d87a27865..e3b25a52d 100644 --- a/app/views/proposals/show.html.erb +++ b/app/views/proposals/show.html.erb @@ -68,7 +68,8 @@ data-stick-to="bottom" data-sticky-on="small" data-top-anchor="0" - data-btm-anchor="sticky_stop:top"> + data-btm-anchor="sticky_stop" + data-check-every="0">

<%= t("votes.supports") %>

From eca4d773a02fa29141655d7e7e91809e668fbbdf Mon Sep 17 00:00:00 2001 From: Julian Herrero Date: Mon, 4 Feb 2019 16:59:09 +0100 Subject: [PATCH 03/10] Reset sticky component before leaving the page using Turbolinks --- app/assets/javascripts/foundation_extras.js.coffee | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/assets/javascripts/foundation_extras.js.coffee b/app/assets/javascripts/foundation_extras.js.coffee index 69602f4e8..2dc3d697b 100644 --- a/app/assets/javascripts/foundation_extras.js.coffee +++ b/app/assets/javascripts/foundation_extras.js.coffee @@ -4,3 +4,8 @@ App.FoundationExtras = $(document).foundation() $(window).trigger "load.zf.sticky" $(window).trigger "resize" + + clearSticky = -> + $("[data-sticky]").foundation("destroy") if $("[data-sticky]").length + + $(document).on("page:before-unload", clearSticky) From 2c45f178cbf14c7e315ec1b1db6958300297ad04 Mon Sep 17 00:00:00 2001 From: Julian Herrero Date: Mon, 4 Feb 2019 17:00:01 +0100 Subject: [PATCH 04/10] Reset sticky component before clicking back button on browser --- app/assets/javascripts/foundation_extras.js.coffee | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/assets/javascripts/foundation_extras.js.coffee b/app/assets/javascripts/foundation_extras.js.coffee index 2dc3d697b..af6db5cab 100644 --- a/app/assets/javascripts/foundation_extras.js.coffee +++ b/app/assets/javascripts/foundation_extras.js.coffee @@ -9,3 +9,5 @@ App.FoundationExtras = $("[data-sticky]").foundation("destroy") if $("[data-sticky]").length $(document).on("page:before-unload", clearSticky) + + window.addEventListener("popstate", clearSticky, false) From 13dfaedf06e6be95e5f6951cbe351d64085e9aa8 Mon Sep 17 00:00:00 2001 From: decabeza Date: Wed, 13 Feb 2019 16:57:31 +0100 Subject: [PATCH 05/10] Replace load to init sticky --- app/assets/javascripts/foundation_extras.js.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/foundation_extras.js.coffee b/app/assets/javascripts/foundation_extras.js.coffee index af6db5cab..7beb05f93 100644 --- a/app/assets/javascripts/foundation_extras.js.coffee +++ b/app/assets/javascripts/foundation_extras.js.coffee @@ -2,7 +2,7 @@ App.FoundationExtras = initialize: -> $(document).foundation() - $(window).trigger "load.zf.sticky" + $(window).trigger "init.zf.sticky" $(window).trigger "resize" clearSticky = -> From 4b3172912edead385fd584a7902926e3ee9d5cbc Mon Sep 17 00:00:00 2001 From: decabeza Date: Wed, 13 Feb 2019 17:01:52 +0100 Subject: [PATCH 06/10] Add spec to show sticky button on mobile screens Also remove some unnecessary css lines that were causing some unrelated specs to fail. --- app/assets/stylesheets/layout.scss | 2 -- spec/features/proposals_spec.rb | 21 +++++++++++++++++++++ 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index a796ab5e8..ed1322275 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -446,8 +446,6 @@ header { background: $brand; border-bottom: 1px solid $border; margin-bottom: $line-height; - position: relative; - z-index: 10; .selected { border-bottom: 1px solid #fff; diff --git a/spec/features/proposals_spec.rb b/spec/features/proposals_spec.rb index c230a9422..e51f4701d 100644 --- a/spec/features/proposals_spec.rb +++ b/spec/features/proposals_spec.rb @@ -178,6 +178,27 @@ feature "Proposals" do end end + context "Show on mobile screens" do + + before do + Capybara.page.driver.browser.manage.window.resize_to(640, 480) + end + + after do + Capybara.page.driver.browser.manage.window.maximize + end + + scenario "Show support button sticky at bottom", :js do + proposal = create(:proposal) + visit proposal_path(proposal) + + within("#proposal_sticky") do + expect(page).to have_css(".is-stuck") + expect(page).not_to have_css(".is-anchored") + end + end + end + context "Embedded video" do scenario "Show YouTube video" do From 673405433077beab810108c287d39abebb3519e1 Mon Sep 17 00:00:00 2001 From: decabeza Date: Fri, 15 Feb 2019 16:06:19 +0100 Subject: [PATCH 07/10] Prevent map overlaps the support button --- app/assets/stylesheets/layout.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index ed1322275..f30efb074 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -2666,6 +2666,12 @@ table { } } +.leaflet-bottom, +.leaflet-pane, +.leaflet-top { + z-index: 4 !important; +} + // 24. Homepage // ------------ From 69cada5f9b134db1f5f04152b78ed8601fc3a021 Mon Sep 17 00:00:00 2001 From: decabeza Date: Fri, 15 Feb 2019 16:06:32 +0100 Subject: [PATCH 08/10] Prevent header overlaps the support button --- app/assets/stylesheets/layout.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index f30efb074..0e089ff9a 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -447,6 +447,11 @@ header { border-bottom: 1px solid $border; margin-bottom: $line-height; + @include breakpoint(small down) { + position: relative; + z-index: 10; + } + .selected { border-bottom: 1px solid #fff; } From f37a2bd0a87eed59aeaa2feec3056e81884f7768 Mon Sep 17 00:00:00 2001 From: decabeza Date: Fri, 15 Feb 2019 16:31:04 +0100 Subject: [PATCH 09/10] Change js depending of window with --- app/assets/javascripts/foundation_extras.js.coffee | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/foundation_extras.js.coffee b/app/assets/javascripts/foundation_extras.js.coffee index 7beb05f93..c12a2de92 100644 --- a/app/assets/javascripts/foundation_extras.js.coffee +++ b/app/assets/javascripts/foundation_extras.js.coffee @@ -2,7 +2,6 @@ App.FoundationExtras = initialize: -> $(document).foundation() - $(window).trigger "init.zf.sticky" $(window).trigger "resize" clearSticky = -> @@ -11,3 +10,15 @@ App.FoundationExtras = $(document).on("page:before-unload", clearSticky) window.addEventListener("popstate", clearSticky, false) + + mobile_ui_init = -> + $(window).trigger "load.zf.sticky" + + desktop_ui_init = -> + $(window).trigger "init.zf.sticky" + + $ -> + if $(window).width() < 620 + do mobile_ui_init + else + do desktop_ui_init From 148ea1ede992142134dc50f4c440dc1c834a7393 Mon Sep 17 00:00:00 2001 From: decabeza Date: Tue, 21 May 2019 11:09:49 +0200 Subject: [PATCH 10/10] Prevent notice been overlapped by header --- app/assets/stylesheets/layout.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 0e089ff9a..8e7334935 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -1082,10 +1082,13 @@ form { .notice-container { min-width: $line-height * 12; - position: absolute; right: 24px; top: 24px; + @include breakpoint(medium) { + position: absolute; + } + .notice { height: $line-height * 4;