diff options
| -rw-r--r-- | src/components/status/status.vue | 23 | ||||
| -rw-r--r-- | src/services/entity_normalizer/entity_normalizer.service.js | 2 | ||||
| -rw-r--r-- | test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js | 4 |
3 files changed, 20 insertions, 9 deletions
diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 5e849dd7..a0756ae4 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -696,6 +696,22 @@ $status-margin: 0.75em; line-height: 1.4em; white-space: pre-wrap; + .emoji-container { + display: inline-block; + width: 32px; + height: 32px; + z-index: 1; + + &:hover { + z-index: 2; + + .emoji { + transform: scale(3); + z-index: 2; + } + } + } + img, video { max-width: 100%; max-height: 400px; @@ -707,12 +723,7 @@ $status-margin: 0.75em; height: 32px; transition: transform 200ms; transform: scale(1); - z-index: 1; - - &:hover { - transform: scale(3); - z-index: 2; - } + pointer-events: none; } } diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js index 6cc1851d..17b4a6e0 100644 --- a/src/services/entity_normalizer/entity_normalizer.service.js +++ b/src/services/entity_normalizer/entity_normalizer.service.js @@ -194,7 +194,7 @@ export const addEmojis = (string, emojis) => { return emojis.reduce((acc, emoji) => { return acc.replace( new RegExp(`:${emoji.shortcode}:`, 'g'), - `<img src='${emoji.url}' alt='${emoji.shortcode}' title='${emoji.shortcode}' class='emoji' />` + `<span class='emoji-container'><img src='${emoji.url}' alt='${emoji.shortcode}' title='${emoji.shortcode}' class='emoji' /></span>` ) }, string) } diff --git a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js index 20e03cb0..24aef5cd 100644 --- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js +++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js @@ -323,9 +323,9 @@ describe('API Entities normalizer', () => { describe('MastoAPI emoji adder', () => { const emojis = makeMockEmojiMasto() - const imageHtml = '<img src="https://example.com/image.png" alt="image" title="image" class="emoji" />' + const imageHtml = '<span class="emoji-container"><img src="https://example.com/image.png" alt="image" title="image" class="emoji" /></span>' .replace(/"/g, '\'') - const thinkHtml = '<img src="https://example.com/think.png" alt="thinking" title="thinking" class="emoji" />' + const thinkHtml = '<span class="emoji-container"><img src="https://example.com/think.png" alt="thinking" title="thinking" class="emoji" /></span>' .replace(/"/g, '\'') it('correctly replaces shortcodes in supplied string', () => { |