Screenbox icon indicating copy to clipboard operation
Screenbox copied to clipboard

style: refine sticky header on the artist and album detail pages

Open United600 opened this issue 1 year ago • 6 comments

United600 avatar Sep 08 '24 13:09 United600

The artist's name is now deemphasized on the Album details page. Why are we changing the artist name style? We have more vertical space now right? image

huynhsontung avatar Sep 14 '24 06:09 huynhsontung

Notice the header jitter while scrolling.

https://github.com/user-attachments/assets/d26e6235-224b-4600-b717-6f6a0bd7750c

Also you can see the text flowing behind the header at the top edge. This is why I put the Header element on the same level as the ListView, and not as the ListView's Header. The ListView actually terminates before reaching the top edge .

image

huynhsontung avatar Sep 14 '24 06:09 huynhsontung

The new header also breaks keyboard navigation as it hides the focus highlight.

https://github.com/user-attachments/assets/fcc8e339-bac1-4794-b66b-0d35ea74c685

huynhsontung avatar Sep 14 '24 06:09 huynhsontung

The artist's name is now deemphasized on the Album details page. Why are we changing the artist name style? We have more vertical space now right?

Changed to be consistent with the rest of the app headers. If anything now it's more pronounced, it got bumped from 28 to 32 font size.

Notice the header jitter while scrolling.

Yeah sometimes it "bounces", I attempted to use Translation instead of Offset, but the issue still occurs. Do you think the overlap between the content and the header exacerbates this problem? Any tips?

Also you can see the text flowing behind the header at the top edge

Yep, I think it's because of said "bouncing", or maybe scaling related, but I always got that 1 pixel line visibility issue.

The new header also breaks keyboard navigation as it hides the focus highlight.

I tried to minimize this as much as possible (obscures, at maximum, 2 items) but it's the nature of this type of header behavior.

United600 avatar Sep 14 '24 13:09 United600

Changed to be consistent with the rest of the app headers. If anything now it's more pronounced, it got bumped from 28 to 32 font size.

You misread. I said artist name, which I just noticed you changed the font size to body text in the minimal state.

Yep, I think it's because of said "bouncing", or maybe scaling related, but I always got that 1 pixel line visibility issue.

Not really, even when we fix the top 1 pixel, you will still see the ListView behind the top 2 corners due to our corner radius > 1 pixel

I tried to minimize this as much as possible (obscures, at maximum, 2 items) but it's the nature of this type of header behavior.

This is not true. You can see in other parts of the app how ListView behaves when the mini-player is visible.

huynhsontung avatar Sep 14 '24 16:09 huynhsontung

Changed to be consistent with the rest of the app headers. If anything now it's more pronounced, it got bumped from 28 to 32 font size.

You misread. I said artist name, which I just noticed you changed the font size to body text in the minimal state.

Yep, my bad.

I tried to minimize this as much as possible (obscures, at maximum, 2 items) but it's the nature of this type of header behavior.

This is not true. You can see in other parts of the app how ListView behaves when the mini-player is visible.

Right, it introduces a fixed padding. That would be ideal but it can't be "fixed" since it doesn't take into account the possibility of changes to text size.

United600 avatar Sep 14 '24 16:09 United600