fix: Fix ios design issues (#1199)

* 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
2019-05-09 16:34:28 +02:00 · 2019-05-09 16:34:28 +02:00 · db0f5bf237
parent 4432d49467
commit db0f5bf237
4 changed files with 16 additions and 2 deletions
--- a/src/build/template.html
+++ b/src/build/template.html
@ -2,7 +2,7 @@
 <html lang="en">
 <head>
  <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 name="description" content="An alternative web client for Mastodon, focused on speed and simplicity." >

--- a/src/routes/_components/snackbar/Snackbar.html
+++ b/src/routes/_components/snackbar/Snackbar.html
@ -32,13 +32,27 @@
    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 {
    width: 562px; /* same as .main, minus 20px padding */
    overflow: hidden;
    display: flex;
    align-items: center;
    background: var(--toast-bg);
-    padding: 10px 20px;
+    padding: 10px 20px calc(10px + var(--safe-area-inset-bottom)) 20px;
    font-size: 1.3em;
    color: var(--toast-text);
    border-radius: 4px 4px 0 0;
--- a/static/apple-icon-120.png
+++ b/static/apple-icon-120.png
--- a/static/apple-icon-180.png
+++ b/static/apple-icon-180.png