Document custom assets

docs/customizing_page_views.md

@@ -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
+```

spec/example_app/app/assets/config/manifest.js

@@ -2,3 +2,5 @@
 
 //= link_tree ../images
 //= link_tree ../builds
+//= link admin.css
+//= link admin.js

spec/example_app/app/assets/javascripts/admin.js

@@ -0,0 +1 @@
+//= require_tree ./admin

spec/example_app/app/assets/javascripts/admin/identity.js

@@ -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();
+      }
+    }
+  });
+}

spec/example_app/app/assets/stylesheets/admin.css

@@ -0,0 +1,3 @@
+/*
+*= require_tree ./admin
+*/

spec/example_app/app/assets/stylesheets/admin/identity.css

@@ -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%; }
+}

spec/example_app/app/views/admin/customers/_collection_item_actions.html.erb

@@ -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>

spec/example_app/app/views/admin/customers/_index_header.html.erb

@@ -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 %>

spec/example_app/config/initializers/administrate.rb

@@ -0,0 +1,2 @@
+Administrate::Engine.add_stylesheet("admin")
+Administrate::Engine.add_javascript("admin")