Get started with Bootstrap 5 upgrade

[sayravai]

Description

What?

Investigating what's needed for moving A-plus from Bootstrap 3 to 5. This PR is mostly just a work-in-progress-dump of where I got before heading for holidays.

Major changes done/required:

• Glyphicons are no longer supported, so tried using the Bootstrap icon font, currently via CDN. Many of the Glyphicons are not yet mapped to BS icon names.
• The django-bootstrap-form library is BS3 only and apparently dead, so it has been replaced with django-bootstrap5. Haven't had time to play with this yet.
• The All results page uses DataTables (https://datatables.net), which currently uses BS3-based styling, and needs to be updated.
• The All results page is using bootstrap-multiselect jQuery plugin (https://github.com/davidstutz/bootstrap-multiselect), which may or may not work with BS5. An alternative may need to be found/implemented.
• There is a bunch of old css definitions in main.scss just to get the thing compiled. These are mostly related to breakpoints, which need to be carefully re-checked anyway.

The most apparent issues so far:

• Navbar is constructed differently in BS5, and couldn't yet figure out how to implement the kind of mobile menu there is in the current BS3-based version. The mobile menu toggle does not show up at all. Also opening the menus cause the navbar to expand.
• Have not yet figured out why the "sticky-bottom" in bottom navbar does not work (see the Form a group page, screenshot below, for an example). For some reason, margin-top: auto always results in 0px, even though the parent element's height extends to the full page.

Why?

Bootstrap 3 is no longer supported.

How?

You may need to run this script manually if the BS5 assets do not get automatically compiled:
./dev_assets_run_npm.sh bootstrap5 install

Before making changes to scss files, run this to get the css files compiled automatically:
./dev_assets_watch_sass.sh

Fixes #

Testing

Remember to add or update unit tests for new features and changes.

• How to test your changes in A-plus
• How to test accessibility

What type of test did you run?

• Accessibility test using the WAVE extension.
• Django unit tests.
• Selenium tests.
• Other test. (Add a description below)
• Manual testing.

[ADD A DESCRIPTION ABOUT WHAT YOU TESTED MANUALLY]

Did you test the changes in

• Chrome
• Firefox
• This pull request cannot be tested in the browser.

Think of what is affected by these changes and could become broken

Translation

• Did you modify or add new strings in the user interface? (Read about how to create translation)

Programming style

• Did you follow our style guides?
• Did you use Python type hinting in all functions that you added or edited? (type hints for function parameters and return values)

Have you updated the README or other relevant documentation?

• documents inside the doc directory.
• README.md.
• Aplus Manual.
• Other documentation (mention below which documentation).

Is it Done?

• Reviewer has finished the code review
• After the review, the developer has made changes accordingly
• Customer/Teacher has accepted the implementation of the feature

Clean up your git commit history before submitting the pull request!

[sayravai]

I just found out, that migrating is not as straightforward as just migrating the frontend: #584