Сообщений в теме: 10

[belwww]

Доброго времени суток!
Подскажите, как можно сделать, чтобы при полном экране (например, на лептопе) категории отображались в 4 столбца, чуть сжимаем окно - перестраивается в 3 ряда, ещё - в 2 ряда... и до 1 ряда?

т.е. чтобы это всё подстраивалось в определенный момент (смены размера/разрешения) экрана или окна браузера.

[DMTR3000S]

belwww, какой шаблон вы используете: catalog, bootstrap или uikit? В bootstrap и uikit, насколько я знаю, уже предусмотрен такой функционал "из коробки" 

[belwww]

belwww, какой шаблон вы используете: catalog, bootstrap или uikit? В bootstrap и uikit, насколько я знаю, уже предусмотрен такой функционал "из коробки" 

Использую uikit. Нет такого функционала "из коробки". Столбцы просто сжимаются по ширине до определенного момента, а потом просто перестраиваются в один столбец.
Мне же нужно, чтобы столбцы от 4 до 1 перестраивались постепенно, в зависимости от разрешения монитора или окна браузера.

[DMTR3000S]

Использую uikit

Ну так в чём проблема - используйте его мощности. Открываете файл _default.php, который лежит по адресу:

/media/zoo/applications/jbuniversal/templates/uikit/renderer/subcategory_columns/

находите там массив classes со стилями, которые присваиваются в цикле каждому диву и пихаете в него дополнительные стили.

Например, у меня по дефолту с 35 строки вот так:

$classes = array(
                'subcategory-column',
                'uk-width-medium-1-' . $vars['cols_num']
            );

и я добавляю свой класс (в данном случае - uk-width-small-1-2) вот так:

$classes = array(
                'subcategory-column',
                'uk-width-small-1-2',
                'uk-width-medium-1-' . $vars['cols_num']
            );

Узнать, какие классы для какого разрешения экрана использовать можно на странице официальной документации uikit

[belwww]

 

Ну так в чём проблема - используйте его мощности. Открываете файл _default.php, который лежит по адресу:

/media/zoo/applications/jbuniversal/templates/uikit/renderer/subcategory_columns/

находите там массив classes со стилями, которые присваиваются в цикле каждому диву и пихаете в него дополнительные стили.

Например, у меня по дефолту с 35 строки вот так:

$classes = array(
                'subcategory-column',
                'uk-width-medium-1-' . $vars['cols_num']
            );

и я добавляю свой класс (в данном случае - uk-width-small-1-2) вот так:

$classes = array(
                'subcategory-column',
                'uk-width-small-1-2',
                'uk-width-medium-1-' . $vars['cols_num']
            );

Узнать, какие классы для какого разрешения экрана использовать можно на странице официальной документации uikit

 

В этом случае, колонки должны быть кратными. Т.е. если у меня 5 колонок изначально, а в настройках стоит 'uk-width-small-1-2' (2 колонки), то отображаться будет так:

1 строка - 2 колонки
2 строка - 2 колонки

3 строка - 1 колонка и пробел
итого - 5 колонок. 

И так далее, т.е. появляется пустое поле. Смотрится не очень.

А хотелось бы именно "плавное" перестроение от 5 до 4...3..2...1 колонок, по мере уменьшения окна браузера или в зависимости от разрешения гаджета.

[DMTR3000S]

Я всего лишь привёл пример и прикрепил ссылку на документацию, которую, если потрудиться прочитать, можно использовать в своих целях.

Например, можно было бы поступить так:

$classes = array(
                'subcategory-column',
                'uk-width-1-1',
                'uk-width-small-1-2',
                'uk-width-medium-1-3',
                'uk-width-large-1-' . $vars['cols_num']
            );

Сообщение отредактировал Asbjorn: 10 December 2016 - 22:38

[belwww]

 

Я всего лишь привёл пример и прикрепил ссылку на документацию, которую, если потрудиться прочитать, можно использовать в своих целях.

Например, можно было бы поступить так:

$classes = array(
                'subcategory-column',
                'uk-width-1-1',
                'uk-width-small-1-2',
                'uk-width-medium-1-3',
                'uk-width-large-1-' . $vars['cols_num']
            );

 

Именно так и сделал. Но опять-таки, повторюсь. Что это не работает, когда в значении по умолчанию 'uk-width-large-1-' . $vars['cols_num'] в самих настройках категории стоит 5 колонок. Как бы ни было, но кратно 5 ниже только единица. В случае с 'uk-width-medium-1-3', будет выдавать так:

1-строка - 3 столбца
2-строка - 2 столбца и 1 пустое место
... и так далее.

скрин нужен или понятно о чем я?)

Сообщение отредактировал belwww: 10 December 2016 - 22:45

[DMTR3000S]

Вы же говорили, что нужен адаптив от 4 колонок до 1

В случае с пятью колонками сценарий будет несколько другим. Последняя колонка остаётся одна на строке, потому что каждые пять элементов div c классами uk-width-1-* обрамлены в 1 div c классом uk-grid. Для того чтобы получить адаптивность, нужно убрать это разделение, и все имеющиеся элементы положить в один общий div с классом uk-grid. Я не проверял, но попробуйте вместо своего файла положить вот этот:

 _default.php   1.68К   128 Количество загрузок:

 

P. S. Свой только забэкапьте, а ещё лучше сделать отдельный шаблон. 

Сообщение отредактировал Asbjorn: 10 December 2016 - 22:56

[belwww]

Вы же говорили, что нужен адаптив от 4 колонок до 1

Я не проверял, но попробуйте вместо своего файла положить вот этот:

_default.php

 

P. S. Свой только забэкапьте, а ещё лучше сделать отдельный шаблон. 

Вот) Уже что-то) Спасибо)
Только сейчас резкий спад с 5 колонок на 2. Нет плавной градации по мере уменьшения браузера. Теперь просто в Ваш файл добавить размерность для среднего размера?

[DMTR3000S]

А, да, я забыл классы запихать. Вставьте из сообщений выше, вроде должно работать.