Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix(client): reaction viewer layout ()

Browse source 
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 6a9e52d83c
commit 0f9a6417b0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 2 deletions

6
packages/client/src/components/reactions-viewer.details.vue
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>