Улучшаем адаптивность, количество колонок в выводе записей плиткой

 
Посетитель
small user social cms
Медаль
Сообщений: 343
Это небольшое изменение позволит выводить при большой ширине экрана допустим 3 столбика, 2 при узком экране и 1 при самом маленьком телефонном. Как это работает, можно посмотреть на моем сайте по вязанию. Для этого поиграйте шириной экрана. Может я слишком заморочился, но может кому то и понравится такая штука. Я делал основной упор на адаптивность шаблона, т.к. пользователи у меня в основном как оказывается с телефонов.

Делаем следующим образом, открываем файл \templates\default\content/default_list_tiles.tpl.php. Находим в нем строчки:

<?php if ($index % $columns == 0) { ?>
<div class="clear"></div>
<?php } ?>

Заменяем их на

<?php if ($index % 3 == 0) { ?>
<div class="clear3"></div>
<?php } ?>
<?php if ($index % 2 == 0) { ?>
<div class="clear2"></div>
<?php } ?>

Теперь у нас после каждой 2й записи будет создаваться див с классом clear2, а после каждой 3й как и ранее это было сделано див с классом clear3.

Кстати, такие же изменения можно сделать с файлом для вывода альбомов, albums_list.tpl.php.

Кстати, в выводе плитки не работает почему отображение тегов, видимо косяк в шаблоне, поэтому советую добавить после кода

<?php
$is_tags = $ctype['is_tags'] &&
!empty($ctype['options']['is_tags_in_list']) &&
$item['tags'];
?>

Код

<?php if ($is_tags){ ?>
<div class="tags_bar">
<?php echo html_tags_bar($item['tags']); ?>
</div>
<?php } ?>

Далее открываем файл \templates\default\css/theme-content

И в самом конце добавляем такой код

@media only screen and (min-width: 661px) {
.content_list.tiled .clear3 { clear:both; }
}
@media only screen and (min-width: 421px) and (max-width: 660px) {
.content_list.tiled .clear2 { clear:both; }
.content_list.tiled .tile { width:48%; padding: 1% margin-right: 1%;}
}
@media only screen and (max-width: 420px) {
.content_list.tiled .tile { width:97%; padding: 1.5%; margin-right: 0%;}
}

Где 660- ширина до которой показываем 3 столбика, 420 - 2 столбика, ну и меньше 420 уже показываем 1 столбик. Можете свои стили прописать.

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

Я думаю, что никому не открыл америки, но решил методом поделиться, до гуру сайтоделанья мне далеко, но может новички найдутся, кому это пригодится.
Из плюсов метода, что делается в основном через стили, раньше я думал, что это придется реализовывавать через джава, а я его вообще не знаю, но вот как то с утра меня осинило, что так можно сделать.

Если кому пригодилось, плюсуйте, мне будет приятно.
Редактировалось: 1 раз (Последний: 22 октября 2014 в 22:13)
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.