Come layout le sezioni della dashboard in verticale con ActiveAdmin?
-
27-10-2019 - |
Domanda
Nel dashboards.rb
file generato da ActivEadmin 0.3.4, ho aggiunto tre sezioni costituite su tabelle larghe con diverse colonne. Tuttavia, ActivEadmin visualizza ogni sezione accanto all'altra, creando una barra di scorrimento orizzontale inutile.
Come posso cambiarlo in un layout verticale?
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
Quello che ottengo:
Ho già provato a usare un div come contenitore per ogni tabella senza fortuna.
Soluzione 2
Finalmente l'ho risolto con alcuni CSS, in un nuovo foglio di stile:
attivo_admin_ex.css:
table.dashboard > tbody > tr > td {
display:block;
}
Quindi, in Config/Initializer/Active_Admin.rb, Ho aggiunto:
config.register_stylesheet 'active_admin_ex.css'
E questo ha risolto il problema del display.
Altri suggerimenti
Questa risposta per Active_Admin> = 0.5.1
Il cruscotto è strutturato in colonne e pannelli che le colonne sono ... beh, colonne, che definiscono il layout orizzontale. I pannelli sono come sezioni che impilano verticali.
Una colonna a 2, 3 sezioni en ogni colonna, verrebbe definita da:
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
Più flessibile, è possibile sovrascrivere i render_sections della classe dashboard per utilizzare 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
Puoi aggiungere questo codice all'inizio di te app/admin/dashboard.rb
file e quindi aggiungere il file :colspan
Opzione quando si dichiara una sezione:
section "All time summary" , colspan: 6 , priority: 2 do
div do
render 'all_time_summary'
end
end
Devi usare CSS per impedirlo
div :class => 'some class name' do
end
stile quella classe
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