From 89814484485d13f3de4a8cea0e17390528b99767 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 25 Jun 2024 23:30:08 +0300 Subject: make emoji picker more scalable --- src/components/emoji_picker/emoji_picker.scss | 48 ++++++++++++--------------- 1 file changed, 22 insertions(+), 26 deletions(-) (limited to 'src/components/emoji_picker/emoji_picker.scss') diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 5602a16b..1a75469e 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -1,8 +1,3 @@ -$emoji-picker-header-height: 36px; -$emoji-picker-header-picture-width: 32px; -$emoji-picker-header-picture-height: 32px; -$emoji-picker-emoji-size: 32px; - .emoji-picker { width: 25em; max-width: calc(100vw - 20px); // popover gives 10px margin from window edge @@ -13,10 +8,10 @@ $emoji-picker-emoji-size: 32px; display: inline-flex; justify-content: center; align-items: center; - width: $emoji-picker-header-picture-width; - max-width: $emoji-picker-header-picture-width; - height: $emoji-picker-header-picture-height; - max-height: $emoji-picker-header-picture-height; + width: var(--emoji-size); + max-width: var(--emoji-size); + height: var(--emoji-size); + max-height: var(--emoji-size); .still-image { max-width: 100%; @@ -30,7 +25,7 @@ $emoji-picker-emoji-size: 32px; .keep-open, .too-many-emoji, .hide-custom-emoji { - padding: 7px; + padding: 0.5em; line-height: normal; } @@ -44,13 +39,13 @@ $emoji-picker-emoji-size: 32px; } .keep-open-label { - padding: 0 7px; + padding: 0 0.5em; display: flex; } .heading { display: flex; - padding: 10px 7px 5px; + padding: 10px 0.5em 0.3em; } .content { @@ -71,7 +66,7 @@ $emoji-picker-emoji-size: 32px; display: flex; border-left: 1px solid; border-left-color: var(--border); - padding-left: 7px; + padding-left: 0.5em; flex: 0 0 auto; } @@ -82,13 +77,13 @@ $emoji-picker-emoji-size: 32px; align-content: center; &-item { - padding: 0 7px; + padding: 0 0.5em; cursor: pointer; font-size: 1.85em; - width: $emoji-picker-header-picture-width; - max-width: $emoji-picker-header-picture-width; - height: $emoji-picker-header-picture-height; - max-height: $emoji-picker-header-picture-height; + width: var(--emoji-size); + max-width: var(--emoji-size); + height: var(--emoji-size); + max-height: var(--emoji-size); display: flex; align-items: center; @@ -98,7 +93,7 @@ $emoji-picker-emoji-size: 32px; } &.toggled { - border-bottom: 4px solid; + border-bottom: 0.2em solid; } } } @@ -125,7 +120,7 @@ $emoji-picker-emoji-size: 32px; .emoji { &-search { - padding: 5px; + padding: 0.3em; flex: 0 0 auto; input { @@ -139,6 +134,7 @@ $emoji-picker-emoji-size: 32px; flex: 1 1 1px; position: relative; overflow: auto; + scrollbar-gutter: stable both-edges; user-select: none; mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat, @@ -165,13 +161,13 @@ $emoji-picker-emoji-size: 32px; display: flex; align-items: center; flex-wrap: wrap; - padding-left: 5px; justify-content: left; &-title { font-size: 0.85em; width: 100%; margin: 0; + padding-left: 0.3em; &.disabled { display: none; @@ -180,14 +176,14 @@ $emoji-picker-emoji-size: 32px; } &-item { - width: $emoji-picker-emoji-size; - height: $emoji-picker-emoji-size; + width: var(--emoji-size); + height: var(--emoji-size); box-sizing: border-box; display: flex; - line-height: $emoji-picker-emoji-size; + line-height: var(--emoji-size); align-items: center; justify-content: center; - margin: 4px; + margin: 0.2em; cursor: pointer; .emoji-picker-emoji.-custom { @@ -197,7 +193,7 @@ $emoji-picker-emoji-size: 32px; } .emoji-picker-emoji.-unicode { - font-size: 24px; + font-size: 20.2em; overflow: hidden; } } -- cgit v1.2.3-70-g09d2 From 1e0d75782fc8b5baaf3ac982da1a2d02382d8bca Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 26 Jun 2024 00:02:45 +0300 Subject: Made the packs scroller a lot more bearable --- src/components/emoji_picker/emoji_picker.scss | 45 +++++++++++++++++---------- 1 file changed, 29 insertions(+), 16 deletions(-) (limited to 'src/components/emoji_picker/emoji_picker.scss') diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 1a75469e..9e5ddbce 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -1,4 +1,6 @@ .emoji-picker { + --__emoji-picker-header: 2.2em; + width: 25em; max-width: calc(100vw - 20px); // popover gives 10px margin from window edge display: flex; @@ -8,17 +10,19 @@ display: inline-flex; justify-content: center; align-items: center; - width: var(--emoji-size); - max-width: var(--emoji-size); - height: var(--emoji-size); - max-height: var(--emoji-size); + width: var(--__emoji-picker-header); + max-width: var(--__emoji-picker-header); + height: var(--__emoji-picker-header); + max-height: var(--__emoji-picker-header); .still-image { - max-width: 100%; - max-height: 100%; - height: 100%; - width: 100%; + width: var(--__emoji-picker-header); + max-width: var(--__emoji-picker-header); + height: var(--__emoji-picker-header); + max-height: var(--__emoji-picker-header); object-fit: contain; + + --_still_image-label-scale: 0.5; } } @@ -45,7 +49,7 @@ .heading { display: flex; - padding: 10px 0.5em 0.3em; + padding: 0.7em 0.5em 0; } .content { @@ -60,6 +64,7 @@ display: flex; flex-flow: row nowrap; overflow-x: auto; + overflow-y: hidden; } .additional-tabs { @@ -75,18 +80,22 @@ flex-basis: auto; display: flex; align-content: center; + scrollbar-width: thin; &-item { padding: 0 0.5em; cursor: pointer; - font-size: 1.85em; - width: var(--emoji-size); - max-width: var(--emoji-size); - height: var(--emoji-size); - max-height: var(--emoji-size); + width: var(--__emoji-picker-header); + max-width: var(--__emoji-picker-header); + height: var(--__emoji-picker-header); + max-height: var(--__emoji-picker-header); display: flex; align-items: center; + .svg-inline--fa { + font-size: 1.85em; + } + &.disabled { opacity: 0.5; pointer-events: none; @@ -188,8 +197,12 @@ .emoji-picker-emoji.-custom { object-fit: contain; - max-width: 100%; - max-height: 100%; + width: var(--emoji-size); + max-width: var(--emoji-size); + height: var(--emoji-size); + max-height: var(--emoji-size); + + --_still_image-label-scale: 0.5; } .emoji-picker-emoji.-unicode { -- cgit v1.2.3-70-g09d2 From a664cf352d78caefb5be7b82d8bf6b282702d9a3 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 26 Jun 2024 02:21:16 +0300 Subject: fix unicode emoji --- src/components/emoji_picker/emoji_picker.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/emoji_picker/emoji_picker.scss') diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 9e5ddbce..12c09388 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -206,7 +206,7 @@ } .emoji-picker-emoji.-unicode { - font-size: 20.2em; + font-size: 1.6em; overflow: hidden; } } -- cgit v1.2.3-70-g09d2