Kongwoo/akkoma-fe
1
0
Fork 0
mirror of https://akkoma.dev/AkkomaGang/akkoma-fe synced 2025-05-10 22:49:14 +08:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request 'remove some jank in emoji reacts component' (#435) from Riedler/akkoma-fe:fix-reacts into develop

Browse source 
Reviewed-on: https://akkoma.dev/AkkomaGang/akkoma-fe/pulls/435
This commit is contained in:
Oneric 2025-05-09 18:30:07 +00:00
commit 61bdedc82f
1 changed files with 19 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/components/emoji_reactions/emoji_reactions.vue
View file

@ -11,7 +11,7 @@
@click="emojiOnClick(reaction.name, $event)" @click="emojiOnClick(reaction.name, $event)"
@mouseenter="fetchEmojiReactionsByIfMissing()" @mouseenter="fetchEmojiReactionsByIfMissing()"
> >
<span <template
v-if="reaction.url !== null" v-if="reaction.url !== null"
> >
<StillImage <StillImage
@ -19,16 +19,15 @@
:title="reaction.name" :title="reaction.name"
:alt="reaction.name" :alt="reaction.name"
class="reaction-emoji" class="reaction-emoji"
height="2.55em"
/> />
{{ reaction.count }} {{ reaction.count }}
</span> </template>
<span v-else> <template v-else>
<span class="reaction-emoji unicode-emoji"> <span class="reaction-emoji unicode-emoji">
{{ reaction.name }} {{ reaction.name }}
</span> </span>
<span>{{ reaction.count }}</span> <span>{{ reaction.count }}</span>
</span> </template>
</button> </button>
</UserListPopover> </UserListPopover>
<a <a
@ -53,23 +52,26 @@
container-type: inline-size; container-type: inline-size;
} }
.unicode-emoji {
font-size: 210%;
}
.emoji-reaction { .emoji-reaction {
padding: 0 0.5em; padding: 2px 0.5em;
margin-right: 0.5em; margin-right: 0.5em;
margin-top: 0.5em; margin-top: 0.5em;
display: flex; display: flex;
align-items: center; align-items: end;
justify-content: center;
box-sizing: border-box;
.reaction-emoji { .reaction-emoji {
width: auto; width: auto;
max-width: 96cqw; max-width: 96cqw;
height: 2.55em !important;
margin-right: 0.25em; margin-right: 0.25em;
&.still-image {
height: 2.55em;
}
&.unicode-emoji {
display: inline-block;
font-size: 2.125em; // assuming default line height of 1.2rem and emojis that don't exceed line height
line-height: 2.55rem;
}
} }
&:focus { &:focus {
outline: none; outline: none;
@ -97,9 +99,9 @@
} }
.button-default.picked-reaction { .button-default.picked-reaction {
border: 1px solid var(--accent, $fallback--link); &, &:hover {
margin-left: -1px; // offset the border, can't use inset shadows either box-shadow: inset 0 0 0 1px var(--accent, $fallback--link);
margin-right: calc(0.5em - 1px); }
} }
</style> </style>