Как расположить секции приборной панели вертикально с ActiveEadmin?
-
27-10-2019 - |
Вопрос
в dashboards.rb
Файл, сгенерированный ActiveEadmin 0.3.4, я добавил три секции, состоящие в широких таблицах с несколькими столбцами. Однако ActiveEadmin отображает каждый раздел рядом с другой, создавая ненужную горизонтальную прокрутку.
Как я могу изменить это на вертикальный макет?
Dashboards.rb:
ActiveAdmin::Dashboards.build do
section "Inactive users" do
table do
...
end
end
section "Deleted posts" do
table do
...
end
end
section "Latest comments" do
table do
...
end
end
end
Что я получаю:
Я уже пытался использовать Div в качестве контейнера для каждой таблицы без повезло.
Решение 2
Я наконец исправил это с некоторыми CSS, в новой таблице стиля:
active_admin_ex.css:
table.dashboard > tbody > tr > td {
display:block;
}
Затем в config/initializers/active_admin.rb, Я добавил:
config.register_stylesheet 'active_admin_ex.css'
И это исправило проблему отображения.
Другие советы
Этот ответ для Active_admin> = 0.5.1
Панель инструментов структурирована в столбцах и панелях. Панели похожи на разделы, которые складывают вертикальные.
2 столбца, 3 раздела en каждый столбец, будет определяться:
columns do
column do
panel "top on column 1"
# some code
end
panel "second on column 1"
# some code
end
panel "last on column 1"
# some code
end
end
column do
panel "top on column 2"
# some code
end
panel "second on column 2"
# some code
end
panel "last on column 2"
# some code
end
end
end
Более гибкий, вы можете переопределить render_sections of приборной панели, чтобы использовать Colspan:
module ActiveAdmin
module Views
module Pages
class Dashboard < Base
protected
def render_sections(sections)
cloned_sections = sections.clone
table :class => "dashboard" do
while !cloned_sections.empty?
current_cols_number = 0
tr do
while current_cols_number < 12 && !cloned_sections.empty?
s = cloned_sections.shift
colspan = s.options[:colspan].nil? ? 4 : s.options[:colspan]
td colspan: colspan do
render_section(s)
end
current_cols_number += colspan
end
end
end
end
end
end
end
end
end
Вы можете добавить этот код в начале своего app/admin/dashboard.rb
файл, а затем добавьте :colspan
вариант при объявлении раздела:
section "All time summary" , colspan: 6 , priority: 2 do
div do
render 'all_time_summary'
end
end
Вы должны использовать CSS, чтобы предотвратить это
div :class => 'some class name' do
end
Стиль этот класс
columns do
column do
panel "Recent Created Restaurant" do
table_for Restaurant.order('id desc').limit(5).each do |restaurant|
column (:id) {|restaurant| link_to(restaurant.id, admin_restaurant_path(restaurant)) }
column :name
column :phone
column :updated_at
end # table
end # panel
end # column
column do
panel "Recent Created Menu" do
table_for Menu.order('id desc').limit(5).each do |menu|
column (:id) {|menu| link_to(menu.id, admin_menu_path(menu)) }
column :name
column "Restaurant Name" do |menu|
menu.restaurant.name
end
column :updated_at
end # table
end # panel
end # column
column do
panel "Recent Created Order" do
table_for Order.order('id desc').limit(5).each do |order|
column (:id) {|order| link_to(order.id, admin_order_path(order)) }
column :table
column :status
column "Item Name" do |order|
order.item_orders.id
end
column :updated_at
end # table
end # panel
end # column
end # columns