qugalet/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Made the packs scroller a lot more bearable

Browse source
This commit is contained in:
Henry Jameson 2024-06-26 00:02:45 +03:00
parent 8981448448
commit 1e0d75782f
1 changed files with 29 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/components/emoji_picker/emoji_picker.scss
View file

@ -1,4 +1,6 @@
.emoji-picker { .emoji-picker {
--__emoji-picker-header: 2.2em;
width: 25em; width: 25em;
max-width: calc(100vw - 20px); // popover gives 10px margin from window edge max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
display: flex; display: flex;
@ -8,17 +10,19 @@
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: var(--emoji-size); width: var(--__emoji-picker-header);
max-width: var(--emoji-size); max-width: var(--__emoji-picker-header);
height: var(--emoji-size); height: var(--__emoji-picker-header);
max-height: var(--emoji-size); max-height: var(--__emoji-picker-header);
.still-image { .still-image {
max-width: 100%; width: var(--__emoji-picker-header);
max-height: 100%; max-width: var(--__emoji-picker-header);
height: 100%; height: var(--__emoji-picker-header);
width: 100%; max-height: var(--__emoji-picker-header);
object-fit: contain; object-fit: contain;
--_still_image-label-scale: 0.5;
} }
} }
@ -45,7 +49,7 @@
.heading { .heading {
display: flex; display: flex;
padding: 10px 0.5em 0.3em; padding: 0.7em 0.5em 0;
} }
.content { .content {
@ -60,6 +64,7 @@
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden;
} }
.additional-tabs { .additional-tabs {
@ -75,18 +80,22 @@
flex-basis: auto; flex-basis: auto;
display: flex; display: flex;
align-content: center; align-content: center;
scrollbar-width: thin;
&-item { &-item {
padding: 0 0.5em; padding: 0 0.5em;
cursor: pointer; cursor: pointer;
font-size: 1.85em; width: var(--__emoji-picker-header);
width: var(--emoji-size); max-width: var(--__emoji-picker-header);
max-width: var(--emoji-size); height: var(--__emoji-picker-header);
height: var(--emoji-size); max-height: var(--__emoji-picker-header);
max-height: var(--emoji-size);
display: flex; display: flex;
align-items: center; align-items: center;
.svg-inline--fa {
font-size: 1.85em;
}
&.disabled { &.disabled {
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
@ -188,8 +197,12 @@
.emoji-picker-emoji.-custom { .emoji-picker-emoji.-custom {
object-fit: contain; object-fit: contain;
max-width: 100%; width: var(--emoji-size);
max-height: 100%; max-width: var(--emoji-size);
height: var(--emoji-size);
max-height: var(--emoji-size);
--_still_image-label-scale: 0.5;
} }
.emoji-picker-emoji.-unicode { .emoji-picker-emoji.-unicode {