9e04e4fd80
A simple virtual scroller is now used for the emoji grid. This avoids loading all emoji images at once, saving network bandwidth and reducing load on the server, while also putting less work on the browser's DOM and layout engine. Co-authored-by: yan <yan@omg.lol> Reviewed-on: https://akkoma.dev/AkkomaGang/akkoma-fe/pulls/275 Co-authored-by: yanchan09 <yan@omg.lol> Co-committed-by: yanchan09 <yan@omg.lol>
60 lines
1.2 KiB
SCSS
60 lines
1.2 KiB
SCSS
.emoji {
|
|
&-grid {
|
|
flex: 1 1 1px;
|
|
position: relative;
|
|
overflow: auto;
|
|
user-select: none;
|
|
mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
|
|
linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
|
|
linear-gradient(to top, white, white);
|
|
transition: mask-size 150ms;
|
|
mask-size: 100% 20px, 100% 20px, auto;
|
|
// Autoprefixed seem to ignore this one, and also syntax is different
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
&.scrolled {
|
|
&-top {
|
|
mask-size: 100% 20px, 100% 0, auto;
|
|
}
|
|
&-bottom {
|
|
mask-size: 100% 0, 100% 20px, auto;
|
|
}
|
|
}
|
|
margin-left: 5px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
&-group-title {
|
|
position: absolute;
|
|
font-size: 0.85em;
|
|
width: 100%;
|
|
margin: 0;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: end;
|
|
|
|
&.disabled {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&-item {
|
|
position: absolute;
|
|
width: 32px;
|
|
height: 32px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
font-size: 32px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 4px;
|
|
|
|
cursor: pointer;
|
|
|
|
img {
|
|
object-fit: contain;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
} |