Active Admin has messed up with the ProvisioningEngine web style

[oveits]

It seems like the command

rails generate active_admin:install

has introduced a new scss file that is messing up my web portal style.

Now there is a light blue background, where it should not be:

and the submit button has the (nasty) Active Admin design:

I assume that the problem has been introduced between following commits:

git diff 002d346404ec435351c02f3baed7e31ddc97f04c..eca8b5f7688b0acdb9dbe82bee6c93c01bcef18f
....
diff --git a/app/assets/stylesheets/active_admin.scss b/app/assets/stylesheets/active_admin.scss
new file mode 100644
index 0000000..90ba1d4
--- /dev/null
+++ b/app/assets/stylesheets/active_admin.scss
...
+@import "active_admin/mixins";
+@import "active_admin/base";

[oveits]

After renaming the file app/stylesheets/active_admin.scss to active_admin.scss.bak, everything is back to normal. However, now the Active Admin Portal is messed up (as expected):

I need to figure out, which classes are messed up with and define my own custom classes, so they never get messed up with new stylesheets.

[oveits]

The problem must be located in active_admin/base, since if I comment out the following line in app/assets/stylesheets/active_admin.scss:

@import "active_admin/base";

the problem disappears.

I need to dig deeper, since Active Admin cannot live without this style sheet (my opinion):

[oveits]

Next best guess:

@import "active_admin/components/buttons";

as found in the _base.scss file.

Now let us look into that file. It is very short:

a.member_link {
  margin-right: 7px;
  white-space: nowrap;
}

a.button, a:link.button, a:visited.button, input[type=submit], input[type=button], button { @include dark-button; }

The input[type=submit] matches in my case for the save button. My save button looks like follows

<input type="submit" name="commit" value="Save" class="btn btn-default" />

I am not sure why the class does not override the Active Admin style, though. Let us have a loot to the dark-button that is included:

In ```app/assets/stylesheets/active_admin/mixins/_buttons.scss```  this points to ```default-button``` again. And this is defined as:
```css
@mixin default-button {
      @include basic-button;
      @include gradient(lighten($primary-color, 15%), darken($primary-color, 12%));
… 
          @include gradient(#F3F3F3, #D8D8D8);
        }
      }

    }

basic-button again:

@mixin basic-button {
      @include rounded(200px);
      display: inline-block;
      font-weight: bold;
… 
        cursor: default;
      }

}

and rounded:

@mixin rounded($radius: 3px) {
      border-radius: $radius;
}

Nothing special. Still not clear, why the Active Admin style for input[type=submit] is not overridden by the btn class style. Maybe, if we explicitly add a input[type=submit] with class btn somewhere in the ProvisioningEngine styles...

[oveits]

Reading http://vanseodesign.com/css/css-specificity-inheritance-cascaade/, it looks like my btn style should not be affected by the Active Admin style:

input[type=submit]

should have lower precedence than the class .btn.

[oveits]

Oups, after a crash of my Chrome browser and a restart of the Rails server, the problem has disappeared, although I have not changed anything. Maybe this was a one-time problem of the local browser?

Let us close this ticket and reopen it, if the problem occurs again later.

Solved by browser restart and server restart (more likely that the browser had a problem...).

[oveits]

The problem is back on Cloud9 and my Chrome browser...

Same topic on the Firefox:

But not on Chrome on wts2 or locally, when using the server in CSL9 (same commit on development branch):

[oveits]

I need to follow the instructions of the second answer on http://stackoverflow.com/questions/19304681/activeadmin-overides-my

---

Based on seanlinsley comment on selected answer and nathan's answer too, it seems to me that the 'cleanest' way is indeed to move active_admin.css.scss from app/assets/stylesheets/ to vendor/assets/stylesheets/.

No need to any other (configuration) modification: 'main' app has it's styles back to normal and AA display is normal too.

(I didn't want to manually include each of my ressources instead of require_tree ... !)

This is the way AA is getting into: AA (still) opened issue on the matter.

[oveits]

Before: Then:

mv app/assets/stylesheets/active_admin.scss vendor/assets/stylesheets/

After that (even without restart of the service) we see: But we need to get rid of the references to the active_admin assets, so we need to restart the service:

./stopWebPortal_development.sh; ./startWebPortal_development.sh

Hm. After that, the assets are still there: Let us see, whether the Active Admin portal still works:

Okay, it had never worked on that machine, since I have taken no measures for prepending /dev/ to the route. The path /admin does not work either, since this will lead to the productive wab portal running locally on port 3000, and this web portal is working on the master tree (no active admin route added yet).

[oveits]

Fixing the routes: I have moved the devise_for and ActiveAdmin.routes within the scope(path: bastURL) block.

Now it works:

For a successful login, I need to create the admin user, but I get an error when trying to seed the database:

$ rake db:seed
rake aborted!
ActiveRecord::RecordInvalid: Validation failed: Password can't be blank
/home/provisioningengine/ProvisioningEnginev0.5.15_testfolder/db/seeds.rb:2:in `<top (required)>'
Tasks: TOP => db:seed
(See full trace by running task with --trace)

Let me open another issue for this.