Вопрос Изменение в стате

bash

Проверенный
Регистрация
07.07.18
Сообщения
15
Реакции
11
Баллы
45
Как можно реализовать такое отображение статистики?
Что-бы слева было число, а справа сама фраза
[XenForo.Info]_Screenshot_5.png
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
Можно конечно, сделать модификацию и поменять местами
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
Не знаю как там в ui.x, а в дефолтном, в шаблоне message_macros, поменять местами
Код:
                        <dl class="pairs pairs--justified">
                            <dt>{{ phrase('messages') }}</dt>
                            <dd>{$user.message_count|number}</dd>
                        </dl>
на
Код:
                        <dl class="pairs pairs--justified">
                            <dt>{$user.message_count|number}</dt>
                            <dd>{{ phrase('messages') }}</dd>
                        </dl>
убрать двоеточие
Код:
.message-userExtras {
    .pairs > dt:after {
        content: none;
    }   
}
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
Для UI.X можно не менять ни чего местами и действительно можно сделать через флекс
Less:
.message-userExtras {
    .pairs.pairs--justified {
        flex-flow: row-reverse;
        dt {
            margin-right: 0;
            &:after {
                content: none;
            }
        }
    }   
}
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
Так же можно изменить выравнивание строк. Выравниваем по левому краю:
Less:
.message-userExtras {
    .pairs.pairs--justified {
        flex-flow: row-reverse;
        justify-content: flex-end;
        dt {
            margin: 0 0 0 5px;
            &:after {
                content: none;
            }
        }
    }   
}
По правому
Less:
.message-userExtras {
    .pairs.pairs--justified {
        flex-flow: row-reverse;
        justify-content: flex-start;
        dt {
            margin: 0 0 0 5px;
            &:after {
                content: none;
            }
        }
    }   
}
По центру
Less:
.message-userExtras {
    .pairs.pairs--justified {
        flex-flow: row-reverse;
        justify-content: center;
        dt {
            margin: 0 0 0 5px;
            &:after {
                content: none;
            }
        }
    }   
}
 
Верх Низ