data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

fix: Fix ios design issues (#1199)

Browse source 
* Take into account the layout weirdness on iPhones

This makes the menu bar full screen in landscape mode and allow the
snackbar to have enough bottom padding

* Improve the icon for PWA

fixes #1198
This commit is contained in:
sgenoud 2019-05-09 16:34:28 +02:00 committed by Nolan Lawson
parent 4432d49467
commit db0f5bf237
4 changed files with 16 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/build/template.html
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" > <meta name="viewport" content="width=device-width, viewport-fit=cover">
<meta id='theThemeColor' name='theme-color' content='#4169e1' > <meta id='theThemeColor' name='theme-color' content='#4169e1' >
<meta name="description" content="An alternative web client for Mastodon, focused on speed and simplicity." > <meta name="description" content="An alternative web client for Mastodon, focused on speed and simplicity." >

16
src/routes/_components/snackbar/Snackbar.html
View file

@ -32,13 +32,27 @@
transform: translateY(100%); transform: translateY(100%);
} }
/* For iOS < 11.2 */
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
.snackbar-container {
--safe-area-inset-bottom: constant(safe-area-inset-bottom);
}
}
/* For iOS >= 11.2 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.snackbar-container {
--safe-area-inset-bottom: env(safe-area-inset-bottom);
}
}
.snackbar-container { .snackbar-container {
width: 562px; /* same as .main, minus 20px padding */ width: 562px; /* same as .main, minus 20px padding */
overflow: hidden; overflow: hidden;
display: flex; display: flex;
align-items: center; align-items: center;
background: var(--toast-bg); background: var(--toast-bg);
padding: 10px 20px; padding: 10px 20px calc(10px + var(--safe-area-inset-bottom)) 20px;
font-size: 1.3em; font-size: 1.3em;
color: var(--toast-text); color: var(--toast-text);
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;

BIN
static/apple-icon-120.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
static/apple-icon-180.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB