heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

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

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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/client/src/components/reactions-viewer.details.vue
View file

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