Skip to content

Migrate Bulma to Bootstrap 5#142

Merged
kaapstorm merged 26 commits intomasterfrom
nh/bootsrap_rb
Feb 10, 2026
Merged

Migrate Bulma to Bootstrap 5#142
kaapstorm merged 26 commits intomasterfrom
nh/bootsrap_rb

Conversation

@kaapstorm
Copy link
Copy Markdown
Contributor

@kaapstorm kaapstorm commented Feb 4, 2026

🦖 SAAS-19179

Now with Bootstrap 5!

image

(This branch is rebased onto master so that it can get merged before the ongoing dashboard work is complete.)

Definitely easier to review by commit 🐡

Comment thread assets/styles/app/layout.sass Outdated
Comment thread templates/account/login.html
Comment thread templates/commcare/commcare_home.html Outdated
Comment thread templates/account/login.html Outdated
<div class="control">
<div class="mb-3">
<label class="form-label">{% trans "Email" %}</label>
<div>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These surrounding <div>s seem like they're probably not be necessary around the form fields anymore.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It appears that they're intended to keep the input fields below their labels.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, that's fair. If there's a way to apply the form-control class to the inputs themselves that would also do this (and apply a little bit of Bootstrap styling), but not sure there's an easy way for inputs rendered as {{ form.field }}

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comment thread templates/exports/edit_multi_project_export.html
Comment thread templates/web/components/footer.html Outdated
Comment thread templates/web/components/messages.html Outdated
Comment thread templates/web/components/top_nav.html Outdated
Comment thread templates/web/components/top_nav.html
Comment thread templates/web/base.html Outdated
@kaapstorm
Copy link
Copy Markdown
Contributor Author

kaapstorm commented Feb 6, 2026

Thank you for the thorough review @nospame ! I think (I hope) we're done with this bit. I'll follow up later with a PR with some refactors and optimizations.

Edit: Oh! Wait! There is a little more clean-up to do. One moment ...

@kaapstorm
Copy link
Copy Markdown
Contributor Author

Okay, I think that's everything. 😅

The template is not pretty. But this approach avoids having to
explicitly add a Select widget, with the "class" attribute set, for
every Form field. It also follows the precedent set with the template
for `<input>`.
@kaapstorm
Copy link
Copy Markdown
Contributor Author

Right. This time I think I'm actually done. There may still be some unnecessary <div>s lurking about, but we can clean those up as we find them. And the choice made in commit Widget template for <select> might be debatable, but I think it's the right one for getting styling out of the backend.

@@ -0,0 +1,33 @@
<select
name="{{ widget.name }}"
class="form-select{% if widget.attrs.class %} {{ widget.attrs.class }}{% endif %}"
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just noting that when using prettier (as added in a different PR) it will tend to compress spaces between template tags, so this class attr would probably come out without any spaces, like this:

"form-select{% if widget.attrs.class %}{{ widget.attrs.class }}{% endif %}"

Spaces before template tags or after are maintained, so this would be untouched:

"form-select {% if widget.attrs.class %}{{ widget.attrs.class }}{% endif %}"

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you!

@kaapstorm kaapstorm merged commit 51dc6a4 into master Feb 10, 2026
2 checks passed
@kaapstorm kaapstorm deleted the nh/bootsrap_rb branch February 10, 2026 20:06
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.

2 participants