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.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Bcwald created an issue. See original summary.

Bcwald’s picture

Bcwald’s picture

FileSize
1.46 KB
Bcwald’s picture

Sorry, ignore that patch, I was working on patches for both this and content_browser and uploaded wrong one.

Bcwald’s picture

Fix alignment, fix css spacing.

Bcwald’s picture

Added XL media query for large screens to better utilize the space.

Bcwald’s picture

samuel.mortenson’s picture

I 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.

Bcwald’s picture

That'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.

samuel.mortenson’s picture

Status: Active » Fixed

I kept the max-width rule but made sure to set height: auto so that the aspect ratio stays intact and committed the change. Thanks!

chr.fritsch’s picture

Status: Fixed » Needs work
FileSize
202.53 KB
63.74 KB

I got an issue with these last commit. See the attached images before.jpg and after.jpg

Bcwald’s picture

chr.fritsch, can you please let me know what your environment looks like? Browser, modules, etc?

  • samuel.mortenson committed b02f775 on 8.x-1.x
    Follow up hotfix for #2701417, make sure view is always using the full...
samuel.mortenson’s picture

@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?

chr.fritsch’s picture

Yes, now it works for me.

samuel.mortenson’s picture

Status: Needs work » Fixed

Marking 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.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.