[BS5] Migrating Web UI to Bootstrap 5

[FreddleSpl0it]

Summary

The list is probably not complete but includes the most important changes.

Motivation

Migrating the WebUI from Bootstrap 3 to Bootstrap 5 to take advantage of new features.

Additional context

I already have opened a draft PR. I would say that once we have worked through the majority of the points, we should merge the draft PR to the bootstrap5 branch and move on to bug fixing and polishing.

Remove Dependencies

• [x] bootswatch 3 theme & bootstrap.min.css
• [x] bootstrap-icons.css
• [x] jquery.min.js
• [x] bootstrap-select.js & bootstrap-select.css
• [x] responsive.css
• [x] footable.min.js & footable.bootstrap.min.css
• [x] bootstrap-tabcollapse.js
• [x] u2f-api.js
• [x] chart.min.css & Chart.min.js + Chartjs-plugin-datalabels.js

Include Dependencies

• [ ] create theme folder with all bootswatch 5 themes (adding theme selector to the ui)
• [x] bootstrap.bundle.min.js (v5.0)
• [x] bootstrap-icons.css (v1.8.1)
• [x] jquery.min.js (v3.6.0)
• [x] bootstrap-select.js & bootstrap-select.css (v1.13.14)
• [x] replace footable with jquery datatables
• [x] chart.min.css & Chart.min.js (v3.7.1)
• [x] Chartjs-plugin-datalabels.js (v3)

JQuery

• [x] change $(window).load(function(){}); to $(window).on('load', function(){});

Bootstrap (Also check JS Files for HTML)

General

• [x] change btn-default to btn-secondary
• [x] change input-group-addon to input-group-text
• [x] change label label-{color} to badge bg-{color} fs-5
• [x] change help-block to text-muted
• [x] change col-{breakpoint}-offset-{size} to offset-{breakpoint}-{size}
• [x] adding <hr /> after </legend>
• [x] change modal dismiss buttons class close to btn-close
• [x] change pull-right to ms-auto
• [x] change text-right to text-end
• [x] change text-right text-xs-left to text-sm-end text-start
• [x] change badge badge-{color} to badge bg-{color}
• [x] change progress-bar-{color} to bg-{color}
• [x] change sr-only to visually-hidden

Panels / Cards

• [x] remove panel-default
• [x] change panel-heading to card-header
• [x] change panel-danger to bg-danger text-white
• [x] change panel to card
• [x] change panel-body to card-body

Dropdowns

• [x] remove <span class="caret"></span> from dropdowns
• [x] add class dropdown-item to dropdown items
• [x] change <li role="separator" class="divider"></li> to <li><hr class="dropdown-divider"></li>
• [x] change dropdown-desc to dropdown-header fs-6

Tabs

• [x] remove responsive-tabs hidden-xs
• [x] adding nav-item to <li> and dropdown-item to child

Navbar

• [x] change navbar-default to navbar-expand-lg navbar-light bg-light
• [x] change navbar-header to navbar-brand
• [x] remove nav from <ul>
• [x] add nav-item to <li> and nav-link [active] to child
• [x] change navbar-right to d-flex

data attributes

• [x] change data-toggle to data-bs-toggle
• [x] change data-target to data-bs-target
• [x] change data-dismiss to data-bs-dismiss

Responsive changes

• [x] visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline to d-block d-sm-inline
• [x] add btn-xs to mailcow.css
• [x] remove elements with clearfix class
• [x] change hidden-xs hidden-sm to d-none d-md-{flex, inline, block}
• [x] change hidden-md hidden-lg hidden-xl to d-block d-md-none
• [x] change hidden-xs to d-none d-sm-{flex, inline, block}
• [x] change visible-xs to d-block d-sm-none
• [x] change space20 to mb-4
• [x] remove col-xs-{size} or change it to col-{size}

Finalizing

• [ ] Bug fixes
• [ ] Ready

[VermiumSifell]

WebUI is on Bootstrap 5 now @DerLinkman