Frontend Upgrades

[blt950]

Large tasks

• [x] Upgrade to Bootstrap v5.3
• [x] Move over to Vite building
• [x] Upgrade Vue to last version?

Follow up

• [x] FontAwesome font not copying to build folder
• [x] Bootstrap Table and it's previous dependencies from mix config
• [x] Add Training Request Vue not showing ratings
• [x] resources/js/app.js (5:7) "default" is not exported by "node_modules/bootstrap/dist/js/bootstrap.esm.js", imported by "resources/js/app.js".
• [x] Check if tooltips still work. See where we have the data attribute to init correctly
• [x] Make vite dev autorefresh work and not mess up scripts
• [x] Pint the end results and update/cleanup dependecies

Can we use npm packages instead for

• [x] chart.js
• [x] flatpickr
• [x] simplemde

Older

• [x] Hamburgerize the sidebar menu on tablets and phones. Remove the "half-menu" function
• [x] Filter on heading levels should maybe have an icon and be on a dedicated line or in relevant context
• [x] Buttons on heading level should perhaps be on the right with a plus icon
• [x] Buttons on card headers should be named according to function
• [x] Vanillafy all $(document)
• [x] Replace XMLHttpRequest's and $.ajax with Fetch API instead
• [x] Fix not working "shorten expire" button in endorsements
• [x] The delete button in report edit didn't work. Should be rewritten with listners?
• [x] The application flow need more work. A lot of errors here.
• [x] Remove semicolons in blade files (js)?

New bugs?

Position list requires two clicks for some reason? Could it be because I removed this?

$('.flatpickr-input:visible').on('focus', function () {
     $(this).blur();
});
$('.flatpickr-input:visible').prop('readonly', false);

[blt950]

Started on the Bootstrap migration, mostly tweaks left:

• [x] Fix menu and accordion interactions with Vanilla JS
• [x] Replace form-group with new grid system
• [x] Make sure all labels have a form-label class
• [x] Tweak table paddings and text styling
• [x] Fix popperjs when Vite is installed, doesn't work in Webpack

[blt950]

Always finding some more things to fix

• [x] Change search in app.blade to Vanilla JS
• [x] Dropdown menus open outside of screen (on tablet, but not mobile?)
• [x] Cleanup navs/*.scss files in general
• [x] Tidy up the layout blade files and convert comments to blade

[blt950]

Finished with some points over, so here's more

• [x] Move things over to rem instead of px in .scss files
• [x] Fix spinners and search results bugging
• [x] Cleanup the search code, it could be less messy

[thor]

Are there any parts of this issue you'd like to split into smaller issues? Alternatively, are there frontend maintenance tasks that aren't part of this umbrella task? 👀