Upgrade Bootstrap #3144

benjaminfaure · 2022-04-06T07:32:11Z

As I mentionned during our last meeting, at some point the roadmap code was running Bootstrap 4.
But it seems the version got reverted from 4 to 3 between Roadmap V2.2.1 and V3.0.0

https://github.com/DMPRoadmap/roadmap/blob/v2.2.1/package.json
https://github.com/DMPRoadmap/roadmap/blob/v3.0.0/package.json

The upgrade seems minimal (since it's been reverted to 3 without noticing :D ) but in Bootstrap 4 the dropdown menus are no longer "hoverable"

The latest version is 4.6.1

briri · 2022-04-06T15:47:49Z

Thanks for confirming this @benjaminfaure

briri · 2022-04-13T16:52:45Z

For the Bootstrap upgrade, we can probably refer to official guide (https://getbootstrap.com/docs/5.0/migration/) and (https://getbootstrap.com/docs/4.0/migration/) for the possible broken points

We should upgrade incrementally. For example upgrade to 4.x first and verify changes before moving to 5.x

briri · 2023-01-23T16:52:34Z

see if we can go directly to 5 or if going to 4 first is necessary

First step in moving from Bootstrap 3 to 5. - Node package changes: - Changed version of bootstrap "^3.4.1" --> "^5.2.3". - Added @popperjs/core. -Removed bootstrap-3-typeahead, bootstrap-sass & popper.js. - Commented out code that was breaking assets:precompile. This will need to be fixed. This was based on ideas in article "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

johnpinto1 · 2023-02-27T15:23:06Z

@briri Following your advice, I have created a branch for @gjacob24 and I to play with moving straight to Bootstrap 5.
https://github.com/DMPRoadmap/roadmap/tree/issue_3144-bootstrap5-upgrade-dcc-glenys-john-preliminary-work

First commit just added packages that upgraded to Bootstrap 5 and commented out broken code in scss and javascript files.

issue_3144-bootstrap5-upgrade-dcc-glenys-john-preliminary-work

We will be using migration and sass docs here to fix and update code:
https://getbootstrap.com/docs/5.0/migration/
https://getbootstrap.com/docs/4.6/migration/
https://getbootstrap.com/docs/5.0/customize/sass/
https://designmodo.com/migrate-boo
https://designmodo.com/migrate-bootstrap-4/
https://designmodo.com/migrate-bootstrap-5/
http://upgrade-bootstrap.bootply.com/
https://medium.com/@lukaszholeczek/migration-from-bootstrap-3-to-bootstrap-4-4ec63a1dd8b1
https://www.web3canvas.com/convert-bootstrap-4-to-5-migration-guide/

briri · 2023-02-27T15:40:39Z

thanks @gjacob24 and @johnpinto1 that sounds like a good plan.

May require further work.

app/assets/stylesheets/archived-blocks for referencing during development.

@use

These changes were based on ideas in article "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 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. - In app/assets/stylesheets/application.scss: * removed bootstrap-sass import and replaced with @import "../../../node_modules/bootstrap/scss/bootstrap"; - 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 calculations / with calc() function, e.g., replaced padding-right: $grid-gutter-width / 2; with padding-right: calc($grid-gutter-width / 2); * Replaced with 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) {} (Based on blogs https://bibwild.wordpress.com/2019/06/10/what-happened-to-grid-float-breakpoint-in-bootstrap-4-and-screen-size-breakpoint-shift-from-3-4/ & https://www.educative.io/answers/what-are-media-queries-in-bootstrap-4)

@use

These changes were based on ideas in article "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 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. - In app/assets/stylesheets/application.scss: * removed bootstrap-sass import and replaced with @import "../../../node_modules/bootstrap/scss/bootstrap"; - 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 calculations / with calc() function, e.g., replaced padding-right: $grid-gutter-width / 2; with padding-right: calc($grid-gutter-width / 2); * Replaced with 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) {} (Based on blogs https://bibwild.wordpress.com/2019/06/10/what-happened-to-grid-float-breakpoint-in-bootstrap-4-and-screen-size-breakpoint-shift-from-3-4/ & https://www.educative.io/answers/what-are-media-queries-in-bootstrap-4) - Deleted app/javascript/src/utils/popoverHelper.js

Signed-off-by: John Pinto <[email protected]>

notification'. Two issue: - The tags in app/views/org_admin/conditions/_webhook_form.html.erb were incorrectly changed: label_tag, email_field_tag and text_area_tag there inputs should be as label_tag(name = nil, content_or_options = nil, options = nil, &block), email_field_tag(name, value = nil, options = {}) and text_area_tag(name, content = nil, options = {}) respectively. - In Bootstrap 5 the Jquery elements for links and buttons cannot be triggered by trigger('click') programmatical;ly. The work around is to use the Vanilla Javascript element or in the case of modals using the modal('show') method.

notification'. Two issue: - The tags in app/views/org_admin/conditions/_webhook_form.html.erb were incorrectly changed: label_tag, email_field_tag and text_area_tag there inputs should be as label_tag(name = nil, content_or_options = nil, options = nil, &block), email_field_tag(name, value = nil, options = {}) and text_area_tag(name, content = nil, options = {}) respectively. - In Bootstrap 5 the Jquery elements for links and buttons cannot be triggered by trigger('click') programmatically. The work around is to use the Vanilla Javascript element or in the case of modals using the modal('show') method.

notification'. Two issue: - The tags in app/views/org_admin/conditions/_webhook_form.html.erb were incorrectly changed: label_tag, email_field_tag and text_area_tag there inputs should be as label_tag(name = nil, content_or_options = nil, options = nil, &block), email_field_tag(name, value = nil, options = {}) and text_area_tag(name, content = nil, options = {}) respectively. - In Bootstrap 5 the Jquery elements for links and buttons cannot be triggered by trigger('click') programmatically. The work around is to use the Vanilla Javascript element with click() or in the case of modals using the modal('show') method.

…emplate editing phase for customisations.

page.

This commit consists of the file changes required for the upgrade from Bootstrap 3 to 5. A more detailed version is in CHANGELOG.md (and in wiki: https://github.com/DMPRoadmap/roadmap/wiki/Release-notes-for-Bootstrap-5-upgrade)

1: Fix for SuperAdmins Orgs Super admin removes links Failure/Error: all('.link a > .fa-circle-xmark').last.click spec/features/super_admins/orgs_spec.rb & spec/support/helpers/links_helper.rb updated. It was necessary, to scroll to links that were not visible and click by using Javascripts xcripts.

1: Fix for SuperAdmins Orgs Super admin removes links Failure/Error: all('.link a > .fa-circle-xmark').last.click Changed selectors in spec/features/super_admins/orgs_spec.rb & updated spec/support/helpers/links_helper.rb updated. It was necessary, to scroll to links that were not visible and click by using Javascripts scripts.

1: Fix for SuperAdmins Orgs Super admin removes links Failure/Error: all('.link a > .fa-circle-xmark').last.click Changed selectors in spec/features/super_admins/orgs_spec.rb & updated spec/support/helpers/links_helper.rb updated. It was necessary, to scroll to links that were not visible and click by using Javascripts scripts. 2: Fixed errors in ./spec/features/questions/textarea_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)", "(1/1) answered" -> "( 1 / 1)" 3: Fix for errors in ./spec/features/annotations/annotations_editing_spec.rb Changed "Noo bar" -> "Noo bar". 4: Fixed errors in ./spec/features/questions/radiobuttons_questions_spec.rb. Changed "(0/1) answered" -> "(0 / 1)". 5: Fixed error in ./spec/features/questions/dropdown_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)".5: Fixed error in ./spec/features/questions/dropdown_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)".5: Fixed error in ./spec/features/questions/dropdown_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)".5: Fixed error in ./spec/features/questions/dropdown_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)".5: Fixed error in ./spec/features/questions/dropdown_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)".

1: Fix for SuperAdmins Orgs Super admin removes links Failure/Error: all('.link a > .fa-circle-xmark').last.click Changed selectors in spec/features/super_admins/orgs_spec.rb & updated spec/support/helpers/links_helper.rb updated. It was necessary, to scroll to links that were not visible and click by using Javascripts scripts. 2: Fixed errors in ./spec/features/questions/textarea_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)", "(1/1) answered" -> "( 1 / 1)" 3: Fix for errors in ./spec/features/annotations/annotations_editing_spec.rb Changed "Noo bar" -> "Noo bar". 4: Fixed errors in ./spec/features/questions/radiobuttons_questions_spec.rb. Changed "(0/1) answered" -> "(0 / 1)". 5: Fixed error in ./spec/features/questions/dropdown_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)". 6: Fixed error in spec/features/feedback_requests_spec.rb Replaced "within('div.panel') do" -> "within('.tab-pane.active')"

1: Fix for SuperAdmins Orgs Super admin removes links Failure/Error: all('.link a > .fa-circle-xmark').last.click Changed selectors in spec/features/super_admins/orgs_spec.rb & updated spec/support/helpers/links_helper.rb updated. It was necessary, to scroll to links that were not visible and click by using Javascripts scripts. 2: Fixed errors in ./spec/features/questions/textarea_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)", "(1/1) answered" -> "( 1 / 1)" 3: Fix for error in ./spec/features/annotations/annotations_editing_spec.rb Changed "Noo bar" -> "Noo bar". 4: Fixed error in ./spec/features/questions/radiobuttons_questions_spec.rb. Changed "(0/1) answered" -> "(0 / 1)". 5: Fixed error in ./spec/features/questions/dropdown_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)". 6: Fixed error in spec/features/feedback_requests_spec.rb Replaced "within('div.panel') do" -> "within('.tab-pane.active')" 7: Fixed errors in ./spec/features/questions/checkbox_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)", "(1/1) answered" -> "( 1 / 1)"

1: Fix for SuperAdmins Orgs Super admin removes links Failure/Error: all('.link a > .fa-circle-xmark').last.click Changed selectors in spec/features/super_admins/orgs_spec.rb & updated spec/support/helpers/links_helper.rb updated. It was necessary, to scroll to links that were not visible and click by using Javascripts scripts. 2: Fixed errors in ./spec/features/questions/textarea_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)", "(1/1) answered" -> "( 1 / 1)" 3: Fix for error in ./spec/features/annotations/annotations_editing_spec.rb Changed "Noo bar" -> "Noo bar". 4: Fixed error in ./spec/features/questions/radiobuttons_questions_spec.rb. Changed "(0/1) answered" -> "(0 / 1)". 5: Fixed error in ./spec/features/questions/dropdown_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)". 6: Fixed error in spec/features/feedback_requests_spec.rb Replaced "within('div.panel') do" -> "within('.tab-pane.active')" 7: Fixed errors in ./spec/features/questions/checkbox_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)", "(1/1) answered" -> "( 1 / 1)" 8: Fixed error in ./spec/features/templates/templates_editings_spec.rb. Changed "Foo bar" -. "Foo bar".

1: Fix for SuperAdmins Orgs Super admin removes links Failure/Error: all('.link a > .fa-circle-xmark').last.click Changed selectors in spec/features/super_admins/orgs_spec.rb & updated spec/support/helpers/links_helper.rb updated. It was necessary, to scroll to links that were not visible and click by using Javascripts scripts. 2: Fixed errors in ./spec/features/questions/textarea_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)", "(1/1) answered" -> "( 1 / 1)" 3: Fix for error in ./spec/features/annotations/annotations_editing_spec.rb Changed "Noo bar" -> "Noo bar". 4: Fixed error in ./spec/features/questions/radiobuttons_questions_spec.rb. Changed "(0/1) answered" -> "(0 / 1)". 5: Fixed error in ./spec/features/questions/dropdown_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)". 6: Fixed error in spec/features/feedback_requests_spec.rb Replaced "within('div.panel') do" -> "within('.tab-pane.active')" 7: Fixed errors in ./spec/features/questions/checkbox_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)", "(1/1) answered" -> "( 1 / 1)" 8: Fixed error in ./spec/features/templates/templates_editings_spec.rb. Changed "Foo bar" -. "Foo bar". 9: Fix for ./spec/features/questions/textfield_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)", "(1/1) answered" -> "( 1 / 1)"

1: Added to spec/rails_helper.rb: Capybara.default_max_wait_time = 10 2: Fix for SuperAdmins Orgs Super admin removes links Failure/Error: all('.link a > .fa-circle-xmark').last.click Changed selectors in spec/features/super_admins/orgs_spec.rb & updated spec/support/helpers/links_helper.rb updated. It was necessary, to scroll to links that were not visible and click by using Javascripts scripts. 3: Fixed errors in ./spec/features/questions/textarea_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)", "(1/1) answered" -> "( 1 / 1)" 4: Fix for error in ./spec/features/annotations/annotations_editing_spec.rb Changed "Noo bar" -> "Noo bar". 5: Fixed error in ./spec/features/questions/radiobuttons_questions_spec.rb. Changed "(0/1) answered" -> "(0 / 1)". 6: Fixed error in ./spec/features/questions/dropdown_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)". 7: Fixed error in spec/features/feedback_requests_spec.rb Replaced "within('div.panel') do" -> "within('.tab-pane.active')" 8: Fixed errors in ./spec/features/questions/checkbox_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)", "(1/1) answered" -> "( 1 / 1)" 9: Fixed error in ./spec/features/templates/templates_editings_spec.rb. Changed "Foo bar" -. "Foo bar". 10: Fix for ./spec/features/questions/textfield_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)", "(1/1) answered" -> "( 1 / 1)"

This commit consists of the file changes required for the upgrade from Bootstrap 3 to 5. A more detailed version is in CHANGELOG.md (and in wiki: https://github.com/DMPRoadmap/roadmap/wiki/Release-notes-for-Bootstrap-5-upgrade)

1: Added to spec/rails_helper.rb: Capybara.default_max_wait_time = 10 2: Fix for SuperAdmins Orgs Super admin removes links Failure/Error: all('.link a > .fa-circle-xmark').last.click Changed selectors in spec/features/super_admins/orgs_spec.rb & updated spec/support/helpers/links_helper.rb updated. It was necessary, to scroll to links that were not visible and click by using Javascripts scripts. 3: Fixed errors in ./spec/features/questions/textarea_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)", "(1/1) answered" -> "( 1 / 1)" 4: Fix for error in ./spec/features/annotations/annotations_editing_spec.rb Changed "Noo bar" -> "Noo bar". 5: Fixed error in ./spec/features/questions/radiobuttons_questions_spec.rb. Changed "(0/1) answered" -> "(0 / 1)". 6: Fixed error in ./spec/features/questions/dropdown_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)". 7: Fixed error in spec/features/feedback_requests_spec.rb Replaced "within('div.panel') do" -> "within('.tab-pane.active')" 8: Fixed errors in ./spec/features/questions/checkbox_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)", "(1/1) answered" -> "( 1 / 1)" 9: Fixed error in ./spec/features/templates/templates_editings_spec.rb. Changed "Foo bar" -. "Foo bar". 10: Fix for ./spec/features/questions/textfield_questions_spec.rb. Changed "(0/1) answered" -> "( 0 / 1)", "(1/1) answered" -> "( 1 / 1)"

…rap_5 Issue #3144 - Upgrade to Bootstrap 5

briri changed the title ~~Upgrade to Bootstrap 4~~ Upgrade Bootstrap Apr 13, 2022

briri assigned johnpinto1 and gjacob24 Jan 23, 2023

johnpinto1 pushed a commit that referenced this issue Mar 1, 2023

Issue #3144 - Tooltips for Bootstrap 4 & 5.

2e11827

May require further work.

johnpinto1 pushed a commit that referenced this issue Mar 8, 2023

Issue # #3144 - Fixing navbar functionality.

fdbc1cb

johnpinto1 pushed a commit that referenced this issue Mar 9, 2023

Issue #3144 - Updated to use Bootstrap 5 spinner.

3010fe9

johnpinto1 pushed a commit that referenced this issue Mar 9, 2023

Issue #3144 - Updated to use Bootstrap 5 spinner.

173d36b

johnpinto1 pushed a commit that referenced this issue Mar 9, 2023

Issue #3144 - Incomplete work on navigation bar.

442bf56

johnpinto1 pushed a commit that referenced this issue Mar 14, 2023

Issue #3144 - Incomplete work on navigation bar.

f76b4f2

johnpinto1 pushed a commit that referenced this issue Mar 14, 2023

Issue #3144 - Incomplete work on navigation bar.

dc3c72f

johnpinto1 pushed a commit that referenced this issue Mar 23, 2023

Issue #3144 - Incomplete work on navigation bar and footer.

ec49ade

johnpinto1 pushed a commit that referenced this issue Mar 23, 2023

Issue #3144 - Incomplete work on navigation bar and footer.

c9eae0b

johnpinto1 pushed a commit that referenced this issue Mar 24, 2023

Issue #3144 - Incomplete work on navigation bar and footer.

2381f5c

johnpinto1 pushed a commit that referenced this issue Mar 24, 2023

Issue #3144 - Incomplete work on navigation bar and footer.

f0f1808

johnpinto1 pushed a commit that referenced this issue Mar 27, 2023

Issue #3144 - Initial work on navigation bar and footer.

abf340b

johnpinto1 pushed a commit that referenced this issue Mar 27, 2023

Issue #3144 - Tidy up of commits for this work merged.

8a748ca

johnpinto1 pushed a commit that referenced this issue Mar 27, 2023

Issue #3144 - Initial work on navigation bar and footer.

f59b165

johnpinto1 pushed a commit that referenced this issue Mar 27, 2023

Issue #3144 - Setting some global scss.

85b5e51

johnpinto1 pushed a commit that referenced this issue Mar 29, 2023

Issued #3144: Created a copy of app/assets/stylesheets/blocks in

659f06b

app/assets/stylesheets/archived-blocks for referencing during development.

gjacob24 added a commit that referenced this issue Mar 29, 2023

Issue #3144 - initial work for sign in page

2e6a342

johnpinto1 pushed a commit that referenced this issue Mar 30, 2023

Issue #3144 - Updated to use Bootstrap 5 spinner.

336dc8e

Signed-off-by: John Pinto <[email protected]>

johnpinto1 pushed a commit that referenced this issue Mar 30, 2023

Issue #3144 - Initial work on navigation bar and footer.

c1ede2d

Signed-off-by: John Pinto <[email protected]>

johnpinto1 pushed a commit that referenced this issue Dec 20, 2023

IssueID #3144 - Fix for missing sections not appearing in Org_admin T…

541615e

…emplate editing phase for customisations.

johnpinto1 pushed a commit that referenced this issue Jan 5, 2024

IssueID #3144 - Fix for invisible Actions dropdowns on "My Dashboard"

a264f36

page.

johnpinto1 pushed a commit that referenced this issue Jan 5, 2024

IssueID #3144 - Fix for navbar dropdown background.

5f41b5f

johnpinto1 pushed a commit that referenced this issue Jan 8, 2024

IssueID #3144 - Updated CHANGELOG.md.

ebc8ffe

johnpinto1 pushed a commit that referenced this issue Jan 8, 2024

IssueID #3144 - Updated CHANGELOG.md.

59a16e5

johnpinto1 pushed a commit that referenced this issue Jan 12, 2024

IssueID #3144 - Updated accordion.js.

dd6d406

johnpinto1 pushed a commit that referenced this issue Jan 12, 2024

IssueID #3144 - Updated updateConditions.js.

59acf59

johnpinto1 pushed a commit that referenced this issue Jan 12, 2024

IssueID #3144 - Updated CHANGELOG.md.

39f4016

johnpinto1 pushed a commit that referenced this issue Jan 17, 2024

IssueID #3144 - Fixed and reworked accordion.js which was broken.

39658d0

benjaminfaure added a commit that referenced this issue Apr 8, 2024

Merge pull request #3374 from DMPRoadmap/issue_3144_upgrade_to_bootst…

687fb08

…rap_5 Issue #3144 - Upgrade to Bootstrap 5

benjaminfaure closed this as completed Apr 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade Bootstrap #3144

Upgrade Bootstrap #3144

benjaminfaure commented Apr 6, 2022

briri commented Apr 6, 2022

briri commented Apr 13, 2022 •

edited

Loading

briri commented Jan 23, 2023

johnpinto1 commented Feb 27, 2023 •

edited

Loading

briri commented Feb 27, 2023

Upgrade Bootstrap #3144

Upgrade Bootstrap #3144

Comments

benjaminfaure commented Apr 6, 2022

briri commented Apr 6, 2022

briri commented Apr 13, 2022 • edited Loading

briri commented Jan 23, 2023

johnpinto1 commented Feb 27, 2023 • edited Loading

briri commented Feb 27, 2023

briri commented Apr 13, 2022 •

edited

Loading

johnpinto1 commented Feb 27, 2023 •

edited

Loading