Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Text is hidden in responsive and there is no consistency with date text. #398

Open
Himshekhar07 opened this issue Feb 1, 2023 · 6 comments

Comments

@Himshekhar07
Copy link

Himshekhar07 commented Feb 1, 2023

The date text on this page https://wordpress.org/news/category/events/ is page is not consistent and also hidden in the responsive design.
Additionally, the date should be consistently displayed in the same location on the page, regardless of screen size or the device used to access the page. This helps to ensure that users can easily locate and understand the date information.

I am attaching the video with the solution:
https://share.cleanshot.com/59SWJ673hmkxKHLwBMYj

@KAJALwp
Copy link

KAJALwp commented Feb 1, 2023

Hello @Himshekhar07 ,

Thanks for reporting this issue!

I have checked an issue and also able to reproduce it.

Adding the following CSS will solve this issue:

@media screen and (max-width:768px) { 
     body.category-events .wp-block-post .wp-block-wporg-event-year {
          bottom: 0;
     }
 }

Thanks.

@iandunn
Copy link
Member

iandunn commented Feb 1, 2023

That was an intentional design choice, rather than a layout bug. Here's the mockup:

https://www.figma.com/file/O9I8Jl7kaUMTX39LlRGbGO/News?node-id=4865%3A25211&t=Z6n5kG2xNQJzz71s-4

I can see your point about the location being confusing, though. I think most users would expect the year to act as a sort of header, and appear before the posts that it is connected to, rather than after.

cc @beafialho

@iandunn
Copy link
Member

iandunn commented Feb 1, 2023

#399 discusses the same issue, but with the Releases page.

@jasmussen
Copy link

The cropped text which moves upwards on hover is indeed an intentional design choice, I happen to like it a lot, making the year-separation into a decorative element. I suspect since it’s January, the element becomes extra visible, making it seem like a bigger part of the page than it is most of the year.

If it’s problematic on mobile, we could make the element focusable (tabindex="-1") so that you can tap it to move it upwards like it does on hover on desktop. What do you think?

@ryelle
Copy link
Contributor

ryelle commented Feb 2, 2023

If it’s problematic on mobile, we could make the element focusable (tabindex="-1") so that you can tap it to move it upwards like it does on hover on desktop. What do you think?

Since it is a decorative element, making it focusable could be confusing — clicking it doesn't trigger any action, just a visual change, so for a screen reader user it's not clear.

Maybe on mobile it would be okay to just remove the cutoff style, like the comment above suggests:

Before After
Screenshot 2023-02-02 at 12 12 00 PM Screenshot 2023-02-02 at 12 11 53 PM

@jasmussen
Copy link

In being decorative, I'd honestly rather remove the hover style entirely and keep it cropped and decorative. It is more of an illustration, after all. There's an actual date attached to each post. Potentially could use something like this:

@media (hover: none) {
	...
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants