This is a child issue of #3253156: [meta] Remove IE11 Support from Olivero.

We have the opportunity to refactor the responsive CSS styling that Olivero uses to style Views Grid. This new styling will be radically simplified yet more resilient.

CommentFileSizeAuthor
#7 interdiff-2-5.txt2.73 KBmherchel
#7 3255180-5.patch31.87 KBmherchel
#4 Screen Recording 2021-12-20 at 1.39.54 PM.mov34.72 MBgauravvvv
#3 Grid_View___Olivero.png732.48 KBmherchel
#2 3255180.patch31.86 KBmherchel

Comments

mherchel created an issue. See original summary.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Active » Needs review
StatusFileSize
new 3255180.patch31.86 KB

This patch removes SOOO MUCH CRUFTY CODE!!!

The new implementation sets a minimum width (we hard code this to 100px). The columns will span the specified number, but when the browser is resized and the columns get smaller, grid items will automatically reflow when the minimum width is reached. It's automagical and done without media queries!

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new Grid_View___Olivero.png732.48 KB

Tugboat preview: https://3255180-refactor-views-grid-sbdpg6igpnotxckuw6zsh7m2fqz5anx8.tug...

To demo the CSS custom properties, change the --views-grid--column-count in devtools to see how it interacts at various breakpoints. Note that we have the minimum column size hard coded to 100px (so column widths will not go any smaller than that).

gauravvvv’s picture

gauravvvv commented
StatusFileSize
new Screen Recording 2021-12-20 at 1.39.54 PM.mov34.72 MB

I have tested this on live preview
Minimum width of columns is now set to 100px.
In mobile devices below 490px, we can see there are three columns in a row (because of min-width: 100px for columns).
Attached screen-recording for same.
Code changes are looking good & tests are passing.

Can be moved to RTBC.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs review » Reviewed & tested by the community

RTBC per previous comment

mherchel credited andy-blum.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new 3255180-5.patch31.87 KB
new interdiff-2-5.txt2.73 KB

Couple fixes in this patch:

  • Use auto-fill instead of auto-fit. This ensures that a small number of views results will not take up a full row. They will only take up their respective columns.
  • Correct the vertical spacing on the vertical grid. I had a CSS variable typo where I missed a hyphen.

Leaving RTBC per @lauriii. Also crediting @andy-blum who suggested the auto-fill change.

Tugboat URL:

Edit. The patch filenames should have a "7" at the end. I messed up the comment number.

  • lauriii committed 96c04f4 on 10.0.x 
    Issue #3255180 by mherchel, Gauravmahlawat, andy-blum: Olivero: Refactor...
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Fixed

Epic work on this! 👏 This simplifies the code by so much, and also paves a path forward to the Views grid actually being a really powerful tool! I noticed that for example, even the the Media Library in core isn't using Views grids for rendering their grids. I think we should make it a goal to make the Media Library Views use the grid once we have been able to do this change in other core themes 🤑

Committed 96c04f4 and pushed to 10.0.x. Thanks!

Status: Fixed » Closed (fixed)

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