From b55fed3ce5d7aab55c1fef48615b52718abbd4d6 Mon Sep 17 00:00:00 2001 From: Pablo Brasero Date: Fri, 22 Dec 2023 15:05:30 +0000 Subject: [PATCH] Document using custom assets 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. --- docs/customizing_page_views.md | 22 +++++++++++ .../example_app/app/assets/config/manifest.js | 2 + .../app/assets/javascripts/admin.js | 1 + .../app/assets/javascripts/admin/identity.js | 10 +++++ .../app/assets/stylesheets/admin.css | 3 ++ .../app/assets/stylesheets/admin/identity.css | 38 +++++++++++++++++++ .../_collection_item_actions.html.erb | 2 +- .../admin/customers/_index_header.html.erb | 5 +-- .../config/initializers/administrate.rb | 2 + 9 files changed, 80 insertions(+), 5 deletions(-) create mode 100644 spec/example_app/app/assets/javascripts/admin.js create mode 100644 spec/example_app/app/assets/javascripts/admin/identity.js create mode 100644 spec/example_app/app/assets/stylesheets/admin.css create mode 100644 spec/example_app/app/assets/stylesheets/admin/identity.css create mode 100644 spec/example_app/config/initializers/administrate.rb diff --git a/docs/customizing_page_views.md b/docs/customizing_page_views.md index 643ade2fb5..d7dd1af263 100644 --- a/docs/customizing_page_views.md +++ b/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 +``` diff --git a/spec/example_app/app/assets/config/manifest.js b/spec/example_app/app/assets/config/manifest.js index 2589fe94ce..f92bdd593b 100644 --- a/spec/example_app/app/assets/config/manifest.js +++ b/spec/example_app/app/assets/config/manifest.js @@ -2,3 +2,5 @@ //= link_tree ../images //= link_tree ../builds +//= link admin.css +//= link admin.js diff --git a/spec/example_app/app/assets/javascripts/admin.js b/spec/example_app/app/assets/javascripts/admin.js new file mode 100644 index 0000000000..06ada5e097 --- /dev/null +++ b/spec/example_app/app/assets/javascripts/admin.js @@ -0,0 +1 @@ +//= require_tree ./admin diff --git a/spec/example_app/app/assets/javascripts/admin/identity.js b/spec/example_app/app/assets/javascripts/admin/identity.js new file mode 100644 index 0000000000..1492f4c2ab --- /dev/null +++ b/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(); + } + } + }); +} diff --git a/spec/example_app/app/assets/stylesheets/admin.css b/spec/example_app/app/assets/stylesheets/admin.css new file mode 100644 index 0000000000..f8866eba30 --- /dev/null +++ b/spec/example_app/app/assets/stylesheets/admin.css @@ -0,0 +1,3 @@ +/* +*= require_tree ./admin +*/ diff --git a/spec/example_app/app/assets/stylesheets/admin/identity.css b/spec/example_app/app/assets/stylesheets/admin/identity.css new file mode 100644 index 0000000000..8863a0a056 --- /dev/null +++ b/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%; } +} diff --git a/spec/example_app/app/views/admin/customers/_collection_item_actions.html.erb b/spec/example_app/app/views/admin/customers/_collection_item_actions.html.erb index 38022f857f..12a448dcae 100644 --- a/spec/example_app/app/views/admin/customers/_collection_item_actions.html.erb +++ b/spec/example_app/app/views/admin/customers/_collection_item_actions.html.erb @@ -17,5 +17,5 @@ <% end %> - <%= link_to("Become", become_admin_customer_path(resource)) %> + <%= link_to("Become", become_admin_customer_path(resource), class: "identity__become-action") %> diff --git a/spec/example_app/app/views/admin/customers/_index_header.html.erb b/spec/example_app/app/views/admin/customers/_index_header.html.erb index b5394b4615..87e0629c84 100644 --- a/spec/example_app/app/views/admin/customers/_index_header.html.erb +++ b/spec/example_app/app/views/admin/customers/_index_header.html.erb @@ -1,8 +1,5 @@ <% content_for(:header_middle) do %> -
- You are logged in as <%= pundit_user.name %>. - <%= link_to("Become the Admin", become_admin_customer_path("admin")) unless pundit_user.admin? %> -
+

">You are logged in as <%= pundit_user.name %>. <%= link_to("Become the Admin", become_admin_customer_path("admin"), class: "identity__become-action") unless pundit_user.admin? %>

<% end %> <%= render template: 'administrate/application/_index_header', locals: local_assigns %> diff --git a/spec/example_app/config/initializers/administrate.rb b/spec/example_app/config/initializers/administrate.rb new file mode 100644 index 0000000000..b54bffa741 --- /dev/null +++ b/spec/example_app/config/initializers/administrate.rb @@ -0,0 +1,2 @@ +Administrate::Engine.add_stylesheet("admin") +Administrate::Engine.add_javascript("admin")