aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2015-08-10 16:47:04 +1200
committerAnton Tananaev <anton.tananaev@gmail.com>2015-08-10 16:47:04 +1200
commitd479ed01a1aeb624f226bc6b91fffedea28366f1 (patch)
tree80b91157ef1833f52fad02e5cf942fb52d7f9e42
parent9419d4099006da44ed357f7b6bdc46bbad5bd1ce (diff)
downloadtraccar-server-d479ed01a1aeb624f226bc6b91fffedea28366f1.tar.gz
traccar-server-d479ed01a1aeb624f226bc6b91fffedea28366f1.tar.bz2
traccar-server-d479ed01a1aeb624f226bc6b91fffedea28366f1.zip
Implement mobile web layout
-rw-r--r--web/app/controller/Root.js16
-rw-r--r--web/app/view/main/MainMobile.js45
-rw-r--r--web/debug.html4
-rw-r--r--web/release.html4
4 files changed, 67 insertions, 2 deletions
diff --git a/web/app/controller/Root.js b/web/app/controller/Root.js
index 4b9a817ef..7ad8dacc2 100644
--- a/web/app/controller/Root.js
+++ b/web/app/controller/Root.js
@@ -20,8 +20,16 @@ Ext.define('Traccar.controller.Root', {
requires: [
'Traccar.LoginManager',
'Traccar.view.login.Login',
- 'Traccar.view.main.Main'
+ 'Traccar.view.main.Main',
+ 'Traccar.view.main.MainMobile'
],
+
+ init: function() {
+ var indicator = document.createElement('div');
+ indicator.className = 'state-indicator';
+ document.body.appendChild(indicator);
+ isPhone = parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'), 10);
+ },
onLaunch: function () {
Traccar.LoginManager.server({
@@ -59,7 +67,11 @@ Ext.define('Traccar.controller.Root', {
loadApp: function() {
Ext.getStore('Devices').load();
Ext.getBody().empty();
- Ext.create('Traccar.view.main.Main');
+ if (isPhone) {
+ Ext.create('Traccar.view.main.MainMobile');
+ } else {
+ Ext.create('Traccar.view.main.Main');
+ }
}
});
diff --git a/web/app/view/main/MainMobile.js b/web/app/view/main/MainMobile.js
new file mode 100644
index 000000000..f32ad9fb1
--- /dev/null
+++ b/web/app/view/main/MainMobile.js
@@ -0,0 +1,45 @@
+/*
+ * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+Ext.define('Traccar.view.main.MainMobile', {
+ extend: 'Ext.container.Viewport',
+
+ requires: [
+ 'Traccar.view.device.Device',
+ 'Traccar.view.map.Map'
+ ],
+
+ layout: 'border',
+
+ defaults: {
+ collapsible: true,
+ split: true
+ },
+
+ items: [{
+ collapsible: false,
+ region: 'center',
+ xtype: 'mapView',
+ header: false,
+ flex: 2
+ }, {
+ region: 'south',
+ xtype: 'deviceView',
+ header: false,
+ flex: 1
+ }]
+
+});
diff --git a/web/debug.html b/web/debug.html
index 615f9c9e6..811451315 100644
--- a/web/debug.html
+++ b/web/debug.html
@@ -4,6 +4,10 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Traccar</title>
+<style>
+.state-indicator { position: absolute; top: -999em; left: -999em; z-index: 0; }
+@media all and (max-width: 768px) { .state-indicator { z-index: 1; } }
+</style>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
diff --git a/web/release.html b/web/release.html
index 110b17d11..9b10b9d7f 100644
--- a/web/release.html
+++ b/web/release.html
@@ -4,6 +4,10 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Traccar</title>
+<style>
+.state-indicator { position: absolute; top: -999em; left: -999em; z-index: 0; }
+@media all and (max-width: 768px) { .state-indicator { z-index: 1; } }
+</style>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">