Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
UX/design recommendations:
Setting the file items with a manual width can cause unwanted whitespace when the grid breaks to a new row, appearing as if the layout is broken.
I propose we use the percent based layout options provided by masonry and set default common media queries to handle the change of percent columns. This results in the whole screen getting utilized.
In addition, centering the grid helps the layout appearance
Lastly, remove the full-width bottom bar so its the same size as the element (image) used. This helps the page layout flow better.
Comment | File | Size | Author |
---|---|---|---|
#12 | after.png | 63.74 KB | chr.fritsch |
#12 | before.png | 202.53 KB | chr.fritsch |
#6 | reponsive-grid-alignment-2701417-4.patch | 2.95 KB | Bcwald |
Comments
Comment #2
Bcwald CreditAttribution: Bcwald commentedComment #3
Bcwald CreditAttribution: Bcwald commentedComment #4
Bcwald CreditAttribution: Bcwald commentedSorry, ignore that patch, I was working on patches for both this and content_browser and uploaded wrong one.
Comment #5
Bcwald CreditAttribution: Bcwald commentedFix alignment, fix css spacing.
Comment #6
Bcwald CreditAttribution: Bcwald commentedAdded XL media query for large screens to better utilize the space.
Comment #7
Bcwald CreditAttribution: Bcwald commentedComment #8
samuel.mortensonI like increasing the gutter size, but one problem I'm seeing is that images get stretched between breakpoints and lose their aspect ratio. You can see this by slowly decreasing your window size.
Comment #9
Bcwald CreditAttribution: Bcwald commentedThat's due to setting max-width:100% on the images so they respond to the container size, if you remove that, the aspect ratio of the images won't change. I think the full container width is visually better in most cases, but I agree it causes issues. perhaps we can do something with an image style.
Comment #11
samuel.mortensonI kept the max-width rule but made sure to set
height: auto
so that the aspect ratio stays intact and committed the change. Thanks!Comment #12
chr.fritschI got an issue with these last commit. See the attached images before.jpg and after.jpg
Comment #13
Bcwald CreditAttribution: Bcwald commentedchr.fritsch, can you please let me know what your environment looks like? Browser, modules, etc?
Comment #15
samuel.mortenson@chr.fritsch I just published a hotfix - could you try using the newest File Browser dev release and letting me know if things work for you?
Comment #16
chr.fritschYes, now it works for me.
Comment #17
samuel.mortensonMarking as fixed then, sorry for not catching this initially.
@chr.fritsch if you're evaluating this project for Thunder feel free to send me a message (via my contact form) if you have any questions. I also maintain https://www.drupal.org/project/content_browser if that's of any interest to you.