Bootstrap 5

[SchrodingersGat]

This PR upgrades bootstrap to v5.1.3

As the original bootstrap integration was kinda hacked-in, this implementation will be a lot more methodical and conformant to the bootstrap "standards".

(Read: Previously I had no idea what I was doing...)

Note: This will most likely be a long-running PR as there will be a lot of changes required...

Closes #2111

TODO

• Navbar
• Search input
• main drop-down menus
• Refactor sidebars (remove dependency)
• Refactor API forms (client side)
• Refactor modal forms (server side)
• Fix dropdown-toggles for menus
• Fix button callbacks (e.g. "cancel" button in forms)
• Fix hover actions for thumbnail images
• Table CSS fixes
• Fix panels
• Refactor "card" display for part table
• Refactor "label" classes (very different in v5)
• Refactor "detail" panel for major screens to be more "bootstrappy"
• Enforce "breadcrumb" view for each page (and standardize)
• Search results page
• Index page
• Settings page
• Refactor "button group" instances - perhaps a html template here?
• Refactor "table filters" UI (see comment below) (will leave for a separate PR)
• Use CSS custom properties to allow for easier theming
• Replace all instances of "data-toggle" with "data-bs-toggle"
• Remove all instances of "action-buttons" class
• Remove all instances of "btn-default"
• Remove all references to "two_column.html" template
• Replace "media" and "media-left" with "card"
• Replace "panel" with "card"
• Replace "label" width "badge" - https://getbootstrap.com/docs/5.0/components/badge/
• Fix action buttons in "part category" and "stock location" display (see comment below)
• Remove all instances of "{% block menubar %}"
• Remove all instances of "enableNavbar" (replace with enableSidebar)
• Remove all instances of "attachNavCallbacks"
• Remove all instances of "sideNav"
• Replace "tree view" for parts and stock
• Refactor all existing "admin" buttons

[matmair]

@SchrodingersGat I tried to do this and esp. bootstrap tables does some wired stuff with bootstrap 5. Also, we probably need js-tree or something similar for the nice trees on the side.

Testing this PR will be a challenge as there is a ton of js-code than ingests strings into the UI. Def something that is needed 👍 .

[SchrodingersGat]

@matmair absolutely this will be a tough one to test. I think it is worth the transition, though!

[SchrodingersGat]

Filter input boxes mess around with btn-group:

[matmair]

that should make the mobile / tablet experience a lot nicer

[SchrodingersGat]

Action buttons are weird, but only in "part category" and "stock location" views:

[SchrodingersGat]

@matmair @eeintech I'm pretty happy with this now, can you guys please pull this down and see if anything obvious stands out? It is a pretty major overhaul of the front-end visuals, so feedback is appreciated!

[matmair]

@matmair @eeintech I'm pretty happy with this now, can you guys please pull this down and see if anything obvious stands out? It is a pretty major overhaul of the front-end visuals, so feedback is appreciated!

Already have done that throughout the process, there seem to be some problems with wrapping on upright iPads - will submit a PR to fix that

[matmair]

Looks really nice by the way. Should we refactor the themes too?

[SchrodingersGat]

there seem to be some problems with wrapping on upright iPads - will submit a PR to fix that

Should we refactor the themes too?

Yes, to both these things. Let's address these with separate PRs.

[matmair]

@SchrodingersGat is it intentional that the treeview for parts and stock locations is not there anymore? I found that feature very handy.

[SchrodingersGat]

@matmair the "tree view" is now implemented in the subcategory and sublocation tables, like so:

You can toggle this view in the top-right of the table:

Does this meet your needs? The dedicated tree views could be added back in but I'd do it a different way now, the old method was very inefficient.

[matmair]

@SchrodingersGat we should document any major UI shifts in the release notes so nobody gets confused

[sintech]

Does this meet your needs? The dedicated tree views could be added back in but I'd do it a different way now, the old method was very inefficient.

@SchrodingersGat, sorry to intrude, but I also find this treeview very helpful for quick navigation. As a suggestion, what do you think about adding a drop-down list with part subcategories near the current breadcrumbs. In this way it will consume only one line of vertical screen space and you still be only one click away from any subcategory.

[SchrodingersGat]

@sintech @matmair happy to add it back in, as it seems it was appreciated.

@sintech can you describe your idea further? Maybe an example diagram?

[matmair]

@SchrodingersGat I am happy with the current solution. Just needed to be pointed to the filter.

[sintech]

@SchrodingersGat, I have created new FR with mockups #2250.