Skip to content

Commit

Permalink
Document using custom assets
Browse files Browse the repository at this point in the history
We weren't documenting any custom assets, which is a common thing for
people to want to do. This does that and also provides an example change
in the `example_app`.

Example of custom CSS

Example of custom JS

Document the feature

Avoid scss to avoid sassc error

If using scss here, you'll get `cannot load such file -- sassc`.
Perhaps not if your app is configured to digest scss, but this one
isn't.
  • Loading branch information
pablobm authored and nickcharlton committed Oct 25, 2024
1 parent 6d0e46c commit b55fed3
Show file tree
Hide file tree
Showing 9 changed files with 80 additions and 5 deletions.
22 changes: 22 additions & 0 deletions docs/customizing_page_views.md
Original file line number Diff line number Diff line change
Expand Up @@ -119,3 +119,25 @@ For example, you can add a button in the middle of the header as follows:
<%= render template: 'administrate/application/_index_header', locals: local_assigns %>
```

## Adding custom CSS and JS

You can add custom CSS and JS to Administrate. Put the files in the
appropriate folders (typically under `assets`) and point Administrate to them
using the following API, preferably in an initializer. For example, if your
files are called `admin.css` and `admin.js`:

```
/// config/initializers/administrate.rb
Administrate::Engine.add_stylesheet("admin")
Administrate::Engine.add_javascript("admin")
```

Then make sure to list them in your manifest file (Rails will helpfully remind
you of this step if you miss it):

```
/// app/assets/config/manifest.js
//= link admin.css
//= link admin.js
```
2 changes: 2 additions & 0 deletions spec/example_app/app/assets/config/manifest.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,5 @@

//= link_tree ../images
//= link_tree ../builds
//= link admin.css
//= link admin.js
1 change: 1 addition & 0 deletions spec/example_app/app/assets/javascripts/admin.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
//= require_tree ./admin
10 changes: 10 additions & 0 deletions spec/example_app/app/assets/javascripts/admin/identity.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
let mainContent = document.querySelector(".main-content");
if (mainContent) {
mainContent.addEventListener("click", evt => {
if (evt.target.classList.contains("identity__become-action")) {
if (!confirm("Change identity?")) {
evt.preventDefault();
}
}
});
}
3 changes: 3 additions & 0 deletions spec/example_app/app/assets/stylesheets/admin.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
/*
*= require_tree ./admin
*/
38 changes: 38 additions & 0 deletions spec/example_app/app/assets/stylesheets/admin/identity.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
.identity__banner {
margin: 0;

}
.identity__banner.identity__banner--admin {
--color-rainbow-violet: #ee82ee;
--color-rainbow-indigo: #4b0082;
--color-rainbow-blue: #00f;
--color-rainbow-green: #0f0;
--color-rainbow-yellow: #ff0;
--color-rainbow-orange: #ffa500;
--color-rainbow-red: #f00;

animation: rainbow 1s ease;
background-clip: text;
background-image: repeating-linear-gradient(
45deg,
var(--color-rainbow-violet),
var(--color-rainbow-indigo),
var(--color-rainbow-blue),
var(--color-rainbow-green),
var(--color-rainbow-yellow),
var(--color-rainbow-orange),
var(--color-rainbow-red),
var(--color-rainbow-violet)
);
background-size: 800% 800%;
text-align: center;
-webkit-text-fill-color: transparent;
}

@keyframes rainbow {
0% { background-position: 0% 50%; }

50% { background-position: 100% 25%; }

100% { background-position: 0% 50%; }
}
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,5 @@
<% end %>

<td>
<%= link_to("Become", become_admin_customer_path(resource)) %>
<%= link_to("Become", become_admin_customer_path(resource), class: "identity__become-action") %>
</td>
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
<% content_for(:header_middle) do %>
<div>
You are logged in as <em><%= pundit_user.name %></em>.
<%= link_to("Become the Admin", become_admin_customer_path("admin")) unless pundit_user.admin? %>
</div>
<p class="identity__banner<%= " identity__banner--admin" if pundit_user.admin? %>">You are logged in as <em><%= pundit_user.name %></em>. <%= link_to("Become the Admin", become_admin_customer_path("admin"), class: "identity__become-action") unless pundit_user.admin? %></p>
<% end %>

<%= render template: 'administrate/application/_index_header', locals: local_assigns %>
2 changes: 2 additions & 0 deletions spec/example_app/config/initializers/administrate.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
Administrate::Engine.add_stylesheet("admin")
Administrate::Engine.add_javascript("admin")

0 comments on commit b55fed3

Please sign in to comment.