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

ThumbNavigation: probably fix padding for iOS PWA

Browse source
This commit is contained in:
Alex Gleason 2021-09-22 11:25:35 -05:00
parent 165b924ce7
commit 0e2e2e38d0
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
4 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/styles/chats.scss
View file

@ -365,7 +365,7 @@
.chat-box { .chat-box {
border-radius: 0; border-radius: 0;
border: 2px solid var(--foreground-color); border: 2px solid var(--foreground-color);
margin-bottom: 61px; margin-bottom: var(--thumb-navigation-height);
&__actions { &__actions {
padding: 0; padding: 0;

5
app/styles/navigation.scss
View file

@ -50,13 +50,14 @@
left: 0; left: 0;
right: 0; right: 0;
width: 100%; width: 100%;
height: 60px; height: var(--thumb-navigation-base-height);
display: flex; display: flex;
background: var(--foreground-color); background: var(--foreground-color);
justify-content: space-around; justify-content: space-around;
border-top: 1px solid hsla(var(--primary-text-color_hsl), 0.2); box-shadow: 0 -1px hsla(var(--primary-text-color_hsl), 0.2);
border-radius: 0; border-radius: 0;
z-index: 999; z-index: 999;
padding-bottom: env(safe-area-inset-bottom); /* iOS PWA */
&__link { &__link {
padding: 10px; padding: 10px;

2
app/styles/ui.scss
View file

@ -354,7 +354,7 @@
z-index: 1000; z-index: 1000;
display: none; display: none;
position: fixed; position: fixed;
bottom: 74px; bottom: calc(var(--thumb-navigation-height) + 14px);
right: 14px; right: 14px;
width: 58px; width: 58px;
height: 58px; height: 58px;

8
app/styles/variables.scss
View file

@ -34,3 +34,11 @@ $media-modal-media-max-width: 100%;
$media-modal-media-max-height: 80%; $media-modal-media-max-height: 80%;
$no-gap-breakpoint: 415px; $no-gap-breakpoint: 415px;
// CSS variables
// NOTE: Prefer CSS variables whenever possible.
// They're future-proof and more flexible.
:root {
--thumb-navigation-base-height: 60px;
--thumb-navigation-height: calc(var(--thumb-navigation-base-height) + env(safe-area-inset-bottom));
}