search

mariofix / flask-admin

Simple and extensible administrative interface framework for Flask
BSD 3-Clause "New" or "Revised" License
1 stars 0 forks source link

Bootstrap/Bootswatch 5 Support #2

Open mariofix opened 1 year ago

mariofix commented 1 year ago

Add bs5 support

mariofix commented 1 year ago

Start with bootstrap-icons from cdn Add the required files

macnewbold commented 5 months ago

Hi Mario! Thanks for sharing your branch and letting me poke around and test it out.

I ran into some questions, if that's okay?

  1. in static/admin/css/bootstrap5/admin.css at line 111 it has this section, but I don't understand why. In my testing, the nav bar is 40px high with 8px of padding on top and bottom, so having 120px of padding on the body is really large, more than double the actual size of the navbar, and pushes the content down.

    body {
padding-top: 120px;
}
.navbar .bi {
margin-right: 0.25rem;
font-size: 1rem;
}

  2. I noticed that some of the nav elements have <li ocho> tags, seemingly from templates/bootstrap5/admin/layout.html line 50: <li{% if class_name %} class="{{ class_name }}" {% endif %} ocho>

  3. In the bootstrap4 version, the body included <div class="container-fluid"> around the navbar and all the page content. I noticed now it doesn't in the bootstrap 5 version, so all the things we used in our pages are no longer getting the styles they expected because there's no container. I like your new navbar better (doesn't have white margin on the sides, but goes edge to edge), but the lack of a container is making all the page content go right to the edge instead of having some margin.

  4. In the places where use editable fields on the list view, it looks like some of the js and css being loaded is still from the bootstrap4 collection, and the js errors out with TypeError and null not found problems inside bootstrap4-editable.min.js and the editable fields don't work.

  5. The swatches seem to be working well, but some of them have switched behavior. For example the navbar on bootstrap4 had navbar-dark bg-dark classes, but in bs5 branch it has bg-primary. Perhaps this was intentional, but it can pretty dramatically change the look of the swatch. For example I was testing with sandstone which in the old version was Sandstone v4, and gave a brown/tan bar (second one shown on the page, the bg-dark example). Now on bs5, the new version is Sandstone v5 which is great, but bg-primary is a blue bar where the bg-dark is still a brown/tan bar with bg-dark. Switching the default theme choices within the use of the swatches may give some unexpected effects.

Overall, I really like where the new branch is going. I haven't found other errors or problems yet, and other than noted above, the functionality seems to be preserved. I wouldn't use it on my project just yet, but it seems very close to being ready.

mariofix commented 4 months ago

Wow, thanks for the thorough report, i'll start working on those.