LiveAdmin - Phoenix admin UI built on LiveView

News Announcing
, ,
10

Nice release!
The copy feature is super handy!

I just finished with some css tweaks that were pretty easy, here is an example for other folks.

admin_css = """
body {
  /* dark body, with white text */
  background-color: #18181b;
  color: white;
}

.nav {
  /* think a fixed width is better on the nav, was taking up too much valuable space otherwise */
  width: 250px;
  /* slightly lighter colour for the nav */
  background-color: #27272a;
}

/* since the nav is now a fixed width - the content should `flex-grow` to fit remaining width*/
.content {
  flex: 1;
}

/* this is the same as the nav colour*/
.resource__header {
  background-color: #27272a;
}

/* this is all still default, but could be tweaked further */
.resource__action--btn {
  background-color: rgb(67, 56, 202);
  border-color: rgb(67, 56, 202);
  color: rgb(243 244 246);
}

.resource__action--btn:hover {
  background-color: rgb(55 48 163);
  border-color: rgb(67, 56, 202);
}

.nav a:hover {
  background-color: rgb(165 180 252);
}

.toast__container--error {
  border-color: rgb(239, 68, 68);
  color: rgb(239, 68, 68);
}

.toast__container--success {
  border-color: rgb(102, 153, 0);
  color: rgb(102, 153, 0);
}
"""
# pass the override to live_admin app config
config :live_admin,
  ecto_repo: App.Repo,
  css_overrides: admin_css

I think it would be helpful to supply a field_name → class map - for supplying custom classes for each td on a resource row.

Would resolve field → class here - live_admin/index.ex at main · tfwright/live_admin (github.com)

This would allow truncating specific fields like Id’s to keep them from wrapping on multiple lines.

Let me know what you think, I might be able to hack together a POC if you like the idea…

1 Like