Reskinning ActiveAdmin mit Bootstrap

Question

Ich möchte ActiveAdmin mit einem Bootstrap Vorlage Thema neu Skin. Ich muss jedoch das Layout der Seite anpassen.

Ist es möglich, das Layout von ActiveAdmin zu ändern, was ich will? Es sieht anders aus als normale Rails-Konventionen - ich würde es lieber mit einer normalen Vorlage machen und dann die Teile des Inhalts, die ich brauche, in der Reihenfolge, in der ich sie benötige, herausbringen.

Answer 1

Ich habe etwas ähnliches schon einmal gemacht. Sehen Sie sich diese Gist aus https://gist.github.com/bigfive/6017435

Wesentlichen patchen Sie den aktiven Admin-Basis-Controller Ihr neues Layout zu verwenden, durch zwingende ihre :determine_active_admin_layout Methode

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

Dann in Ihrem active_admin_reskin Layout Sie Methoden auf dem Arbre view_factory wie so nennen kann

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

im Kern (https://gist.github.com/bigfive/6017435) Ive machte einen kleinen Blick Helfer für die es einfach, diese Methoden zu nennen.

Werfen Sie einen Blick durch die aktive Code Admin-Quelle zu sehen, welche Methoden Ihnen unter verschiedenen Arbre Dokumente verfügbar sind, vor allem hier: https://github.com/gregbell/active_admin/blob/master/lib/active_admin/views/pages/base.rb

Sobald das Markup die Art und Weise geändert wird, die Sie mögen, können Sie @include 'bootstrap' in Ihre active_admin.css.scss Datei, die der Generator erstellt und verrückt geworden.

Answer 2

Je nachdem, welche Version von AA Sie verwenden.

(0.6.0 < begehen: ec9996406df5c07f4720eabc0120f710ae46c997):

Ihre SCSS einschließen, aber Ihre CSS-Selektoren in der body.active_admin Gruppe einkapseln. Darüber hinaus ist die Spezifität wichtig. Wenn Sie also das Standardstyling von AA überschreiben möchten, müssen Sie möglicherweise sicherstellen, dass Sie den vollständigen Selektor überschreiben, um das gewünschte Verhalten zu erhalten.

Wenn Sie diese Stile finden möchten, um sie zu überschreiben, werfen Sie einen Blick auf AA's stylesheets, um zu sehen, wie sie die Site als Standard stylen. Fügen Sie einfach Ihren benutzerdefinierten Stil hinzu, nachdem das AA-Stylesheet enthalten ist.

Nach begehen: ec9996406df5c07f4720eabc0120f710ae46c997

Die Namespacing von Stylesheets vor kurzem entfernt worden ist, und ich habe nicht die notwendige Sorgfalt walten die Implikation noch nicht getestet.

Answer 3

würde Eine einfache Antwort

@import "Bootstrap" werden setzen;

in active_admin.css.scss

offiziell, es ist nicht für jetzt unterstützt https://github.com/gregbell/active_admin/issues/1027

Answer 4

BigFive die akzeptierte Antwort für mich am Anfang gearbeitet, aber dann einige Fehler produziert, wenn benutzerdefinierte partials Rendering oder wenn Fehler in Formularen Rendering .

durch seinen Ansatz inspiriert wechselte ich die einzelnen Methoden zu überschreiben, die AA das Layout dynamisch zu generieren verwendet (wie AA, die leicht modifiziert wurde, kann keine statische Layout-Datei verwenden werden).

Sie können die verfügbaren Methoden im Quellcode finden, aber es ist ziemlich selbsterklärend und beginnt in den html element.

Beispiel:

Um einige Klassen hinzufügen und neu organisieren die Elemente:

Sie Ihren Stil in setzen können:

Vermögenswerte/Stylesheets/active_admin.css.scss

Und Ihre html Beschreibung in:

Konfig/Initialisierer/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