如何使用 ActiveAdmin 垂直布局仪表板部分?

发布于 01-07 11:17 字数 669 浏览 3 评论 0原文

ActiveAdmin 0.3.4 生成的 dashboards.rb 文件中,我添加了三个部分,其中包括在有几列的宽桌子上。然而,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

我得到的:

dashboard Preview

我已经尝试使用 div 作为每个表的容器,但没有成功。

In the dashboards.rb file generated by ActiveAdmin 0.3.4, I added three sections consisting on wide tables with several columns. However ActiveAdmin displays each section next to the other, creating an unnecessary horizontal scrollbar.

How can I change this to a vertical layout?

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

What I get:

dashboard preview

I already tried using a div as the container for each table with no luck.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

黒涩兲箜2025-01-14 11:17:42

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

This answer for active_admin >= 0.5.1

Dashboard is structured in columns and panels
Columns are... well, columns, which define the horizontal layout.
Panels are like sections that stack verticaly.

A 2 column, 3 sections en each column, would be defined by:

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
謌踐踏愛綪2025-01-14 11:17:42

我最终用一些 CSS 在新的样式表中修复了这个问题:

active_admin_ex.css:

table.dashboard > tbody > tr > td {
  display:block;
}

然后,在 config/initializers/active_admin.rb 中,我添加了:

config.register_stylesheet 'active_admin_ex.css'

这修复了显示问题。

I finally fixed this with some CSS, in a new stylesheet:

active_admin_ex.css:

table.dashboard > tbody > tr > td {
  display:block;
}

Then, in config/initializers/active_admin.rb, I added:

config.register_stylesheet 'active_admin_ex.css'

And this fixed the display problem.

鹊巢2025-01-14 11:17:42

更灵活的是,您可以覆盖 Dashboard 类的 render_sections 以使用 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

more flexible, you can override the render_sections of the Dashboard class to use 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

you can add this code at the beginning of you app/admin/dashboard.rb file and then add the :colspan option when declaring a section:

  section "All time summary" , colspan: 6 , priority: 2  do
    div do
      render 'all_time_summary'
    end
  end
国产ˉ祖宗2025-01-14 11:17:42

你必须使用 CSS 来阻止该类

div :class => 'some class name' do

end

的样式

You have to use CSS to prevent that

div :class => 'some class name' do

end

style that class

烟花肆意2025-01-14 11:17:42
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
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
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文