diff --git a/app/controllers/admin/widget/cards_controller.rb b/app/controllers/admin/widget/cards_controller.rb
index d106c9e60..8f97238a3 100644
--- a/app/controllers/admin/widget/cards_controller.rb
+++ b/app/controllers/admin/widget/cards_controller.rb
@@ -45,6 +45,7 @@ class Admin::Widget::CardsController < Admin::BaseController
params.require(:widget_card).permit(
:link_url, :button_text, :button_url, :alignment, :header, :site_customization_page_id,
+ :columns,
translation_params(Widget::Card),
image_attributes: image_attributes
)
diff --git a/app/views/admin/widget/cards/_form.html.erb b/app/views/admin/widget/cards/_form.html.erb
index c461b4942..c85331025 100644
--- a/app/views/admin/widget/cards/_form.html.erb
+++ b/app/views/admin/widget/cards/_form.html.erb
@@ -20,6 +20,14 @@
<%= f.text_field :link_url %>
+ <% unless @card.header? %>
+ <%= f.label :columns %>
+
<%= t("admin.site_customization.pages.cards.columns_help") %>
+
+ <%= f.select :columns, (1..12), label: false %>
+
+ <% end %>
+
<%= f.hidden_field :header, value: @card.header? %>
<%= f.hidden_field :site_customization_page_id, value: @card.site_customization_page_id %>
diff --git a/config/locales/en/activerecord.yml b/config/locales/en/activerecord.yml
index 90e726039..302938c17 100644
--- a/config/locales/en/activerecord.yml
+++ b/config/locales/en/activerecord.yml
@@ -301,6 +301,7 @@ en:
description: Description
link_text: Link text
link_url: Link URL
+ columns: Number of columns
widget/card/translation:
label: Label (optional)
title: Title
diff --git a/config/locales/en/admin.yml b/config/locales/en/admin.yml
index d1a9fe98c..d0aac6442 100644
--- a/config/locales/en/admin.yml
+++ b/config/locales/en/admin.yml
@@ -1461,6 +1461,7 @@ en:
description: Description
link_text: Link text
link_url: Link URL
+ columns_help: "Width of the card in number of columns. On mobile screens it's always a width of 100%."
create:
notice: "Success"
update:
diff --git a/config/locales/es/activerecord.yml b/config/locales/es/activerecord.yml
index 45cfa15b0..fbd957971 100644
--- a/config/locales/es/activerecord.yml
+++ b/config/locales/es/activerecord.yml
@@ -301,6 +301,7 @@ es:
description: Descripción
link_text: Texto del enlace
link_url: URL del enlace
+ columns: Número de columnas
widget/card/translation:
label: Etiqueta (opcional)
title: Título
diff --git a/config/locales/es/admin.yml b/config/locales/es/admin.yml
index 3b82eee84..4414fc939 100644
--- a/config/locales/es/admin.yml
+++ b/config/locales/es/admin.yml
@@ -1461,6 +1461,7 @@ es:
description: Descripción
link_text: Texto del enlace
link_url: URL del enlace
+ columns_help: "Ancho de la tarjeta en número de columnas. En pantallas móviles siempre es un ancho del 100%."
homepage:
title: Título
description: Los módulos activos aparecerán en la homepage en el mismo orden que aquí.
diff --git a/spec/features/admin/widgets/cards_spec.rb b/spec/features/admin/widgets/cards_spec.rb
index 27f6a4d2b..73924e35b 100644
--- a/spec/features/admin/widgets/cards_spec.rb
+++ b/spec/features/admin/widgets/cards_spec.rb
@@ -131,7 +131,7 @@ feature 'Cards' do
end
context "Page card" do
- let!(:custom_page) { create(:site_customization_page) }
+ let!(:custom_page) { create(:site_customization_page, :published) }
scenario "Create", :js do
visit admin_site_customization_pages_path
@@ -145,6 +145,20 @@ feature 'Cards' do
expect(page).to have_content "Card for a custom page"
end
+ scenario "Show" do
+ card_1 = create(:widget_card, page: custom_page, title: "Card large", columns: 8)
+ card_2 = create(:widget_card, page: custom_page, title: "Card medium", columns: 4)
+ card_3 = create(:widget_card, page: custom_page, title: "Card small", columns: 2)
+
+ visit (custom_page).url
+
+ expect(page).to have_css(".card", count: 3)
+
+ expect(page).to have_css("#widget_card_#{card_1.id}.medium-8")
+ expect(page).to have_css("#widget_card_#{card_2.id}.medium-4")
+ expect(page).to have_css("#widget_card_#{card_3.id}.medium-2")
+ end
+
scenario "Edit", :js do
create(:widget_card, page: custom_page, title: "Original title")