GoogleChromeLabs / GoogleChromeLabs/react-shrine

potential UI drawbacks

Open
#16 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
327
Forks
47
PR merge metrics
No merged PRs in 30d

Description

In SaleProducts route, the product list part at the bottom is not looking good in responsive view as the one on Landing page.
![sale-products-route-responsive](https://user-images.githubusercontent.com/49653735/61629210-e8a46e80-ac8c-11e9-857a-feb8ce1c0304.PNG)
If the number of products in a category is less than 3 then the product list part looks cut like this.
![responsive-not-perfect](https://user-images.githubusercontent.com/49653735/61629244-02de4c80-ac8d-11e9-90b9-01385922dce1.PNG)
magnifier part is not responsive.
![magnifier-not-responsive](https://user-images.githubusercontent.com/49653735/61629262-0bcf1e00-ac8d-11e9-8486-3f556efc3058.PNG)
Some avatars' links broken(The cause of this is image file name extension mistake like confusing .png with .jpg.)
![avatar-link](https://user-images.githubusercontent.com/49653735/61629310-25706580-ac8d-11e9-8519-a0d5a0b07e34.PNG)
product summary part disappears between breakpoints from 1200px to 1280px.
![product-summary-disapper(1200-1280)](https://user-images.githubusercontent.com/49653735/61629324-31f4be00-ac8d-11e9-9270-f7d3d5dbcfb5.PNG)

- TODO: handling(minor)
- localIdentName setting in webpack for avoiding css override by mistake and improving component level css.(minor)
- The styling in drawer UI is a bit different from the original, the point is it should look nice, not dead and dumb.(minor)
![dead-color-drawer](https://user-images.githubusercontent.com/49653735/61629444-89932980-ac8d-11e9-82d8-6d9c3dc68229.PNG)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.