search

JoshuaBuditama / slowvid

0 stars 2 forks source link

Added UI device mock and additional dependency of styled-component, resolves issue #45 #68

Closed JakeBrown closed 3 years ago

JakeBrown commented 3 years ago

I have used this as a guide: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_device_smartphone

Screenshot of implementation is attached:

Screen Shot 2020-10-09 at 10 34 09 am

I have chosen to include the library styled-components which is a widely used library for including CSS in JS. It supports CSS :before and :after selectors which are not supported by the style prop in React.

JakeBrown commented 3 years ago

Completes issue #45

JakeBrown commented 3 years ago

@cskeogh I've pushed a potential fix. One of several options, this solution sets the content panel to a fixed size and adds auto-hiding scroll bars when there is overflow.

It will still require some changes to the Notification Page, but at least it is a more gradual/graceful failure. It's probably a good thing as it highlights there being too much content for a mobile screen.

Screen Shot 2020-10-10 at 8 44 06 am

If you accept this fix I will create an issue to update the Notification page.

JakeBrown commented 3 years ago

Demo showing interaction

demo 2

JakeBrown commented 3 years ago

@cskeogh merge conflict resolved. Looks like I need your review approval before I can merge.