this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Support non-rectangular custom emojis 😩

Platforms like Misskey have irregularly-shaped custom emojis (emojos?)

- So far this handles horizontally-wide emojis, not tall ones (haven't seen any)
- text-overflow: ellipsis is not used because it can't ellipsis-fy wide emoji images

+32 -16
+17 -8
src/components/compose.jsx
··· 1893 1893 }} 1894 1894 title={`:${emoji.shortcode}:`} 1895 1895 > 1896 - <img 1897 - src={emoji.url || emoji.staticUrl} 1898 - alt={emoji.shortcode} 1899 - width="16" 1900 - height="16" 1901 - loading="lazy" 1902 - decoding="async" 1903 - /> 1896 + <picture> 1897 + {!!emoji.staticUrl && ( 1898 + <source 1899 + srcset={emoji.staticUrl} 1900 + media="(prefers-reduced-motion: reduce)" 1901 + /> 1902 + )} 1903 + <img 1904 + class="shortcode-emoji" 1905 + src={emoji.url || emoji.staticUrl} 1906 + alt={emoji.shortcode} 1907 + width="16" 1908 + height="16" 1909 + loading="lazy" 1910 + decoding="async" 1911 + /> 1912 + </picture> 1904 1913 </button> 1905 1914 ))} 1906 1915 </section>
+2 -2
src/components/emoji-text.jsx
··· 18 18 src={url} 19 19 alt={word} 20 20 class="shortcode-emoji emoji" 21 - width="12" 22 - height="12" 21 + width="16" 22 + height="16" 23 23 loading="lazy" 24 24 decoding="async" 25 25 />
+12 -5
src/components/status.css
··· 283 283 284 284 .status > .container > .meta { 285 285 display: flex; 286 - gap: 8px; 287 - justify-content: space-between; 286 + gap: 4px; 287 + /* justify-content: space-between; */ 288 288 white-space: nowrap; 289 289 } 290 290 .status.small > .container > .meta { ··· 293 293 .status > .container > .meta > * { 294 294 min-width: 0; 295 295 overflow: hidden; 296 - text-overflow: ellipsis; 296 + /* text-overflow: ellipsis; */ 297 + } 298 + .status > .container > .meta .name-text { 299 + mask-image: linear-gradient(to left, transparent, black 16px); 300 + flex-grow: 1; 297 301 } 298 302 .status.large > .container > .meta { 299 303 min-height: 50px; ··· 1473 1477 } 1474 1478 1475 1479 .shortcode-emoji { 1476 - width: 1.2em; 1480 + width: auto; 1481 + min-width: 1.2em; 1482 + max-width: 100%; 1477 1483 height: 1.2em; 1478 1484 vertical-align: text-bottom; 1479 - object-fit: scale-down; 1485 + object-fit: cover; 1486 + object-position: left; 1480 1487 } 1481 1488 1482 1489 /* EDIT HISTORY */
+1 -1
src/utils/emojify-text.js
··· 8 8 const { shortcode, staticUrl, url } = emoji; 9 9 text = text.replace( 10 10 new RegExp(`:${shortcode}:`, 'g'), 11 - `<picture><source srcset="${staticUrl}" media="(prefers-reduced-motion: reduce)"></source><img class="shortcode-emoji emoji" src="${url}" alt=":${shortcode}:" width="12" height="12" loading="lazy" decoding="async" /></picture>`, 11 + `<picture><source srcset="${staticUrl}" media="(prefers-reduced-motion: reduce)"></source><img class="shortcode-emoji emoji" src="${url}" alt=":${shortcode}:" width="16" height="16" loading="lazy" decoding="async" /></picture>`, 12 12 ); 13 13 }); 14 14 // console.log(text, emojis);