WEB: Fix maintainers grid not displaying correctly (GH41438)

[calvh]

• closes WEB: Format broken in team page (maintainers grid) #41438
• Ensure all linting tests pass, see here for how to run them

Screenshot taken on Google Chrome 90.0.4430.93

To reproduce,

• go to https://pandas.pydata.org/about/team.html
• open developer tools
• go to elements tab
• navigate to
• edit as HTML
• delete
  and the closing tag at the end

[attack68]

have you tried instead:

    <div class="card-group maintainers">
        {% for person in maintainers.people %}
                <div class="card">
                ...
                </div>
        {% endfor %}
    </div>

seems to cut out maybe a lot of unnecessary batch grouping?

[calvh]

Thanks! I tried it but I ended up with very small cards. See:

I can use CSS to set min-width:10rem;. See:

Would this be preferable?

Edit: What is the recommended way to edit PRs?

[MarcoGorelli]

Edit: What is the recommended way to edit PRs?

If I've understood the question correctly: by just adding a new commit (they'll all get merged at the end anyway)

[calvh]

Edit: What is the recommended way to edit PRs?

If I've understood the question correctly: by just adding a new commit (they'll all get merged at the end anyway)

Thanks. I was wondering if I should amend my local commit and force push but I don't know how it'll affect this PR (or if I should make a new PR). Or do something like squashing commits.

[calvh]

After further testing, setting min-width alone doesn't work either because if you set the screen size wide enough the last row (Patrick) ends up takes up the whole row . I'll tinker further to see if I can come up with a solution.

[datapythonista]

Thanks @calvh

This should be what we want: https://bootstrapcreative.com/pattern/responsive-card-deck-example/

The CI should be now fix if you merge master into your branch.

[calvh]

I've come up with a solution that keeps the structure as:

<div class="card-group maintainers">
  <div class="card">
  <div class="card">
  ...

by adding the following CSS:

@media (min-width: 576px) {
    div.card {
        min-width: 10rem;
        max-width: 10rem;
    }
}

See:

If I want to avoid changing the CSS and use classes like in the example given by @datapythonista I could use something like:

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5">
  <div class="col mb-1">
  <div class="card"
  ...

but that requires a higher version of bootstrap (e.g., 4.6). Current version is 4.0.

Should I update bootstrap and follow the example?

[datapythonista]

If you want to upgrade bootstrap, that surely sounds good. But let's have a separate PR for the upgrade, and another one for this fix. Up to you.

[calvh]

I think upgrading Bootstrap is a good idea. They just dropped a stable version (5.0) and it will open up new features for future developers to improve the website. In addition, v5 no longer uses jQuery so one less dependency is better in my opinion. I will do some testing on my local machine.

Edit: should I be creating a new issue?

[datapythonista]

Yes, a new issue can help give it more visibility, in case anyone else has opinions.

[datapythonista]

Just one thing that can be simplified. But if this is the code used for the animation you shared, looks really great.

[datapythonista]

If I'm not wrong, this was the if used to discriminate the maintainers from the empty loop iterations generated by Jinja's batch, so not needed anymore. All the maintainers are people now ;)

[calvh]

Good catch, thanks. My bad. I'll make the change on the inside as well.

[datapythonista]

Thanks @calvh, looks great!

[attack68]

I think there are many ways you could do this, and this looks good to me as is.

Subjectively, each card is small enough to fit on even a small smartphone display, so personally I would code all the cards to be same size regardless of display device and design each card so that text wrapping etc, was good looking, and then just use the flex-wrap to align everything (as you already have done), which for a smartphone might be 1 or two cards per row, for a tablet 4 or 5, and for a large display display 6 - 10. I'd use the flex-box justify-content so that for a single row it aligns to the center. But, still can do any of these as a follow on (or not) and its good enough for me!

[calvh]

@datapythonista Please remove approval for now there is a conflict with the community/blog page because it also uses the div.card style. I'll try to fix this asap

Edit: sorry the inconvenience. I should have checked all pages.

[datapythonista]

Thanks @calvh, let me know when it's ready

[jreback]

@datapythonista pls merge when ready

[calvh]

Just pushed. I fixed it by adding additional selectors to the new rule so it only applies to the team page and not the blog page.

Edit: sorry again @datapythonista I hope its not too much trouble.

[datapythonista]

Thanks for the fix @calvh, and for double checking the websie. Looks good. Feel free to ping me once the CI is green and I'll merge.

[datapythonista]

Thanks for the fix @calvh. If you want to have a look at the production website in couple of hours (after it's updated), and see if everything looks as expected, that would be great.

[calvh]

Your welcome I am happy to do so later. Thanks for the support!

[datapythonista]

Looks like the grid if now displayed correctly, and Patrick's card is shown as the others. The rest of the website looks as before. Thanks for the fix @calvh