Move Blog Year Buttons to Grid Layout

[mike-weiner]

Description

Fixes: #16012

This PR:

• Moves the year buttons on https://istio.io/latest/blog/ to a flex layout that allows for wrapping.
• Remove the overflow support and instead use an @media query to adjust button sizing.
• Reduces the spacing between the year buttons.
• Change the cursor to the hover cursor type when a person hovers on the year buttons.

Reviewers

• Ambient
• Docs
• Installation
• Networking
• Performance and Scalability
• Extensions and Telemetry
• Security
• Test and Release
• User Experience
• Developer Infrastructure
• Localization/Translation

[craigbox]

thanks for taking this on! I'm a bit worried about the article so far below the fold on mobile, given there are so many buttons. Might it be better to think of some kind of drop-down for that situation

[mike-weiner]

thanks for taking this on! I'm a bit worried about the article so far below the fold on mobile, given there are so many buttons. Might it be better to think of some kind of drop-down for that situation

@craigbox - Yea... I didn't love that.

A dropdown is one idea. I could also work to make the buttons a bit smaller on mobile, something like this:

[craigbox]

That's better, thanks.
tbh I doubt people regularly want to filter by year. Regular pagination is probably plenty.

[Arhell]

https://deploy-preview-16022--preliminary-istio.netlify.app/latest/news/

[mike-weiner]

I'm really liking how https://deploy-preview-16022--preliminary-istio.netlify.app/latest/blog/ looks and adapts to smaller screen sizes now.

I'm less of a fan of how https://deploy-preview-16022--preliminary-istio.netlify.app/latest/news/ looks and adapts to smaller screen sizes.

Thoughts?

Edit: I'm thinking the dropdown idea is going to be a better solution. I'm going to explore that.

Edit 2: I've found a solution that I'm happy with. Seems to work well on both https://deploy-preview-16022--preliminary-istio.netlify.app/latest/blog/ and https://deploy-preview-16022--preliminary-istio.netlify.app/latest/news/

[craigbox]

I tried your first version and I think there was space between the pills; I would often end up zooming into the page when I was trying to tap a year. The second version actually fixes that, which is great!

Nits, all of which probably predate your change:

• will this look weird when we add one more pill?

• the pills aren't the same size

(seems to work OK if you set a min-width of 5rem - also applied the margin fix from below)

• the margin only being on the right of each pill means they don't line up visually

(seems to work OK if you change margin-right: 1rem to margin-left: 0.5rem; margin-right: 0.5rem)

[mike-weiner]

@craigbox -

Yep, good call on the margin. I've fixed that and the buttons being unequal sizes in 8e191f1.

will this look weird when we add one more pill?

Here is what the Blog page will look like when we get to next year and add a 2025 button :) I'm trying to get away from CSS that sets a fixed height and width in pixels... since that works until it doesn't....

I think these all look pretty decent.

[istio-testing]

In response to a cherrypick label: new pull request created: #16026