Skip to content

Commit

Permalink
fix(client): reaction viewer layout
Browse files Browse the repository at this point in the history
The profile picture and name should be grouped together as they belong, and
it should be clear which picture belongs to which name.
  • Loading branch information
Johann150 committed Nov 11, 2021
1 parent ea97d6a commit abfac34
Showing 1 changed file with 4 additions and 2 deletions.
6 changes: 4 additions & 2 deletions packages/client/src/components/reactions-viewer.details.vue
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit abfac34

Please sign in to comment.