pl-fe: zoom in emojis on hover

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
2024-10-02 17:25:39 +02:00
parent d0ca585558
commit 994ec59f4b
2 changed files with 4 additions and 5 deletions

View File

@ -187,8 +187,9 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
: status.spoilerHtml;
const direction = getTextDirection(status.search_index);
const className = clsx('relative overflow-hidden text-ellipsis break-words text-gray-900 focus:outline-none dark:text-gray-100', {
const className = clsx('relative text-ellipsis break-words text-gray-900 focus:outline-none dark:text-gray-100', {
'cursor-pointer': onClick,
'overflow-hidden': collapsed,
'max-h-[200px]': collapsed && !quote,
'max-h-[120px]': collapsed && quote,
'leading-normal big-emoji': onlyEmoji,

View File

@ -58,12 +58,12 @@ const validEmojiChar = (c: string) =>
isAlphaNumeric(c) || ['_', '-', '.'].includes(c);
const convertCustom = (shortname: string, filename: string) =>
`<img draggable="false" class="emojione" alt="${shortname}" title="${shortname}" src="${filename}" />`;
`<img draggable="false" class="emojione transition-transform ease-linear no-reduce-motion:hover:scale-125" alt="${shortname}" title="${shortname}" src="${filename}" />`;
const convertUnicode = (c: string) => {
const { unified, shortcode } = unicodeMapping[c];
return `<img draggable="false" class="emojione" alt="${c}" title=":${shortcode}:" src="/packs/emoji/${unified}.svg" />`;
return `<img draggable="false" class="emojione transition-transform ease-linear no-reduce-motion:hover:scale-125" alt="${c}" title=":${shortcode}:" src="/packs/emoji/${unified}.svg" />`;
};
const convertEmoji = (str: string, customEmojis: any) => {
@ -224,8 +224,6 @@ export {
type Emoji,
isCustomEmoji,
isNativeEmoji,
emojifyText,
parseHTML,
buildCustomEmojis,
emojify as default,
};