diff --git a/.github/workflows/postgres.yml b/.github/workflows/postgres.yml index c67d4e5b4c..ea3e405158 100644 --- a/.github/workflows/postgres.yml +++ b/.github/workflows/postgres.yml @@ -37,10 +37,10 @@ jobs: with: ruby-version: '3.3' bundler-cache: true - - ## - run: echo 'NODE_OPTIONS="--openssl-legacy-provider"' >> $GITHUB_ENV + + ## - run: echo 'NODE_OPTIONS="--openssl-legacy-provider"' >> $GITHUB_ENV ## /home/runner/runners/2.301.1/externals/node12/bin/node: --openssl-legacy-provider is not allowed in NODE_OPTIONS - + # Install Node - uses: actions/setup-node@v3 with: diff --git a/.gitignore b/.gitignore index fe5107a935..7c60cef2a4 100644 --- a/.gitignore +++ b/.gitignore @@ -84,6 +84,7 @@ yarn-debug.log* .yarn-integrity /app/assets/builds/* !/app/assets/builds/.keep +!/app/assets/builds/.gitkeep # Ignore briley AWS cloud9 script to start the application cloud9-start.sh diff --git a/CHANGELOG.md b/CHANGELOG.md index b28bcbab00..3aeeb4e2f3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,178 @@ # Changelog +## v4.2.0 + +**Note this upgrade is mainly a migration from Bootstrap 3 to Bootstrap 5.** + +Note that this will have a significant impact on any scss and html customizations you may have made to your fork of this project. + +The following links will be helpful: + +[Get started with Bootstrap v5.2.3](https://getbootstrap.com/docs/5.2/getting-started/introduction/)
+[Migrating to v4](https://getbootstrap.com/docs/4.0/migration)
+[How to Migrate from Bootstrap Version 3 to 4](https://designmodo.com/migrate-bootstrap-4/)
+[Migrating to v5](https://getbootstrap.com/docs/5.0/migration)
+[How to Migrate from Bootstrap Version 4 to 5](https://designmodo.com/migrate-bootstrap-5/)
+[Use Bootstrap 5 with Ruby on Rails 6 and webpack](https://medium.com/daily-web-dev/use-bootstrap-4-with-ruby-on-rails-6-and-webpack-fe7300604267)
+[What happened to $grid-float-breakpoint in Bootstrap 4. And screen size breakpoint shift from 3 -> 4]( +https://bibwild.wordpress.com/2019/06/10/what-happened-to-grid-float-breakpoint-in-bootstrap-4-and-screen-size-breakpoint-shift-from-3-4/)
+[What are media queries in Bootstrap 4?](https://www.educative.io/answers/what-are-media-queries-in-bootstrap-4)
+ +### Key changes + +- Node package changes: + * Changed version of `bootstrap "^3.4.1"` --> `"^5.2.3"` + * Added `@popperjs/core.` + * Removed `bootstrap-3-typeahead, bootstrap-sass & popper.js` +- Stylesheet changes + * In `app/assets/stylesheets/application.scss`: + + removed `bootstrap-sass` import
+ and replaced with
+ `@import "../../../node_modules/bootstrap/scss/bootstrap";` + + * The order of the `import` statements have been changed to import the `blocks/` and `utils/` after the default bootstrap stylesheets + + * In `app/assets/stylesheets/blocks/`: + + Replaced in relevant files: + + `@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as * ;`
+ with
+ `@use "../../../../node_modules/bootstrap/scss/bootstrap" as *;` + + Enclosed all division calculations using symbol `/` with `calc()` function,
+ e.g., replaced
+ `padding-right: $grid-gutter-width / 2;`
+ with
+ `padding-right: calc($grid-gutter-width / 2);`
+ + Replaced breaking media queries since Bootstrap 3: + - `@media (max-width: $grid-float-breakpoint-max) {}`
+ with
+ `@include media-breakpoint-down(md){}` + + - `@media (max-width: $grid-float-breakpoint-max) {}`
+ with
+ `@include media-breakpoint-down(md) {}` + * Deleted `app/javascript/src/utils/popoverHelper.js`. ++ Mixins + - Media query mixins parameters have changed for a more logical approach. + * `media-breakpoint-down()` uses the breakpoint itself instead of the next breakpoint (e.g., `media-breakpoint-down(lg)` instead of `media-breakpoint-down(md)` targets viewports smaller than lg). ++ Color system + - All `lighten()`and `darken()` functions replaced. These functions will mix the color with either white or black instead of changing its lightness by a fixed amount. + * Replaced `lighten()` by `tint-color()`. + * Replaced `darken()` by `shade-color()`. + +#### Components & HTML + +Note many of these Bootstrap changes has required us to rewrite or change some of the Javascript files. + +When we use a native DOM element in Javascript, we obtain it by applying get() to the Jquery element (cf., https://api.jquery.com/get/). +We sometimes use the button native Dom element to programmatically click, as the Jquery button element with trigger('click') won't work because the trigger() function cannot be used to mimic native browser events, such as clicking (cf., https://learn.jquery.com/events/triggering-event-handlers/ ) + ++ Accordion & spinners + - Bespoke versions replaced by Bootstrap 5 accordion and spinner now. + - Accordion + * Changed the default Bootstrap arrow icon for the accordion to use the fontawesome icons plus and minus icons. Created a several accordion specific colour variables: +
// Accordion colors +
`$color-accordion-button: $color-primary-text`; +
`$color-accordion-button-icon: $color-primary-text`; +
`$color-accordion-button-bg: $color-primary-background`; +
`$color-accordion-button-active-bg: shade-color($color-accordion-button-bg, 30%)`; +
(See `app/assets/stylesheets/blocks/_accordion.scss` and `app/assets/stylesheets/variables/_colours.scss` for details.) + * The drag icon in `app/views/org_admin/sections/_section.html.erb` now appears after the plus (or minus) icon. + - The spinner block now uses class`d-none` instead of`hidden` to hide. + - In views with multiple accordion sections with "expand all" or "collapse all" links, we use the native Dom element of the accordion buttons to programmatically click, (cf. to note above). ++ Buttons + - Bootstrap dropped `btn-block` class for utilities. So we removed any styling using it. + - Close Buttons: Renamed `close` to`btn-close`. + - Renamed `btn-default` to `btn-secondary` and variable `$btn-default-color` changed to `$btn-secondary-color`. ++ Dropdowns + - Dropdown list items with class `dropdown` have class `dropdown-item` added usually with`px-3` for positioning. + - Added new `dropdown-menu-dark` variant and associated variables for on-demand dark dropdowns. + - Data attributes changes required by Bootstrap 5 (as used by accordion and dropdown buttons): + * `data-display` --> `data-bs-display` + * `data-parent` --> `data-bs-parent` + * `data-target` --> `data-bs-target` + * `data-toggle` --> `data-bs-toggle` + - Bootstrap 5 Popover added to some dropdown-menu items by adding attribute `data-bs-toggle="popover"` ++ Form + - `form-group` class replaced with `form-control`. + - Form labels now require `form-label` or `form-check-label` to go with `form-control` and `form-check` respectively. So all obsolete `control-label` replaced by `form-label` and missing ones added. + - Dropped form-specific layout classes for our grid system. Use Bootstrap grid and utilities instead of `form-group`, `form-row`, or `form-inline`. + - `form-text` no longer sets display, allowing you to create inline or block help text as you wish just by changing the HTML element. + - Input group addons are now specific to their placement relative to an input. So `input-group-addon` and in our case we replaced with +`input-group-addon`. + - Renamed `checkbox` and `radio` into `form-check`. ++ Images + - Renamed `img-responsive` to `img-fluid`. ++ Labels and badges + - Class `label` has been removed and replaced by `badge` to disambiguate from the `