Cover area scaleability design

[bedeho]

Scope

@ Design

• [ ] Define the rules of how images are displayed on diff screen sizes

@ Dev

goes to community dev pipe

• [ ] Implement the designed solution (show diff images for diff screen sizes)

Context

The cover area for both the landing screen and the channels needs to be re-evaluated with a strategy for how to be responsive, and what requirements to have for the imagery. Currently we are doing an ad-hoc approach which mixes things from the design and ideas that have been introduced later.

[kdembler]

Already posted in #169, adding my original issue:

Currently we need to do a lot of breakpoint-based adjustments to the channel cover image and its overlap. It's needed because with a static image it will either take too much vertical space on wide screens or too little on narrow screens. It also needs to have enough space to contain the channel name and avatar. It's worth revisiting with the designers

[KubaMikolajczyk]

This issue is addressed here in My channel cover RWD. After long exploration of possible options we decided on scaling the image while still retaining its original 4:1 ratio. This solution allows us to show all text info on channel cover left there by publisher. RWD for my channel: https://www.figma.com/file/rBjfm2tJ2Pr9M0UNTduU9v/Joystream-Atlas?node-id=7878%3A256880

SIDENOTE

It has to be noted that this is still not an excelent experience due to the fact that on really large scale screens like 3000px wide+ - the background image becomes uncomfortably big. To address this we would have to:

A) Change the aspect ratio of the background image to 5:1 instead 4:1 Pros:

• Slimmer view
• Too big cover breakpoint is shifted issue to around 5000px Cons:
• Can get too small on really small mobile
• Shift in implementation to this model would be tricky as we have all covers now in different aspect ratios There is the link to this solution -> https://www.figma.com/file/rBjfm2tJ2Pr9M0UNTduU9v/Joystream-Atlas?node-id=10080%3A268613

B) Create completely custom breakpoints and different aspect ratios for each view like something like youtube is currently doing 👇 Pros:

• accounts for all screen sizes Cons:
• hardest pattern to implement from all above

In some time when we will have a moment to revisit this topic I would opt for trying using solution B and developing a one size fits all solution.

[dmtrjsg]

Was this implemented?

[bedeho]

I don't think so, but this is super low prio I would say.