Video content pages RWD

[KubaMikolajczyk]

Adding RWD to home, popular, new & noteworthy, browse channels is needed.

[KubaMikolajczyk]

Use "control + g" shortcut to see the grid!

Responsiveness made for pages:
Home (following==0) : Home not-following link
Home (following>0) : Home following link
Popular : Popular link
New&Noteworthy : New&noteworthy link
Browse channels : Browse channels link

Additional comments regarding the rules of responsiveness can be found here and it applies to all screens with simmilar components: Home following

[bedeho]

This was really detailed and rigorous, kudos for the being so comprehensive. Obviously the main design change here is to go for a max number of columns and max preview size when the screen gets wide enough. It would be useful to describe why this was chosen, and in particular why this is worth doing compared to what we were doing before?

[KubaMikolajczyk]

Before we used to scale each video tile along with its title, fit them in a grid taking 100% width of the screen, video hero would scale to 100% width even at really large displays.

Now new grid system is adopted for this RWD - video tiles have a step scaling system with larger and smaller copy which improves the way its displayed on the grid, video tile grid takes 100% width of the screen up until the high breakpoint of 2284px where the grid becomes fixed to the middle of the page and the content stops scaling - it prevents really messy displays on large screens, and makes it easier to keep vertical alignment of components just right. Video hero is closed in this container as well so on really large displays its no longer taking 100% width of the whole page.

Why - we have to stop scaling the main content container at some point to preserve the best possible experience for viewers when using Joystream / we evade content overload and many possible layout issues at higher resolutions