Merge branch 'master' into legislation-module-stable

app/assets/javascripts/application.js

@@ -46,6 +46,7 @@
 //= require valuation_budget_investment_form
 //= require valuation_spending_proposal_form
 //= require embed_video
+//= require fixed_bar
 //= require banners
 //= require social_share
 //= require markdown-it
@@ -77,6 +78,7 @@ var initialize_modules = function() {
   App.ValuationBudgetInvestmentForm.initialize();
   App.ValuationSpendingProposalForm.initialize();
   App.EmbedVideo.initialize();
+  App.FixedBar.initialize();
   App.Banners.initialize();
   App.SocialShare.initialize();
   App.MarkdownEditor.initialize();

app/assets/javascripts/fixed_bar.js.coffee

@@ -0,0 +1,13 @@
+App.FixedBar =
+  initialize: ->
+    $('[data-fixed-bar]').each ->
+      $this = $(this)
+      fixedBarTopPosition = $this.offset().top
+
+      $(window).on 'scroll', ->
+        if $(window).scrollTop() > fixedBarTopPosition
+          $this.addClass('is-fixed')
+          $("#check-ballot").css({ 'display': "inline-block" });
+        else
+          $this.removeClass('is-fixed')
+          $("#check-ballot").hide()

app/assets/stylesheets/layout.scss

@@ -650,7 +650,7 @@ h2.sidebar-title {
 
 .auth-divider {
   border-bottom: 1px solid $border;
-  height: $line-height/2;
+  height: rem-calc(14);
   margin: $line-height 0;
   text-align: center;
 

app/assets/stylesheets/participation.scss

@@ -922,6 +922,14 @@
     color: white;
   }
 
+  .callout.warning {
+    font-size: $base-font-size;
+
+    a {
+      color: $color-warning;
+    }
+  }
+
   &.welcome {
     background: $budget image-url('spending_proposals_bg.jpg');
     background-position: 50% 50%;
@@ -1156,6 +1164,45 @@ ul.ballot-list {
   }
 }
 
+.progress-bar-nav {
+  padding: $line-height 0;
+  position: relative;
+  z-index: 3;
+
+  @include breakpoint(medium) {
+    background-color: $budget;
+    -webkit-transition: height 0.3s;
+    -moz-transition: height 0.3s;
+    transition: height 0.3s;
+
+    h1 {
+      -webkit-transition: font-size 0.3s;
+      -moz-transition: font-size 0.3s;
+      transition: font-size 0.3s;
+    }
+
+    h2 {
+      margin-bottom: 0;
+    }
+
+    &.is-fixed {
+      height: auto;
+      left: 0;
+      padding: $line-height;
+      position: fixed;
+      top: 0;
+      width: 100%;
+
+      h1 {
+        font-size: rem-calc(24);
+        -webkit-transition: font-size 0.3s;
+        -moz-transition: font-size 0.3s;
+        transition: font-size 0.3s;
+      }
+    }
+  }
+}
+
 // 07. Proposals successfull
 // -------------------------
 

app/views/budgets/investments/_header.html.erb

@@ -4,8 +4,13 @@
 
       <div class="row">
         <div class="small-12 column">
-          <%= back_link_to budget_group_path(@budget, @heading.group, unfeasible: params[:unfeasible]) %>
-
+          <% if @heading.group.headings.count == 1 %>
+            <%= back_link_to budget_path(@budget, unfeasible: params[:unfeasible]) %>
+          <% else %>
+            <%= back_link_to budget_group_path(@budget,
+                    @heading.group,
+                    unfeasible: params[:unfeasible]) %>
+          <% end %>
           <% if can? :show, @ballot %>
             <%= link_to t("budgets.investments.header.check_ballot"),
                         budget_ballot_path(@budget),
@@ -16,31 +21,34 @@
 
       <div class="row progress-votes">
         <div class="small-12 column">
-          <div class="progress-bar-nav" data-fixed-bar>
-            <h1 class="inline-block margin-top"><%= @heading.name %></h1>
-            <% if can? :show, @ballot %>
-              <div id="check-ballot" style="display: none;">
-                <%= link_to t("budgets.investments.header.check_ballot"),
-                            budget_ballot_path(@budget) %>
-              </div>
-              <% if @ballot.valid_heading?(@heading) %>
+          <% if can? :show, @ballot %>
+            <div id="check-ballot" style="display: none;">
+              <%= link_to t("budgets.investments.header.check_ballot"),
+                          budget_ballot_path(@budget) %>
+            </div>
+            <% if @ballot.valid_heading?(@heading) %>
+              <div class="progress-bar-nav" data-fixed-bar>
+                <h1><%= @heading.name %></h1>
                 <div id="progress_bar" class="no-margin-top">
                   <%= render 'budgets/ballot/progress_bar' %>
                 </div>
-              <% else %>
-                <br>
-                <p class="callout warning inline-block">
+              </div>
+            <% else %>
+              <h1><%= @heading.name %></h1>
+              <div class="small-12 medium-9">
+                <div class="callout warning">
                   <%= t("budgets.investments.header.different_heading_assigned_html",
                         heading_link: link_to(
                           @assigned_heading.name,
                           budget_investments_path(@budget, heading: @assigned_heading))
                        ) %>
-                </p>
-              <% end %>
-            <% else %>
-              <h2><%= @budget.formatted_heading_price(@heading) %></h2>
+                </div>
+              </div>
             <% end %>
-          </div>
+          <% else %>
+            <h1 class="margin-top"><%= @heading.name %></h1>
+            <h2><%= @budget.formatted_heading_price(@heading) %></h2>
+          <% end %>
         </div>
       </div>
     </div>

app/views/devise/_omniauth_form.html.erb

@@ -3,7 +3,7 @@
   <% if current_page?(new_user_session_path) %>
     <div class="row">
       <div class="small-12 column">
-        <div class="margin-bottom text-center">
+        <div class="margin-bottom">
           <strong><%= t("omniauth.info_sign_in") %></strong>
         </div>
       </div>
@@ -40,7 +40,7 @@
   <% elsif current_page?(new_user_registration_path) %>
     <div class="row">
       <div class="small-12 column">
-        <div class="margin-bottom text-center">
+        <div class="margin-bottom">
           <strong><%= t("omniauth.info_sign_up") %></strong>
         </div>
       </div>