diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 8cc51855f..1a0a733ce 100644 --- a/app/assets/javascripts/application.js +++ b/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(); diff --git a/app/assets/javascripts/fixed_bar.js.coffee b/app/assets/javascripts/fixed_bar.js.coffee new file mode 100644 index 000000000..8ccbf987f --- /dev/null +++ b/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() diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 937e5b2a8..7abaee6e2 100644 --- a/app/assets/stylesheets/layout.scss +++ b/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; diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index e518984ee..6609f25df 100644 --- a/app/assets/stylesheets/participation.scss +++ b/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 // ------------------------- diff --git a/app/views/budgets/investments/_header.html.erb b/app/views/budgets/investments/_header.html.erb index f7f1ee81a..b315f4ac1 100644 --- a/app/views/budgets/investments/_header.html.erb +++ b/app/views/budgets/investments/_header.html.erb @@ -4,8 +4,13 @@