Подружить Views-сетку с адаптивной темой.

Anodo 17 декабря 2015 в 18:27

Добрый день!

Есть представление, где элементы выводятся в формате сетка, и указано число столбцов.

Но при просмотре через мобильные устройства такой вариант не подходит элементы также выстраиваются по 4 в ряд, а хотелось бы чтобы поля выводились один над другим, а не как на ПК.

Кажется был модуль для решения такой проблемы, встречал где-то, но не могу найти. Не подскажете?

Или другой вариант через CSS, но тогда какой лучше формат отображения выбрать?

Тема, кстати, Corolla, базируется на Adaptive Theme

Вложение	Размер
11.png	158.94 КБ

<?php if (!empty($title)) : ?>
  <h3><?php print $title; ?></h3>
<?php endif; ?>
<div class="<?php print $class; ?>"<?php print $attributes; ?>>
  <?php if (!empty($caption)) : ?>
    <caption><?php print $caption; ?></caption>
  <?php endif; ?>

    <?php foreach ($rows as $row_number => $columns): ?>
      <div <?php if ($row_classes[$row_number]) { print 'class="row ' . $row_classes[$row_number] .'"';  } ?>>
        <?php foreach ($columns as $column_number => $item): ?>
          <div <?php if ($column_classes[$row_number][$column_number]) { print 'class="' . $column_classes[$row_number][$column_number] .'"';  } ?>>
            <?php print $item; ?>
          </div>
        <?php endforeach; ?>
      </div>
    <?php endforeach; ?>
</div>
?>

От стандартной отличие минимально - просто тэги таблицы заменены на div-ы.
Затем, в настройках сетки, достаточно просто указать в row class классы используемой css-сетки. Например, для бутстраповской: col-md-4. Или свои.

Valeratal 17 декабря 2015 в 22:53

А не проще просто сверстать вьюху, выводя ее дивами сразу

см http://hr-portal.ru/

Anodo 20 декабря 2015 в 10:21

Сделал так:
Установил модуль Views Responsive Grid,
а в настройках формата обернул Column Classes в css:

.col_class {

        display: inline-block;

        min-width: 200px; 

}

Valeratal 20 декабря 2015 в 10:37

тоже вариант

Drupal Drupal на русском

Подружить Views-сетку с адаптивной темой.

Главные вкладки

Комментарии