search

WordPress / wporg-news-2021

The WordPress.org News Theme
https://wordpress.org/news/
31 stars 21 forks source link

Show major version on homepage for beta and RC releases. #429

Closed peterwilsoncc closed 1 month ago

peterwilsoncc commented 1 month ago

What

This modifies the home page of the news section, wordpress.org/news, to display the major version number for beta and release candidates. This changes the text from BetaX and RCX to X.X BetaX and X.X RCX respectively.

No change is made to the sidebar of the release listing.

Before After
Screenshot 2024-10-09 at 9 46 09 AM Screenshot 2024-10-09 at 9 47 11 AM
Screenshot 2024-10-09 at 9 49 26 AM Screenshot 2024-10-09 at 9 49 05 AM

(Please ignore the summary in the second after image, I copied over an old post)

Why

On the news home page, the headline is not specific when it contains only the type of pre-release without the major release version. On the release index the sidebar is fine as is as the major version is included on the right of the screen.

Broken

On the news home page, this introduces horizontal scrolling on narrow-ish displays.

horizontal-scrolling

I tried removing this block of code from the home page but it was still there so I'm leaving it as a project for y'all. The font size may need to be reduced slightly.

I've allowed edits by maintainers, so feel free to push to my branch at will.

https://github.com/WordPress/wporg-news-2021/blob/abc40e16ab22585570282ee4b352e830919affc6/source/wp-content/themes/wporg-news-2021/sass/page/front-page/_latest-release.scss#L96-L111

dd32 commented 1 month ago

I'm way out of my depth on the CSS here, I've muddled through some but it ultimately caused more visual breakage than I fixed. @ryelle I'll have to hand this off to you or @adamwoodnz

ryelle commented 1 month ago

It looks like the overscroll is already an issue, just exacerbated by adding the extra text. It also happens just before the single-column breakpoint (~800px), so just removing the arrow won't work.

Screenshot 2024-10-09 at 10 57 27 AM

In https://github.com/WordPress/wporg-news-2021/pull/429/commits/9b3535e316aeb031d2c24392dc4871b796c2e91b, I've adjusted the font size so the longest text (the "Beta" version) is always within the viewport. I also updated the minimum breakpoint for showing the arrow to 1500px wide. All this also applies to the shorter text too, but I think overall that's okay.

960px 1320px 1500px
beta-1 beta-2 beta-3
rc-1 rc-2 rc-3
point-1 point-2 point-3
peterwilsoncc commented 1 month ago

Thanks for the help, Kelly, it's very much appreciated. I've tested the CSS changes and they work as expected.