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.

Sign up for GitHub

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

Jump to bottom

Bootstrap upgrade from v4 to v5 #3129

Merged
merged 134 commits into from
May 3, 2022
Merged

Bootstrap upgrade from v4 to v5 #3129

merged 134 commits into from
May 3, 2022

Conversation

nestordedios
Copy link
Collaborator

No description provided.

@nestordedios
Copy link
Collaborator Author

When this changes are released this bobdenotter/configuration-notices#19 has to be released too. They are related

@I-Valchev I-Valchev mentioned this pull request Mar 25, 2022
Merged
@nestordedios
Copy link
Collaborator Author

Hi 👋 !!

This PR is ready to be reviewed and tested.

The main thing this PR does is migrating from Bootstrap v4 to v5. It replaces the Bootbox library and uses Bootstrap modals instead and adds a couple of new translations

Images and Files are no longer selected from a select list but from a modal displaying the different resources. See screencasts below:
File modal: http://g.recordit.co/RExHfrtLKt.gif
Image modal: http://g.recordit.co/Rd7onrcsup.gif

@nestordedios nestordedios marked this pull request as ready for review April 7, 2022 15:25
@nestordedios
Copy link
Collaborator Author

nestordedios commented Apr 13, 2022 •
edited
Loading

As @Joossensei pointed out. The items in the list below need to be fixed before merging in.

  • The navigation tabs on a record dont seem to work
  • As we discussed we need a Delete confirmation modal
  • The compact view button on listing pages doesnt work
  • The bulk select also doesnt work
  • Theres also an issue with the Image and File lists but that seems to be an issue with Cypress. It wont click the ‘Save changes’ button at the bottom of the modal

bobdenotter
bobdenotter approved these changes Apr 14, 2022
View reviewed changes
Copy link
Member

@bobdenotter bobdenotter left a comment

Choose a reason for hiding this comment

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

Great work, @nestordedios and @Joossensei 👍

@Joossensei Joossensei force-pushed the upgrade/bootstrap-v5 branch from 62a2647 to 8bd3be6 Compare April 29, 2022 07:43
nestordedios added 23 commits May 3, 2022 11:00
@nestordedios @bobdenotter
Upgrade to Bootstrap 5 and update PostCSS
c19ccd2
@nestordedios @bobdenotter
Add package-lock.json after updates
1b15a01
@nestordedios @bobdenotter
Function hover() is deprecated, use :hover pseudo class instead
87e2325
@nestordedios @bobdenotter
Add colors variable and use those instead of custom CSS variables
9784c20 
Some Bootstrap mixins do not accept $color variables as custom CSS
variables. The hex value of the color needs to be passed instead
@nestordedios @bobdenotter
Use other default Sass variables for the one no longer existing
e0c31cf
@nestordedios @bobdenotter
Comment out non existing Bootstrap components for now
0d291d0
@nestordedios @bobdenotter
Replace theme-color-level() by mix() in _buttons.scss
da61c4b
@nestordedios @bobdenotter
Keep $alert-bg-level Bootstrap 4 variable
cdd0a54
@nestordedios @bobdenotter
Replace badge-variant() function by the returning value
5746636
@nestordedios @bobdenotter
Use visually-hidden and visually-hidden-focusable functions
9cf1b8d
@nestordedios @bobdenotter
Import Bootstrap utilities generator
e85345e
@nestordedios @bobdenotter
Add text-decoration-none utility class to links
be2ec00 
Bootstrap 5 adds text-decoration: underline to links by default.
This commit removes the underline where we don't need it.
@nestordedios @bobdenotter
Replace data-toggle attribute by data-bs-toggle
9dec219 
Bootstrap 5 dropdown buttons are now triggered using data-bs-toggle="dropdown" attribute
@nestordedios @bobdenotter
Update Cypress tests that interact with dropdown buttons
a16da47
@nestordedios @bobdenotter
Set font-family with $font-family-base Sass variable
b0f9119
@nestordedios @bobdenotter
Update value of $min-contrast-ratio Sass variable
fc3d3e4
@nestordedios @bobdenotter
Add utility class text-decoration-none to remove default Bootstrap 5 …
f502c5e 
…underline
@nestordedios @bobdenotter
Use shift-color function instead of mix
5daaf9f
@nestordedios @bobdenotter
Replace custom-checkbox by form-check as new in Bootstrap 5
4aa52cd
@nestordedios @bobdenotter
Replace ml-* utility classes by ms-*
a9bac2d
@nestordedios @bobdenotter
Replace mr-* utility classes by me-*
9fc3bbb
@nestordedios @bobdenotter
Replace pl-* utility classes by ps-*
194d7c5
@nestordedios @bobdenotter
Replace pr-* utility classes by pe-*
509e8ec
Joossensei and others added 23 commits May 3, 2022 11:01
@Joossensei @bobdenotter
Update edit_record_1_fill_list.spec.js
c7a734a 
Oops
@Joossensei @bobdenotter
Its too fast
b0415d9 
Also revert the phpstan 'fix'
@Joossensei @bobdenotter
Update edit_record_1_fill_list.spec.js
0d5770d 
Class update
@Joossensei @bobdenotter
Updating updating
415133c
@Joossensei @bobdenotter
Fix the links and the phpstan
236e162
@Joossensei @bobdenotter
Update cypress_tests.yaml
08e3bea 
Update db creation maybe it restores the files
@Joossensei @bobdenotter
Lets not remove the server start
6c09b91
@Joossensei @bobdenotter
Update edit_record_1_fill_list.spec.js
3e946f4 
Testing cypress on GH
@Joossensei @bobdenotter
Update File.vue
894312f 
Test Cypress on GH
@Joossensei @bobdenotter
Hope this gives us an insight of what Error 500 means
f68ebcb
@Joossensei @bobdenotter
Update edit_record_1_fill_list.spec.js
c4515e3
@Joossensei @bobdenotter
Fix ESLint
1a4c96c
@Joossensei @bobdenotter
Updates after rebase. Also fixing filelist test
c5b496a
@Joossensei @bobdenotter
Lets see if the Error 500 is gone now
25465d4
@Joossensei @bobdenotter
Update edit_record_1_fill_list.spec.js
7f47ddc 
Trying to fix this one
@Joossensei @bobdenotter
Update edit_record_1_fill_list.spec.js
77bab8d
@Joossensei @bobdenotter
Update edit_record_1_fill_list.spec.js
aad9f5f 
Found it
@nestordedios @bobdenotter
Add dinamic labels for save and close buttons in modals
1a3c451
@Joossensei @bobdenotter
Update tests and labels
5aab658
@Joossensei @bobdenotter
Fix ESLint
4eccced
@Joossensei @bobdenotter
Update modal.js
8e885e9 
Oh there are 4
@Joossensei @bobdenotter
Fixed it
a21559d
@Joossensei @bobdenotter
Update modal.js
9dda14c 
Revert and build a failsafe
@bobdenotter bobdenotter force-pushed the upgrade/bootstrap-v5 branch from e49b23c to 9dda14c Compare May 3, 2022 09:02
@nestordedios nestordedios merged commit 65e4085 into master May 3, 2022
@nestordedios nestordedios deleted the upgrade/bootstrap-v5 branch May 3, 2022 12:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@bobdenotter bobdenotter bobdenotter approved these changes

Assignees
No one assigned
Labels
new feature
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@nestordedios @bobdenotter @Joossensei