Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RailsAdmin 3.0 design is confusing after upgrade #3507

Closed
MichaelHoste opened this issue Apr 8, 2022 · 3 comments
Closed

RailsAdmin 3.0 design is confusing after upgrade #3507

MichaelHoste opened this issue Apr 8, 2022 · 3 comments

Comments

@MichaelHoste
Copy link

Describe the bug

After updating to RailsAdmin 3.0, I was so confused by the new very contrasted design that I was convinced that something was wrong with my assets because of the Webpacker migration. I spent some time trying to fix it.

I had to install the dummy app with 2.x and 3.0 to understand that this design was in fact expected behaviour.

RailsAdmin 2

Screenshot 2022-04-08 at 11 43 44

RailsAdmin 3

Screenshot 2022-04-08 at 11 44 14

Maybe that's something that should be slightly improved out-of-the-box? (no more flashy blue?)

Another solution would be to add a screenshot somewhere so that people knows what to expect after an upgrade.

I know that "nice design" is very relative but if you are interested, I may try to add a few CSS styles so that the 3.x version looks more like the 2.x version (smoother colors and improved padding).

Please let me know.

Reproduction steps

Fresh install of RailsAdmin 2 and RailsAdmin 3

Expected behavior

A relatively close design.

Additional context

Thanks a lot for this great project! 😉

@codealchemy
Copy link
Contributor

This can be done by adding a variables.css.scss and adding

// Keep info and primary colors the same as Bootstrap 3
$primary: #428bca;
$info: #5bc0de;

// Force light color for top-nav links
$navbar-dark-color: white;

// Contrast ratio used to calculate color for text within elements (ie. buttons)
// https://getbootstrap.com/docs/5.0/customize/sass/#color-contrast
$min-contrast-ratio: 2;

(not perfect, but close - I'll update the theming docs as well to provide some better direction)

@MichaelHoste
Copy link
Author

Thanks a lot for this, it's already more pleasant to look at 🙂

mshibuya added a commit that referenced this issue Apr 25, 2022
mshibuya added a commit that referenced this issue Apr 25, 2022
@mshibuya
Copy link
Member

Just added another configuration point in 126f7ac. By using this achieving the similar appearance will be easier.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants