Bootstrap v5

[smithdc1]

Fixes #7327

This is a WIP patch to upgrade the templates to Bootstrap v5. I've tried to chunk the commits up to help review, this will change as this will quite a number of files and lines of code.

I feel like I've made good progress so far. Only major issue I've found so far is tooltips on the dropdown button. The solution on bootstrap 4 (which I've used here) no longer works on bootstrap 5. Another alpha release is due of bootstrap 5 shortly, if it is not fixed in that I can try approaching the issue tracker.

To do (there is much more than this, but here are things I've changed but need to go back and look at):

• [ ] Fix tooltip on split dropdown button
• [x] Change the js file to the bundled version (can then drop link to popper.js)

[carltongibson]

Hi @smithdc1. Thanks for this! Super start.

[smithdc1]

Thanks 😄

It's coming along well, currently wrangling with the collapse menu in the docs.

Got my eye on the upcoming releases, seems like they made good progress on alpha 2 in the last few days. I can already see some breaking changes in the next release but they should be incremental changes to the current changes. (e.g. rename of sr-only)

[smithdc1]

So I'm fairly pleased with where I've got this to. It's a bit of a waiting game now to see the new releases come out and see if there are any more breaking changes, and to see if the drop-down tool-tip gets fixed. Can also review the remaining css in bootstrap-tweaks and default to see if any further rationalisation can take place here.

One question I do have is for the filter form. The filter form looks a bit odd, it looks like a template from django-filter, what's going on here? (I think I know where this is headed... 😄 )

[carltongibson]

One question I do have is for the filter form. The filter form looks a bit odd, it looks like a template from django-filter, what's going on here? (I think I know where this is headed... 😄 )

Chuckle. 😀

Erm... the form is generated by django-filter but is it rendered with crispy forms? (A while since I looked in here...) If you throw up a few links to exact places I'm sure I can get the relevant grey-cells lined up again. 😝

[smithdc1]

Ok - let's leave it some time and I'll dig deeper at some point in the coming months. There is going to be plenty of time before Bootstrap 5 reaches a stable release.

There may be a crispy-bootstrap-5 template pack by then (template work is done, I need to find the effort to put it into a package, write docs, setup c/i etc)

[smithdc1]

Note (to self really).

#30170 on bootstrap 5 changes feedback messages. Html layout and CSS classes will need to be changed.

Currently this ticket is on the inbox for v5 alpha 2.

[joshjung]

Looking forward to this!

[smithdc1]

Looking forward to this!

Thanks -- It's coming but bootstrap 5 development itself is steadily paced. For your need I'm not sure I have a good answer, maybe you could have your own fork with this work, noting it is un-reviewed (but if you're in the market to have a look 😉 ) I'm not sure an alpha version is better than an old one from a security perspective 🤷 .

[smithdc1]

Bootstrap5 beta 1 is now out. I'll be looking to test my memory by revisiting this soon :tm:.

[smithdc1]

Hi all,

So I think this is ready for review. I've left the commit history to show how I achieved this in smaller steps, but I'm not sure if they could be better presented to make the review easier. I am not used to writing such big patches, I also apologise for the size, but I'm not sure there is much I can do. Any guidance would be appreciated.

I'm not sure anyone here is going to have the capacity to review this any time soon (is any one else finding 2021 harder than 2020?). I was wondering if it could be worth trying to widen the net of potential reviewers of this with a post on Twitter? I fully expect this to be far from perfect and even if it's a partial review here and there it would get us closer to the finish line. (I'm very unsure, but I am trying to think of ways of making progress in a sustainable way).

[jscaux]

@smithdc1 big thumbs up on this, I'm very keen on using BS5 in DRF. Hopefully this will get reviewed and merged soon. You're doing just great with 2021.

[carltongibson]

@jscaux if you were to install this locally and look for issues, that would be a helpful step. 👍

[jscaux]

@carltongibson will do; currently busy with moving a separate big stack to BS5. Since DRF is part of the backend, it's a road I have to go down anyway.

[jscaux]

@carltongibson I've managed to install this locally and run a very basic setup without issues. The bootstrap version could be bumped up to 5.0.1.

[carltongibson]

Ok, thanks for the feedback @jscaux. Let us know if you hit other issues.

[auvipy]

bootstrap 5.1.x released recently.

[lucasdavid]

Has this been abandoned? DRF could really improve with bs5 :(

[tomchristie]

Okay, so I've been reviewing this. I've made one fix to the templates. Also I think it's worth comparing the two versions here...

Existing Browsable API

Updated Browsable API

---

Existing Admin Renderer

Updated Admin Renderer

Personally I'm finding the styling changes a bit jarring here, but perhaps that's because I'm used to the existing versions?

It'd be nice to update, and this is a fantastic bit of work getting us there, but it's a shame that the style looks a bit off to me after the update.

Any thoughts, folks?

[lucasdavid]

Maybe it looks a bit off because the new buttons are a little lighter and brighter, while DRF's components (e.g. navbar) are darker and opaque. I always though there was quite a change in tone from bootstrap v3 to v5.

[tomchristie]

So I think the obvious things that need fixing are...

• The button sizes after this change are significantly bigger, and they don't fit the layout so well.
• The changed + and x icons for the create/delete buttons are just a bit blergh.
• The brighter palette perhaps doesn't suit the rest of the interface style quite as well, but I don't think that's a massive problem.

[lucasdavid]

Breadcrumbs are quite different too. Was that intentional? I think .bg-light .rounded classes could be added here.

[ghost]

I left a comment

I think anywhere there is .sr-only that has to be removed and the v5 class used.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[auvipy]

as this is staled, should we try a smaller incremental version with bootstrap v4 instead?

[baseplate-admin]

as this is staled, should we try a smaller incremental version with bootstrap v4 instead?

or maybe we should have our own CSS like django-admin 👀

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[auvipy]

we can revamp it with newer https://blog.getbootstrap.com/2023/05/30/bootstrap-5-3-0/ which has new colors and many improvements.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[baseplate-admin]

Hi, can this be rebased?

[luanfonceca]

Hi, @smithdc1

I want to help you finish this PR. I have extensive experience with Django templates and Bootstrap 5 (I just did a similar migration on a client from v3 to v5.3).

I plan to pull your branch, update this to Bootstrap v5.3, and keep going page by page, ensuring everything works seamlessly. In the best scenario, we would do this incrementally, keeping the existing Bootstrap v3 stylesheets, js, and jQuery in use while we're updating each piece, but as this is an open-source library, I don't think we could do this.

Are you available for a quick async talk on the IRC channel, or do you prefer to discuss the next steps here?