Как расположить разделы приборной панели по вертикали с помощью ActiveAdmin?

Question

В файле dashboards.rb, сгенерированном ActiveAdmin 0.3.4, я добавил три раздела, состоящих из широких таблиц с несколькими столбцами.Однако ActiveAdmin отображает каждый раздел рядом с другим, создавая ненужную горизонтальную полосу прокрутки.

Как изменить это на вертикальный макет?

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 в качестве контейнера для каждой таблицы без удачи.

Answer 1

Этот ответ для active_admin> = 0.5.1

Панель инструментов структурирована по столбцам и панелям. Столбцы - это, ну, столбцы, которые определяют горизонтальное расположение.Панели похожи на секции, которые располагаются по вертикали.

2 столбца, по 3 раздела в каждом столбце, определяются следующим образом:

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

Answer 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'

И это решило проблему с отображением.

Answer 3

более гибко, вы можете переопределить render_sections класса Dashboard для использования 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

Answer 4

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

Answer 5

Вы должны использовать CSS, чтобы предотвратить это

div :class => 'some class name' do

end

стиль этого класса