Wie layeriere ich die Dashboard -Abschnitte vertikal mit ActiveAeDmin?
-
27-10-2019 - |
Frage
In dem dashboards.rb
Datei generiert von ActiveDmin 0.3.4 Ich habe drei Abschnitte hinzugefügt, die auf breiten Tabellen mit mehreren Spalten bestehen. ActiveDmin zeigt jedoch jeden Abschnitt nebeneinander an und erstellt eine unnötige horizontale Scrollbar.
Wie kann ich dies in ein vertikales Layout ändern?
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
Was ich bekomme:
Ich habe bereits versucht, einen DIV als Behälter für jeden Tisch ohne Glück zu verwenden.
Lösung 2
Ich habe dies endlich mit einigen CSS in einem neuen Stylesheet behoben:
Active_admin_ex.css::
table.dashboard > tbody > tr > td {
display:block;
}
Dann in config/initializer/active_admin.rb, Ich fügte hinzu:
config.register_stylesheet 'active_admin_ex.css'
Und dies hat das Anzeigeproblem behoben.
Andere Tipps
Diese Antwort für Active_admin> = 0.5.1
Das Dashboard ist in Säulen und Panels Säulen strukturiert ... gut, Spalten, die das horizontale Layout definieren. Panels sind wie Abschnitte, die vertikal stapeln.
Eine 2 -Spalte, 3 Abschnitte, die jede Spalte bewirken, wird definiert durch:
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
Flexiblerer können Sie die Render_sektionen der Dashboard -Klasse überschreiben, um Colspan zu verwenden:
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
Sie können diesen Code am Anfang von Ihnen hinzufügen app/admin/dashboard.rb
Datei und dann die hinzufügen :colspan
Option beim Deklarieren eines Abschnitts:
section "All time summary" , colspan: 6 , priority: 2 do
div do
render 'all_time_summary'
end
end
Sie müssen CSS verwenden, um dies zu verhindern
div :class => 'some class name' do
end
Stil diese Klasse
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