Crocoblock / suggestions

The suggestions for CrocoBlock project
195 stars 78 forks source link

Jet Engine Listing "Column = Auto" #6105

Closed stasonua0 closed 1 year ago

stasonua0 commented 2 years ago

Hello. We have long needed an automatic number of columns of listing cards.

I see it's just:

  1. Put "auto" here https://prnt.sc/DHr4vJsHEFCd
  2. Below we set the minimum (ideally and maximum) width of the listing element.

On CSS Grid it is literally one line "grid-template-columns: repeat(auto-fill, 250px)"

But Flexbox is also pretty simple.

Examples of problems:

  1. We put one column for the phone, and the phone stretches up to 767px by default. As a result, one column on 767px looks terrible and at least a second column is clearly placed there.
  2. We made the width of the layout in the catalog to the full width and put 4 columns. And everything looks great on 1366....1600...., but on 1920 and 2560, 4 columns look terrible and 5-6 columns can fit there.

Of course, the code solves everything within 10-15 minutes, but the presence of such a setting in the listings will solve such problems in 1-2 minutes. The task is very common.

/Оригинал/ Здравствуйте. Давно нуждаемся в автоматическом количестве колонок карточек листинга.

Вижу это просто:

  1. Поставили тут "auto" https://prnt.sc/DHr4vJsHEFCd
  2. Ниже поставили минимальную (в идеале и максимальную) ширину элемента листинга.

На CSS Grid это буквально одна строка "grid-template-columns: repeat(auto-fit, minmax(200px, 300px));"

Но Flexbox тоже довольно просто.

Примеры проблем:

  1. Поставили одну колонку для телефона, а телефон по умолчанию тянется до 767px. В итоге одна колонка на 767px смотрится ужасно и там явно помещается еще как минимум вторая колонка.
  2. Сделали ширину макета в каталоге на всю ширину и поставили 4 колонки. И всё отлично смотрится на 1366....1600...., но на 1920 и 2560, 4 колонки смотрятся ужасно и там поместиться по 5-6 колонок.

Конечно кодом всё решается в течении 10-15 минут, но наличие такой настройки в листингах будет решать такие задачи за 1-2 минуты. Задача очень распространённая.

stasonua0 commented 1 year ago

Now I have found the best option for myself like this:

selector .elementor-widget-container > .jet-listing-grid > .jet-listing-grid__items { justify-content:space-between; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

}

news_list .elementor-widget-container > .jet-listing-grid > .jet-listing-grid__items {

--columns: auto;

}

MjHead commented 1 year ago

Will be added with 3.2.0 update

stasonua0 commented 1 year ago

Thank you!

apatsidis123 commented 1 year ago

That feature is great thank you very much @stasonua0 for suggesting and Crocoblock @MjHead for adding it. The problem here is that this feature can't used correctly with pagination. As the pagination number is static, for example a static pagination number 12 if you want to use static 3 columns with 4 rows. But with Auto columns, the static pagination number doesn't make sense because the list may look finished without that being true. For example with pagination number 10, if your screen size gives you 5 columns using the "auto" feature then you get 2 rows of 5 posts each row with a complete list , great, but if your screen size gives you 4 columns then the 3rd row will have 2 posts, (1st row 4 posts, 2nd row 4 posts, 3rd row 2 posts, total 10 as the pagination number is), and empty space for 2 posts in the end, that looks like the list is finished but actually it is not there are more posts on the next page.

So a solution for that could be to set rows number instead of posts number, in the pagination settings of the query, so for example if you select 3 rows, then will be always 3 rows (with full posts and without empty spaces in the end) regardless the columns number.

best regards

stasonua0 commented 1 year ago

That feature is great thank you very much @stasonua0 for suggesting and Crocoblock @MjHead for adding it. The problem here is that this feature can't used correctly with pagination. As the pagination number is static, for example a static pagination number 12 if you want to use static 3 columns with 4 rows. But with Auto columns, the static pagination number doesn't make sense because the list may look finished without that being true. For example with pagination number 10, if your screen size gives you 5 columns using the "auto" feature then you get 2 rows of 5 posts each row with a complete list , great, but if your screen size gives you 4 columns then the 3rd row will have 2 posts, (1st row 4 posts, 2nd row 4 posts, 3rd row 2 posts, total 10 as the pagination number is), and empty space for 2 posts in the end, that looks like the list is finished but actually it is not there are more posts on the next page.

So a solution for that could be to set rows number instead of posts number, in the pagination settings of the query, so for example if you select 3 rows, then will be always 3 rows (with full posts and without empty spaces in the end) regardless the columns number.

best regards

+1

apatsidis123 commented 3 months ago

Any news about that?