Skip to content

Upgrade to Bootstrap 5 #785

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Conversation

agologan
Copy link
Contributor

@agologan agologan commented Mar 29, 2025

Wanted a proper dark mode which landed me at Boostrap 5 so here it is.
Have debated how much of the original looknfeel to keep and it would be 95% in the main screen with

body {
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --bs-body-line-height: 17.15px;
}

But opted out of it for better font support and a bit more space.

Kept changes to minimum (no rem or css variables rewrite) to be easier to review, but it also means dark mode doesn't behave yet.

Major changes:

Dropdowns have changed in Bootstrap 4 so this includes a patch boostrap-contextmenu to fix them, and an upgrade to bassjobsen/Bootstrap-3-Typeahead@fc2d5dc which is Bootstrap 4 compatible.
Was lazy to add dropdown-item to all entries so added initDropdownMenus() to do so.

Connection form probably got the greatest overhaul but tried to at least ensure the original layout.

Next changes

Enable dark-mode fix all misbehaving styles.
LE: A dark mode prototype can be checked here:
agologan/pgweb@bootstrap-5...agologan:pgweb:dark-mode
Goal was again to maintain the light mode theme while enabling dark mode support.
Dark mode could be customized more and vars could be reduced by leaning more into the default theme structure.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant