Страница 1 из 11
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Похожие материалы для uCoz (Вариант для вида похожих материалов)
Похожие материалы для uCoz
Angerfist
Дата: Понедельник, 21.11.2016, 13:28 | Сообщение # 1
Vip
Сообщений:623
Награды: 18


Залил код для пользователя Rinat1990, в материале по Похожим материалам для uCoz был запрос на мобильную адптацию.

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

Сразу скажу что предлагаю выводить чётное число похожих материалов, так как подразумеваем адаптивность и при уменьшении экрана всё же надо учитывать смотрибельность и читабельность, применяя медиа запрос на этапе к примеру с 480px будем делать не 4 колонки (2 строки), а две (с нечётным показателем в 10 материалов, ясно что будет оставаться пустая позиция справа).

На странице материала и комментариев выводим например:
Код

<p style="text-transform: uppercase;">Похожие материалы: </p>
<p><?if($RELATED_ENTRIES$(8))?><?$RELATED_ENTRIES$(8)?><?else?>Похожие материалы не найдены.<?endif?></p>
<div class="clear"></div>


Сразу обращаю внимание на
Код
<div class="clear"></div>
, этим мы убираем обтекание, (почему так, в основе многих шаблонов уже есть прописанный этот параметр и точно также или же class="clr", поэтому можно не писать лишний раз правила синтаксиса, если же нет, то читаем тут Сlear.)

Далее в вид похожих материалов лепим
Код

<div class="relatedentry">
<div class="relatedentry-img" style="background-image: url('$IMG_URL$');">
<div class="relatedentry-title"><a href="$ENTRY_URL$" title="Перейти к просмотру">
<span class="style-relatedentry">$TITLE$</span></a>
</div></div></div>


Ну и кратко оформляем это безобразие
Код

.relatedentry {
width: 24%;
float: left;
margin: 0.5%;
}
.relatedentry-img {
opacity: 0.85;
display: block;
position: relative;
padding-bottom: 125%;
overflow: hidden;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
box-shadow: inset 0 1px 2px 2px #000;
-webkit-box-shadow: inset 0 1px 2px 2px #000;
-moz-box-shadow: inset 0 1px 2px 2px #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.relatedentry-img:hover {
opacity: 1;
}
.relatedentry-title {
z-index:1;
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 4px;
background: rgba(0,0,0,0.85);
height: 22px;
overflow: hidden;
}
.style-relatedentry {
font-family: Impact;
font-size: 14px;
color: #CCCCCC;
text-transform: uppercase;
margin: 2px 2px 6px 4px;
}


В принципе закончили, но добьём стиль медиа запросом, добавим внизу к стилям ещё параметр
Код

@media all and (max-width:480px) {
.relatedentry {width:49%; float:left; margin: 0.5%;}
}

Ведь для смартфонов думаю будет лучше всё таки две колонки, если всё равно мелковато то можно
уменьшить запрос с 620px. "Вообщем типа того и всё такое..." -Beavis & Butthead-

Прикрепления: 6322920.jpg(83Kb) · 5826940.jpg(60Kb)


No regrets

Сообщение отредактировал Angerfist - Понедельник, 21.11.2016, 13:50
Rinat1990
Дата: Понедельник, 21.11.2016, 14:27 | Сообщение # 2
Пользователи
Сообщений:14
Награды: 0


Огромное спасибо! Добрейшей души человек!
Вот что получилось! И прекрасно адаптация работает!

Прикрепления: 2163602.jpg(108Kb)


Сообщение отредактировал Rinat1990 - Понедельник, 21.11.2016, 14:37
Angerfist
Дата: Понедельник, 21.11.2016, 14:44 | Сообщение # 3
Vip
Сообщений:623
Награды: 18


Rinat1990, судя по скрину немного не ровно название материала, советую поиграться с отступами тут
Код

.style-relatedentry {
font-family: Impact;
font-size: 14px;
color: #CCCCCC;
text-transform: uppercase;
margin: 2px 2px 6px 4px;

А именно margin, можно одним значением сделать отступ со всех краёв, либо двумя тремя значениями, тут же я 4 значения применил под тестовым шаблоном (где вышло с этими параметрами ровно) и имел ввиду 1-ое отступ 2px сверху 2-ое 2px справа 3-ее снизу и 4-ое слева.


No regrets
Angerfist
Дата: Понедельник, 21.11.2016, 15:21 | Сообщение # 4
Vip
Сообщений:623
Награды: 18


Дополню пример, убираем обтекание прописав в каскадной таблице общие значения:

Код

html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear {background: none; border: 0; clear: both; display: block; float: none; font-size: 0; list-style: none; margin: 0; padding: 0; overflow: hidden; visibility: hidden; width: 0; height: 0}


и уже после этого конструкция

Код
<div class="clear"></div>
заработает.


No regrets
Angerfist
Дата: Понедельник, 21.11.2016, 15:27 | Сообщение # 5
Vip
Сообщений:623
Награды: 18


И ещё, всё же советую прочитать пост пользователя SAM ТУТ по поводу
исходного содержимого строки списка, и окружающей "требухи" маркированного списка...
Хотя честно сам признаюсь и каюсь на тестовом шаблоне я не обрезал обёртку функцией substr, глядя по исходнику там нужно вырезать примерно это
Код

<ul class="uRelatedEntries">
Тут конструкция вида материалов в этой самой обёртке
</ul>


No regrets

Сообщение отредактировал Angerfist - Понедельник, 21.11.2016, 15:47
Kosten
Дата: Понедельник, 21.11.2016, 20:04 | Сообщение # 6
Администраторы
Сообщений:12706
Награды: 39


Убрал, так как нужно теги переписывать, время отвести, да переписать, а так здраво все показывает.

ucozmental
Дата: Вторник, 22.11.2016, 03:06 | Сообщение # 7
Пользователи
Сообщений:91
Награды: 0


Не все так просто, вот почему на блоге ucoz сразу не напишут, как что работает и можно сделать, а просто, мы создали обновление, радуйтесь.
Kosten
Дата: Вторник, 22.11.2016, 03:10 | Сообщение # 8
Администраторы
Сообщений:12706
Награды: 39


Цитата ucozmental ()
Не все так просто, вот почему на блоге ucoz сразу не напишут, как что работает и можно сделать, а просто, мы создали обновление, радуйтесь.

За такие деньги, они вообще должны скрипты писать, а они их продают. 11a


Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Похожие материалы для uCoz (Вариант для вида похожих материалов)
Страница 1 из 11
Поиск: