Changed masonry grid to flex grid #538
Conversation
src/components/SearchGridCell.vue
Outdated
| @@ -1,10 +1,14 @@ | |||
| <template> | |||
| <div> | |||
| <div class="search-grid_item-container" | |||
| :style="`width: ${containerAspect * 165}px; | |||
There was a problem hiding this comment.
Could you move this 165 value to a constant, with an appropriate name please?
There was a problem hiding this comment.
Updated to a data value that's calculated with min row width / max aspect, so min img container width will not exceed min row width.
There was a problem hiding this comment.
Also the provider logo aspect ratio seems to be a problem with the original css? it has a 40 to 30 max dimension even though the logo is a square. Changing the dimension limit to 30 by 30 seems to solve the problem.
|
As far as I can see, this looks good. I filed a bug on the API repo https://github.com/creativecommons/cccatalog-api/issues/397 and will wait for the feedback there. I'll keep this PR open in the meantime so we can try it once the problem is fixed |
|
I was thinking about this over the weekend while trying to turn this grid into a generic component. I added a get dimension function in case the image.width /.height props are not set. This should work as long as the thumbnail renders. |
Fixes #489
[Short description explaining the high-level reason for the pull request]
Dropped masonry grid and changed the image grid to pure css flexbox sizing grid. Based on this blog post: xieranmaya/blog#6
Added aspect ratio restrictions to maintain thumbnail readability, maximum of 16:9 and minimum of 3:4. Thumbnails will be centered and crop if it exceeds aspect ratios. Panaromas(> 21:9) will use its original image as thumbnails instead of highly compressed thumbnails.
[If this Pull Request contains any UI changes, provide an image or GIF displaying the changes]
https://drive.google.com/file/d/1t1aHJxxydBjgCiVFkl1jswWjeiPHCV6V/view?usp=sharing
https://drive.google.com/file/d/1c8n5B5g1jEnArOZx7-gmrqwvByv3Tz6z/view?usp=sharing
Developer Certificate of Origin Version 1.1
Copyright (C) 2004, 2006 The Linux Foundation and its contributors. 1 Letterman Drive Suite D4700 San Francisco, CA, 94129
Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed.
Developer's Certificate of Origin 1.1
By making a contribution to this project, I certify that:
(a) The contribution was created in whole or in part by me and I have the right to submit it under the open source license indicated in the file; or
(b) The contribution is based upon previous work that, to the best of my knowledge, is covered under an appropriate open source license and I have the right under that license to submit that work with modifications, whether created in whole or in part by me, under the same open source license (unless I am permitted to submit under a different license), as indicated in the file; or
(c) The contribution was provided directly to me by some other person who certified (a), (b) or (c) and I have not modified it.
(d) I understand and agree that this project and the contribution are public and that a record of the contribution (including all personal information I submit with it, including my sign-off) is maintained indefinitely and may be redistributed consistent with this project or the open source license(s) involved.