fix(client): reaction viewer layout (#7942)

The profile picture and name should be grouped together as they belong, and
it should be clear which picture belongs to which name.
This commit is contained in:
Johann150 2021-11-13 03:38:26 +01:00 committed by GitHub
parent f3e753b83d
commit ed73a17da6

View File

@ -9,12 +9,14 @@
<template v-if="users.length <= 10">
<b v-for="u in users" :key="u.id" style="margin-right: 12px;">
<MkAvatar :user="u" style="width: 24px; height: 24px; margin-right: 2px;"/>
<br/>
<MkUserName :user="u" :nowrap="false" style="line-height: 24px;"/>
</b>
</template>
<template v-if="10 < users.length">
<b v-for="u in users" :key="u.id" style="margin-right: 12px;">
<MkAvatar :user="u" style="width: 24px; height: 24px; margin-right: 2px;"/>
<br/>
<MkUserName :user="u" :nowrap="false" style="line-height: 24px;"/>
</b>
<span slot="omitted">+{{ count - 10 }}</span>
@ -64,7 +66,6 @@ export default defineComponent({
display: flex;
> .reaction {
flex: 1;
max-width: 100px;
text-align: center;
@ -80,12 +81,13 @@ export default defineComponent({
}
> .users {
display: flex;
flex: 1;
min-width: 0;
font-size: 0.9em;
border-left: solid 0.5px var(--divider);
padding-left: 10px;
margin-left: 10px;
margin-left: 10px;
}
}
</style>