feat(splash-page): Column display whith a low amout of items, fixing EU styles - FRONT-4662 #3687
Conversation
… the first - FRONT-4662
planctus
changed the title
…y into FRONT-4662-Splash-page-cols
planctus
changed the title
| @@ -215,7 +218,28 @@ $language-list: null !default; | |||
| } | |||
|
|
|||
| .ecl-splash-page__language-category .ecl-splash-page__language-list { | |||
| column-count: 3; | |||
| display: grid; | |||
There was a problem hiding this comment.
with this change, the order of elements is not the same anymore. I don't know if that will be an issue, but I recall that the order was quite important before (also now it is different between splash page and language list)
There was a problem hiding this comment.
mmh..right, so i reverted the styles for the standard use case of "more than two european languages" and the order is back to what it was before, but this has a small drawback, with css columns, when we have four items, we don't get three columns but two. We could handle also this as a special case, do you think it would be needed..? :)
There was a problem hiding this comment.
The "four items in the first column" case correspond exactly to the screenshot in the ticket, so I assume that it would be quite visible.
My proposal here would be to extend the logic up to 4 items (after that it seems to be fine). Also that would be easier to name the classes based on the number of columns instead of the number of item. For instance we could have ecl-splash-page__language-category--1-col, ecl-splash-page__language-category--2-col and ecl-splash-page__language-category--3-col, and we apply it manually. That way we would reuse the classes for 2 and 4 items.
That's what is done already in the site header language list
There was a problem hiding this comment.
mmh..i can rename the selectors, but the reality is that we are not dealing with the number of columns but really the number of items, ecl-splash-page__language-category--3-col for instance would be confusing, we would use that to force this single use case of 4 items, for the rest three columns would instead be the default layout and there is no other "two columns layout" other than the one we define for two items, so to me it's actually clearer using the current selectors defined.
No description provided.