5 files changed, 89 insertions, 55 deletions

diff --git a/web/app/view/MainMobile.js b/web/app/view/MainMobile.js
index e3e67426..2659e2fb 100644
--- a/web/app/view/MainMobile.js
+++ b/web/app/view/MainMobile.js
@@ -19,40 +19,49 @@ Ext.define('Traccar.view.MainMobile', {
     extend: 'Ext.container.Viewport',
     alias: 'widget.mainMobile',
 
+    id: 'rootPanel',
+
     requires: [
         'Traccar.view.Devices',
         'Traccar.view.State',
         'Traccar.view.Map'
     ],
 
-    layout: 'border',
-
-    defaults: {
-        header: false,
-        collapsible: true,
-        split: true
-    },
+    layout: 'card',
 
     items: [{
-        region: 'east',
-        xtype: 'stateView',
-        title: Strings.stateTitle,
-        flex: 4,
-        collapsed: true,
-        titleCollapse: true,
-        floatable: false
-    }, {
-        region: 'center',
-        xtype: 'mapView',
-        collapsible: false,
-        flex: 2
+        layout: 'border',
+
+        defaults: {
+            header: false,
+            collapsible: true,
+            split: true
+        },
+
+        items: [{
+            region: 'east',
+            xtype: 'stateView',
+            title: Strings.stateTitle,
+            flex: 4,
+            collapsed: true,
+            collapseMode: 'mini',
+            titleCollapse: true,
+            floatable: false
+        }, {
+            region: 'center',
+            xtype: 'mapView',
+            collapsible: false,
+            flex: 2
+        }, {
+            region: 'south',
+            xtype: 'devicesView',
+            title: Strings.deviceTitle,
+            flex: 1,
+            collapsed: true,
+            titleCollapse: true,
+            floatable: false
+        }]
     }, {
-        region: 'south',
-        xtype: 'devicesView',
-        title: Strings.deviceTitle,
-        flex: 1,
-        collapsed: true,
-        titleCollapse: true,
-        floatable: false
+        xtype: 'reportView'
     }]
 });
diff --git a/web/app/view/Map.js b/web/app/view/Map.js
index b9f3498a..dc3245e5 100644
--- a/web/app/view/Map.js
+++ b/web/app/view/Map.js
@@ -37,6 +37,13 @@ Ext.define('Traccar.view.Map', {
         }, {
             xtype: 'button',
             tooltipType: 'title',
+            handler: 'showReports',
+            reference: 'showReportsButton',
+            glyph: 'xf0f6@FontAwesome',
+            tooltip: Strings.sharedGeofences
+        }, {
+            xtype: 'button',
+            tooltipType: 'title',
             handler: 'showGeofences',
             reference: 'showGeofencesButton',
             glyph: 'xf21d@FontAwesome',
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js
index 323f29da..32ea6b05 100644
--- a/web/app/view/MapController.js
+++ b/web/app/view/MapController.js
@@ -67,6 +67,11 @@ Ext.define('Traccar.view.MapController', {
         this.reportMarkers = {};
         this.liveRoutes = {};
         this.liveRouteLength = Traccar.app.getAttributePreference('web.liveRouteLength', 10);
+        this.lookupReference('showReportsButton').setVisible(Traccar.app.isMobile());
+    },
+
+    showReports: function() {
+        Traccar.app.showReports(true);
     },
 
     getDeviceColor: function (device) {
diff --git a/web/app/view/Report.js b/web/app/view/Report.js
index 2854f1ef..f9b79ad6 100644
--- a/web/app/view/Report.js
+++ b/web/app/view/Report.js
@@ -27,37 +27,46 @@ Ext.define('Traccar.view.Report', {
 
     title: Strings.reportTitle,
 
-    tbar: [{
-        xtype: 'tbtext',
-        html: Strings.sharedType
-    }, {
-        xtype: 'combobox',
-        reference: 'reportTypeField',
-        store: 'ReportTypes',
-        displayField: 'name',
-        valueField: 'key',
-        editable: false,
-        listeners: {
-            change: 'onTypeChange'
-        }
-    }, '-', {
-        text: Strings.reportConfigure,
-        handler: 'onConfigureClick'
-    }, '-', {
-        text: Strings.reportShow,
-        reference: 'showButton',
-        disabled: true,
-        handler: 'onReportClick'
-    }, {
-        text: Strings.reportExport,
-        reference: 'exportButton',
-        disabled: true,
-        handler: 'onReportClick'
-    }, {
-        text: Strings.reportClear,
-        handler: 'onClearClick'
+    tools: [{
+        type: 'close',
+        tooltip: Strings.sharedHide,
+        handler: 'hideReports'
     }],
 
+    tbar: {
+        scrollable: true,
+        items: [{
+            xtype: 'tbtext',
+            html: Strings.sharedType
+        }, {
+            xtype: 'combobox',
+            reference: 'reportTypeField',
+            store: 'ReportTypes',
+            displayField: 'name',
+            valueField: 'key',
+            editable: false,
+            listeners: {
+                change: 'onTypeChange'
+            }
+        }, '-', {
+            text: Strings.reportConfigure,
+            handler: 'onConfigureClick'
+        }, '-', {
+            text: Strings.reportShow,
+            reference: 'showButton',
+            disabled: true,
+            handler: 'onReportClick'
+        }, {
+            text: Strings.reportExport,
+            reference: 'exportButton',
+            disabled: true,
+            handler: 'onReportClick'
+        }, {
+            text: Strings.reportClear,
+            handler: 'onClearClick'
+        }]
+    },
+
     listeners: {
         selectionchange: 'onSelectionChange'
     }
diff --git a/web/app/view/ReportController.js b/web/app/view/ReportController.js
index 6076b47c..67fcf121 100644
--- a/web/app/view/ReportController.js
+++ b/web/app/view/ReportController.js
@@ -41,6 +41,10 @@ Ext.define('Traccar.view.ReportController', {
         }
     },
 
+    hideReports: function() {
+        Traccar.app.showReports(false);
+    },
+
     onConfigureClick: function () {
         var dialog = Ext.create('Traccar.view.ReportConfigDialog');
         dialog.lookupReference('eventTypeField').setHidden(this.lookupReference('reportTypeField').getValue() !== 'events');