implement layout update

[pablodefendini]

Update the UI using the visual styles in this Figma doc.

[michielkoning]

Could we get rid of the overlays and display the videos on a detailpage, with a backbutton? With this design every page will be opened in an overlay mode. I will use the same layout as designed in the Figma document, but change the overlay mode to a more standard navigationmode.

You don't have to change your design, I can make a prototype by code.

@pablodefendini do you agree?

[michielkoning]

I worked on the new list layout only for now. @pablodefendini, what do you think?

https://deploy-preview-18--police-accountability.netlify.app/#/

[michielkoning]

Hmm, i think its too big on mobile. Shall I switch it to the current tiles (image next to the text) for small devices?

[pablodefendini]

Could we get rid of the overlays and display the videos on a detailpage, with a backbutton?

This would be fine. You can use the header from the homepage for all pages. The overlay layouts in the prototype are accounting for full-page display, so the layouts should work well on standalone pages.

Hmm, i think its too big on mobile. Shall I switch it to the current tiles (image next to the text) for small devices?

No, please keep the layout as specified. The intent is for the video thumbnails to be large enough for visitors to quickly identify a video by sight. Let's move on to implementing the rest of the UI, we can circle back to adjust how many columns are displayed at different viewport sizes once the rest of the UI is updated.

[michielkoning]

Ok, thanks for your feedback!

[michielkoning]

@pablodefendini Ready for merge?

[pablodefendini]

the list layout looks good to merge!

[michielkoning]

@pablodefendini can you take a look @ https://deploy-preview-41--police-accountability.netlify.app/ ?

[pablodefendini]

This looks fantastic, @michielkoning — thank you. Looks good to merge from a UI standpoint, imo.

[michielkoning]

Thanks 😄