Страница 1 из 11
Форум » Работа с сайтом (дополнения и улучшения) » Общее » Оформление комментариев » Вид комментариев в стиле TimeLine (Оформление комментариев аля TimeLine)
Вид комментариев в стиле TimeLine
ps-studioДата: Суббота, 03.06.2017, 16:57 | Сообщение # 1
Главный администратор
Группа: Администраторы
Сообщений: 48
Награды: 0
Репутация: 0
Статус: Offline


Вид комментариев (оформление) в стиле таймлайна


Таймлайн (Timeline) - это один из вариантов компактного оформления какой-либо хронологии событий. В нашем случае, хронологический порядок выводимых комментариев. Посмотрим, как можно оформить комментарии в стиле таймлайн.






Ребята! Вы можете сказать "Спасибо!" сайту-источнику за этот материал, посетив его страницу.
Прикрепления: 8898551.png(114Kb)


Возникшие желания должны реализовываться безотлагательно. А то все удовольствие пропадает. Захотел – сделал, чего тянуть, жизнь коротка. Здесь и сейчас! Михаил Веллер
ps-studioДата: Суббота, 03.06.2017, 17:05 | Сообщение # 2
Главный администратор
Группа: Администраторы
Сообщений: 48
Награды: 0
Репутация: 0
Статус: Offline
Установка как есть

Оговорюсь сразу: этот вид оформления комментариев, взятый мной с сайта, указанного в сообщении выше, при установке "как есть" показал кучу проблем.
Но, обо всём по-порядку.

Установка проходит в два этапа: замена стандартного кода в шаблоне "Вид комментариев" и добавление в Таблицу стилей (CSS) необходимых для оформления стилей.

1. В шаблоне "Вид комментариев" меняем стандартный код на этот:
Код
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="$CLASS$"><tr><td style="padding:3px;">   
  <div class="comment"><div class="comment-author vcard">   
  <div class="avatar"><img alt="" align="left" src="$USER_AVATAR_URL$" width="60" border="0" /><img src="/avatar.png" width="60" border="0"></div>   
  <cite class="fn"><a href="$PROFILE_URL$"><b>$USERNAME$</b></a><b>$NAME$</b></cite>   
  </div>   
  <div class="comment-meta commentmetadata">$DATE$ $TIME$</div>   
  <div style="float:right;font-size:11px;font-family:Arial,sans-serif;"><span class="myWinError"><b>$COMMENT_RATING$</b></span><span style="color:gray;"><b>$COMMENT_RATING$</b></span><span class="myWinSuccess"><b>+$COMMENT_RATING$</b></span> <a href="$GOOD_COMMENT_URL$"><img alt="" src="http://s16.ucoz.net/img/icon/thumbu.png" width="13" align="absmiddle" border="0" title="Хороший пост"></a> <a href="$BAD_COMMENT_URL$"><img alt="" src="http://s16.ucoz.net/img/icon/thumbd.png" width="13" border="0" align="absmiddle" title="Плохой пост"></a><img alt="" src="http://s16.ucoz.net/img/icon/thumbu_.png" align="absmiddle" width="13" border="0" title="Хороший пост"> <img alt="" src="http://s16.ucoz.net/img/icon/thumbd_.png" width="13" align="absmiddle" border="0" title="Плохой пост"> $MODER_PANEL$</div><div class="cTop" style="text-align:left;"><span class="myWinError">*</span> <span class="myWinSuccess">*</span> <a href="#ent$ID$" onclick="if (document.getElementById('comEnt$ID$')){$('body').scrollTo( { top:$('#comEnt$ID$').offset().top-22, left:0}, 500 );return false;}" name="ent$ID$"><b>$NUMBER$</b></a>   
  </div>   
  <div class="cMessage" style="text-align:left;clear:both;padding:2px 0;">$MESSAGE$</div>   
<div class="cAnswer" style="text-align:left;clear:both;"><b>Ответ</b>: $ANSWER$</div>   
  <div style="clear:both;padding:4px 0;font-size:7pt;">[<a href="$ANSWER_URL$">Ответить</a>]</div> </div>   
</td></tr></table>


2. В Таблицу стилей (CSS) добавляем следующие стили:
Код
.comment { float: right; clear: both; position: relative; width: 70%; padding: 15px; background: white; margin: 0 0 20px 0; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;}   
.cBlock1 .comment{background:#ddeb84;}   
.cBlock2 .comment{background:#F1F2F3;}   
.comment-author { position: absolute; left: -210px; top: 0; }   
.comment-author cite { display: block; margin-top: 0px; font-family: HelveticaNeue, Helvetica, Arial, Sans-Serif; font-style: normal; color: black;text-align:center;}   
.comment-author cite a { color: black; border-bottom: 1px solid transparent; }   
.cBlock1 .comment-author .avatar { width: 60px; height: 60px; -moz-border-radius: 38px; position: relative; -webkit-border-radius: 38px; border-radius: 38px; border: 8px solid #ddeb84; }   
.cBlock1 .comment-author .avatar:after { content: ""; display: block; position: absolute; width: 142px; height: 8px; background: #ddeb84; left: 60px; top: 30px; }   
.cBlock2 .comment-author .avatar { width: 60px; height: 60px; -moz-border-radius: 38px; position: relative; -webkit-border-radius: 38px; border-radius: 38px; border: 8px solid #F1F2F3; }   
.cBlock2 .comment-author .avatar:after { content: ""; display: block; position: absolute; width: 142px; height: 8px; background: #F1F2F3; left: 60px; top: 30px; }   
.comment-author .avatar img{ width: 60px; height: 60px; -moz-border-radius: 38px; position: relative; -webkit-border-radius: 38px; border-radius: 38px; }   
.comment .comment-meta { position: absolute; left: -210px; top: 90px; font-family: HelveticaNeue, Helvetica, Arial, Sans-Serif; text-transform: uppercase; }


В итоге получаем вот такую неприглядную картину:



Почему так получилось? Анализ кода показал, что все баги, всплывшие после установки, возникли из-за отсутствия прописанных условий в шаблоне "Вид комментариев". Из-за этого и задвоенные аватары, и задвоение рейтинга. Попробуем поправить эти недочёты в следующем сообщении.
Прикрепления: 9695236.png(95Kb)


Возникшие желания должны реализовываться безотлагательно. А то все удовольствие пропадает. Захотел – сделал, чего тянуть, жизнь коротка. Здесь и сейчас! Михаил Веллер
ps-studioДата: Суббота, 03.06.2017, 17:26 | Сообщение # 3
Главный администратор
Группа: Администраторы
Сообщений: 48
Награды: 0
Репутация: 0
Статус: Offline
Доработки

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

1. В шаблоне "Вид комментариев" заменяем весь код на такой:
Код
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="$CLASS$">
<tr>
<td style="padding:3px;">
<div class="comment">
<div class="comment-author vcard">
<div class="avatar">
<?if($USER_AVATAR_URL$)?>
<?if($SOC_LINK$)?><a rel="nofollow" href="$SOC_LINK$" title="$USERNAME$"><img src="$USER_AVATAR_URL$" alt="avatar" /></a>
<?else?><a href="$PROFILE_URL$" title="$USERNAME$"><img alt="" align="left" src="$USER_AVATAR_URL$" width="60" border="0" /><?endif?>
<?else?><img src="/.s/img/icon/social/noavatar.png" alt="avatar" /><?endif?>
</div><p style="text-align:center;font-size:9px;"><a href="#ent$ID$" onclick="prompt('', location.protocol + '//' + location.hostname + location.pathname + location.search + '#comEnt$ID$' ); if (document.getElementById('comEnt$ID$') ) { $('body').scrollTo({top:$('#comEnt$ID$').offset().top-54, left:0 }, 500 ); return false; }" name="ent$ID$">№ <b>$NUMBER$</b></a></p>
</div>
<div style="float:right;font-size:11px;font-family:Arial,sans-serif;">
<?if($GOOD_COMMENT_URL$)?>
<a href="$GOOD_COMMENT_URL$"><img alt="" src="/.s/img/icon/thumbu2.png" title="Хороший пост" style="margin:0 4px; vertical-align:middle;"></a>
<?if($COMMENT_RATING$ > 0)?><span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
<span itemprop="ratingValue">$COMMENT_RATING$</span>
</span>
<?else?>$COMMENT_RATING$<?endif?>
<a href="$BAD_COMMENT_URL$"><img alt="" src="/.s/img/icon/thumbd2.png" title="Плохой пост" style="margin:0 4px; vertical-align:middle;"></a>
<?else?>
<img alt="" src="/.s/img/icon/thumbu2_.png" title="Хороший пост" style="margin:0 4px; vertical-align:middle; opacity:.5; ">
<?if($COMMENT_RATING$ > 0)?><span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
<span itemprop="ratingValue">$COMMENT_RATING$</span>
</span>
<?else?>$COMMENT_RATING$<?endif?>
<img alt="" src="/.s/img/icon/thumbd2_.png" title="Плохой пост" style="margin:0 4px; vertical-align:middle; opacity:.5;">
<?endif?>

<?if($MODER_PANEL$)?>$MODER_PANEL$<?endif?></div>
<div class="cTop" style="text-align:left;">
<span class="fn">
<?if($SOC_TYPE$)?><img src="/.s/img/icon/social/16/$SOC_TYPE$.png" alt="" /><?endif?> <?if($USERNAME$)?><a href="$PROFILE_URL$">$USERNAME$</a><?else?>$NAME$<?endif?> <cite class="commentmetadata">$DATE$ $TIME$</cite></span>
</div>
<div class="cMessage" style="text-align:left;clear:both;padding:2px 0;">$MESSAGE$</div>
<?if($ANSWER$)?><div class="cAnswer" style="text-align:left;clear:both;"><b>Ответ</b>: $ANSWER$</div><?endif?>
<?if($ANSWER_URL$)?><div style="clear:both;padding:4px 0;font-size:7pt;"><a href="$ANSWER_URL$"><b>Ответить</b></a></div><?endif?>
</div>
</td></tr></table>


2. В Таблицу стилей (CSS) добавляем стили:
Код
.comment { float: right; clear: both; position: relative; width: 70%; padding:15px; background: white; margin: 0 0 20px 0; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;}
.cBlock1 .comment{background:#ddeb84; color:#666633;}
.cBlock2 .comment{background:#F1F2F3;color:#666666;}
.fn {font-style: normal;}.fn a {font-weight:700;}
.comment-author { position: absolute; left: -210px; top: 0; }
.comment-author cite { display: block; margin-top: 0px; font-family: HelveticaNeue, Helvetica, Arial, Sans-Serif; font-style: normal; color: black;text-align:center;}
.comment-author cite a { color: black; border-bottom: 1px solid transparent; }
.cBlock1 .comment-author .avatar { width: 60px; height: 60px; -moz-border-radius: 38px; position: relative; -webkit-border-radius: 38px; border-radius: 38px; border: 8px solid #ddeb84; }
.cBlock1 .comment-author .avatar:after { content: ""; display: block; position: absolute; width: 142px; height: 8px; background: #ddeb84; left: 60px; top: 30px; }
.cBlock2 .comment-author .avatar { width: 60px; height: 60px; -moz-border-radius: 38px; position: relative; -webkit-border-radius: 38px; border-radius: 38px; border: 8px solid #F1F2F3; }
.cBlock2 .comment-author .avatar:after { content: ""; display: block; position: absolute; width: 142px; height: 8px; background: #F1F2F3; left: 60px; top: 30px; }
.comment-author .avatar img{ width: 60px; height: 60px; -moz-border-radius: 38px; position: relative; -webkit-border-radius: 38px; border-radius: 38px; }
.comment .comment-meta { position: absolute; left: -210px; top: 90px; font-family: HelveticaNeue, Helvetica, Arial, Sans-Serif; text-transform: uppercase; }
.commentmetadata {font-size:9px;padding-top:10px;color:#999999!important;}
.comment a:link,.comment a:active,.comment a:visited {color:#666;text-decoration:none;}
.comment a:hover {color:#666;text-decoration:underline;}


Получаем в итоге вот такое оформление комментариев в стиле таймлайн:

Прикрепления: 3860527.png(116Kb)


Возникшие желания должны реализовываться безотлагательно. А то все удовольствие пропадает. Захотел – сделал, чего тянуть, жизнь коротка. Здесь и сейчас! Михаил Веллер
Форум » Работа с сайтом (дополнения и улучшения) » Общее » Оформление комментариев » Вид комментариев в стиле TimeLine (Оформление комментариев аля TimeLine)
Страница 1 из 11
Поиск: