Reskinning ActiveAdmin utilizzando Bootstrap

Question

Desidero re-skin ActiveAdmin utilizzando un tema di template Bootstrap. Tuttavia ho bisogno di cambiare il layout della pagina per soddisfare.

È possibile sovrascrivere il layout di ActiveAdmin per adattarlo alle esigenze? Sembra diverso dalle normali convenzioni sui binari - preferirei semplicemente realizzarlo usando un modello normale e quindi fornire le parti del contenuto di cui ho bisogno nell'ordine in cui ho bisogno di loro.

Answer 1

Ho fatto qualcosa di simile prima. Dai un'occhiata a questo Gist https://gist.github.com/bigfive/6017435

In sostanza si applica una patch il controller di base di amministrazione attiva di utilizzare il nuovo layout sovrascrivendo il loro metodo :determine_active_admin_layout

# config/initializers/active_admin_patch.rb 
module ActiveAdmin 
    class BaseController 
    def determine_active_admin_layout 
     'active_admin_reskin' 
    end 
    end 
end 

Poi nel layout active_admin_reskin è possibile chiamare i metodi sulla Arbre view_factory in questo modo

view_factory[#{params[:action]}_page"].new(Arbre::Context.new(assigns, self)).send(:build_header) 

Nell'elenco (https://gist.github.com/bigfive/6017435) Ive ha creato un piccolo aiuto per la vista per semplificare la chiamata a tali metodi.

Avere uno sguardo attraverso il codice sorgente di amministrazione attiva per vedere quali metodi sono a vostra disposizione su vari documenti Arbre, specialmente qui: https://github.com/gregbell/active_admin/blob/master/lib/active_admin/views/pages/base.rb

Una volta che il markup è cambiato il modo che ti piace, si può @include 'bootstrap' nella vostra active_admin.css.scss file che il generatore ha creato e impazzire.

Answer 2

A seconda della versione di AA che si sta utilizzando.

(0.6.0 < commit: ec9996406df5c07f4720eabc0120f710ae46c997):

Inserisci la tua SCSS, ma incapsulare i vostri selettori CSS nel gruppo body.active_admin. Inoltre, la specificità è importante, quindi se si desidera sostituire lo stile predefinito di AA, potrebbe essere necessario assicurarsi di ignorare il selettore completo per ottenere il comportamento desiderato.

Se si desidera trovare questi stili per sovrascriverli, dare un'occhiata a AA's stylesheets per vedere come il loro stile è predefinito. È sufficiente includere lo stile personalizzato dopo aver incluso il foglio di stile AA.

Dopo commettere: ec9996406df5c07f4720eabc0120f710ae46c997

La namespacing dei fogli di stile è stato rimosso di recente, e non ho inzuppando testato l'implicazione ancora.

Answer 3

Una risposta semplice sarebbe mettere

@import "bootstrap";

in active_admin.css.scss

Ufficialmente, la sua non è supportata per ora https://github.com/gregbell/active_admin/issues/1027

Answer 4

risposta accettato di BigFive lavorato per me all'inizio, ma poi ha prodotto alcuni bug nel rendering parziali personalizzati o quando errori di rendering in forme .

Ispirato dal suo approccio, sono passato a ignorare i singoli metodi utilizzati da AA per generare dinamicamente il layout (poiché AA non utilizza un file di layout statico che può essere facilmente modificato).

È possibile trovare i metodi disponibili nel codice sorgente, ma è piuttosto auto-esplicativo e inizia nello html element.

Esempio:

Per aggiungere alcune classi e riorganizzare gli elementi:

Si può mettere il tuo stile in:

beni/fogli di stile/active_admin.css.scss

E il vostro html descrizione in:

config/initializers/active_admin_patch.rb:

module ActiveAdmin 
    module Views 
    class Header 

     alias_method :original_build_site_title, :build_site_title 
     alias_method :original_build_global_navigation, :build_global_navigation 
     alias_method :original_build_utility_navigation, :build_utility_navigation 

     def build_site_title 
     div class: "side_bar_top" do 
      original_build_site_title 
     end 
     end 

     def build_global_navigation 
     div class: "side_bar_content" do 
      original_build_global_navigation 
     end 
     end 

     def build_utility_navigation 
     div class: "side_bar_footer" do 
      original_build_utility_navigation 
     end 
     end 
    end 

    module Pages 
     class Base 

     alias_method :original_build, :build 

     # This should be the same as add_classes_to_body but for the html main element 
     def add_classes_to_html_tag 
      document.add_class(params[:action]) 
      document.add_class(params[:controller].gsub('/', '_')) 
      document.add_class("active_admin") 
      document.add_class("logged_in") 
      document.add_class(active_admin_namespace.name.to_s + "_namespace") 
     end 

     def build(*args) 
      original_build 
      add_classes_to_html_tag 
     end 

     def build_page 
      within @body do 
      div id: "wrapper" do 
       div id: "details_view" do 
       build_title_bar 
       build_page_content 
       #build_footer 
       end 
       div id: "master_view" do 
       build_header 
       end 
      end 
      end 
     end 
     end 
    end 
    end 
end