Home Explore Help
Sign In
rootless
/
snapdrop
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Fix fullscreen layout on iOS

Robin Linus 9 years ago
parent
2fd3da2920
commit
4e460089eb
5 changed files with 12 additions and 12 deletions
Unified View Show Diff Stats
  1. 3 6
      app/elements/buddy-finder/buddy-finder.html
  2. 1 1
      app/elements/buddy-finder/personal-avatar.html
  3. 4 4
      app/index.html
  4. 1 1
      app/styles/app-theme.html
  5. 3 0
      app/styles/main.css

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

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

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

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

+ 4 - 4
app/index.html
View File 

@@ -4,7 +4,7 @@
 
 <head>
 
 <head>
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
     <meta name="description" content="Snapdrop is the easiest way to send files accross devices">
 
     <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">
 
     <meta name="generator" content="Snapdrop">
 
     <title>Snapdrop</title>
 
     <title>Snapdrop</title>
 
     <link rel="shortcut icon" href="favicon.ico?v=2" />
 
     <link rel="shortcut icon" href="favicon.ico?v=2" />
 
@@ -20,8 +20,8 @@
 
     <meta name="application-name" content="PSK">
 
     <meta name="application-name" content="PSK">
 
     <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
 
     <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">
 
     <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 -->
 
     <!-- Add to homescreen for Safari on iOS -->
 
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
@@ -43,7 +43,7 @@
 
     </script>
 
     </script>
 
 </head>
 
 </head>
 
 
 
-<body class="fullbleed layout vertical" loading>
 
+<body class="layout vertical">
 
     <script src="scripts/animated-bg.js" inline></script>
 
     <script src="scripts/animated-bg.js" inline></script>
 
     <span id="browser-sync-binding"></span>
 
     <span id="browser-sync-binding"></span>
 
     <template is="dom-bind" id="app">
 
     <template is="dom-bind" id="app">

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

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

+ 3 - 0
app/styles/main.css
View File 

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