Migration from Bootstrap 2 to Bootstrap 5 - List changes

[mdouchin]

This ticket aims to list all the changes to make in HTML code (in LWC source code but also in user-defined HTML, for example for popups with QGIS tooltips)

First migration made in this PR : #4455

We need to fix the issues as we spot them, and should also have a look to the external modules, external JavaScript scripts, etc.

Tables

• condensed table : replace <table> class table-condensed by table-sm

Buttons

• smaller buttons: replace <button> class btn-small by btn-sm
• really smaller buttons: class btn-mini does not exists anymore ! See https://getbootstrap.com/docs/5.3/components/buttons/#sizes We could have kept btn-mini class in the code and add a Lizmap CSS variable --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;" (values not tested)

Tabs

Doc:

• Tabs: https://getbootstrap.com/docs/5.3/components/navs-tabs/#tabs
• Pills: https://getbootstrap.com/docs/5.3/components/navs-tabs/#pills
• PR in Lizmap server update html tooltip to handle bootstrap 5 tabs qgis-lizmap-server-plugin#87

Modal

• Example on the demo repository Migrate _download.js to use Bootstrap5 modals lizmap-web-client-demo#14

Popups and dataviz

• To be explained please Update popup/dataviz template to handle Bootstrap 5 tabs lizmap-plugin#592

Forms

They seem really broken at present in master

[mdouchin]

cc @nboisteault @rldhont @Gustry @nworr @mind84

[ygorigor]

Also progress is not showing (is not animated) when loading dataviz plot