Modern and responsive theme for Active Admin used by Formaweb

  • By Formaweb
  • Last update: Nov 1, 2021
  • Comments: 11

Formadmin

Modern and responsive theme for Active Admin used by Formaweb.

Formadmin

Installation

Please make sure that you are using Active Admin:

gem 'activeadmin'

Add this gem in your Gemfile:

gem 'formadmin'

So, bundle...

$ bundle install

Usage

All you have to do is change your assets/stylesheets/active_admin.scss:

Remove the loading defaults...

@import 'active_admin/mixins';
@import 'active_admin/base';

Replace with Formadmin:

@import 'formadmin/formadmin';

Overriding colors

You can override the default colors (as defined in app/assets/stylesheets/formadmin/core/_settings.scss) by setting the color variable in your assets/stylesheets/active_admin.scss before formadmin is loaded.

For example, to change the primary color, use:

$primary-color: #c0ffee;
@import 'formadmin/formadmin';

Video

Formadmin

Donating

  • Bitcoin (BTC): 1QDoa2Cr8Lbt15mSDQwQc1vRxH9HHT8AC
  • Ethereum (ETH): 0x9d55a96d00B70FF9c23B05D610261E61e398f5BF
  • Litecoin (LTC): LVu6cTKF1VDVVFBxQPKpRUmbcshEeeWy8H

Contributing

  1. Fork it ( https://github.com/formaweb/formadmin/fork )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am "Add some feature")
  4. Push to the branch (git push origin my-new-feature)
  5. Create a new Pull Request

Testing

All you need to do is set the local path on your project Gemfile, like this:

gem 'formadmin', path: '/path/to/formadmin'

Github

https://github.com/formaweb/formadmin

Comments(11)

  • 1

    How to override font

    Hi, I am using formadmin theme for one of my application. There no hit on how to override the default font. I am thinking of overriding the default font with a google font.

  • 2

    Can't adjust width of columns

    image

    I tried setting the following:

    .resource_selection_toggle_cell, .resource_selection_cell {
  width: 0
}

    However, I still cannot remove all the space on the left column or right column.

  • 3

    Font-size configurable?

    We found that the default of 16px is pretty high and makes it hard to show a lot of columns on the index page. Is there a chance you'd be interested in having configurable font-size? Thanks

  • 4

    Long header on desktop mode

    Hi guys! I'm trying formadmin and I discovered that the header breaks on desktop when you have many models. screenshot from 2018-11-08 08-35-37

    So, is missing the last part of the header. The logout option and the user currently logged. screenshot from 2018-11-08 08-39-45

    On mobile seems perfect! Many thanks! And GREAT JOB by the way!i

  • 5

    RoutingError: No route matches [GET] "/active_admin/datepicker/datepicker-input-icon.png"

    I'm using activeadmin 1.1.0 with formadmin 0.2.0 and it's throwing this error:

    Started GET "/active_admin/datepicker/datepicker-input-icon.png" for 127.0.0.1 at 2017-10-12 09:13:41 -0300

ActionController::RoutingError (No route matches [GET] "/active_admin/datepicker/datepicker-input-icon.png"):

actionpack (5.1.3) lib/action_dispatch/middleware/debug_exceptions.rb:63:in `call'
actionpack (5.1.3) lib/action_dispatch/middleware/show_exceptions.rb:31:in `call'
railties (5.1.3) lib/rails/rack/logger.rb:36:in `call_app'
railties (5.1.3) lib/rails/rack/logger.rb:24:in `block in call'
activesupport (5.1.3) lib/active_support/tagged_logging.rb:69:in `block in tagged'
activesupport (5.1.3) lib/active_support/tagged_logging.rb:26:in `tagged'
activesupport (5.1.3) lib/active_support/tagged_logging.rb:69:in `tagged'
railties (5.1.3) lib/rails/rack/logger.rb:24:in `call'
sprockets-rails (3.2.1) lib/sprockets/rails/quiet_assets.rb:13:in `call'
actionpack (5.1.3) lib/action_dispatch/middleware/remote_ip.rb:79:in `call'
actionpack (5.1.3) lib/action_dispatch/middleware/request_id.rb:25:in `call'
rack (2.0.3) lib/rack/method_override.rb:22:in `call'
rack (2.0.3) lib/rack/runtime.rb:22:in `call'
activesupport (5.1.3) lib/active_support/cache/strategy/local_cache_middleware.rb:27:in `call'
actionpack (5.1.3) lib/action_dispatch/middleware/executor.rb:12:in `call'
actionpack (5.1.3) lib/action_dispatch/middleware/static.rb:125:in `call'
rack (2.0.3) lib/rack/sendfile.rb:111:in `call'
railties (5.1.3) lib/rails/engine.rb:522:in `call'
puma (3.10.0) lib/puma/configuration.rb:225:in `call'
puma (3.10.0) lib/puma/server.rb:605:in `handle_request'
puma (3.10.0) lib/puma/server.rb:437:in `process_client'
puma (3.10.0) lib/puma/server.rb:301:in `block in run'
puma (3.10.0) lib/puma/thread_pool.rb:120:in `block in spawn_thread'

    How to reproduce

    I have a this where created_at is a date:

    ActiveAdmin.register Payment do
  ...
  filter :created_at
end

    The date_picker itself works. The image was there in the branch 0-6-stable but was removed in version 1.1 by this pull request

    Workaround

    As a workaround I downloaded the image from 6-0-stable and added it to my app at assets/images/active_admin/datepicker/datepicker-input-icon.png

    _form.scss is asking for the image here

  • 6

    Long one word title breaks responsive header

    If the page title one long word (in my case it was the user email) then this happens on mobile:

    image image

    The header and the title bar no longer fit in the screen, the rest of the content does.

    If it's more than one word it works great: image

  • 7

    Add screenshots

    I was also curious on what's the design of the theme, so I had to download and install myself. But this is just a quick work to fix it. I like it since it's just a plug and play.

  • 8

    Remove datepicker input icon no longer available since activeadmin v1.1

    Fix for issue #18

    The image was removed in activeadmin v1.1 and hasn't replaced for anything yet.

    Another possible fix would be to include the image in the assets folder but according to this activeadmin pull request the idea was that it "should be stripped of anything outdated and to simplify" and "A new PR can decide some icons we like as a default theme that would be consistent and make sure they are easy to configure/change".

    So I feel removing it is the best choice.

    Before

    image That is with activeadmin < 1.1, with 1.1 it looks just like the after but it throws the error documented in the issue.

    After

    image

  • 9

    Support overriding color variables

    I wanted to be able to use formadmin with custom colors so I needed a way to override the color variables as defined in app/assets/stylesheets/formadmin/core/_settings.scss. By using !default on these, if these are already defined, formadmin won't redefine them, meaning you can set these variables before importing formadmin.

    I've also updated the readme to provide details about overriding colors.

    Please let me know any feedback you've got, happy to make fixes to the change.

    Thanks!

  • 10

    atoms/* not found

    Hi!

    I'm trying to get your theme running on an Active Admin setup using Rails 5 and I get the error that Formadmin cannot find the folder or any files in atoms/*.

    Any thoughts?

    My admin.scss file:

    // Active Admin's got SASS!
// @import "active_admin/mixins";
// @import "active_admin/base";
@import "formadmin/formadmin";

    The error in detail:

    File to import not found or unreadable: atoms/*.
Load paths:
  /Users/work/.rvm/gems/[email protected]/gems/babel-source-5.8.35/lib
  /Users/work/Workspace/myproject/app/assets/javascripts
  /Users/work/Workspace/myproject/app/assets/stylesheets
  /Users/work/.rvm/gems/[email protected]/gems/formadmin-0.2.1/app/assets/images
  /Users/work/.rvm/gems/[email protected]/gems/formadmin-0.2.1/app/assets/stylesheets
  /Users/work/.rvm/gems/[email protected]/bundler/gems/activeadmin-5ae2e3db5bf6/app/assets/images
  /Users/work/.rvm/gems/[email protected]/bundler/gems/activeadmin-5ae2e3db5bf6/app/assets/javascripts
  /Users/work/.rvm/gems/[email protected]/bundler/gems/activeadmin-5ae2e3db5bf6/app/assets/stylesheets
  /Users/work/.rvm/gems/[email protected]/bundler/gems/activeadmin-5ae2e3db5bf6/vendor/assets/javascripts
  /Users/work/.rvm/gems/[email protected]/bundler/gems/activeadmin-5ae2e3db5bf6/vendor/assets/stylesheets
  /Users/work/.rvm/gems/[email protected]/gems/jquery-rails-4.3.1/vendor/assets/javascripts
  /Users/work/.rvm/gems/[email protected]/gems/formtastic-3.1.5/app/assets/stylesheets
  /Users/work/.rvm/gems/[email protected]/gems/actioncable-5.1.4/lib/assets/compiled
  /Users/work/.rvm/gems/[email protected]/gems/actionview-5.1.4/lib/assets/compiled

    My Gemfile.lock:

    GIT
  remote: https://github.com/activeadmin/activeadmin.git
  revision: 5ae2e3db5bf69e94ea8c205b83f04799154ceee3
  specs:
    activeadmin (2.0.0.alpha)
      arbre (>= 1.1.1)
      formtastic (~> 3.1)
      formtastic_i18n
      inherited_resources (~> 1.7)
      jquery-rails (>= 4.2.0)
      kaminari (>= 1.0.1)
      railties (>= 4.2, < 5.2)
      ransack (~> 1.3)
      sass (~> 3.4)
      sprockets (>= 3.0, < 4.1)
      sprockets-es6 (>= 0.9.2)

GIT
  remote: https://github.com/activeadmin/inherited_resources
  revision: 5d18499877852437f2c058747f07bc80e46557fc
  specs:
    inherited_resources (1.7.2)
      actionpack (>= 4.2, < 5.2)
      has_scope (~> 0.6)
      railties (>= 4.2, < 5.2)
      responders

GEM
  remote: https://rubygems.org/
  specs:
    actioncable (5.1.4)
      actionpack (= 5.1.4)
      nio4r (~> 2.0)
      websocket-driver (~> 0.6.1)
    actionmailer (5.1.4)
      actionpack (= 5.1.4)
      actionview (= 5.1.4)
      activejob (= 5.1.4)
      mail (~> 2.5, >= 2.5.4)
      rails-dom-testing (~> 2.0)
    actionpack (5.1.4)
      actionview (= 5.1.4)
      activesupport (= 5.1.4)
      rack (~> 2.0)
      rack-test (>= 0.6.3)
      rails-dom-testing (~> 2.0)
      rails-html-sanitizer (~> 1.0, >= 1.0.2)
    actionview (5.1.4)
      activesupport (= 5.1.4)
      builder (~> 3.1)
      erubi (~> 1.4)
      rails-dom-testing (~> 2.0)
      rails-html-sanitizer (~> 1.0, >= 1.0.3)
    activejob (5.1.4)
      activesupport (= 5.1.4)
      globalid (>= 0.3.6)
    activemodel (5.1.4)
      activesupport (= 5.1.4)
    activerecord (5.1.4)
      activemodel (= 5.1.4)
      activesupport (= 5.1.4)
      arel (~> 8.0)
    activesupport (5.1.4)
      concurrent-ruby (~> 1.0, >= 1.0.2)
      i18n (~> 0.7)
      minitest (~> 5.1)
      tzinfo (~> 1.1)
    arbre (1.1.1)
      activesupport (>= 3.0.0)
    arel (8.0.0)
    ast (2.3.0)
    babel-source (5.8.35)
    babel-transpiler (0.7.0)
      babel-source (>= 4.0, < 6)
      execjs (~> 2.0)
    bcrypt (3.1.11)
    builder (3.2.3)
    byebug (9.1.0)
    cancan (1.6.10)
    coderay (1.1.2)
    concurrent-ruby (1.0.5)
    config (1.4.0)
      activesupport (>= 3.0)
      deep_merge (~> 1.1.1)
    countries (2.1.2)
      i18n_data (~> 0.8.0)
      money (~> 6.9)
      sixarm_ruby_unaccent (~> 1.1)
      unicode_utils (~> 1.4)
    country_select (3.1.1)
      countries (~> 2.0)
      sort_alphabetical (~> 1.0)
    crass (1.0.2)
    deep_merge (1.1.1)
    devise (4.3.0)
      bcrypt (~> 3.0)
      orm_adapter (~> 0.1)
      railties (>= 4.1.0, < 5.2)
      responders
      warden (~> 1.2.3)
    diff-lcs (1.3)
    erubi (1.6.1)
    execjs (2.7.0)
    factory_girl (4.8.1)
      activesupport (>= 3.0.0)
    factory_girl_rails (4.8.0)
      factory_girl (~> 4.8.0)
      railties (>= 3.0.0)
    ffi (1.9.18)
    formadmin (0.2.1)
      activeadmin
    formtastic (3.1.5)
      actionpack (>= 3.2.13)
    formtastic_i18n (0.6.0)
    globalid (0.4.0)
      activesupport (>= 4.2.0)
    has_scope (0.7.1)
      actionpack (>= 4.1, < 5.2)
      activesupport (>= 4.1, < 5.2)
    i18n (0.8.6)
    i18n_data (0.8.0)
    jquery-rails (4.3.1)
      rails-dom-testing (>= 1, < 3)
      railties (>= 4.2.0)
      thor (>= 0.14, < 2.0)
    kaminari (1.0.1)
      activesupport (>= 4.1.0)
      kaminari-actionview (= 1.0.1)
      kaminari-activerecord (= 1.0.1)
      kaminari-core (= 1.0.1)
    kaminari-actionview (1.0.1)
      actionview
      kaminari-core (= 1.0.1)
    kaminari-activerecord (1.0.1)
      activerecord
      kaminari-core (= 1.0.1)
    kaminari-core (1.0.1)
    listen (3.1.5)
      rb-fsevent (~> 0.9, >= 0.9.4)
      rb-inotify (~> 0.9, >= 0.9.7)
      ruby_dep (~> 1.2)
    loofah (2.1.1)
      crass (~> 1.0.2)
      nokogiri (>= 1.5.9)
    mail (2.6.6)
      mime-types (>= 1.16, < 4)
    method_source (0.9.0)
    mime-types (3.1)
      mime-types-data (~> 3.2015)
    mime-types-data (3.2016.0521)
    mini_portile2 (2.3.0)
    minitest (5.10.3)
    money (6.9.0)
      i18n (>= 0.6.4, < 0.9)
    mustermann (1.0.1)
    nio4r (2.1.0)
    nokogiri (1.8.1)
      mini_portile2 (~> 2.3.0)
    orm_adapter (0.5.0)
    parallel (1.12.0)
    parser (2.4.0.0)
      ast (~> 2.2)
    payday (1.1.5)
      i18n (~> 0.7)
      money (~> 6.5)
      prawn (~> 1.0.0)
      prawn-svg (~> 0.15.0.0)
    pdf-core (0.2.5)
    pdfkit (0.8.2)
    pg (0.21.0)
    polyamorous (1.3.1)
      activerecord (>= 3.0)
    powerpack (0.1.1)
    prawn (1.0.0)
      pdf-core (~> 0.2.2)
      ttfunk (~> 1.1.1)
    prawn-svg (0.15.0.0)
      prawn (>= 0.8.4)
    pry (0.11.1)
      coderay (~> 1.1.0)
      method_source (~> 0.9.0)
    puma (3.10.0)
    rack (2.0.3)
    rack-protection (2.0.0)
      rack
    rack-test (0.7.0)
      rack (>= 1.0, < 3)
    rails (5.1.4)
      actioncable (= 5.1.4)
      actionmailer (= 5.1.4)
      actionpack (= 5.1.4)
      actionview (= 5.1.4)
      activejob (= 5.1.4)
      activemodel (= 5.1.4)
      activerecord (= 5.1.4)
      activesupport (= 5.1.4)
      bundler (>= 1.3.0)
      railties (= 5.1.4)
      sprockets-rails (>= 2.0.0)
    rails-dom-testing (2.0.3)
      activesupport (>= 4.2.0)
      nokogiri (>= 1.6)
    rails-html-sanitizer (1.0.3)
      loofah (~> 2.0)
    railties (5.1.4)
      actionpack (= 5.1.4)
      activesupport (= 5.1.4)
      method_source
      rake (>= 0.8.7)
      thor (>= 0.18.1, < 2.0)
    rainbow (2.2.2)
      rake
    rake (12.1.0)
    ransack (1.8.3)
      actionpack (>= 3.0)
      activerecord (>= 3.0)
      activesupport (>= 3.0)
      i18n
      polyamorous (~> 1.3)
    rb-fsevent (0.10.2)
    rb-inotify (0.9.10)
      ffi (>= 0.5.0, < 2)
    responders (2.4.0)
      actionpack (>= 4.2.0, < 5.3)
      railties (>= 4.2.0, < 5.3)
    rspec-core (3.6.0)
      rspec-support (~> 3.6.0)
    rspec-expectations (3.6.0)
      diff-lcs (>= 1.2.0, < 2.0)
      rspec-support (~> 3.6.0)
    rspec-mocks (3.6.0)
      diff-lcs (>= 1.2.0, < 2.0)
      rspec-support (~> 3.6.0)
    rspec-rails (3.6.1)
      actionpack (>= 3.0)
      activesupport (>= 3.0)
      railties (>= 3.0)
      rspec-core (~> 3.6.0)
      rspec-expectations (~> 3.6.0)
      rspec-mocks (~> 3.6.0)
      rspec-support (~> 3.6.0)
    rspec-support (3.6.0)
    rubocop (0.50.0)
      parallel (~> 1.10)
      parser (>= 2.3.3.1, < 3.0)
      powerpack (~> 0.1)
      rainbow (>= 2.2.2, < 3.0)
      ruby-progressbar (~> 1.7)
      unicode-display_width (~> 1.0, >= 1.0.1)
    ruby-progressbar (1.9.0)
    ruby_dep (1.5.0)
    ruby_http_client (3.2.0)
    sass (3.5.1)
      sass-listen (~> 4.0.0)
    sass-listen (4.0.0)
      rb-fsevent (~> 0.9, >= 0.9.4)
      rb-inotify (~> 0.9, >= 0.9.7)
    sendgrid-ruby (5.1.0)
      ruby_http_client (~> 3.2)
      sinatra (>= 1.4.7, < 3)
    sinatra (2.0.0)
      mustermann (~> 1.0)
      rack (~> 2.0)
      rack-protection (= 2.0.0)
      tilt (~> 2.0)
    sixarm_ruby_unaccent (1.2.0)
    sort_alphabetical (1.1.0)
      unicode_utils (>= 1.2.2)
    spring (2.0.2)
      activesupport (>= 4.2)
    spring-watcher-listen (2.0.1)
      listen (>= 2.7, < 4.0)
      spring (>= 1.2, < 3.0)
    sprockets (3.7.1)
      concurrent-ruby (~> 1.0)
      rack (> 1, < 3)
    sprockets-es6 (0.9.2)
      babel-source (>= 5.8.11)
      babel-transpiler
      sprockets (>= 3.0.0)
    sprockets-rails (3.2.1)
      actionpack (>= 4.0)
      activesupport (>= 4.0)
      sprockets (>= 3.0.0)
    thor (0.20.0)
    thread_safe (0.3.6)
    tilt (2.0.8)
    ttfunk (1.1.1)
    tzinfo (1.2.3)
      thread_safe (~> 0.1)
    unicode-display_width (1.3.0)
    unicode_utils (1.4.0)
    warden (1.2.7)
      rack (>= 1.0)
    websocket-driver (0.6.5)
      websocket-extensions (>= 0.1.0)
    websocket-extensions (0.1.2)
    wkhtmltopdf-binary (0.12.3.1)

PLATFORMS
  ruby

DEPENDENCIES
  activeadmin!
  byebug
  cancan
  config
  country_select
  devise (> 4.x)
  factory_girl_rails (~> 4.0)
  formadmin
  inherited_resources!
  listen (>= 3.0.5, < 3.2)
  payday
  pdfkit
  pg (~> 0.18)
  pry
  puma (~> 3.7)
  rails (~> 5.1.4)
  rspec-rails (~> 3.6)
  rubocop (~> 0.50.0)
  sendgrid-ruby
  spring
  spring-watcher-listen (~> 2.0.0)
  tzinfo-data
  wkhtmltopdf-binary

BUNDLED WITH
   1.16.0.pre.2
  • 11

    Improvement in responsible tables

    I feel like the current behaviour of the tables on mobile isn't ideal.

    Normal: image

    Mobile image

    This makes it really hard to read, especially if the column values aren't as obvious as this example.

    I feel something like this will make a lot more sense (taken form here): image

    Or just showing the column name next to the value could be enough.

Popular Tag

Related