nilsnh commented 2 years ago

Milestone

This PR improves on code layout and module builder styling:

[x] Reorganize code.
[x] Improve button styling.
[x] Improve checkbox styling.
[x] Improve mobile menu, it should cover the whole screen when opened, be scrollable and prevent scrolling of the background document while open.
[ ] ~Make module checkbox styling support Safari. The CSS rules curently used is not supported by Safari.~ I think we can ignore this one for now because the checkbox looks decent on Safari and great on all the other major browsers.

Getting there

I refactored all the web components from being JavaScript files to be HTML files defined in the build.html frontmatter and imported by Hugo in the baseof.html file.
- This simplified how HTML, CSS and JavaScript is written and formatted. And we can use Hugo to format and import resources into the web component code.
I improved the sticky mobile menu so that when opened it does not scroll the whole site in the background.
Furthermore I spent time tweaking how the "scroll-to-module" functionality works so that it mixes well with the sticky top header.
I also added Husky for auto-formatting code using Prettier in a pre-commit hook.
I added code to automatically hide the helper-text button in the license builder if no helper text is available for the given module. This should help us launch quicker, and write helper-text for modules if need be.

I copyed (vendored) the tua-body-scroll-lock library into the static/ folder so that the web components could dynamically import the JS code. It's a bit unorthodox approach but I think it should be okay in this case because the module is small and has no dependencies. We could have opted to use a CDN to import the code but I would rather not depend on external services as a rule of thumb.
I pinned all the JS dependencies which means that we won't be surprised by a malicious patch release. The downside is that we won't automatically receive bug fixes. Not a big issue though I believe for a static site of this kind.