Save custom styles in DSpace Admin collection form and have it dynamically added to <head> for the collection and item pages #3250
Conversation
dynamically added to <head> for the collection and item pages
Test plan:
1. Log into DSpace Admin
2. Go to: Edit > Collection
3. 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;
}
.navbar-inner-container {
background-color: brown !important;
}
4. The Collection Browse page will load. Hard refresh and notice your
CSS styles have been applied to the header, nav, body and footer of
the page.
5. Click on an item record and (if neccessary hard refresh again)
notice the same CSS styles have been applied on that page as well.
6. Go to: Edit > Collection.
7. Choose a different collection and save the following CSS styling in
the 'Collection styles (CSS)' field:
body {
background-color:orange !important;
}
8. Save and hard refresh the Browse collection page that is loaded and
hard refresh the Browse collection page from step 4. Notice that
different collections successfully render the different CSS styling.
i.e. you are not saving global CSS but collection specific CSS.
9. Notice that this applies to the item pages of the two different
collections as well.
Sponsored-by: Auckland University of Technology, New Zealand
alexklbuckley
force-pushed
the
dspace-css
branch
from
4096166
to
e24d797
Compare
- Fix tests Sponsored-by: Auckland University of Technology, New Zealand
alexklbuckley
force-pushed
the
dspace-css
branch
from
e24d797
to
de6bb72
Compare
- Trying to fix tests Sponsored-by: Auckland University of Technology, New Zealand
alexklbuckley
force-pushed
the
dspace-css
branch
5 times, most recently
from
20471cb
to
7f36ee0
Compare
- Fixing failing unit tests Sponsored-by: Auckland University of Technology, New Zealand
alexklbuckley
force-pushed
the
dspace-css
branch
from
7f36ee0
to
d46e7ef
Compare
- This commit adds the metadata fields to the existing dspace metadata schema required for this DSpace Angular PR#3250: DSpace/dspace-angular#3250 Sponsored-by: Auckland University of Technology, New Zealand
|
Hi @alexklbuckley , thanks for opening this PR -- this is a creative approach to collection styling but I think it raises a few questions about separation of concerns (theme / style vs stored metadata), and possible security issues with injecting metadata text values directly into page output as css. It also means the CSS can't be minified and bundled up with the webpack when delivering the production Angular application. (I see this PR is in draft - this comment isn't a "review", just trying to help out in case we can find more suitable ways of achieving what you are after) There are a few other approaches to "collection styling" I can think of, one of which is already supported:
e.g.
I would recommend giving option 1 a go before spending too much time on this solution as I think it could be a hard sell for merging to DSpace. Please let me know if you have any questions or extra info to help clarify if I have misunderstood. |
|
(I just read the original issue and now realise the theme idea was already considered, sorry for missing that. If the key requirement is for an admin without Angular theme access to change styles on demand, then perhaps my suggestions are not as applicable) |
Hi @kshepherd , Thanks very much for your suggestions and for your feedback. Appreciate it! Yes, our use case is to enable librarians, without direct server access, to be able to save and change styling for collections in the DSpace Admin. I also work on Koha and we have a similar setting for librarians to be able to save CSS rules, in the Koha interface, in a setting called OpacUsercss: Can you see a means for us to be able to safety save, and display, CSS styles on demand without Angular theme access? I also have a second PR for saving new additional metadata content fields for collections and then displaying them on an optional collection home page (displayed by default and only routed to when enabled in the config.*.yml file):
The use case for this is enabling collection owners to save, and display, more contextual information about their collection, without needing server access. The fields on this PR accept, and display HTML, but in the same way as the dc.description (Collection 'Introductory text (HTML)') metadata field currently does in DSpace 7 and 8. I would value your opinion on this PR3256 if you have a chance to take a look. Thanks so much, |
|
@alexklbuckley & @kshepherd : Just glanced at this code, and I have a few immediate concerns:
Even if we fix these issues, this feature still makes me a bit nervous. Anytime you allow for injecting code into the display of a page, there's risk that injected data could be used to steal user data. While I realize creating a single CSS text area is the easy solution, it's also the most risky... the only way I know of to minimize this risk is to be extremely strict around validating the data entered. Another idea (but it's much more complex) could be to allow sites to only change the value of various existing Bootstrap CSS variables to allow them control over the basic look & feel without allowing them to add in any CSS they want. This would be a more complex form though, as you'd have to list each of these variables with their current value, and allow users to edit them. |
…nistrators - Add a new 'Edit collection styles' tab to the Edit Collection DSpace Admin forms. This tab page can only be loaded by administrator users Sponsored-by: Auckland University of Technology, New Zealand
alexklbuckley
force-pushed
the
dspace-css
branch
from
ea3f1e4
to
f7fd858
Compare
Thank you @tdonohue and @kshepherd we are working on adding those first two points to this pull request. I've chatted with my team and we do not think, at this stage, it will be practical to maintain enabling librarians to change the value of various existing bootstrap css variables. For one thing, due to the maintainability of that solution whenever bootstrap css variables changes then the collection forms would have to as well. In the meantime, if you had availability to take a look at our second pull request, extending the already existing DSpace ability to save text & HTML content in collection metadata fields we would love to get more feedback and testing: #3256 |
…nistrators - Fix failing unit tests Sponsored-by: Auckland University of Technology, New Zealand
alexklbuckley
force-pushed
the
dspace-css
branch
from
f7fd858
to
54d2fd9
Compare
References
Add references/links to any related issues or PRs. These may include:
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:
Include guidance for how to test or review your PR.
body {
background-color:red !important;
}
.bottom-footer {
background-color: yellow !important;
}
header {
background-color: green !important;
}
body {
background-color:orange !important;
}
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!
mainbranch of code (unless it is a backport or is fixing an issue specific to an older branch).yarn lintyarn check-circ-deps)package.json), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.