Merge pull request #3515 from consul/proposals-support-mobile

Proposals support on mobile
consuldemocracy · May 22, 2019 · 7abeb59 · 7abeb59
2 parents ac1d819 + 148ea1e
commit 7abeb59
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -62,30 +62,45 @@
             </div>
           <% end %>
 
-          <div class="sidebar-divider"></div>
-          <h2><%= t("votes.supports") %></h2>
-          <div id="<%= dom_id(@proposal) %>_votes">
-            <% if @proposal.draft? %>
-              <div class="callout primary">
-                <p class=text-center><strong><%= t('.draft') %></strong></p>
-              </div>
-            <% elsif @proposal.successful? %>
-              <p>
-                <%= t("proposals.proposal.successful") %>
-              </p>
-            <% elsif @proposal.archived? %>
-              <div class="padding text-center">
-                <p>
-                  <strong><%= t("proposals.proposal.supports", count: @proposal.total_votes) %></strong>
-                </p>
-                <p><%= t("proposals.proposal.archived") %></p>
+          <div id="proposal_sticky" data-sticky-container>
+            <div class="sticky fixed-mobile-content"
+                 data-sticky
+                 data-stick-to="bottom"
+                 data-sticky-on="small"
+                 data-top-anchor="0"
+                 data-btm-anchor="sticky_stop"
+                 data-check-every="0">
+              <div class="fixed-mobile-content">
+                <div class="sidebar-divider"></div>
+                <h2><%= t("votes.supports") %></h2>
+
+                <div id="<%= dom_id(@proposal) %>_votes">
+                  <% if @proposal.draft? %>
+                    <div class="callout primary">
+                      <p class=text-center><strong><%= t('.draft') %></strong></p>
+                    </div>
+                  <% elsif @proposal.successful? %>
+                    <p>
+                      <%= t("proposals.proposal.successful") %>
+                    </p>
+                  <% elsif @proposal.archived? %>
+                    <div class="padding text-center">
+                      <p>
+                        <strong><%= t("proposals.proposal.supports", count: @proposal.total_votes) %></strong>
+                      </p>
+                      <p><%= t("proposals.proposal.archived") %></p>
+                    </div>
+                  <% else %>
+                    <%= render "votes",
+                              { proposal: @proposal, vote_url: vote_proposal_path(@proposal, value: "yes") } %>
+                  <% end %>
+                </div>
               </div>
-            <% else %>
-              <%= render "votes",
-                        { proposal: @proposal, vote_url: vote_proposal_path(@proposal, value: "yes") } %>
-            <% end %>
+            </div>
           </div>
 
+          <div id="sticky_stop"></div>
+
           <%= 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
@@ -178,6 +178,27 @@
     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