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

[bash]

Как можно реализовать такое отображение статистики?
Что-бы слева было число, а справа сама фраза

 

[Skaiman]

Можно конечно, сделать модификацию и поменять местами

 

[bash]

Можно конечно, сделать модификацию и поменять местами

Можно по подробнее? Делаю на UI.Xe, вроде можно же через флекс?

 

[Skaiman]

Не знаю как там в 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]

Для UI.X можно не менять ни чего местами и действительно можно сделать через флекс

.message-userExtras {
    .pairs.pairs--justified {
        flex-flow: row-reverse;
        dt {
            margin-right: 0;
            &:after {
                content: none;
            }
        }
    }   
}

 

[Skaiman]

Так же можно изменить выравнивание строк. Выравниваем по левому краю:

.message-userExtras {
    .pairs.pairs--justified {
        flex-flow: row-reverse;
        justify-content: flex-end;
        dt {
            margin: 0 0 0 5px;
            &:after {
                content: none;
            }
        }
    }   
}

По правому

.message-userExtras {
    .pairs.pairs--justified {
        flex-flow: row-reverse;
        justify-content: flex-start;
        dt {
            margin: 0 0 0 5px;
            &:after {
                content: none;
            }
        }
    }   
}

По центру

.message-userExtras {
    .pairs.pairs--justified {
        flex-flow: row-reverse;
        justify-content: center;
        dt {
            margin: 0 0 0 5px;
            &:after {
                content: none;
            }
        }
    }   
}