Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade to Bootstrap 5 & realign themes #3506

Open
wants to merge 84 commits into
base: main
Choose a base branch
from

Conversation

Wout-atmire
Copy link

References

Description

This PR aims to change the Bootstrap version of DSpace from Bootstrap version 4 to Bootstrap version 5 because version 4 is out of date. This version upgrade includes the required visual changes to maintain the same look as the DSpace version with Bootstrap 4.

Instructions for Reviewers

List of changes in this PR:

  • Updated packages @ng-bootstrap/ng-bootstrap to version ^12.0.0 and bootstrap to version ^5.3
  • We updated the SCSS to align with the migration-conditions of changing to Bootstrap 5. So that it remains compatible
    • Mainly updating old Bootstrap 4 classes to the renamed Bootstrap 5 classes (eg text-right to text-end, ml-4 to ms-4, ...)
  • Updated the styling ot perserve the look of DSpace
    • Added / Removed / Changed HTML element's Bootstrap classes
    • Changed which HTML elements uses which Angular directive
    • Removing certain HTML elements or changing them from type
    • Added new SASS variables
    • Added new CSS mappings

To test this you can start a local Angular instance in combination with the REST of host: demo.dspace.org. You can then compare it in another browser tab with DSpace that still uses Bootstrap 4 https://demo.dspace.org.
Note that we deliberately left in some style changes:

  • The width of the containers

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!

  • 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).
  • 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.
    Reason: This is an upgrade for a major dependency and thus it affects a lot of code.
  • My PR passes ESLint validation using npm run lint
  • My PR doesn't introduce circular dependencies (verified via npm run 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.
  • My PR uses i18n (internationalization) keys instead of hardcoded English text, to allow for translations.
  • 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.
  • 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.
  • If my PR includes new features or configurations, I've provided basic technical documentation in the PR itself.
  • If my PR fixes an issue ticket, I've linked them together.

LotteHofstede and others added 30 commits August 28, 2024 13:26
package.json Outdated
"@ng-dynamic-forms/core": "^16.0.0",
"@ng-dynamic-forms/ui-ng-bootstrap": "^16.0.0",
"@ngrx/effects": "^17.1.1",
"@ngrx/router-store": "^17.1.1",
"@ngrx/store": "^17.1.1",
"@ngx-translate/core": "^14.0.0",
"@nicky-lenaers/ngx-scroll-to": "^14.0.0",
"@popperjs/core": "^2.9.2",
"@types/grecaptcha": "^3.0.4",
"angular-idle-preload": "3.0.0",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Wout-atmire : Please don't add @types/grecaptcha back in the main dependencies. This was moved to devDependencies in #3553, and you are reverting those changes.

You've also reverted the removal of angular-idle-preload, which is no longer used in DSpace (again this was removed in #3553).

Copy link

Hi @Wout-atmire,
Conflicts have been detected against the base branch.
Please resolve these conflicts as soon as you can. Thanks!

…rd-dspace-themes-after-bootstrap-5-upgrade-9.0
Copy link

github-actions bot commented Nov 8, 2024

Hi @Wout-atmire,
Conflicts have been detected against the base branch.
Please resolve these conflicts as soon as you can. Thanks!

…rd-dspace-themes-after-bootstrap-5-upgrade-9.0
Copy link

Hi @Wout-atmire,
Conflicts have been detected against the base branch.
Please resolve these conflicts as soon as you can. Thanks!

@AAwouters AAwouters mentioned this pull request Dec 6, 2024
12 tasks
…lign-standard-dspace-themes-after-bootstrap-5-upgrade-9.0
Copy link

Hi @Wout-atmire,
Conflicts have been detected against the base branch.
Please resolve these conflicts as soon as you can. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dependencies Pull requests that update a dependency file high priority merge conflict themes
Projects
Status: 🙋 Needs Reviewers Assigned
Development

Successfully merging this pull request may close these issues.

Upgrade Bootstrap to v5
4 participants