A better UI ?

Currently, the ZIMs created by the scraper has very basic UI which seems to be mobile device friendly. However, it doesn't seem to take advantage of all the screen real estate available to it. Also, since we now support topics scraping and are on the way to support playlists scraping, I think it'd be good to display some info about the topic/playlist. I like the way we currently arrange videos as a grid. Also, if we take a look at any playlist on ted.com/playlists, it has got a pretty nice UI. What I want to propose is to have a UI that displays info like the playlists UI but also keeps the grid arrangement that we currently do. I have made some mockups on the possible ways we can go with. @kelson42 @dattaz @rgaudin what do you think about this?

For the mobile devices, we can rearrange the blocks from top to bottom instead of from left to right on the video page.

No files, tests, or entry points are named. Review the existing ZIM UI and the linked mockups, then compare the current video grid with the TED playlists layout and the topic/playlist information needs. Done means agreeing on a concrete design and implementing the responsive desktop and mobile UI.