diff --git a/app/assets/javascripts/foundation_extras.js.coffee b/app/assets/javascripts/foundation_extras.js.coffee index 720b62047..c12a2de92 100644 --- a/app/assets/javascripts/foundation_extras.js.coffee +++ b/app/assets/javascripts/foundation_extras.js.coffee @@ -2,4 +2,23 @@ App.FoundationExtras = initialize: -> $(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) + + 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 diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index ed1322275..8e7334935 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; } @@ -1077,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; @@ -2666,6 +2674,12 @@ table { } } +.leaflet-bottom, +.leaflet-pane, +.leaflet-top { + z-index: 4 !important; +} + // 24. Homepage // ------------ 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..e3b25a52d 100644 --- a/app/views/proposals/show.html.erb +++ b/app/views/proposals/show.html.erb @@ -62,30 +62,45 @@ <% 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 %> 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