dspace-angular icon indicating copy to clipboard operation
dspace-angular copied to clipboard

Published 20 hours ago • verified publisher icon DSpace

Save custom styles in DSpace Admin collection form and have it dynamically added to <head> for the collection and item pages

Open alexklbuckley opened this issue 1 year ago • 5 comments

References

Add references/links to any related issues or PRs. These may include:

  • Fixes #3254

Description

Add ability for DSpace admin users to save custom CSS rules for a collection.

Render that CSS on the collection browse and item detail pages.

Instructions for Reviewers

List of changes in this PR:

  • Add new metadata field: collection.css
  • Add new function to collection.model.ts to fetch content of new metadata field
  • Add a new function to theme.service.ts: addCollectionCSSToHead()
  • Call new addCollectionCSSToHead() function whenever the user is viewing a collection page OR is viewing an item.

Include guidance for how to test or review your PR.

  1. Log into DSpace Admin
  2. Go to: Registries > Metadata
  3. Create a new metadata schema: Namespace = 'collection', Name = 'collection'
  4. Add a new field to your new schema: Element = 'css', Qualifier = empty, Scope note = 'CSS for this collection'
  5. Go to: Edit > Collection
  6. Save the following CSS in the 'Collection styles (CSS)' input field: body { background-color:red !important; } .bottom-footer { background-color: yellow !important; } header { background-color: green !important; }
  7. The Collection Browse page will load. Notice your CSS styles have been applied to the header, body and footer of the page.
  8. Click on an item record. Notice the same CSS styles have been applied on that page as well.
  9. Go to: Edit > Collection.
  10. Choose a different collection and save the following CSS styling in the 'Collection styles (CSS)' field: body { background-color:orange !important; }
  11. The Collection Browse page for this second collection will load. Notice that your second set of styling is displaying.
  12. View an item in this second collection. Notice it has an orange background color.

Checklist

This checklist provides a reminder of what we are going to look for when reviewing your PR. You do not need to complete this checklist prior creating your PR (draft PRs are always welcome). However, reviewers may request that you complete any actions in this list if you have not done so. If you are unsure about an item in the checklist, don't hesitate to ask. We're here to help!

  • [x] My PR is created against the main branch of code (unless it is a backport or is fixing an issue specific to an older branch).
  • [x] My PR is small in size (e.g. less than 1,000 lines of code, not including comments & specs/tests), or I have provided reasons as to why that's not possible.
  • [x] My PR passes ESLint validation using yarn lint
  • [x] My PR doesn't introduce circular dependencies (verified via yarn check-circ-deps)
  • [ ] My PR includes TypeDoc comments for all new (or modified) public methods and classes. It also includes TypeDoc for large or complex private methods.
  • [ ] My PR passes all specs/tests and includes new/updated specs or tests based on the Code Testing Guide.
  • [ ] My PR aligns with Accessibility guidelines if it makes changes to the user interface.
  • [x] My PR uses i18n (internationalization) keys instead of hardcoded English text, to allow for translations.
  • [x] My PR includes details on how to test it. I've provided clear instructions to reviewers on how to successfully test this fix or feature.
  • [x] If my PR includes new libraries/dependencies (in package.json), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.
  • [x] If my PR includes new features or configurations, I've provided basic technical documentation in the PR itself.
  • [x] If my PR fixes an issue ticket, I've linked them together.

alexklbuckley avatar Aug 13 '24 09:08 alexklbuckley