Fix fullscreen layout on iOS

This commit is contained in:
Robin Linus 2016-01-01 18:06:27 +01:00
parent 2fd3da2920
commit 4e460089eb
5 changed files with 12 additions and 12 deletions

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);

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;
} }

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 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 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">

View file

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

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;
} }