Reskinning ActiveAdmin przy użyciu Bootstrap

Question

Chcę ponownie skalować ActiveAdmin przy użyciu motywu szablonu Bootstrap. Jednak muszę zmienić układ strony, aby odpowiadał.

Czy można zastąpić układ ActiveAdmin, aby odpowiadał potrzebom? Wygląda inaczej niż w przypadku normalnych konwencji dotyczących szyn - wolałbym to osiągnąć za pomocą zwykłego szablonu, a następnie dostarczyć części treści, których potrzebuję, w kolejności, w jakiej ich potrzebuję.

Answer 1

Zrobiłem już coś podobnego. Sprawdź tę GIST https://gist.github.com/bigfive/6017435

Zasadniczo Państwo załatać aktywnego sterowania administratora bazy korzystać z nowego układu poprzez nadpisanie ich metody :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 

Następnie w układzie active_admin_reskin można wywołać metody na Arbre view_factory jak tak

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

W istocie (https://gist.github.com/bigfive/6017435) zrobiłem mały pomocnik widoku, aby ułatwić wywoływanie tych metod.

Sprawdźcie poprzez aktywnego kodu źródłowego administratora, aby zobaczyć, jakie metody są dostępne dla Ciebie w różnych dokumentach ARBRE, zwłaszcza tutaj: https://github.com/gregbell/active_admin/blob/master/lib/active_admin/views/pages/base.rb

Po znaczników zmienia się tak, jak lubisz, może @include 'bootstrap' you into your active_admin.css.scss plik, który generator stworzył i oszalał.

Answer 2

W zależności od wersji AA, z której korzystasz.

(0.6.0 < popełnić: ec9996406df5c07f4720eabc0120f710ae46c997):

Dołącz SCSS, ale hermetyzacji swoje selektorów CSS w grupie body.active_admin. Ponadto ważna jest specyficzność, więc jeśli chcesz zastąpić domyślną stylizację AA, być może musisz upewnić się, że nadpisujesz pełny selektor, aby uzyskać pożądane zachowanie.

Jeśli chcesz znaleźć te style, aby je zastąpić, spójrz na AA's stylesheets, aby zobaczyć, jak styl strony jest domyślny. Po prostu dołącz swoją niestandardową stylizację po dołączeniu arkusza stylów AA.

Po popełnić: ec9996406df5c07f4720eabc0120f710ae46c997

Przestrzenie nazw z arkuszy stylów został usunięty niedawno, a ja nie dokĹ,adnie przetestowane jeszcze wpływu.

Answer 3

prosta odpowiedź byłoby umieszczenie

@import "bootstrap";

do active_admin.css.scss

Oficjalnie jej nie obsługuje teraz https://github.com/gregbell/active_admin/issues/1027

Answer 4

BigFive zaakceptował odpowiedź pracował dla mnie na początku, ale potem produkowane pewne błędy podczas renderowania niestandardowych partials lub podczas renderowania błędy w formularzach .

Zainspirowany jego podejście przełączyłem się na nadpisywanie poszczególnych metod używanych przez AA do dynamicznego generowania układu (ponieważ AA nie używa statycznego pliku układu, który można łatwo zmodyfikować).

Dostępne metody można znaleźć w kodzie źródłowym, ale jest to dość oczywiste i zaczyna się od html element.

Przykład:

Aby dodać kilka klas i reorganizacji elementy:

można umieścić swój styl:

Obrotowe/stylów/active_admin.css.scss

A twój html opis w:

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