Как сделать переключалку отображения контента типа grid и типа list?

Question

[magary4]

есть некие результаты поиска которые нужно отобразить в виде списка и в виде сетки (допустим 3 ячейки в одной линии)

ХТМЛ верстка довольно сложная и отличается сильно между list-item и grid-item

видел когда-то решение вывода

<div class="list-item">..</div>
<div class="grid-item">..</div>
<div class="list-item">..</div>
<div class="grid-item">..</div>
...

и стилями скрываются либо четные, либо нечетные.
но как-то не айс мне показалось
какое есть красивое решение для этого?

на уме - перегруз страницы с рендером в другом twig-шаблоне

Answer 1

[Антон Шаманов]

tympanus.net/Blueprints/ViewModeSwitch если это оно, то сверху ссылка на статью.

Answer 2

[Андрей]

обернуть вывод в блок и в зависимости от выбранного типа вывода добавлять ему класс-модификатор results--grid или results--item и как вы написали - в стилях скрывать ненужные элементы:

.results--grid .list-item {
display:none;
}

.results--list .grid-item {
display:none;
}

Answer 3

[Андрей Шахтарин]

devacademy.ru/posts/symfony-2-joboard-rss
можно отсюда взять логику, в частности покалдовать

public function indexAction()
{
   $format = $this->getRequest()->getRequestFormat();

   return $this->render('AcmeBlogBundle:Blog:index.'.$format.'.twig');
}

И путь к контенту

<a href="{{ path('app_job', {'_format': 'atom'}) }}">RSS</a>

возможно это то что искал
вариант вышее лучшее простое переключение стилей средствами js
без лишних запросов к серверу