notfire/Iceshrimp.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[frontend/components] Add mobile styling to menu and emoji picker

Browse source
This commit is contained in:
pancakes 2025-02-06 22:11:19 +10:00 • committed by Laura Hausmann
parent 78078cac9b
commit 685cb7d0b9
No known key found for this signature in database
GPG key ID: D044E84C5BE01605
3 changed files with 35 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
Iceshrimp.Frontend/Components/EmojiPicker.razor.css
View file

@ -38,7 +38,20 @@ summary {
padding: 0;
}
@media (max-width: 640px) {
@media (max-width: 1000px) {
.emoji-picker {
top: unset;
left: 0;
bottom: 0;
position: fixed;
width: 100vw;
max-width: 100vw;
max-height: 30rem;
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.emoji-list {
gap: 0.2rem;
margin: 0.5rem 0;

15
Iceshrimp.Frontend/Components/Menu.razor.css
View file

@ -12,3 +12,18 @@
left: calc(var(--left) - 7.5rem);
z-index: +2;
}
@media (max-width: 1000px) {
.menu {
top: unset;
bottom: 0;
left: 0;
position: fixed;
width: 100vw;
max-width: 100vw;
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
z-index: +26;
}
}

6
Iceshrimp.Frontend/Components/MenuElement.razor.css
View file

@ -14,3 +14,9 @@
.menu-element:hover {
background-color: var(--hover-color);
}
@media (max-width: 1000px) {
.menu-element + .menu-element {
margin-top: 1rem;
}
}