discourse/app/assets/stylesheets/mobile/emoji.scss

.emoji-picker {
  border: none;
  position: fixed;
  width: 100%;
  max-width: 100vh;
  top: 0;
  left: 0;
  border-bottom: 1px solid var(--primary-low);
  min-height: 50vh;
  .emoji-picker-emoji-area {
    img.emoji {
      // custom emojis might import images of various sizes
      // we don't want them to be deformed in the picker
      width: 28px !important;
      height: 28px !important;
    }
  }
}
FIX: emoji-picker improvements * fix a performance issue on mobile when modifying filtering query, thanks to David Taylor and Jorge Manrubia for the initial finding and solution * minor refactoring * better positioning of the picker on mobile 2018-01-29 04:05:35 -06:00			`.emoji-picker {`
			`border: none;`
REFACTOR: rewrite the emoji-picker (#10464) The emoji-picker is a specific piece of code as it has very strong performance requirements which are almost not found anywhere else in the app, as a result it was using various hacks to make it work decently even on old browsers. Following our drop of Internet Explorer, and various new features in Ember and recent browsers we can now take advantage of this to reduce the amount of code needed, this rewrite most importantly does the following: - use loading="lazy" preventing the full list of emojis to be loaded on opening - uses InterserctionObserver to find the active section - limits the use of native event listentes only for hover/click emojis (for performance reason we track click on the whole emoji area and delegate events), everything else is using ember events - uses popper to position the emoji picker - no jquery code 2020-08-24 07:20:51 -05:00			`position: fixed;`
			`width: 100%;`
			`max-width: 100vh;`
			`top: 0;`
			`left: 0;`
UX: improves picker on automatic dark themes (#10515) 2020-08-24 08:04:11 -05:00			`border-bottom: 1px solid var(--primary-low);`
UX: Larger images in mobile emoji picker (#17013) 2022-06-07 11:00:09 -05:00			`min-height: 50vh;`
			`.emoji-picker-emoji-area {`
			`img.emoji {`
			`// custom emojis might import images of various sizes`
			`// we don't want them to be deformed in the picker`
			`width: 28px !important;`
			`height: 28px !important;`
			`}`
			`}`
FEATURE: allows multiple custom emoji groups (#9308) Note: DBHelper would fail with a sql syntax error on columns like "group". Co-authored-by: Jarek Radosz <jradosz@gmail.com> 2020-03-30 13:16:10 -05:00			`}`