Приветствую. Появилась идея подсвечивать иконку каждой реакции в зависимости от ее влияния на репутацию, например, +1 к репутации подсвечивать зеленым, -1 красным, 0 - серым.

Так вот как получить в шаблоне величину, на которую данная реакция изменяет репутацию?

Смотрел здесь, но не нашел нужного поля. Можно, конечно, привязаться к position, но при добавлении новой или удалении старой реакции все сломается.

Хочу в итоге получить что-то вроде такого.

 

Выше неправильное изображение.

Немного поделюсь своим изменением стиля для реакции)

Вчера убил часа два на это)

Кому надо, пишите )

А я тем временем нашел решение. Получить величину можно из поля value:

{$reaction->value}

 

1 час назад, edmsl сказал:

А я тем временем нашел решение. Получить величину можно из поля value:

{$reaction->value}

 

Что в итоге вышло?)

10 минут назад, Donjuan сказал:

Что в итоге вышло?)

Пока ничего толкового, экспериментирую с оформлением.

Donjuan 

44 минуты назад, edmsl сказал:

Donjuan 

Забавно)

edmsl расскажи как сделал, вроде не плохо смотрится, может кому пригодится

С моими реакциями все просто, я в кастум код сделал, потом выложу

Есть кстати пару мануалов не плохих, но очкую, хейтеры захейтят опять)

5 часов назад, Donjuan сказал:

Немного поделюсь своим изменением стиля для реакции)

Вчера убил часа два на это)

Кому надо, пишите )

.ipsReact_reactCount {
    background: rgba(61,61,61,0.2) !important;
    border-radius: 12.5px !important;
    border: 0px solid #6b8092 !important;
    height: 25px !important;
    padding-left: 2px !important;
}

.ipsReact_reactCount > span > span:last-child, .ipsReact_reactCount > a > span:last-child {
  background: rgba(61, 61, 61, 0);
  color: rgba(255,255,255,0.9);
}

Для темной темы

Donjuan Тоже ничего сложного.

Сначала в шаблоне core/front/global/reputation подправил строку

<a href='{$content->url( 'react' )->setQueryString( 'reaction', $reaction->id )->csrf()}' class='ipsReact_reaction' data-value='{$reaction->value}' data-role="reaction" {{if $reaction->id == $defaultReaction->id}}data-defaultReaction{{endif}}>

добавив атрибут data-value='{$reaction->value}'

Затем в custom.css

html[dir="ltr"] a.ipsReact_reaction::after {
  content: "";
  position: absolute;
  bottom: -7px;
  right: -7px;
  left: auto;
  display: block;
  width: 14px;
  height: 14px;
  margin: 0;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

html[dir="ltr"] a.ipsReact_reaction[data-value="-1"]::after {
  background-image: url("data:image/svg+xml;utf8,<?xml version='1.0' ?><svg width='14' height='14' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path fill='rgb(229, 75, 54)' d='M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256C397.4 512 512 397.4 512 256S397.4 0 256 0zM352 280h-192C146.8 280 136 269.2 136 256c0-13.2 10.8-24 24-24h192C365.2 232 376 242.8 376 256C376 269.2 365.2 280 352 280z'/></svg>");
  background-color: #fff;
}

html[dir="ltr"] a.ipsReact_reaction[data-value="1"]::after {
  background-image: url("data:image/svg+xml;utf8,<?xml version='1.0' ?><svg width='14' height='14' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path fill='rgb(132, 190, 100)' d='M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256C397.4 512 512 397.4 512 256S397.4 0 256 0zM352 280H280V352c0 13.2-10.8 24-23.1 24C242.8 376 232 365.2 232 352V280H160C146.8 280 136 269.2 136 256c0-13.2 10.8-24 24-24H232V160c0-13.2 10.8-24 24-24C269.2 136 280 146.8 280 160v72h72C365.2 232 376 242.8 376 256C376 269.2 365.2 280 352 280z'/></svg>");
  background-color: #fff;
}

 

Edited 30 декабря, 20221 yr by edmsl

edmsl жаль у меня все реакции на + , так бы тоже поставил вашу идею)

Edited 30 декабря, 20221 yr by Donjuan