Переглянути джерело

Fix fullscreen layout on iOS

Robin Linus 9 роки тому
батько
коміт
4e460089eb

+ 3 - 6
app/elements/buddy-finder/buddy-finder.html

@@ -11,9 +11,6 @@
             @apply(--layout-fit);
             @apply(--layout-horizontal);
             @apply(--layout-center-center);
-            overflow: hidden;
-            position: relative;
-            height: 100%;
             -webkit-user-select: none;
             -moz-user-select: none;
             -ms-user-select: none;
@@ -40,12 +37,12 @@
             @apply(--paper-font-headline);
             color: #4285f4;
             text-align: center;
-                cursor: default;
+            cursor: default;
         }
         
         .short {
             font-size: 14px;
-            line-height: 18px;
+            line-height: 20px;
             color: #505050;
         }
         
@@ -63,7 +60,7 @@
                 width: 340px;
             }
         }
-
+        
         [only] {
             @apply(--layout-fit);
             @apply(--layout-horizontal);

+ 1 - 1
app/elements/buddy-finder/personal-avatar.html

@@ -8,7 +8,7 @@
             @apply(--layout-center);
             width: 360px;
             position: absolute;
-            bottom: 24px;
+            bottom: 16px;
             left: 50%;
             margin-left: -180px;
         }

+ 4 - 4
app/index.html

@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="description" content="Snapdrop is the easiest way to send files accross devices">
-    <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1">
+    <meta name="viewport" content="width=device-width initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <meta name="generator" content="Snapdrop">
     <title>Snapdrop</title>
     <link rel="shortcut icon" href="favicon.ico?v=2" />
@@ -20,8 +20,8 @@
     <meta name="application-name" content="PSK">
     <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
     <link rel="fluid-icon" type="image/png" href="images/touch/chrome-touch-icon-192x192.png">
-    <meta property="og:image" content="https://snapdrop.net/images/touch/chrome-touch-icon-192x192.png"/>
-    <meta name="twitter:image" content="https://snapdrop.net/images/touch/chrome-touch-icon-192x192.png"/>
+    <meta property="og:image" content="https://snapdrop.net/images/touch/chrome-touch-icon-192x192.png" />
+    <meta name="twitter:image" content="https://snapdrop.net/images/touch/chrome-touch-icon-192x192.png" />
     <!-- Add to homescreen for Safari on iOS -->
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
@@ -43,7 +43,7 @@
     </script>
 </head>
 
-<body class="fullbleed layout vertical" loading>
+<body class="layout vertical">
     <script src="scripts/animated-bg.js" inline></script>
     <span id="browser-sync-binding"></span>
     <template is="dom-bind" id="app">

+ 1 - 1
app/styles/app-theme.html

@@ -29,6 +29,6 @@ paper-progress {
     top: 0;
 }
 neon-animated-pages{
-    height: 100%;
+    height: 100vh;
 }
 </style>

+ 3 - 0
app/styles/main.css

@@ -2,6 +2,8 @@ html,
 body {
     height: 100%;
     width: 100%;
+    padding: 0;
+    margin: 0;
 }
 
 body {
@@ -9,4 +11,5 @@ body {
     font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     color: #333;
     -webkit-font-smoothing: antialiased;
+    overflow-x: hidden;
 }