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

better picker layout

Browse source
This commit is contained in:
Henry Jameson 2024-12-24 11:11:49 +02:00
parent 1f7fa777b2
commit 761ca72136
2 changed files with 14 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -49,6 +49,7 @@
.heading {
display: flex;
flex-direction: column;
padding: 0.7em 0.5em 0;
}
@ -129,7 +130,7 @@
.emoji {
&-search {
padding: 0.3em;
padding-bottom: 0.5em;
flex: 0 0 auto;
input {
@ -196,9 +197,9 @@
&-group {
display: grid;
grid-template-columns: repeat(var(--__amount), 1fr);
justify-items: center;
align-items: center;
justify-content: left;
justify-items: center;
justify-content: center;
grid-template-rows: repeat(1, auto);
&.first-row {

20
src/components/emoji_picker/emoji_picker.vue
View file

@ -11,6 +11,16 @@
<div
class="heading"
>
<div class="emoji-search">
<input
ref="search"
v-model="keyword"
type="text"
class="input form-control"
:placeholder="$t('emoji.search_emoji')"
@input="$event.target.composing = false"
>
</div>
<!--
Body scroll lock needs to be on every scrollable element on safari iOS.
Here we tell it to enable scrolling for this element.
@ -75,16 +85,6 @@
class="emoji-content"
:class="{hidden: showingStickers}"
>
<div class="emoji-search">
<input
ref="search"
v-model="keyword"
type="text"
class="input form-control"
:placeholder="$t('emoji.search_emoji')"
@input="$event.target.composing = false"
>
</div>
<!-- Enables scrolling for this element on safari iOS. See comments for header. -->
<DynamicScroller
ref="emoji-groups"