Feat / Hero and HeroShelf improvements

[royschut]

Description

This PR improves the Hero and HeroShelf and removes Card shadow:

• Fade out the background incrementally based on scroll position. This brings a much smoother scrolling experience.
• Add swiping gesture to HeroShelf for all breakpoints. Previously swiping was only possible for mobile devices, but on tablets or landscape mobile it is needed as well to navigate between slides. I have tried simplifying the code by merging the two implementations, leaving only style differences between mobile and the rest.
• Some minor style updates to HeroShelf: a bit more height on tablet, better support for mobile landscape and respecting the safe-area better (useful for non-web platforms).
• Make the Hero fixed as well, and add the same fade behaviour.
• Remove the Card box-shadow. Since we've re-introduced support for a light background, the card shadow seemed a bit overdone, or out-dated even in some opinions (have a look here: https://vd-ott.com/?app-config=kcm2oevm). We figured that the card shadow could be left out entirely, as it was once introduced mainly because of the blur background, which was removed quite some time ago.

Steps completed:

According to our definition of done, I have completed the following steps:

• Acceptance criteria met
• Unit tests added
• Docs updated (including config and env variables)
• Translations added
• UX tested
• Browsers / platforms tested
• Rebased & ready to merge without conflicts
• Reviewed own code

[github-actions]

Visit the preview URL for this PR (updated for commit ed17096):

https://ottwebapp--pr642-feat-hero-shelf-upda-dw7onm3d.web.app

_{(expires Sat, 14 Dec 2024 13:44:56 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c198f8a3a199ba8747819f7f1e45cf602b777529}

[langemike]

These changes add a lot of value! Swiping works better, indeed. I think we're on the right track, but I noticed some issues that are related to different (smartphone) resolutions.

There are 3 styling-related issues. These weren't there previously.

1. The Hero title can get cut-off on top.

2. The buttons look crammed now (too narrow button container)

3. Also in some specific resolutions, the Start Watching button doesn't show, as can be seen here:
   

And I also noticed 2 issues in the scrolling (fade to transparent) behaviour:

1. It should finish its transition when the hero is out of view. But it happens around the second regular shelf
2. It doesn't fade completely away

These happen on certain resolutions such as 2340x1080 (on my phone). On other resolution, I see it works as intended.

I tested this on the deploy preview.

Video recording showcasing styling issues 1 & 2 and scrolling issues 1 & 2.

phone.mp4

[royschut]

There are 3 styling-related issues. These weren't there previously.

Thanks for the thorough testing @langemike! My last commit fixes the issues you mentioned.
About the scrolling fade: I have updated the end of the scroll/opacity window slightly, but if I change it too much, I find the transition a bit too sudden. You're now previewing on landscape, which is quite a specific viewport, I prefer to focus on more used viewports (without introducing too many variations). I have also removed the transition, as Christiaan suggested, which might help in your experience. How does the latest update feel?
Leaving 0.1 opacity is a choice by the way.

[langemike]

How does the latest update feel?

Better but the video details section does a weird jump now during the slide animation.

Leaving 0.1 opacity is a choice by the way.

Ok. Good to know!

I think the fade out to 0.1 still happens quite late. But I can live with that.

updated video recording:
https://github.com/user-attachments/assets/df89d9a8-8bd5-40a4-86ed-44551699325b

ps. This can also be reproduced in Chrome using "responsive mode" using 2340x1080 or compatible screen size.

[royschut]

I think the fade out to 0.1 still happens quite late. But I can live with that.

It's a compromise on mobile landscape, to bring the best experience on more common viewports (mobile portrait, tablet and desktop). The only alternative I see is introducing more variation for the scroll/fade position, but since it is done from javascript, I prefer to keep it simple. But open to suggestions.