Weblate: Switch to Bootstrap 5

[guoyunhe]

Is your feature request related to a problem? Please describe.
We have a Weblate instance at https://l10n.opensuse.org/ and its UI is based on Bootstrap 3.x. However, other openSUSE project websites are using a theme based on Bootstrap 4.x. If we deploy Bootstrap 4.x, there will be incompatible components/styles that may break the UI functionality.

Describe the solution you'd like
I hope Weblate can support Bootstrap 4.x.

Describe alternatives you've considered

Additional context

[nijel]

This has been already discussed in https://github.com/WeblateOrg/weblate/issues/1935, the biggest problem with Boostrap 4 is lack of RTL support. There were some third party mods which none of these looked complete, but I didn't investigate that for some time.

Even if that is handled, there is non trivial amount of work to migrate the UI between 3.x and 4.x.

[guoyunhe]

Yes, here are a lot of class names changed. You have to check every component carefully. If one day you decide to open a bootstrap4 branch, I can help with the migration.

[nijel]

First we need working RTL support, then we can consider a migration. Making RTL work properly with Bootstrap 3 was painful as well, but we already have that running.

[Bachstelze]

Bootstrap 4.4 is going to be a LTS release and could then support RTL.

[nijel]

There is also https://github.com/twbs/bootstrap/issues/28797 and https://github.com/twbs/bootstrap/issues/24807, but none really seems to be going anywhere close to having RTL supported.

[Ahoba02]

I have created a tool to solve the issue.
Please visit
http://wahamira.net/tools/get-bootstrap-rtl

The tool modifies the content of the original bootstrap
so that all -left will be changed to -right and -right to -left for only attributes which their class names do not contain -left and -right.

For example:
- border-left will be changed to border-right if its class name does not contain -left or -right
- .text-right will not be changed as it is a class name.
- .rounded-left{border-left:1} both class name and attribute will not be affected because class name contain -left

Kindly give me your feedback.

[Ahoba02]

Did you check
http://wahamira.net/tools/get-bootstrap-rtl

[nijel]

Boostrap 5 should have native RTL support (see https://github.com/twbs/bootstrap/pull/30980), then it makes more sense to switch to that (once it is released).

[Bachstelze]

The beta version of Bootstrap 5 is released. While keeping jQuery as extra dependency most of our plugins should still work. Which changes will we have to figure out?

[nijel]

As Bootstrap 4 entirely changed the layout system (see https://getbootstrap.com/docs/4.6/migration/), all pages will have to be reviewed whether they still work correctly. The 5 renamed many of the helper classes, see https://getbootstrap.com/docs/5.0/migration/

[Bachstelze]

The migration looks like a lot of handwriting which we could reduce with some automatation like https://gist.github.com/landsman/526d88db01cf5ec50fad257fe2d44574
Should we start now a new fork or are there conflicts with e.g. https://github.com/WeblateOrg/weblate/issues/3063 https://github.com/WeblateOrg/weblate/issues/3558 ?