1
0
mirror of https://github.com/moparisthebest/mail synced 2024-11-26 19:02:20 -05:00

add responsive tweeks and create two main html for ios and chrome

This commit is contained in:
Tankred Hase 2013-10-16 14:03:13 +02:00
parent 00e651a3fa
commit 8a37d6b10e
6 changed files with 41 additions and 9 deletions

View File

@ -1,7 +1,7 @@
'use strict';
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
chrome.app.window.create('chrome.html', {
'bounds': {
'width': 1024,
'height': 768

19
src/chrome.html Normal file
View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html ng-app="mail" ng-csp>
<head>
<meta charset="utf-8">
<title>Mail</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="all" href="css/all.css" type="text/css">
<!-- The Scripts -->
<script src="lib/require.js"></script>
<script src="require-config.js"></script>
<script src="js/app.js"></script>
</head>
<body key-shortcuts>
<div ng-view class="main-app-view"></div>
</body>
</html>

7
src/index.html → src/ios.html Executable file → Normal file
View File

@ -2,12 +2,12 @@
<html ng-app="mail" ng-csp>
<head>
<meta charset="utf-8">
<title>Mail</title>
<!-- Theses CSP rules are used as a fallback in runtimes such as PhoneGap where setting http headers is not possbile. They get overidden if http headers are set, or in the case of chrome packaged apps. -->
<meta http-equiv="X-WebKit-CSP" content="default-src 'self'; object-src 'none'; connect-src *; style-src 'self' data: chrome-extension-resource: 'unsafe-inline'; img-src 'self' data: chrome-extension-resource:; frame-src 'self' data: chrome-extension-resource:; font-src 'self' data: chrome-extension-resource:; media-src *;">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; object-src 'none'; connect-src *; style-src 'self' data: chrome-extension-resource: 'unsafe-inline'; img-src 'self' data: chrome-extension-resource:; frame-src 'self' data: chrome-extension-resource:; font-src 'self' data: chrome-extension-resource:; media-src *;">
<title>Mail</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="all" href="css/all.css" type="text/css">
@ -16,9 +16,8 @@
<script src="require-config.js"></script>
<script src="js/app.js"></script>
</head>
<body key-shortcuts>
<div ng-view class="main-app-view"></div>
<body>
<div ng-view class="main-app-view ios-spacer"></div>
</body>
</html>

View File

@ -33,7 +33,7 @@ define(function(require) {
$scope.write = function(replyTo) {
var replyToPath = (replyTo) ? encodeURIComponent($scope.currentFolder.path) + '/' + replyTo.uid : '',
url = 'index.html#/write/' + replyToPath;
url = 'chrome.html#/write/' + replyToPath;
if (window.chrome && chrome.app.window) {
chrome.app.window.create(url, {

View File

@ -34,6 +34,11 @@ textarea {
-moz-osx-font-smoothing: grayscale;
}
// add space at the top since ios7 apps are now fullscreen
.ios-spacer {
padding-top: 20px;
}
// Basic layout
.main-app-view {
height: 100%;

View File

@ -2,11 +2,20 @@
$padding-horizontal: 15px;
$padding-vertical: 10px;
float: left;
width: $content-nav-width;
background: $color-grey-lightest;
background-image: linear-gradient(to right ,$color-grey-lightest 98%, darken($color-grey-lightest, 1%) 100%);
border-right: 1px solid $color-grey-light;
// remove flickering on item touch selection in ios
* {
-webkit-tap-highlight-color: transparent !important;
}
width: 100%;
@include respond-to(desktop) {
float: left;
width: $content-nav-width;
border-right: 1px solid $color-grey-light;
}
header {