mirror/hotomoe
1
0
Fork 0
mirror of https://github.com/hotomoe/hotomoe synced 2024-12-01 08:18:14 +09:00
Code

🎨

Browse Source
This commit is contained in:
syuilo 2021-10-24 13:54:31 +09:00
parent 6afa67089a
commit 7783c1e0e1
2 changed files with 37 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/client/components/reactions-viewer.details.vue
View File

@ -1,23 +1,25 @@
<template> <template>
<MkTooltip :source="source" ref="tooltip" @closed="$emit('closed')"> <MkTooltip :source="source" ref="tooltip" @closed="$emit('closed')" :max-width="340">
<div class="bqxuuuey"> <div class="bqxuuuey">
<div class="info"> <div class="reaction">
<div>{{ reaction.replace('@.', '') }}</div>
<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/> <XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
<div class="name">{{ reaction.replace('@.', '') }}</div>
</div>
<div class="users">
<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;"/>
<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;"/>
<MkUserName :user="u" :nowrap="false" style="line-height: 24px;"/>
</b>
<span slot="omitted">+{{ count - 10 }}</span>
</template>
</div> </div>
<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;"/>
<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;"/>
<MkUserName :user="u" :nowrap="false" style="line-height: 24px;"/>
</b>
<span slot="omitted">+{{ count - 10 }}</span>
</template>
</div> </div>
</MkTooltip> </MkTooltip>
</template> </template>
@ -59,8 +61,11 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.bqxuuuey { .bqxuuuey {
> .info { display: flex;
padding: 0 0 8px 0;
> .reaction {
flex: 1;
max-width: 100px;
text-align: center; text-align: center;
> .icon { > .icon {
@ -68,6 +73,19 @@ export default defineComponent({
width: 60px; width: 60px;
margin: 0 auto; margin: 0 auto;
} }
> .name {
font-size: 0.9em;
}
}
> .users {
flex: 1;
min-width: 0;
font-size: 0.9em;
border-left: solid 0.5px var(--divider);
padding-left: 10px;
margin-left: 10px;
} }
} }
</style> </style>

2
src/client/components/reactions-viewer.reaction.vue
View File

@ -177,7 +177,7 @@ export default defineComponent({
> span { > span {
font-size: 0.9em; font-size: 0.9em;
line-height: 32px; line-height: 32px;
margin: 0 0 0 8px; margin: 0 0 0 4px;
} }
} }
</style> </style>