bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix EmojiSelector position on mobile

Browse source
This commit is contained in:
Alex Gleason 2020-05-23 12:18:13 -05:00
parent 02228d41e5
commit c29d779bf5
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
3 changed files with 22 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/styles/gabsocial/components.scss
View file

@ -2713,7 +2713,6 @@ a.status-card.compact:hover {
.detailed-status__button { .detailed-status__button {
flex: 1 1 auto; flex: 1 1 auto;
text-align: center; text-align: center;
position: relative;
} }
.column-settings__outer { .column-settings__outer {

7
app/styles/gabsocial/components/detailed-status.scss
View file

@ -57,7 +57,6 @@
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 10px 0;
} }
.detailed-status__link { .detailed-status__link {
@ -76,6 +75,8 @@
} }
.detailed-status__button { .detailed-status__button {
padding: 10px 0;
.icon-button { .icon-button {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -87,3 +88,7 @@
} }
} }
} }
.detailed-status__wrapper {
position: relative;
}

17
app/styles/gabsocial/components/emoji-reacts.scss
View file

@ -56,7 +56,6 @@
.emoji-react-selector { .emoji-react-selector {
position: absolute; position: absolute;
bottom: 100%;
display: flex; display: flex;
background-color: #fff; background-color: #fff;
padding: 5px 8px; padding: 5px 8px;
@ -105,8 +104,24 @@
opacity: 1; opacity: 1;
pointer-events: all; pointer-events: all;
} }
@media(max-width: 455px) {
position: static;
}
}
.detailed-status__wrapper .emoji-react-selector {
bottom: 40px;
right: 10px;
} }
.status .emoji-react-selector { .status .emoji-react-selector {
bottom: 100%;
left: -20px; left: -20px;
@media(max-width: 455px) {
bottom: 31px;
right: 10px;
left: auto;
}
} }