Awesome

Active Admin Face

How it looks

Active Admin interface

Theme for Active Admin, based on Flattened Active Admin and ActiveSkin. I've taken all the best, refactored code and implemented vector icons from Font-Awesome.

IE 10+ tested

List of changes

1. Main menu rewritten to flex from table.
2. All icons moved to vector format
3. Stylized datepicker & fixed date format to usual
4. Added hover for most of the actions
5. Added default styling for a tables, index tables styling improved also
6. Cleaned up as much as possible from !important tags for easier future customization
7. Tabs rewritten and some minor goodies, which I can not remember now

Installation

Face of Active Admin has been built and tested with Active Admin 1.0.0.pre2 and >= Rails 4.2.5 In order to use this gem, please make sure that you are using Active Admin from their Github repo:

gem 'activeadmin', github: 'activeadmin/activeadmin'

Active Admin was tested only with 1.0.0.pre2. For installation you need to add in your Gemfile

gem 'face_of_active_admin'

and then the usual

bundle install

Usage

Once you have installed the gem, all you have to do is change the hooks in assets/stylesheets/active_admin.scss to point to Face of Active Admin.

Change:

@import "active_admin/mixins";
@import "active_admin/base";

to:

@import "face_of_active_admin/mixins";
@import "face_of_active_admin/base";

and add to assets/javascript/active_admin.js.coffee (replace #= to //= if you prefer native js)

#= require face_of_active_admin/base

And that's it, welcome to your new interface!

Customisation

Face of Active Admin allows you to change the color schemes of Active Admin with ease, create a completely different look and feel for your interface.

Once you have the theme working, you can include the custom variables by running the generator:

rails g face_of_active_admin:variables

This will generate a new SASS file in assets/stylesheets/ called face_of_active_admin_variables.scss

In order to make these work, add this line TO THE TOP of your active_admin.scss

@import "face_of_active_admin/variables";

Once you have done this you can customize the variables to your heart's content. Anything changed here will override the Active Admin Defaults.

Important

This new line needs to go above all other Active Admin and Active Admin Face @import calls, or else they will not work

ToDo

• Check for requirement of all variables
• Make initialization of the variables one step less
• Input boolean style in edit form is ugly.

Contributing

Fork the Repo, and open a pull request.

Please test if your changes require testing

Thanks

A massive thank you to the entire team at Active Admin. They are doing some great things over there, and making a lot of our jobs a lot easier. Thanks for flattened_active_admin and active_skin gem authors.