Restyle floatingRefreshSection

[pkrasicki]

Guidelines

• I have searched the issue tracker for open and closed issues that are similar to the feature request I want to file, without success.
• I have searched the documentation for information that matches the description of the feature request I want to file, without success.
• This issue contains only one feature request.

Problem Description

The floating refresh section in FreeTube 0.23 (modified in #4380) obscures some of the content while scrolling.

Proposed Solution

Remove most of the background and reposition the text, so that it obscures less content.

refresh-section.webm

Alternatives Considered

None.

Issue Labels

visual improvement

Additional Information

CSS code (needs testing on mobile):

.floatingRefreshSection
{
	background-color: transparent;
	box-shadow: none;
	border-inline-start: none;

	.lastRefreshTimestamp
	{
		background-color: var(--card-bg-color);
		position: relative;
		top: -12px;
	}
}

[pkrasicki]

I forgot that unlike my design FreeTube has different background color for the card and for the page background, so this change won't look as good as on my screenshots. But maybe it's still worth trying?

Edit:
Here is what it would actually look like in FreeTube. I think it looks good:

[efb4f5ff-1298-471a-8973-3d47447115dc]

Converted this to a general discussion as this is more a subjective topic than a feature like with allot of UI topics

[efb4f5ff-1298-471a-8973-3d47447115dc]

I tested allot of screen sizes and i dont see the refresh button obscuring content. Could you maybe provide a screencap of it?

[pkrasicki]

@efb4f5ff-1298-471a-8973-3d47447115dc It's not the about the button, it's the whole bar. Your video shows this perfectly (just ignore the bug that it was showing): #4380 (comment).

The bar is not transparent, so it obscures the thumbnails and other content while scrolling. To fix that, I made it transparent and moved the text a bit.

[efb4f5ff-1298-471a-8973-3d47447115dc]

Ah ok, so i thought this over a little bit but i fail to see why this restyling is needed. It doesnt obscure content imo + the bar has a clear purpose.

The top bar here for example does exactly the same thing. It isnt jarring and in the way or something like that. Would like to hear from others but to me this feels like a non issue

firefox_1GjvZnFrv7.mp4

[pkrasicki]

It doesnt obscure content imo + the bar has a clear purpose.

What purpose does it have? We are displaying a short string of text and a button. Do those things need to take up so much space? Actually, do they even need to float at all? Pressing the refresh button will cause your scroll position to reset, so what's the point of it following you as you scroll? The floating text seems more useful to me, but subscriptions page doesn't refresh automatically, so do I really need to see this information at all times? Do other video apps do this?

The top bar here for example does exactly the same thing. It isnt jarring and in the way or something like that. Would like to hear from others but to me this feels like a non issue

Any floating bar takes up precious space from what you actually want to see - the content. So I think it's best to avoid it if possible. Does it make sense on GitHub? I don't know, it certainly provides context telling you what conversation you're looking at, so that you don't forget. That might be useful, but GitHub is probably not a good UI reference in general. Are there any video apps that do this? I'm not sure, because I don't have an account on any of them to look at a list of subscriptions. So if anyone could check and provide screenshots for reference, that would be very helpful.

But don't forget that FreeTube already has one such floating bar - the nav bar with search and buttons (which is useful). This section is another bar in addition to that.

[pkrasicki]

Alternative proposal without floating:

The button's background color can be brighter if you want. I think it should be subtle, but maybe I made it too subtle.