nelle/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2025-03-04 07:18:50 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

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 f3e753b83d
commit ed73a17da6
1 changed files with 4 additions and 2 deletions

4
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,6 +81,7 @@ 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;