consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
Improves admin banners section
This commit is contained in:
Alberto
2018-07-13 18:01:54 +02:00
committed by GitHub
parent 3e4d095e6f 15f9a52035
commit a10cade451
29 changed files with 297 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/assets/javascripts/banners.js.coffee
View File

@@ -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());

3
app/assets/stylesheets/layout.scss
View File

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

12
app/controllers/admin/banners_controller.rb
View File

@@ -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_imgs, only: [:edit, :new, :create, :update]
before_action :banner_sections, 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,
:post_started_at, :post_ended_at]
attributes = [:title, :description, :target_url,
: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

1
app/controllers/budgets_controller.rb
View File

@@ -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

11
app/controllers/concerns/commentable_actions.rb
View File

@@ -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

1
app/controllers/pages_controller.rb
View File

@@ -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

1
app/controllers/welcome_controller.rb
View File

@@ -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

6
app/models/banner.rb
View File

@@ -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

4
app/models/banner/section.rb Normal file
View File

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

4
app/models/web_section.rb Normal file
View File

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

44
app/views/admin/banners/_form.html.erb
View File

@@ -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-image" class="<%= @banner.image %>">
<div id="js-banner-background" class="banner" style="background-color:<%= @banner.background_color %>">
<%= link_to @banner.target_url do %>
<h2 id="js-banner-title"><%= @banner.title %></h2>
<h3 id="js-banner-description"><%= @banner.description %></h3>
<h2 id="js-banner-title" style="color:<%= @banner.font_color %>"><%= @banner.title %></h2>
<h3 id="js-banner-description" style="color:<%= @banner.font_color %>"><%= @banner.description %></h3>
<% end %>
</div>
</div>
<% end %>

8
app/views/admin/banners/index.html.erb
View File

@@ -37,14 +37,12 @@
</tr>
<tr>
<td colspan="3">
<div class="<%= banner.style %>">
<div class="<%= banner.image %>">
<div class="banner" style="background-color:<%= banner.background_color %>">
<%= link_to banner.target_url do %>
<h2><%= banner.title %></h2>
<h3><%= banner.description %></h3>
<h2 style="color:<%= banner.font_color %>"><%= banner.title %></h2>
<h3 style="color:<%= banner.font_color %>"><%= banner.description %></h3>
<% end %>
</div>
</div>
</td>
</tr>
</tbody>

7
app/views/budgets/index.html.erb
View File

@@ -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 %>

4
app/views/pages/help/index.html.erb
View File

@@ -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">

8
app/views/shared/_banner.html.erb
View File

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

4
app/views/welcome/index.html.erb
View File

@@ -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 %>

9
config/locales/en/admin.yml
View File

@@ -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:

11
config/locales/es/admin.yml
View File

@@ -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:

8
db/dev_seeds/banners.rb
View File

@@ -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

6
db/migrate/20180109081115_add_settings_to_banners.rb Normal file
View File

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

9
db/migrate/20180109101656_create_banner_sections.rb Normal file
View File

@@ -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

8
db/migrate/20180115075542_create_web_sections.rb Normal file
View File

@@ -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

15
db/schema.rb
View File

@@ -63,6 +63,13 @@ 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 "description"
@@ -74,6 +81,8 @@ ActiveRecord::Schema.define(version: 20180519132610) do
t.datetime "hidden_at"
t.datetime "created_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"

20
lib/tasks/banners.rake Normal file
View File

@@ -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

10
lib/tasks/web_sections.rake Normal file
View File

@@ -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

13
spec/factories.rb
View File

@@ -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

73
spec/features/admin/banners_spec.rb
View File

@@ -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

29
spec/features/banners_spec.rb Normal file
View File

@@ -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