pyobs-archive still uses Bootstrap 4 (bundled locally), Font Awesome, a top-navbar-only layout, and a light theme. Both pyobs-web-admin and pyobs-web-client moved to:
- Bootstrap 5.3.3 (CDN)
- Bootstrap Icons
- Dark theme (
data-bs-theme="dark")
- Sidebar navigation with mobile overlay
- Consistent login page design (centered card,
bi-telescope icon, dark background)
Bring pyobs-archive into alignment with both.
Files to change
templates/base.html
- Bootstrap 4 vendor CSS → Bootstrap 5.3.3 CDN
- Font Awesome → Bootstrap Icons CDN
- Top navbar layout → sidebar layout (copy structure from
pyobs-web-admin/templates/base.html)
- Add
data-bs-theme="dark" to <html>
- Remove custom Alegreya/Roboto font references
- Footer → version string inside sidebar footer area
- jQuery, Popper, Bootstrap 4 JS → Bootstrap 5.3.3 CDN bundle
templates/registration/login.html
- Replace with dark-themed centered card layout matching
pyobs-web-admin/templates/registration/login.html
- Use Bootstrap Icons instead of Font Awesome
- Add proper labels,
autofocus, and autocomplete attributes
pyobs_archive/frontend/templates/archive/index.html
- Update Bootstrap 4 classes to Bootstrap 5 equivalents (
data-toggle → data-bs-toggle, close button markup, col-form-label-sm usage, ml-2 → ms-2, btn-block → w-100, etc.)
- Vendor JS bundle cleanup
pyobs_archive/frontend/static/css/styles.css
- Remove custom font
@font-face blocks
- Remove
.navbar-brand overrides
- Remove
footer styling
- Remove
.loginform absolute-centering
- Remove
#wrap / #main min-height hack
- Keep or adapt any layout rules still needed (
.datetext, .loading, .no-js)
pyobs_archive/frontend/static/
- Remove or orphan:
fonts/Alegreya-*.ttf, css/vendor/fontawesome.min.css, css/vendor/solid.min.css, fonts/fa-solid-900.*
- Remove or check:
js/vendor/popper.min.js (bundled in BS5)
Dependencies to audit
- bootstrap-table: may still require jQuery. Check if a jQuery-free alternative exists for BS5 or whether jQuery should stay for this one dependency.
- daterangepicker: check BS5 compatibility
- vue.min.js: check what it's used for in
app.js and whether it is still needed
pyobs-archive still uses Bootstrap 4 (bundled locally), Font Awesome, a top-navbar-only layout, and a light theme. Both pyobs-web-admin and pyobs-web-client moved to:
data-bs-theme="dark")bi-telescopeicon, dark background)Bring pyobs-archive into alignment with both.
Files to change
templates/base.htmlpyobs-web-admin/templates/base.html)data-bs-theme="dark"to<html>templates/registration/login.htmlpyobs-web-admin/templates/registration/login.htmlautofocus, andautocompleteattributespyobs_archive/frontend/templates/archive/index.htmldata-toggle→data-bs-toggle, close button markup,col-form-label-smusage,ml-2→ms-2,btn-block→w-100, etc.)pyobs_archive/frontend/static/css/styles.css@font-faceblocks.navbar-brandoverridesfooterstyling.loginformabsolute-centering#wrap/#mainmin-height hack.datetext,.loading,.no-js)pyobs_archive/frontend/static/fonts/Alegreya-*.ttf,css/vendor/fontawesome.min.css,css/vendor/solid.min.css,fonts/fa-solid-900.*js/vendor/popper.min.js(bundled in BS5)Dependencies to audit
app.jsand whether it is still needed