Комментарии / Русскоязычное сообщество MODX

Всего 125 670 комментариев

Евгений

11 февраля 2021, 18:35

Здравствуйте, Алексей! Благодарю за компонент, удобный.

Есть небольшое добавление по выводу звёзд на рейтингах. Текущий ваш вариант не учитывает пробел между звёздами (который необходим, чтобы они выводились не слитно), поэтому выводит не совсем корректно. Т.е. если рейтинг 4.5, к примеру, то на 5-ой звезде он закрашен лишь чуть, а не наполовину и т.п…

Добавил небольшую функцию в сниппет ecThreadRating, для корректной заливки.
Кусок кода ниже. Верхушка и конец те же.

Надеюсь пригодится!

$count = $thread->get('count');
    
    function percent($v, $max) {
    	$sw = 1/4; # space/width (depends on stars space/width on background image) default - 4px/16px
    	$percent = (intval($v) * (1 + $sw) + ($v - intval($v))) / ((1 + $sw) * $max - $sw); # percent
    	return number_format($percent * 100, 3);
    }
    
    foreach($ratingFields as $field) {
        $data = array_merge($data, array(
            $field.'_wilson_percent' => percent($thread->get($field.'_wilson'), $ratingMax),
            $field.'_simple_percent' => percent($thread->get($field.'_simple'), $ratingMax),
            // TEST only
            $field.'_votes' => array(),
        ));

P.s. Также для кастомизации звезд (свой дизайн), перевёл в scss и задал для своих размеров.
Размеры звёзд задавать целыми (px), отступ справа тоже. Легко делается в Figma по размерам, экспорт в svg.
Может кому пригодится (часть кода, для понимания):

/*
 * Rating input
 **/

// Depends on stars width/height/space on background image (default values below)
$es_w: 16; // es star width
$es_h: 16; // es star height
$es_space: 4; // horizontal right space (space between stars)
........................
.ec-stars {
	background-position: 0 -#{$es_h}px;
	background-repeat: repeat-x;
	margin: 10px 0;
	width: #{($es_w + $es_space)*5 - $es_space}px;
	height: #{$es_h}px;
	//transform: scale(1.5);
	//transform-origin: 0 0;
}
........................
.ec-stars span.rating-0{width: 0;}
@for $i from 1 through 5 {
	.ec-stars span.rating-#{$i} {
		width: #{($es_w + $es_space)*$i - $es_space}px;
	}
}
........................

Новые дополнения и их версии

easyComm - комментарии, отзывы, вопросы на сайте 536

Aleksanders

11 февраля 2021, 18:32

Вообще не отображается