mirror_maker
/
soapbox
mirror of https://gitlab.com/soapbox-pub/soapbox
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

iOS: improve PWA support

Browse Source 
Fixes: https://gitlab.com/soapbox-pub/soapbox-fe/-/issues/747
merge-requests/782/head
Alex Gleason 3 years ago
parent f8065543f2
commit 9a660e8363
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
5 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File

2
app/index.ejs
Unescape View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<!--server-generated-meta--> <!--server-generated-meta-->

9
app/styles/components/account-header.scss
Unescape View File

@ -12,6 +12,7 @@
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 10px; left: 10px;
left: max(10px, env(safe-area-inset-left));
z-index: 1; z-index: 1;
} }
@ -19,6 +20,7 @@
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
right: max(10px, env(safe-area-inset-right));
z-index: 1; z-index: 1;
.subscription-button { .subscription-button {
@ -149,6 +151,7 @@
@media screen and (max-width: 895px) { @media screen and (max-width: 895px) {
top: -45px; top: -45px;
left: 20px; left: 20px;
left: max(20px + env(safe-area-inset-left));
height: 90px; height: 90px;
width: 90px; width: 90px;
@ -178,7 +181,11 @@
@media screen and (max-width: 895px) { @media screen and (max-width: 895px) {
max-width: 900px; max-width: 900px;
padding: 10px 10px 0; padding-top: 10px;
padding-left: 10px;
padding-left: max(10px, env(safe-area-inset-left));
padding-right: 10px;
padding-right: max(10px, env(safe-area-inset-right));
flex-direction: column-reverse; flex-direction: column-reverse;
min-height: 50px; min-height: 50px;
} }

7
app/styles/components/modal.scss
Unescape View File

@ -685,6 +685,8 @@
display: flex; display: flex;
position: relative; position: relative;
padding: 10px 0; padding: 10px 0;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2); border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -704,7 +706,8 @@
&__close { &__close {
position: absolute; position: absolute;
right: 10px; right: 10px;
color: #999; right: max(10px, env(safe-area-inset-right));
color: var(--primary-text-color--faint);
} }
&__content { &__content {
@ -712,6 +715,8 @@
flex-direction: row; flex-direction: row;
flex: 1; flex: 1;
padding: 10px; padding: 10px;
padding-left: max(10px, env(safe-area-inset-left));
padding-right: max(10px, env(safe-area-inset-right));
overflow-y: hidden; overflow-y: hidden;
&--scroll { &--scroll {

5
app/styles/components/tabs-bar.scss
Unescape View File

@ -24,7 +24,10 @@
width: 100%; width: 100%;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 15px; padding-left: 15px;
padding-left: max(15px, env(safe-area-inset-left));
padding-right: 15px;
padding-right: max(15px, env(safe-area-inset-right));
// NOTE - might need to adjust this based on column sizing // NOTE - might need to adjust this based on column sizing
@media screen and (max-width: $nav-breakpoint-4) { padding: 0 10px; } @media screen and (max-width: $nav-breakpoint-4) { padding: 0 10px; }

1
app/styles/emoji_picker.scss
Unescape View File

@ -261,6 +261,7 @@
background: var(--foreground-color); background: var(--foreground-color);
position: absolute; position: absolute;
margin-top: 5px; margin-top: 5px;
transform: translateX(calc(-1 * env(safe-area-inset-right))); /* iOS PWA */
z-index: 20000; z-index: 20000;
.emoji-mart-scroll { .emoji-mart-scroll {

Write Preview
Loading…
Cancel
Save