Merge pull request #2319 from wairbut-m2c/iagirre-admin-banner

Improves admin banners section

app/assets/javascripts/banners.js.coffee

@@ -7,6 +7,14 @@ App.Banners =
     $(selector).removeClass($(selector).attr("class"), true)
       .addClass(style, true)
 
+  update_background_color: (selector, text_selector, background_color) ->
+    $(selector).css('background-color', background_color);
+    $(text_selector).val(background_color);
+
+  update_font_color: (selector, text_selector, font_color) ->
+    $(selector).css('color', font_color);
+    $(text_selector).val(font_color);
+
   initialize: ->
     $('[data-js-banner-title]').on
       change: ->
@@ -16,10 +24,20 @@ App.Banners =
       change: ->
         App.Banners.update_banner("#js-banner-description", $(this).val())
 
-    $("#banner_style").on
+    $("#banner_background_color_picker").on
       change: ->
-        App.Banners.update_style("#js-banner-style", $(this).val())
+        App.Banners.update_background_color("#js-banner-background", "#banner_background_color", $(this).val());
 
-    $("#banner_image").on
+    $("#banner_background_color").on
       change: ->
-        App.Banners.update_style("#js-banner-image", $(this).val())
+        App.Banners.update_background_color("#js-banner-background", "#banner_background_color_picker", $(this).val());
+
+    $("#banner_font_color_picker").on
+      change: ->
+        App.Banners.update_font_color("#js-banner-title", "#banner_font_color", $(this).val());
+        App.Banners.update_font_color("#js-banner-description", "#banner_font_color", $(this).val());
+
+    $("#banner_font_color").on
+      change: ->
+        App.Banners.update_font_color("#js-banner-title", "#banner_font_color_picker", $(this).val());
+        App.Banners.update_font_color("#js-banner-description", "#banner_font_color_picker", $(this).val());

app/assets/stylesheets/layout.scss

@@ -2226,7 +2226,8 @@ table {
 
 .banner-style-one,
 .banner-style-two,
-.banner-style-three {
+.banner-style-three,
+.banner {
   margin: 0;
   margin-bottom: $line-height;
 

app/controllers/admin/banners_controller.rb

@@ -2,8 +2,7 @@ class Admin::BannersController < Admin::BaseController
 
   has_filters %w{all with_active with_inactive}, only: :index
 
-  before_action :banner_styles, only: [:edit, :new, :create, :update]
+  before_action :banner_sections, only: [:edit, :new, :create, :update]
-  before_action :banner_imgs, only: [:edit, :new, :create, :update]
 
   respond_to :html, :js
 
@@ -38,8 +37,10 @@ class Admin::BannersController < Admin::BaseController
   private
 
     def banner_params
-      attributes = [:title, :description, :target_url, :style, :image,
+      attributes = [:title, :description, :target_url,
-                    :post_started_at, :post_ended_at]
+                    :post_started_at, :post_ended_at,
+                    :background_color, :font_color,
+                    web_section_ids: []]
       params.require(:banner).permit(*attributes)
     end
 
@@ -55,4 +56,7 @@ class Admin::BannersController < Admin::BaseController
                      end
     end
 
+    def banner_sections
+      @banner_sections = WebSection.all
+    end
 end

app/controllers/budgets_controller.rb

@@ -16,6 +16,7 @@ class BudgetsController < ApplicationController
   def index
     @finished_budgets = @budgets.finished.order(created_at: :desc)
     @budgets_coordinates = current_budget_map_locations
+    @banners = Banner.in_section('budgets').with_active
   end
 
 end

app/controllers/concerns/commentable_actions.rb

@@ -16,7 +16,7 @@ module CommentableActions
     index_customization if index_customization.present?
 
     @tag_cloud = tag_cloud
-    @banners = Banner.with_active
+    @banners = Banner.in_section(section(resource_model.name)).with_active
 
     set_resource_votes(@resources)
 
@@ -114,4 +114,13 @@ module CommentableActions
       nil
     end
 
+    def section(resource_name)
+      case resource_name
+      when "Proposal"
+        'proposals'
+      when "Debate"
+        'debates'
+      end
+    end
+
 end

app/controllers/pages_controller.rb

@@ -3,6 +3,7 @@ class PagesController < ApplicationController
 
   def show
     @custom_page = SiteCustomization::Page.published.find_by(slug: params[:id])
+    @banners = Banner.in_section('help_page').with_active
 
     if @custom_page.present?
       render action: :custom_page

app/controllers/welcome_controller.rb

@@ -8,6 +8,7 @@ class WelcomeController < ApplicationController
     @header = Widget::Card.header.first
     @feeds = Widget::Feed.active
     @cards = Widget::Card.body
+    @banners = Banner.in_section('homepage').with_active
   end
 
   def welcome

app/helpers/banners_helper.rb

@@ -4,4 +4,4 @@ module BannersHelper
     @banners.present? && @banners.count > 0
   end
 
-end
+end

app/models/banner.rb

@@ -7,13 +7,15 @@ class Banner < ActiveRecord::Base
                     length: { minimum: 2 }
   validates :description, presence: true
   validates :target_url, presence: true
-  validates :style, presence: true
-  validates :image, presence: true
   validates :post_started_at, presence: true
   validates :post_ended_at, presence: true
 
+  has_many :sections
+  has_many :web_sections, through: :sections
+
   scope :with_active,   -> { where("post_started_at <= ?", Time.current).where("post_ended_at >= ?", Time.current) }
 
   scope :with_inactive, -> { where("post_started_at > ? or post_ended_at < ?", Time.current, Time.current) }
 
+  scope :in_section, ->(section_name) { joins(:web_sections, :sections).where("web_sections.name ilike ?", section_name) }
 end

app/models/banner/section.rb

@@ -0,0 +1,4 @@
+class Banner::Section < ActiveRecord::Base
+  belongs_to :banner
+  belongs_to :web_section
+end

app/models/web_section.rb

@@ -0,0 +1,4 @@
+class WebSection < ActiveRecord::Base
+  has_many :sections
+  has_many :banners, through: :sections
+end

app/views/admin/banners/_form.html.erb

@@ -3,18 +3,8 @@
   <%= render 'errors' %>
 
   <div class="row">
-    <div class="small-12 medium-6 large-3 column">
-    <%= f.label :style, t("admin.banners.banner.style") %>
-    <%= f.select :style, options_for_select(@banner_styles, @banner.style),:include_blank => '-',
-                      label: false,placeholder: t("admin.banners.banner.style") %>
-    </div>
-    <div class="small-12 medium-6 large-3 column">
-    <%= f.label :image, t("admin.banners.banner.image") %>
-    <%= f.select :image, options_for_select(@banner_imgs, @banner.image),:include_blank => '-',
-                      label: false, placeholder: t("admin.banners.banner.image") %>
-    </div>
     <% date_started_at = @banner.post_started_at.present? ? I18n.localize(@banner.post_started_at) : "" %>
-    <div class="small-12 medium-6 large-3 column">
+    <div class="small-12 medium-3 column">
       <%= f.label :post_started_at, t("admin.banners.banner.post_started_at") %>
       <%= f.text_field :post_started_at,
                         label: false,
@@ -24,7 +14,7 @@
                         id: "post_started_at" %>
     </div>
     <% date_ended_at = @banner.post_ended_at.present? ? I18n.localize(@banner.post_ended_at) : ""%>
-    <div class="small-12 medium-6 large-3 column">
+    <div class="small-12 medium-3 column end">
       <%= f.label :post_ended_at, t("admin.banners.banner.post_ended_at") %>
       <%= f.text_field  :post_ended_at,
                         label: false,
@@ -60,17 +50,37 @@
     </div>
   </div>
 
+  <div class="row">
+    <div class="small-12 column">
+      <%= f.label :sections, t("admin.banners.banner.sections_label") %>
+      <%= f.collection_check_boxes(:web_section_ids, @banner_sections, :id, :name) do |b| %>
+        <%= b.check_box %> <%= t("admin.banners.banner.sections.#{b.text}") %><br>
+      <% end %>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="small-3 column">
+      <%= f.label :sections, t("admin.banners.banner.background_color") %>
+      <%= color_field(:banner, :background_color, id: 'banner_background_color_picker') %>
+      <%= f.text_field :background_color, label: false %>
+    </div>
+    <div class="small-3 column end">
+      <%= f.label :sections, t("admin.banners.banner.font_color") %>
+      <%= color_field(:banner, :font_color, id: 'banner_font_color_picker') %>
+      <%= f.text_field :font_color, label: false %>
+    </div>
+  </div>
+
   <div class="row">
     <div class="actions small-12 medium-3 column">
       <%= f.submit(class: "button expanded", value: t("admin.banners.edit.form.submit_button")) %>
     </div>
   </div>
-  <div id="js-banner-style" class="<%= @banner.style %>">
+  <div id="js-banner-background" class="banner" style="background-color:<%= @banner.background_color %>">
-    <div id="js-banner-image" class="<%= @banner.image %>">
+    <%= link_to @banner.target_url do %>
-      <%= link_to @banner.target_url do %>
+      <h2 id="js-banner-title" style="color:<%= @banner.font_color %>"><%= @banner.title %></h2>
-        <h2 id="js-banner-title"><%= @banner.title %></h2>
+      <h3 id="js-banner-description" style="color:<%= @banner.font_color %>"><%= @banner.description %></h3>
-        <h3 id="js-banner-description"><%= @banner.description %></h3>
+    <% end %>
-      <% end %>
-    </div>
   </div>
-<% end %>
+<% end %>

app/views/admin/banners/index.html.erb

@@ -37,13 +37,11 @@
       </tr>
       <tr>
         <td colspan="3">
-          <div class="<%= banner.style %>">
+          <div class="banner" style="background-color:<%= banner.background_color %>">
-            <div class="<%= banner.image %>">
+            <%= link_to banner.target_url do %>
-              <%= link_to banner.target_url do %>
+              <h2 style="color:<%= banner.font_color %>"><%= banner.title %></h2>
-                <h2><%= banner.title %></h2>
+              <h3 style="color:<%= banner.font_color %>"><%= banner.description %></h3>
-                <h3><%= banner.description %></h3>
+            <% end %>
-              <% end %>
-            </div>
           </div>
         </td>
       </tr>
@@ -51,4 +49,4 @@
   </table>
 <% end %>
 
-<%= paginate @banners %>
+<%= paginate @banners %>

app/views/budgets/index.html.erb

@@ -1,4 +1,9 @@
-<% provide :title do %><%= t("budgets.index.title") %><% end %>
+<% if has_banners? %>
+  <%= render "shared/banner" %>
+<% end %>
+
+<% provide :title do %><%= t('budgets.index.title') %><% end %>
+
 <% content_for :canonical do %>
   <%= render "shared/canonical", href: budgets_url %>
 <% end %>

app/views/pages/help/index.html.erb

@@ -3,6 +3,10 @@
   <%= render "shared/canonical", href: help_url %>
 <% end %>
 
+<% if has_banners? %>
+  <%= render "shared/banner" %>
+<% end %>
+
 <div class="jumbo light">
   <div class="row">
     <div class="small-12 medium-9 column">

app/views/shared/_banner.html.erb

@@ -1,9 +1,7 @@
 <% banner = @banners.sample %>
-<div class="<%= banner.style %>">
+<div class="banner" style="background-color:<%= banner.background_color %>">
-  <div class="<%= banner.image %>">
+  <%= link_to banner.target_url do %>
-    <%= link_to banner.target_url do %>
+    <h2 style="color:<%= banner.font_color %>"><%=banner.title %></h2>
-      <h2><%=banner.title %></h2>
+    <h3 style="color:<%= banner.font_color %>"><%=banner.description %></h3>
-      <h3><%=banner.description %></h3>
+  <% end %>
-    <% end %>
-  </div>
 </div>

app/views/welcome/index.html.erb

@@ -4,6 +4,10 @@
   <%= render "shared/canonical", href: root_url %>
 <% end %>
 
+<% if has_banners? %>
+  <%= render "shared/banner" %>
+<% end %>
+
 <% provide :social_media_meta_tags do %>
   <%= render "shared/social_media_meta_tags",
               social_url: root_url %>

config/locales/en/admin.yml

@@ -33,6 +33,15 @@ en:
         image: Image
         post_started_at: Post started at
         post_ended_at: Post ended at
+        sections_label: Sections where it will appear
+        sections:
+          homepage: Homepage
+          debates: Debates
+          proposals: Proposals
+          budgets: Participatory budgeting
+          help_page: Help page
+        background_color: Background colour
+        font_color: Font colour
       edit:
         editing: Edit banner
         form:

config/locales/es/admin.yml

@@ -29,10 +29,17 @@ es:
         title: Título
         description: Descripción
         target_url: Enlace
-        style: Estilo
-        image: Imagen
         post_started_at: Inicio de publicación
         post_ended_at: Fin de publicación
+        sections_label: Secciones en las que aparece
+        sections:
+          homepage: Homepage
+          debates: Debates
+          proposals: Propuestas
+          budgets: Presupuestos participativos
+          help_page: Página de ayuda
+        background_color: Color de fondo
+        font_color: Color del texto
       edit:
         editing: Editar el banner
         form:

db/dev_seeds/banners.rb

@@ -17,3 +17,11 @@ section "Creating banners" do
                             created_at: rand((Time.current - 1.week)..Time.current))
   end
 end
+
+section "Creating web sections" do
+  WebSection.create(name: 'homepage')
+  WebSection.create(name: 'debates')
+  WebSection.create(name: 'proposals')
+  WebSection.create(name: 'budgets')
+  WebSection.create(name: 'help_page')
+end

db/migrate/20180109081115_add_settings_to_banners.rb

@@ -0,0 +1,6 @@
+class AddSettingsToBanners < ActiveRecord::Migration
+  def change
+    add_column :banners, :background_color, :text
+    add_column :banners, :font_color, :text
+  end
+end

db/migrate/20180109101656_create_banner_sections.rb

@@ -0,0 +1,9 @@
+class CreateBannerSections < ActiveRecord::Migration
+  def change
+    create_table :banner_sections do |t|
+      t.integer :banner_id
+      t.integer :web_section_id
+      t.timestamps null: false
+    end
+  end
+end

db/migrate/20180115075542_create_web_sections.rb

@@ -0,0 +1,8 @@
+class CreateWebSections < ActiveRecord::Migration
+  def change
+    create_table :web_sections do |t|
+      t.text :name
+      t.timestamps null: false
+    end
+  end
+end

db/schema.rb

@@ -63,8 +63,15 @@ ActiveRecord::Schema.define(version: 20180519132610) do
   add_index "annotations", ["legacy_legislation_id"], name: "index_annotations_on_legacy_legislation_id", using: :btree
   add_index "annotations", ["user_id"], name: "index_annotations_on_user_id", using: :btree
 
+  create_table "banner_sections", force: :cascade do |t|
+    t.integer  "banner_id"
+    t.integer  "web_section_id"
+    t.datetime "created_at",     null: false
+    t.datetime "updated_at",     null: false
+  end
+
   create_table "banners", force: :cascade do |t|
-    t.string   "title",           limit: 80
+    t.string   "title",            limit: 80
     t.string   "description"
     t.string   "target_url"
     t.string   "style"
@@ -72,8 +79,10 @@ ActiveRecord::Schema.define(version: 20180519132610) do
     t.date     "post_started_at"
     t.date     "post_ended_at"
     t.datetime "hidden_at"
-    t.datetime "created_at",                 null: false
+    t.datetime "created_at",                  null: false
-    t.datetime "updated_at",                 null: false
+    t.datetime "updated_at",                  null: false
+    t.text     "background_color"
+    t.text     "font_color"
   end
 
   add_index "banners", ["hidden_at"], name: "index_banners_on_hidden_at", using: :btree
@@ -1258,6 +1267,12 @@ ActiveRecord::Schema.define(version: 20180519132610) do
     t.datetime "updated_at",             null: false
   end
 
+  create_table "web_sections", force: :cascade do |t|
+    t.text     "name"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+  end
+
   add_foreign_key "administrators", "users"
   add_foreign_key "annotations", "legacy_legislations"
   add_foreign_key "annotations", "users"

lib/tasks/banners.rake

@@ -0,0 +1,20 @@
+namespace :banners do
+
+  desc "Migrate styles to background_color and font_color"
+  task migrate_style: :environment do
+
+    Banner.all.each do |banner|
+      banner.font_color = '#FFFFFF'
+      case banner.style
+      when "banner-style banner-style-one"
+        banner.background_color = '#004a83'
+      when "banner-style banner-style-two"
+        banner.background_color = '#7e328a'
+      when "banner-style banner-style-three"
+        banner.background_color = '#33dadf'
+      end
+      banner.save
+    end
+  end
+
+end

lib/tasks/web_sections.rake

@@ -0,0 +1,10 @@
+namespace :web_sections do
+  desc "Generate web sections for banners"
+  task generate: :environment do
+    WebSection.create(name: 'homepage')
+    WebSection.create(name: 'debates')
+    WebSection.create(name: 'proposals')
+    WebSection.create(name: 'budgets')
+    WebSection.create(name: 'help_page')
+  end
+end

spec/factories.rb

@@ -738,11 +738,20 @@ FactoryBot.define do
   factory :banner do
     sequence(:title) { |n| "Banner title #{n}" }
     sequence(:description) { |n| "This is the text of Banner #{n}" }
-    style {["banner-style-one", "banner-style-two", "banner-style-three"].sample}
-    image {["banner.banner-img-one", "banner.banner-img-two", "banner.banner-img-three"].sample}
     target_url {["/proposals", "/debates" ].sample}
     post_started_at { Time.current - 7.days }
     post_ended_at { Time.current + 7.days }
+    background_color '#FF0000'
+    font_color '#FFFFFF'
+  end
+
+  factory :web_section do
+    name 'homepage'
+  end
+
+  factory :banner_section, class: 'Banner::Section' do
+    association :banner_id, factory: :banner
+    association :web_section, factory: :web_section
   end
 
   factory :proposal_notification do

spec/features/admin/banners_spec.rb

@@ -11,42 +11,42 @@ feature 'Admin banners magement' do
       @banner1 = create(:banner, title: "Banner number one",
                   description:  "This is the text of banner number one and is not active yet",
                   target_url:  "http://www.url.com",
-                  style: "banner-style.banner-one",
-                  image: "banner-img.banner-one",
                   post_started_at: (Time.current + 4.days),
-                  post_ended_at:   (Time.current + 10.days))
+                  post_ended_at:   (Time.current + 10.days),
+                  background_color: '#FF0000',
+                  font_color: '#FFFFFF')
 
       @banner2 = create(:banner, title: "Banner number two",
                   description:  "This is the text of banner number two and is not longer active",
                   target_url:  "http://www.url.com",
-                  style: "banner-style.banner-two",
-                  image: "banner-img.banner-two",
                   post_started_at: (Time.current - 10.days),
-                  post_ended_at:   (Time.current - 3.days))
+                  post_ended_at:   (Time.current - 3.days),
+                  background_color: '#00FF00',
+                  font_color: '#FFFFFF')
 
       @banner3 = create(:banner, title: "Banner number three",
                   description:  "This is the text of banner number three and has style banner-three",
                   target_url:  "http://www.url.com",
-                  style: "banner-style.banner-three",
-                  image: "banner-img.banner-three",
                   post_started_at: (Time.current - 1.day),
-                  post_ended_at:   (Time.current + 10.days))
+                  post_ended_at:   (Time.current + 10.days),
+                  background_color: '#0000FF',
+                  font_color: '#FFFFFF')
 
       @banner4 = create(:banner, title: "Banner number four",
                   description:  "This is the text of banner number four and has style banner-one",
                   target_url:  "http://www.url.com",
-                  style: "banner-style.banner-one",
-                  image: "banner-img.banner-one",
                   post_started_at: (DateTime.current - 10.days),
-                  post_ended_at:   (DateTime.current + 10.days))
+                  post_ended_at:   (DateTime.current + 10.days),
+                  background_color: '#FFF000',
+                  font_color: '#FFFFFF')
 
       @banner5 = create(:banner, title: "Banner number five",
                   description:  "This is the text of banner number five and has style banner-two",
                   target_url:  "http://www.url.com",
-                  style: "banner-style.banner-one",
-                  image: "banner-img.banner-one",
                   post_started_at: (DateTime.current - 10.days),
-                  post_ended_at:   (DateTime.current + 10.days))
+                  post_ended_at:   (DateTime.current + 10.days),
+                  background_color: '#FFFF00',
+                  font_color: '#FFFFFF')
     end
 
     scenario 'Index show active banners' do
@@ -74,6 +74,8 @@ feature 'Admin banners magement' do
   end
 
   scenario 'Publish a banner' do
+    section = create(:web_section, name: 'proposals')
+
     visit admin_root_path
 
     within('#side_menu') do
@@ -82,8 +84,6 @@ feature 'Admin banners magement' do
 
     click_link "Create banner"
 
-    select 'Banner style 1', from: 'banner_style'
-    select 'Banner image 2', from: 'banner_image'
     fill_in 'banner_title', with: 'Such banner'
     fill_in 'banner_description', with: 'many text wow link'
     fill_in 'banner_target_url', with: 'https://www.url.com'
@@ -91,6 +91,9 @@ feature 'Admin banners magement' do
     next_week = Time.current + 7.days
     fill_in 'post_started_at', with: last_week.strftime("%d/%m/%Y")
     fill_in 'post_ended_at', with: next_week.strftime("%d/%m/%Y")
+    fill_in 'banner_background_color', with: '#850000'
+    fill_in 'banner_font_color', with: '#ffb2b2'
+    check "banner_web_section_ids_#{section.id}"
 
     click_button 'Save changes'
 
@@ -102,14 +105,32 @@ feature 'Admin banners magement' do
     expect(page).to have_link 'Such banner many text wow link', href: 'https://www.url.com'
   end
 
+  scenario "Update banner color when changing from color picker or text_field", :js do
+    visit new_admin_banner_path
+
+    fill_in 'banner_background_color', with: '#850000'
+    fill_in 'banner_font_color', with: '#ffb2b2'
+    fill_in 'banner_title', with: 'Fun with flags'
+
+    # This last step simulates the blur event on the page. The color pickers and the text_fields
+    # has onChange events that update each one when the other changes, but this is only fired when
+    # the text_field loses the focus (color picker update when text_field changes). The first one
+    # works because when the test fills in the second one, the first loses the focus
+    # (so the onChange is fired). The second one never loses the focus, so the onChange is not been fired.
+    # The `fill_in` action clicks out of the text_field and makes the field to lose the focus.
+
+    expect(find("#banner_background_color_picker").value).to eq('#850000')
+    expect(find("#banner_font_color_picker").value).to eq('#ffb2b2')
+  end
+
   scenario 'Edit banner with live refresh', :js do
     banner1 = create(:banner, title: 'Hello',
                               description: 'Wrong text',
                               target_url:  'http://www.url.com',
-                              style: 'banner-style.banner-one',
-                              image: 'banner-img.banner-one',
                               post_started_at: (Time.current + 4.days),
-                              post_ended_at:   (Time.current + 10.days))
+                              post_ended_at:   (Time.current + 10.days),
+                              background_color: '#FF0000',
+                              font_color: '#FFFFFF')
 
     visit admin_root_path
 
@@ -122,10 +143,10 @@ feature 'Admin banners magement' do
 
     fill_in 'banner_title', with: 'Modified title'
     fill_in 'banner_description', with: 'Edited text'
-    select 'Banner style 1', from: 'banner_style'
-    select 'Banner image 2', from: 'banner_image'
 
-    within('div#js-banner-style') do
+    page.find("body").click
+
+    within('div#js-banner-background') do
       expect(page).to have_selector('h2', text: 'Modified title')
       expect(page).to have_selector('h3', text: 'Edited text')
     end
@@ -144,10 +165,10 @@ feature 'Admin banners magement' do
     create(:banner, title: 'Ugly banner',
                     description: 'Bad text',
                     target_url:  'http://www.url.com',
-                    style: 'banner-style.banner-one',
-                    image: 'banner-img.banner-one',
                     post_started_at: (Time.current + 4.days),
-                    post_ended_at:   (Time.current + 10.days))
+                    post_ended_at:   (Time.current + 10.days),
+                    background_color: '#FF0000',
+                    font_color: '#FFFFFF')
 
     visit admin_root_path
 

spec/features/banners_spec.rb

@@ -0,0 +1,29 @@
+require 'rails_helper'
+
+feature 'Banner' do
+
+  scenario "The banner is shown correctly" do
+    create(:web_section, name: 'homepage')
+    banner = create(:banner, title: 'Hello',
+                      description: 'Banner description',
+                      target_url:  'http://www.url.com',
+                      post_started_at: (Time.current - 4.days),
+                      post_ended_at:   (Time.current + 10.days),
+                      background_color: '#FF0000',
+                      font_color: '#FFFFFF')
+    section = WebSection.where(name: 'homepage').last
+    create(:banner_section, web_section: section, banner_id: banner.id)
+
+    visit root_path
+
+    within('.banner') do
+      expect(page).to have_content('Banner description')
+      expect(find('h2')[:style]).to eq("color:#{banner.font_color}")
+      expect(find('h3')[:style]).to eq("color:#{banner.font_color}")
+    end
+
+    visit debates_path
+
+    expect(page).not_to have_content('Banner description')
+  end
+end