From 7c944b5aeb9a698640dd12f613736bda567763d9 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hn@stylite.de>
Date: Mon, 16 Nov 2015 15:45:04 +0000
Subject: [PATCH] Mobile theme W.I.P.: - Sidebar acts based on device size -
 Remove portrait top header (sidebar toggle menu will be positioned next to nm
 header) - Remove collapsed sidebar application navigator, only for devices

---
 home/inc/class.home_tutorial_ui.inc.php  |   1 +
 infolog/inc/class.infolog_hooks.inc.php  |   2 +-
 mail/inc/class.mail_hooks.inc.php        |   2 +-
 mail/inc/class.mail_ui.inc.php           |   1 +
 mail/templates/default/app.css           |   6 +
 mail/templates/default/mobile_index.xet  |  45 +--
 mail/templates/pixelegg/app.css          |   6 +
 phpgwapi/inc/class.egw_framework.inc.php |   2 +-
 phpgwapi/inc/class.hooks.inc.php         |   1 +
 phpgwapi/js/framework/fw_base.js         |  37 +-
 phpgwapi/js/login.js                     |   3 +
 pixelegg/css/mobile.css                  | 419 ++++++++++++++++-----
 pixelegg/css/mobile.less                 | 457 +++++++++++++++++++----
 pixelegg/head_mobile.tpl                 |   2 +-
 pixelegg/login_mobile.tpl                |  75 ++++
 15 files changed, 853 insertions(+), 206 deletions(-)
 create mode 100644 pixelegg/login_mobile.tpl

diff --git a/home/inc/class.home_tutorial_ui.inc.php b/home/inc/class.home_tutorial_ui.inc.php
index eab44ef195..4bc8770ce2 100644
--- a/home/inc/class.home_tutorial_ui.inc.php
+++ b/home/inc/class.home_tutorial_ui.inc.php
@@ -132,6 +132,7 @@ class home_tutorial_ui
 	 */
 	public static function tutorial_menu()
 	{
+		if (html::$ua_mobile) return;
 		$tutorials = json_decode(self::getJsonData(),true);
 		$appname = $GLOBALS['egw_info']['flags']['currentapp'];
 		if (!is_array($tutorials[$appname])) return false;
diff --git a/infolog/inc/class.infolog_hooks.inc.php b/infolog/inc/class.infolog_hooks.inc.php
index 476b73f18b..691ca9b452 100644
--- a/infolog/inc/class.infolog_hooks.inc.php
+++ b/infolog/inc/class.infolog_hooks.inc.php
@@ -109,7 +109,7 @@ class infolog_hooks
 			display_sidebox($appname,$GLOBALS['egw_info']['apps']['infolog']['title'].' '.lang('Menu'),$file);
 		}
 
-		if ($GLOBALS['egw_info']['user']['apps']['admin'])
+		if ($GLOBALS['egw_info']['user']['apps']['admin'] && !html::$ua_mobile)
 		{
 			$file = Array(
 				'Site configuration' => egw::link('/index.php',array(
diff --git a/mail/inc/class.mail_hooks.inc.php b/mail/inc/class.mail_hooks.inc.php
index 4193144d36..cf0d514df4 100644
--- a/mail/inc/class.mail_hooks.inc.php
+++ b/mail/inc/class.mail_hooks.inc.php
@@ -526,7 +526,7 @@ class mail_hooks
 		// display them all
 		display_sidebox($appname,$menu_title,$file);
 
-		if ($GLOBALS['egw_info']['user']['apps']['admin'])
+		if ($GLOBALS['egw_info']['user']['apps']['admin'] && !html::$ua_mobile)
 		{
 			$file = Array(
 				'Site Configuration' => egw::link('/index.php','menuaction=admin.uiconfig.index&appname=' . $appname),
diff --git a/mail/inc/class.mail_ui.inc.php b/mail/inc/class.mail_ui.inc.php
index 36478b578f..98b6001273 100644
--- a/mail/inc/class.mail_ui.inc.php
+++ b/mail/inc/class.mail_ui.inc.php
@@ -436,6 +436,7 @@ class mail_ui
 							'actions'        => self::get_actions(),
 							'row_id'         => 'row_id', // is a concatenation of trim($GLOBALS['egw_info']['user']['account_id']):profileID:base64_encode(FOLDERNAME):uid
 							'placeholder_actions' => array('composeasnew'),
+							'header_row' => 'mail.mobile_index.header_right'
 						);
 					}
 				}
diff --git a/mail/templates/default/app.css b/mail/templates/default/app.css
index bb9f6a9220..251ea27515 100644
--- a/mail/templates/default/app.css
+++ b/mail/templates/default/app.css
@@ -838,6 +838,9 @@ blockquote blockquote blockquote blockquote blockquote blockquote{
 		padding-top: 8px;
 		padding-bottom: 8px;
 	}
+	table.egwGridView_grid span.et2_date_ro.et2_label {
+		font-size: 9px;
+	}
 	/*Make Font size readable in mobile theme*/
 	#mail-compose .mailComposeHeaders span, #mail-compose .mailComposeHeadersSection span,
 	div.mailDisplayHeaders > span:first-child, div.mailComposeHeaders > span:first-child, div.mailComposeBody, div.mailPreviewHeaders > *{
@@ -846,6 +849,9 @@ blockquote blockquote blockquote blockquote blockquote blockquote{
 	.mailDisplayHeaders, .mailDisplayAttachments > * {
 		font-size: large !important;
 	}
+	span.status_img {
+		background-image: none !important;
+	}
 }
 /* tablets and smartphones (portrait) ----------- */
 @media only screen
diff --git a/mail/templates/default/mobile_index.xet b/mail/templates/default/mobile_index.xet
index 66cb4cd869..dd38bee377 100644
--- a/mail/templates/default/mobile_index.xet
+++ b/mail/templates/default/mobile_index.xet
@@ -5,52 +5,41 @@
 	<template id="mail.mobile_index.rows" template="" lang="" group="0" version="1.9.001">
 		<grid width="100%">
 			<columns>
-				<column width="25"/>
-				<column width="20"/>
-				<column width="20"/>
-				<column width="40%"/>
-				<column width="95"/>
-				<column width="30%"/>
-				<column width="30%"/>
-				<column width="30%"/>
+				<column/>
 				<column width="80"/>
 			</columns>
 			<rows>
 				<row class="th">
-					<nextmatch-sortheader label="ID" id="uid" readonly="true"/>
-					<nextmatch-header statustext="Status" label="St." id="status"/>
-					<nextmatch-header statustext="attachments, ..." label="..." id="attachments"/>
-					<nextmatch-sortheader label="subject" id="subject"/>
-					<nextmatch-sortheader align="center" label="date" id="date" sortmode="DESC"/>
-					<nextmatch-sortheader label="mail-address" id="address"/>
-					<nextmatch-sortheader label="to" id="toaddress"/>
-					<nextmatch-sortheader label="from" id="fromaddress"/>
-					<nextmatch-sortheader align="center" label="size" id="size"/>
+					
 				</row>
 				<row class="$row_cont[class]">
-					<description id="${row}[uid]" no_lang="1" readonly="true"/>
-					<description span="1" class="status_img"/>
-					<html id="${row}[attachments]"/>
-					<description id="${row}[subject]" no_lang="1"/>
-					<date-time_today align="center" id="${row}[date]" readonly="true"/>
-					<url-email id="${row}[address]" contact_plus = "true" readonly="true"/>
-					<url-email id="${row}[toaddress]" contact_plus = "true" readonly="true"/>
-					<url-email id="${row}[fromaddress]" contact_plus = "true" readonly="true"/>
-					<vfs-size align="right" id="${row}[size]" no_lang="1" readonly="true"/>
+					<vbox>
+						<url-email id="${row}[fromaddress]" contact_plus = "true" readonly="true"/>
+						<description id="${row}[subject]" no_lang="1"/>
+					</vbox>
+					<vbox>
+						<time_or_date align="center" id="${row}[date]" readonly="true"/>
+						<hbox>
+							<html id="${row}[attachments]"/>
+							<description class="status_img"/>
+						</hbox>
+					</vbox>	
 				</row>
 			</rows>
 		</grid>
 	</template>
+	<template id="mail.mobile_index.header_right">
+		<hbox class="mail-index_quotabox"><progress id="nm[quotainpercent]" label="@nm[quota]" class="@nm[quotaclass]"/></hbox>
+	</template>
 	<template id="mail.mobile_index" template="" lang="" group="0" version="1.9.001">
 		<tree autoloading="mail.mail_ui.ajax_foldertree" id="nm[foldertree]" onclick="app.mail.mail_changeFolder" parent_node="mail-tree_target"/>
 		<html id="msg"/>
 		<buttononly id="button[mailcreate]" onclick="app.mail.mail_compose(false);" label="Compose" parent_node="mail-index_buttonmailcreate"/>
-		<hbox class="mail-index_quotabox"><progress id="nm[quotainpercent]" label="@nm[quota]" class="@nm[quotaclass]"/></hbox>
 		<hbox class="mail-index_vacation"><vbox>
 			<description id="nm[vacationnotice]" class="@nm[vacationclass]"/>
 			<description id="nm[vacationrange]" class="@nm[vacationrangeclass]"/></vbox>
 		</hbox>
-		<nextmatch id="nm" onselect="app.mail.mail_preview" template="mail.mobile_index.rows"/>
+		<nextmatch id="nm" onselect="app.mail.mail_preview" template="mail.mobile_index.rows" right_header="mail.mobile_index.header_right"/>
 		<iframe frameborder="1" id="extra_iframe" scrolling="auto" disabled="true"/>
 	</template>
 </overlay>
diff --git a/mail/templates/pixelegg/app.css b/mail/templates/pixelegg/app.css
index 7fd376f289..3e2fbcc450 100755
--- a/mail/templates/pixelegg/app.css
+++ b/mail/templates/pixelegg/app.css
@@ -834,6 +834,9 @@ blockquote blockquote blockquote blockquote blockquote blockquote {
     padding-top: 8px;
     padding-bottom: 8px;
   }
+  table.egwGridView_grid span.et2_date_ro.et2_label {
+    font-size: 9px;
+  }
   /*Make Font size readable in mobile theme*/
   #mail-compose .mailComposeHeaders span,
   #mail-compose .mailComposeHeadersSection span,
@@ -847,6 +850,9 @@ blockquote blockquote blockquote blockquote blockquote blockquote {
   .mailDisplayAttachments > * {
     font-size: large !important;
   }
+  span.status_img {
+    background-image: none !important;
+  }
 }
 /* tablets and smartphones (portrait) ----------- */
 @media only screen and (max-device-width: 1024px) and (orientation: portrait) {
diff --git a/phpgwapi/inc/class.egw_framework.inc.php b/phpgwapi/inc/class.egw_framework.inc.php
index fd811136ac..e900251bad 100644
--- a/phpgwapi/inc/class.egw_framework.inc.php
+++ b/phpgwapi/inc/class.egw_framework.inc.php
@@ -587,7 +587,7 @@ abstract class egw_framework
 		//error_log(__METHOD__."() this->template=$this->template, this->template_dir=$this->template_dir, get_class(this)=".get_class($this));
 		$tmpl = new Template(EGW_SERVER_ROOT.$this->template_dir);
 
-		$tmpl->set_file(array('login_form' => 'login.tpl'));
+		$tmpl->set_file(array('login_form' => html::$ua_mobile?'login_mobile.tpl':'login.tpl'));
 
 		$tmpl->set_var('lang_message',$GLOBALS['loginscreenmessage']);
 
diff --git a/phpgwapi/inc/class.hooks.inc.php b/phpgwapi/inc/class.hooks.inc.php
index 600549876d..9ca6e1a0f6 100644
--- a/phpgwapi/inc/class.hooks.inc.php
+++ b/phpgwapi/inc/class.hooks.inc.php
@@ -373,6 +373,7 @@ class hooks
 	 */
 	public static function pgp_encryption_menu($appname)
 	{
+		if (html::$ua_mobile) return;
 		// PGP Encryption (Mailvelope plugin) restore/backup menu
 		$file = Array(
 			'Backup/Restore ...' => 'javascript:app.'.$appname.'.mailvelopeCreateBackupRestoreDialog();',
diff --git a/phpgwapi/js/framework/fw_base.js b/phpgwapi/js/framework/fw_base.js
index d7988a376e..335ad6e802 100644
--- a/phpgwapi/js/framework/fw_base.js
+++ b/phpgwapi/js/framework/fw_base.js
@@ -32,7 +32,7 @@ var fw_base =  Class.extend({
 		window.egw_webserverUrl = _webserverUrl;
 
 		this.serializedTabState = '';
-		this.notifyTabChangeEnabled = false;
+		this.notifyTabChangeEnabled = true;
 
 		this.sidemenuUi = null;
 		this.tabsUi = null;
@@ -395,20 +395,31 @@ var fw_base =  Class.extend({
 
 		if (this.notifyTabChangeEnabled)
 		{
-			//Send the current tab list to the server
-			var data = this.assembleTabList();
-
-			//Serialize the tab list and check whether it really has changed since the last
-			//submit
-			var serialized = egw.jsonEncode(data);
-			if (serialized != this.serializedTabState)
-			{
-				this.serializedTabState = serialized;
-
-				var request = egw.jsonq("home.jdots_framework.ajax_tab_changed_state", [data]);
-			}
+			this.storeTabsStatus();
 		}
 	},
+	
+	/**
+	 * Store last status of tabs
+	 * tab status being used in order to open all previous opened
+	 * tabs and to activate the last active tab
+	 */
+	storeTabsStatus: function ()
+	{
+		//Send the current tab list to the server
+		var data = this.assembleTabList();
+
+		//Serialize the tab list and check whether it really has changed since the last
+		//submit
+		var serialized = egw.jsonEncode(data);
+		if (serialized != this.serializedTabState)
+		{
+			this.serializedTabState = serialized;
+
+			egw.jsonq("home.jdots_framework.ajax_tab_changed_state", [data]);
+		}
+	},
+	
 	/**
 	 * @param {function} _opened
 	 * Sends sidemenu entry category open/close information to the server using an AJAX request
diff --git a/phpgwapi/js/login.js b/phpgwapi/js/login.js
index 26e5862b70..4ac2e2f0ca 100644
--- a/phpgwapi/js/login.js
+++ b/phpgwapi/js/login.js
@@ -15,6 +15,9 @@ egw_LAB.wait(function()
 {
 	$j(document).ready(function()
 	{
+		// lock the device orientation in portrait view
+		if (screen.orientation) screen.orientation.lock('portrait');
+		
 		function do_social(_data)
 		{
 			var isPixelegg = $j('link[href*="pixelegg.css"]')[0];
diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css
index d87dc71495..c7a256b1d7 100644
--- a/pixelegg/css/mobile.css
+++ b/pixelegg/css/mobile.css
@@ -6514,6 +6514,7 @@ span.egw_tutorial_title {
 /*All devices landscape mode*/
 /*Tablets landscape mode*/
 /*Tablets Portrait*/
+/*Smartphones*/
 @media all {
   body {
     background-color: transparent;
@@ -6533,17 +6534,23 @@ span.egw_tutorial_title {
   }
   body div.dhtmlxMenu_egw_SubLevelArea_Polygon {
     font-size: medium;
-    margin-top: 15px;
+    top: 50px !important;
+    right: 0px;
+    left: auto !important;
   }
   body table.egwGridView_outer thead tr th {
     font-size: small !important;
   }
   body table.egwGridView_outer tbody tr {
     touch-action: initial;
+    height: 50px;
   }
   #egw_fw_basecontainer {
     background: white;
   }
+  #egw_fw_basecontainer #egw_fw_main #egw_fw_tabs {
+    margin-top: 0;
+  }
   #egw_fw_basecontainer #egw_fw_top_toolbar div.egw_fw_ui_tabs_header {
     max-height: 60px;
     width: 60%;
@@ -6552,7 +6559,7 @@ span.egw_tutorial_title {
     position: initial;
     white-space: nowrap;
     position: fixed;
-    left: 40%;
+    left: 83%;
     top: 15px;
     height: 50px;
   }
@@ -6573,9 +6580,9 @@ span.egw_tutorial_title {
     display: none;
   }
   #egw_fw_basecontainer .egw_fw_top_toolbar > div:hover {
-    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-    -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
   }
   #egw_fw_basecontainer div#egw_fw_menu {
     background-image: url(../images/topmenu_items/mobile/menu_active.png);
@@ -6583,8 +6590,8 @@ span.egw_tutorial_title {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
     position: fixed;
-    left: 20px;
-    top: 20px;
+    left: 13px;
+    top: 13px;
     width: 32px;
     height: 32px;
     background-size: 32px 32px;
@@ -6592,22 +6599,22 @@ span.egw_tutorial_title {
     z-index: 999;
   }
   #egw_fw_basecontainer div#egw_fw_menu:hover {
-    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-    -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
-    box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
   }
   #egw_fw_basecontainer div#egw_fw_menu:active {
-    -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
-    -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
-    box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
   }
   #egw_fw_basecontainer div#egw_fw_topmenu_items {
     width: 280px;
     display: inline;
     float: left;
     position: fixed;
-    left: 55px;
-    top: 20px;
+    padding-left: 55px;
+    padding-top: 13px;
   }
   #egw_fw_basecontainer div#egw_fw_topmenu_items ul {
     display: inline;
@@ -6622,9 +6629,9 @@ span.egw_tutorial_title {
     padding: 2px;
   }
   #egw_fw_basecontainer div#egw_fw_topmenu_items ul li:hover {
-    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-    -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
-    box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
   }
   #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_logout:before {
     content: "";
@@ -6731,19 +6738,6 @@ span.egw_tutorial_title {
   .egw_fw_ui_tabs_header .egw_fw_ui_tab_header {
     padding-left: 0;
     position: relative;
-    -webkit-border-top-right-radius: 0;
-    -webkit-border-bottom-right-radius: 0;
-    -webkit-border-bottom-left-radius: 0;
-    -webkit-border-top-left-radius: 0;
-    -moz-border-radius-topright: 0;
-    -moz-border-radius-bottomright: 0;
-    -moz-border-radius-bottomleft: 0;
-    -moz-border-radius-topleft: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-    /*.background-clip(padding-box);*/
     background: transparent;
     display: inline-block;
     overflow: hidden;
@@ -6752,9 +6746,6 @@ span.egw_tutorial_title {
     margin: 0px 5px 0px 0px;
     padding: 2px 5px 7px 2px;
     cursor: pointer;
-    border-width: 1px 1px 0 1px;
-    border-style: solid;
-    border-color: #b4b4b4;
     background-repeat: repeat-x;
     height: 38px;
     width: 97%;
@@ -6768,10 +6759,11 @@ span.egw_tutorial_title {
     box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
   }
   .egw_fw_ui_tabs_header .egw_fw_ui_tab_header h1 {
-    font-size: 19.8px;
+    font-size: 14.3px;
     line-height: 1em;
     margin: 0 15px 2px 2px;
     vertical-align: super;
+    padding-left: 25px;
   }
   .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon {
     display: inline-block;
@@ -6851,8 +6843,8 @@ span.egw_tutorial_title {
     position: absolute;
     top: 0px;
     bottom: 4px;
-    left: 4px;
-    right: 5px;
+    left: 0;
+    right: 0;
     overflow-y: auto;
     z-index: 0;
     padding-top: 0.6em;
@@ -6892,19 +6884,6 @@ span.egw_tutorial_title {
     background-position: 95% -3000px;
     background-repeat: no-repeat;
     background-color: #f0f0f0;
-    -webkit-border-top-right-radius: 5px;
-    -webkit-border-bottom-right-radius: 0px;
-    -webkit-border-bottom-left-radius: 0px;
-    -webkit-border-top-left-radius: 27px;
-    -moz-border-radius-topright: 5px;
-    -moz-border-radius-bottomright: 0px;
-    -moz-border-radius-bottomleft: 0px;
-    -moz-border-radius-topleft: 27px;
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 0px;
-    border-bottom-left-radius: 0px;
-    border-top-left-radius: 27px;
-    /*.background-clip(padding-box);*/
     border-top: solid 1px #b4b4b4;
     border-left: solid 1px #b4b4b4;
     border-right: solid 1px #b4b4b4;
@@ -6986,15 +6965,15 @@ span.egw_tutorial_title {
     background-image: none;
     -webkit-border-top-right-radius: 0;
     -webkit-border-bottom-right-radius: 0;
-    -webkit-border-bottom-left-radius: 27px;
+    -webkit-border-bottom-left-radius: 0px;
     -webkit-border-top-left-radius: 0;
     -moz-border-radius-topright: 0;
     -moz-border-radius-bottomright: 0;
-    -moz-border-radius-bottomleft: 27px;
+    -moz-border-radius-bottomleft: 0px;
     -moz-border-radius-topleft: 0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
-    border-bottom-left-radius: 27px;
+    border-bottom-left-radius: 0px;
     border-top-left-radius: 0;
     /*.background-clip(padding-box);*/
     border-color: #b4b4b4;
@@ -7007,39 +6986,11 @@ span.egw_tutorial_title {
     padding: 5px 0.3em 1.5em 0.3em;
     margin: 0 0 10px 0;
     background-color: #b3b3b3 !important;
-    -webkit-border-top-right-radius: 0;
-    -webkit-border-bottom-right-radius: 0;
-    -webkit-border-bottom-left-radius: 24px;
-    -webkit-border-top-left-radius: 0;
-    -moz-border-radius-topright: 0;
-    -moz-border-radius-bottomright: 0;
-    -moz-border-radius-bottomleft: 24px;
-    -moz-border-radius-topleft: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 24px;
-    border-top-left-radius: 0;
-    /*.background-clip(padding-box);*/
     border-color: #b4b4b4;
   }
   #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content > div {
     background-color: #b3b3b3 !important;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content div.egw_fw_ui_category:nth-last-of-type(-n+3) {
-    -webkit-border-top-right-radius: 0;
-    -webkit-border-bottom-right-radius: 0;
-    -webkit-border-bottom-left-radius: 15px;
-    -webkit-border-top-left-radius: 0;
-    -moz-border-radius-topright: 0;
-    -moz-border-radius-bottomright: 0;
-    -moz-border-radius-bottomleft: 15px;
-    -moz-border-radius-topleft: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 15px;
-    border-top-left-radius: 0;
-    /*.background-clip(padding-box);*/
-  }
   #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category {
     margin: 4px 5px 5px 5px;
     padding: 0.5em 1em 0.5em 0;
@@ -7072,6 +7023,9 @@ span.egw_tutorial_title {
   #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category div.egw_fw_ui_category:nth-last-of-type(-n+3) img.egw_fw_ui_sidemenu_listitem_icon {
     display: block;
   }
+  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content div.egw_fw_ui_category_content {
+    border-radius: 0;
+  }
   #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category:hover {
     background-color: #999999;
     padding: 0.5em 1em 0.5em 0;
@@ -7194,16 +7148,15 @@ span.egw_tutorial_title {
   .sidebar-toggle #egw_fw_topmenu_items {
     display: none !important;
   }
-  .tabs-header-portrait-collapsed {
-    left: 7% !important;
-    width: 90% !important;
-  }
   #egw_fw_footer {
     display: none;
   }
   .egw_fw_ui_app_header_container {
     display: none;
   }
+  .egw_fw_content_browser_div {
+    padding: 0;
+  }
   .egw_fw_mobile_popup_container {
     width: 100%;
     height: 100%;
@@ -7220,8 +7173,8 @@ span.egw_tutorial_title {
     visibility: hidden;
   }
   .egw_fw_mobile_popup_container span.egw_fw_mobile_popup_close {
-    width: 32px;
-    height: 32px;
+    width: 50px;
+    height: 50px;
     float: right;
     background-image: url('../images/cancelled.png');
     /*url(../images/topmenu_items/mobile/menu_active.png);*/
@@ -7257,7 +7210,6 @@ span.egw_tutorial_title {
     position: absolute;
     margin: 0;
     width: 100%;
-    background-color: transparent;
     padding: 0;
     -webkit-border-top-right-radius: 0;
     -webkit-border-bottom-right-radius: 0;
@@ -7279,7 +7231,6 @@ span.egw_tutorial_title {
   }
   div#loginMainDiv div#centerBox form {
     margin-top: -2em;
-    margin-right: 3em;
   }
   div#loginMainDiv div#centerBox form table.divLoginbox {
     width: 100%;
@@ -7289,15 +7240,15 @@ span.egw_tutorial_title {
     display: none;
   }
   div#loginMainDiv div#centerBox form table.divLoginbox input[type="submit"] {
-    font-size: xx-large;
+    font-size: large;
   }
   div#loginMainDiv div#centerBox form table.divLoginbox input,
   div#loginMainDiv div#centerBox form table.divLoginbox select {
     width: 100%;
-    height: 60px;
+    height: 50px;
   }
   div#loginMainDiv div#centerBox form table.divLoginbox td {
-    font-size: 300%;
+    font-size: large;
     padding: 0.8%;
   }
   div#loginMainDiv div#centerBox form table.divLoginbox td.registration {
@@ -7320,22 +7271,298 @@ span.egw_tutorial_title {
     float: left;
   }
   body div#loginMainDiv div#centerBox form table.divLoginbox input[type="submit"] {
-    font-size: xx-large;
+    font-size: large;
   }
   body div#loginMainDiv div#centerBox form table.divLoginbox input,
   body div#loginMainDiv div#centerBox form table.divLoginbox select {
     width: 100%;
-    height: 80px;
+    height: 50px;
   }
   body div#loginMainDiv div#centerBox form table.divLoginbox td {
-    font-size: 400%;
+    font-size: large;
     padding: 0.8%;
   }
   body div#loginMainDiv div#centerBox form table.divLoginbox td.registration {
     font-size: 250%;
   }
   body div#loginMainDiv div#centerBox #loginCdMessage {
-    font-size: xx-large;
+    font-size: large;
     padding: 0;
   }
 }
+@media only screen and (max-device-width: 700px) and (min-width: 321px) {
+  body #egw_fw_basecontainer.sidebar-toggle div#egw_fw_top_toolbar {
+    z-index: 0;
+  }
+  body #egw_fw_basecontainer.sidebar-toggle #egw_fw_main #egw_fw_tabs {
+    -webkit-filter: none;
+    -moz-filter: none;
+    -ms-filter: none;
+    -o-filter: none;
+    filter: none;
+  }
+  body #egw_fw_basecontainer #egw_fw_top_toolbar {
+    z-index: 998;
+    width: 300px;
+    background: white;
+  }
+  body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items {
+    width: 245px;
+    display: inline;
+    float: left;
+    position: fixed;
+    padding-left: 55px;
+    padding-top: 13px;
+    background: white;
+    height: 100%;
+    z-index: 998;
+    border-right: 2px solid silver;
+  }
+  body #egw_fw_basecontainer #egw_fw_sidebar {
+    z-index: 999;
+    background: white;
+  }
+  body #egw_fw_basecontainer #egw_fw_main #egw_fw_tabs {
+    -webkit-filter: brightness(20%);
+    -moz-filter: brightness(20%);
+    -ms-filter: brightness(20%);
+    -o-filter: brightness(20%);
+    filter: brightness(20%);
+  }
+}
+/*mobile etemplate2*/
+/*mobile etemplate2*/
+@media only screen and (min-width: 320px) and (max-width: 1279px) {
+  div.ui-dialog {
+    width: 100% !important;
+    height: 100% !important;
+    left: 0 !important;
+    top: 0 !important;
+  }
+  .et2_nextmatch .nextmatch_header_row {
+    background-color: background-color-egw-dark;
+  }
+  .et2_nextmatch .nextmatch_header_row select {
+    display: block;
+    width: 100%;
+    height: 50px;
+    font-size: large;
+    background-size: 32px;
+    border-left: none;
+    border-right: none;
+    border-radius: 0;
+    border-bottom: none;
+    padding-left: 10px;
+    max-width: none;
+  }
+  .et2_nextmatch .nextmatch_header_row label {
+    display: block;
+    width: 100%;
+    float: left;
+    font-size: large;
+  }
+  .et2_nextmatch .nextmatch_header_row label select {
+    display: inline-block;
+    width: 80%;
+    float: right;
+    margin: 0;
+    height: 50px;
+    font-size: large;
+  }
+  .et2_nextmatch .nextmatch_header.nm_header_hide {
+    display: none !important;
+  }
+  .et2_nextmatch .nextmatch_header {
+    background-color: white;
+    padding: 0;
+    display: none;
+    border: 1px solid silver;
+    border-top: none;
+  }
+  .et2_nextmatch .nextmatch_header div.et2_box_widget {
+    display: block;
+    height: 50px;
+  }
+  .et2_nextmatch .nextmatch_header .et2_button {
+    width: 50px;
+    height: 50px;
+  }
+  .et2_nextmatch .egwGridView_outer thead tr {
+    visibility: hidden;
+  }
+  .et2_nextmatch .search {
+    background: #0c5da5;
+    border: 1px solid silver;
+    margin-left: 60px;
+  }
+  .et2_nextmatch .search button {
+    height: 50px;
+    width: 50px;
+    font-size: large;
+    background-color: #0c5da5;
+    border: none;
+    margin: 0;
+    border-right: 1px solid silver;
+    color: white;
+    background-image: none;
+  }
+  .et2_nextmatch .search button:active,
+  .et2_nextmatch .search button:hover {
+    background: transparent;
+    color: white;
+  }
+  .et2_nextmatch .search button:focus {
+    color: white;
+    box-shadow: none !important;
+  }
+  .et2_nextmatch .search button.nm_toggle_header {
+    background-position: center;
+    background-repeat: no-repeat;
+    margin-right: 5px;
+    border-left: 1px solid silver;
+    border: 0;
+    color: white;
+    width: 50px;
+    height: 50px;
+    display: block;
+    float: right;
+  }
+  .et2_nextmatch .search button.nm_toggle_header:focus {
+    outline: none;
+  }
+  .et2_nextmatch .search button.nm_toggle_header:after {
+    font-size: xx-large;
+    content: "\2630";
+  }
+  .et2_nextmatch .search button.nm_action_header {
+    background-position: center;
+    background-repeat: no-repeat;
+    margin-right: 5px;
+    border-left: 1px solid silver;
+    border: 0;
+    color: white;
+    width: 50px;
+    height: 50px;
+    display: block;
+    float: right;
+  }
+  .et2_nextmatch .search button.nm_action_header:focus {
+    outline: none;
+  }
+  .et2_nextmatch .search button.nm_action_header:after {
+    font-size: xx-large;
+    content: "\205D";
+  }
+  .et2_nextmatch .search button.nm_add_button {
+    background-position: center;
+    background-repeat: no-repeat;
+    margin-right: 5px;
+    border-left: 1px solid silver;
+    border: 0;
+    color: white;
+    width: 50px;
+    height: 50px;
+    display: block;
+    float: right;
+    background: white;
+    border: 10px solid #0c5da5;
+    border-radius: 50px;
+  }
+  .et2_nextmatch .search button.nm_add_button:focus {
+    outline: none;
+  }
+  .et2_nextmatch .search button.nm_add_button:after {
+    font-size: xx-large;
+    content: "+";
+    display: inline-block;
+    vertical-align: middle;
+    line-height: 10px;
+    color: #0c5da5;
+    font-weight: bold;
+  }
+  .et2_nextmatch .search button.nm_toggle_header_on:after {
+    content: "\2715";
+  }
+  .et2_nextmatch .search input {
+    width: 20%;
+    height: 50px;
+    font-size: large;
+    margin: 0;
+    border: 0;
+    background-color: #0c5da5;
+    color: white;
+  }
+  .et2_nextmatch .search input:active {
+    border: none;
+    background: #0c5da5;
+  }
+  .et2_nextmatch .search input:focus {
+    border: none;
+    backgroun: #0c5da5;
+    outline: none;
+    position: absolute;
+    width: 100%;
+  }
+  .et2_nextmatch .header_row_right {
+    height: 50px;
+    width: 100%;
+    padding: 0;
+  }
+  .et2_nextmatch .header_row_right div[id$=favorite_wrapper] {
+    margin: 0;
+    top: 0 !important;
+    height: 50px;
+  }
+  .et2_nextmatch .header_row_right * {
+    display: inline-block;
+    float: left;
+  }
+  .et2_nextmatch .header_row_right .et2_dropdown button {
+    height: 50px;
+    width: 50px;
+  }
+  .et2_nextmatch .header_count {
+    margin: 0;
+    height: 50px;
+    font-size: large;
+    margin-top: -3px;
+    margin-right: 0px;
+    float: right;
+    border: none;
+    border-radius: 0;
+    border-left: 1px solid rgba(0, 0, 0, 0.15);
+  }
+  .et2_nextmatch table.egwGridView_grid tr img {
+    height: 12px;
+  }
+  .et2_nextmatch table.egwGridView_grid tbody tr.focused {
+    background-image: none;
+  }
+  .et2_nextmatch table.egwGridView_grid tbody tr.selected {
+    background: rgba(255, 194, 0, 0.5) !important;
+  }
+  .et2_nextmatch table.egwGridView_grid tbody tr:hover {
+    background: transparent;
+  }
+  .et2_nextmatch table.egwGridView_grid tbody tr.swipe {
+    background-color: #ffc200;
+    border: none;
+  }
+  .et2_nextmatch .egwGridView_outer thead tr th {
+    font-size: large;
+  }
+  .dtree img {
+    width: 24px !important;
+    height: 24px !important;
+  }
+  .dtree table,
+  .dtree tr,
+  .dtree td {
+    padding: 2px;
+    padding-left: 0;
+    padding-right: 0px;
+  }
+  .dtree .containerTableStyle {
+    overflow: auto;
+  }
+}
diff --git a/pixelegg/css/mobile.less b/pixelegg/css/mobile.less
index 93b52b6c6a..63074bca08 100644
--- a/pixelegg/css/mobile.less
+++ b/pixelegg/css/mobile.less
@@ -20,7 +20,7 @@
 /*Tablets Max-Width*/
 @tablet-max: 1024px;
 /*Smartphones Max-Width*/
-@smartphone-max: 768px;
+@smartphone-max: 700px;
 /*Smartphones Min-Width*/
 @smartphone-min: 321px;
 @handheld: ~"only screen and (max-device-width : @{tablet-max})";
@@ -32,7 +32,8 @@
 @tablet-portrait: ~"only screen and (max-device-width : @{tablet-max}) and (min-width: @{smartphone-max}) and (orientation : landscape)";
 /*Tablets Portrait*/
 @tablet-portrait: ~"only screen and (max-device-width : @{tablet-max}) and (min-width: @{smartphone-max}) and (orientation : portrait)";
-
+/*Smartphones*/
+@smartphones: ~"only screen and (max-device-width: @{smartphone-max}) and (min-width: @{smartphone-min})";
 
 @media all {
 	body{
@@ -60,7 +61,9 @@
 		div.dhtmlxMenu_egw_SubLevelArea_Polygon
 		{
 			font-size:medium;
-			margin-top:15px;
+			top:50px !important;
+			right:0px;
+			left:auto !important;
 		}
 
 		//###################
@@ -79,6 +82,7 @@
 			tbody{
 				tr{
 					touch-action:initial;
+					height:@mobile-elem-height;
 				}
 			}
 		}
@@ -86,13 +90,18 @@
 	#egw_fw_basecontainer{
 		background:white;
 
-
+		#egw_fw_main {
+			#egw_fw_tabs {
+				margin-top:0;
+			}
+		}
 		//###################
 		//#					#
 		//#		TOOLBAR		#
 		//#					#
 		//###################
 		#egw_fw_top_toolbar{
+			
 			div.egw_fw_ui_tabs_header{
 				max-height: 60px;
 				width: 60%;
@@ -101,7 +110,7 @@
 				position: initial;
 				white-space: nowrap;
 				position: fixed;
-				left: 40%;
+				left: 83%;
 				top: 15px;
 				height: 50px;
 				span{
@@ -125,9 +134,9 @@
 		}
 
 		.egw_fw_top_toolbar>div:hover{
-			-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-			-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-			box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
+			-webkit-box-shadow: none;
+			-moz-box-shadow: none;
+			box-shadow: none;
 		}
 
 
@@ -138,31 +147,31 @@
 			-webkit-transform:rotate(360deg);
 			transform:rotate(360deg);
 			position: fixed;
-			left: 20px;
-			top: 20px;
+			left: 13px;
+			top: 13px;
 			width: 32px;
 			height: 32px;
 			background-size: 32px 32px;
 			background-repeat: no-repeat;
 			z-index: 999;
 			&:hover {
-				-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-				-moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
-				box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
+				-webkit-box-shadow: none;
+				-moz-box-shadow: none;
+				box-shadow: none;
 			}
 		}
 		div#egw_fw_menu:active {
-			-webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
-			-moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
-			box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
+			-webkit-box-shadow: none;
+			-moz-box-shadow: none;
+			box-shadow: none;
 		}
 		div#egw_fw_topmenu_items{
 			width: 280px;
 			display: inline;
 			float: left;
 			position: fixed;
-			left: 55px;
-			top: 20px;
+			padding-left: 55px;
+			padding-top: 13px;
 			ul{
 				display:inline;
 				padding:0;
@@ -174,9 +183,9 @@
 					display: inline-block;
 					padding:2px;
 					&:hover {
-						-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-						-moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
-						box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
+						-webkit-box-shadow: none;
+						-moz-box-shadow: none;
+						box-shadow: none;
 					}
 				}
 				a#topmenu_logout{
@@ -315,7 +324,6 @@
 		.egw_fw_ui_tab_header {
 			padding-left: 0;
 			position: relative;
-			.border_radius(0,0, 0, 0);
 			background: transparent;
 			display: inline-block;
 			overflow: hidden;
@@ -324,9 +332,6 @@
 			margin: 0px 5px 0px 0px;
 			padding: 2px 5px 7px 2px;
 			cursor: pointer;
-			border-width: 1px 1px 0 1px;
-			border-style: solid;
-			border-color: @gray_30;;
 			background-repeat:repeat-x;
 			height: 38px;
 			width: 97%;
@@ -340,10 +345,11 @@
 			 }
 			// APP Name
 			h1 {
-				.fontsize_xxl;
+				.fontsize_xl;
 				line-height: 1em;
 				margin:0 15px 2px 2px;
 				vertical-align: super;
+				padding-left: 25px;
 			}
 
 			// Images
@@ -410,8 +416,8 @@
 			position: absolute;
 			top: 0px;
 			bottom: 4px;
-			left: 4px;
-			right: 5px;
+			left: 0;
+			right: 0;
 			overflow-y: auto;
 			z-index: 0;
 			padding-top: 0.6em;
@@ -423,7 +429,6 @@
 				{
 					display: block;
 					margin: 0 0;
-
 					&:hover {
 						.background_color_15_gray;
 						.rounded(5px);
@@ -462,7 +467,6 @@
 					background-repeat: no-repeat;
 
 					.background_color_10_gray;
-					.border_radius ( 5px, 0px, 0px, 27px );
 					.bordered (@gray_30, @gray_30, @gray_30, @gray_30);
 
 					margin: 0 0 0 0;
@@ -526,7 +530,7 @@
 				.egw_fw_ui_sidemenu_entry_content {
 					display: block;
 					background-image: none;
-					.border_radius (0, 0, 27px, 0);
+					.border_radius (0, 0, 0px, 0);
 					border-color: @gray_30;
 					border-style: solid;
 					border-width: 0px;
@@ -538,7 +542,6 @@
 						padding:  5px 0.3em 1.5em 0.3em;
 						margin: 0 0 10px 0;
 						.background_color_30_gray;
-						.border_radius (0, 0, 24px, 0);
 						border-color: @gray_30;
 					}
 
@@ -547,7 +550,7 @@
 					//###################################################
 					// has round corners
 					div.egw_fw_ui_category:nth-last-of-type(-n+3) {
-						.border_radius (0, 0, 15px, 0);
+						
 					}
 
 					//###################################################
@@ -573,13 +576,15 @@
 						}
 
 						div.egw_fw_ui_category:nth-last-of-type(-n+3) {
-																		img.egw_fw_ui_sidemenu_listitem_icon {
-																		 display: block;
-																		 }
+							img.egw_fw_ui_sidemenu_listitem_icon {
+							 display: block;
+							 }
 						}
-
 					}
-
+					
+					div.egw_fw_ui_category_content {
+						border-radius: 0;
+					}
 					//#################################
 					// Hover
 					// on Mouse over change color
@@ -666,6 +671,7 @@
 				.egw_fw_ui_sidemenu_entry_content, .egw_fw_ui_sidemenu_entry_header{
 					display:none !important;
 				}
+				
 				.egw_fw_ui_sidemenu_entry_header{
 					height: 38px;
 					width: 54px;
@@ -704,11 +710,6 @@
 		}
 	}
 
-	.tabs-header-portrait-collapsed{
-		left:7% !important;
-		width: 90% !important;
-	}
-
 	//###################################
 	//#									#
 	//#			FOOTER					#
@@ -727,7 +728,10 @@
 		display:none;
 	}
 
-
+	.egw_fw_content_browser_div {
+		padding: 0;
+	}
+	
 	//###################################
 	//#									#
 	//#			POPUP FRAME				#
@@ -748,17 +752,17 @@
 			visibility: hidden;
 		}
 		span.egw_fw_mobile_popup_close {
-				width: 32px;
-				height: 32px;
-				float:right;
-				background-image: url('../images/cancelled.png');/*url(../images/topmenu_items/mobile/menu_active.png);*/
-				-webkit-filter: contrast(2);
-				background-repeat: no-repeat;
-				z-index: 1000;
-				padding-right: 5px;
-				top:0;
-				right:2px;
-				position: absolute;
+			width: 50px;
+			height: 50px;
+			float:right;
+			background-image: url('../images/cancelled.png');/*url(../images/topmenu_items/mobile/menu_active.png);*/
+			-webkit-filter: contrast(2);
+			background-repeat: no-repeat;
+			z-index: 1000;
+			padding-right: 5px;
+			top:0;
+			right:2px;	
+			position: absolute;
 		}
 	}
 	.egw_fw_mobile_popup_loader {
@@ -795,7 +799,6 @@
 				position:absolute;
 				margin: 0;
 				width: 100%;
-				background-color: transparent;
 				padding: 0;
 				-webkit-border-top-right-radius: 0;
 				-webkit-border-bottom-right-radius:0;
@@ -822,8 +825,7 @@
 				border-radius: none;
 				form {
 					margin-top: -2em;
-					margin-right: 3em;
-
+					
 					table.divLoginbox {
 						width:100%;
 						float:left;
@@ -831,15 +833,15 @@
 							display:none;
 						}
 						input[type="submit"] {
-							font-size: xx-large;
+							font-size: large;
 
 						}
 						input, select {
 							width:100%;
-							height:60px;
+							height:50px;
 						}
 						td {
-							font-size: 300%;
+							font-size: large;
 							padding:0.8%;
 							&.registration{
 								font-size: 180%;
@@ -872,15 +874,15 @@
 						width:100%;
 						float:left;
 						input[type="submit"] {
-							font-size: xx-large;
+							font-size: large;
 
 						}
 						input, select {
 							width:100%;
-							height:80px;
+							height:50px;
 						}
 						td {
-							font-size: 400%;
+							font-size: large;
 							padding:0.8%;
 							&.registration {
 								font-size: 250%;
@@ -889,10 +891,335 @@
 					}
 				}
 				#loginCdMessage {
-					font-size:xx-large;
+					font-size:large;
 					padding:0;
 				}
 			}
 		}
 	}
 }
+
+@media @smartphones {
+	body{
+		#egw_fw_basecontainer.sidebar-toggle 
+		{
+			div#egw_fw_top_toolbar {
+				z-index: 0;
+			}
+			#egw_fw_main {
+				#egw_fw_tabs {
+					-webkit-filter: none;
+					-moz-filter: none;
+					-ms-filter: none;
+					-o-filter: none;
+					filter: none;
+				}
+			}
+			
+		}
+		#egw_fw_basecontainer {
+			
+			#egw_fw_top_toolbar {
+				z-index: 998;
+				width: 300px;
+				background: white;
+				div#egw_fw_topmenu_items{
+					width: 245px;
+					display: inline;
+					float: left;
+					position: fixed;
+					padding-left: 55px;
+					padding-top: 13px;
+					background:white;
+					height:100%;
+					z-index:998;
+					border-right:2px solid silver;
+				}
+			}
+			#egw_fw_sidebar {
+				z-index: 999;
+				background:white;
+			}
+			#egw_fw_main {
+				#egw_fw_tabs {
+					-webkit-filter: brightness(20%);
+					-moz-filter: brightness(20%);
+					-ms-filter: brightness(20%);
+					-o-filter: brightness(20%);
+					filter: brightness(20%);
+				}
+			}
+		}
+	}
+}
+
+/*mobile etemplate2*/
+
+/*mobile etemplate2*/
+@mobile-elem-height: 50px;
+@mobile-button-width: 50px;
+@mobile-nm-search-bg: #0c5da5;
+@media only screen and (min-width: 320px)  and (max-width: 1279px) {
+	div.ui-dialog {
+		width:100% !important;
+		height:100% !important;
+		left:0 !important;
+		top:0 !important;
+	}
+	.et2_nextmatch {
+		.nextmatch_header_row 
+		{
+			background-color: background-color-egw-dark;
+
+			select {
+				display: block;
+				width: 100%;
+				height: @mobile-elem-height;
+				font-size: large;
+				background-size: 32px;
+				border-left: none;
+				border-right: none;
+				border-radius: 0;
+				border-bottom: none;
+				padding-left:10px;
+				max-width:none;
+			}
+			label {
+				display:block;
+				width: 100%;
+				float: left;
+				font-size: large;
+				select {
+					display: inline-block;
+					width: 80%;
+					float: right;
+					margin: 0;
+					height: @mobile-elem-height;
+					font-size: large;
+				}
+			}
+		}
+		.nextmatch_header.nm_header_hide {
+			display:none !important;
+		}
+		.nextmatch_header {
+			background-color: white;
+			padding:0;
+			display:none;
+			border: 1px solid silver;
+			border-top:none;
+			div.et2_box_widget {
+				display:block;
+				height:@mobile-elem-height;
+			}
+			.et2_button {
+				width:@mobile-button-width;
+				height: @mobile-elem-height;
+			}
+			
+		}
+		.egwGridView_outer {
+			thead {
+				tr {
+					visibility:hidden;
+					th{
+						
+					}
+				}
+			}
+		}
+		.search {
+			background: @mobile-nm-search-bg;
+			border: 1px solid silver;
+			margin-left: 60px;
+			button {
+				height: @mobile-elem-height;
+				width: @mobile-button-width;
+				font-size:large;
+				background-color: @mobile-nm-search-bg;
+				border: none;
+				margin:0;
+				border-right: 1px solid silver;
+				color: white;
+				background-image:none;
+				&:active, &:hover {
+					background: transparent;
+					color: white;
+				}
+				&:focus {
+					color: white;
+					box-shadow:none !important;
+				}
+			}
+			button.nm_toggle_header {
+				background-position: center;
+				background-repeat: no-repeat;
+				margin-right:5px;
+				border-left:1px solid silver;
+				border:0;
+				color: white;
+				width:50px;
+				height:50px;
+				display:block;
+				float:right;
+				&:focus{
+					outline:none;
+				}
+				&:after{
+					font-size:xx-large;
+					content:"\2630";
+				}
+				
+			}
+			button.nm_action_header {
+				background-position: center;
+				background-repeat: no-repeat;
+				margin-right:5px;
+				border-left:1px solid silver;
+				border:0;
+				color: white;
+				width:50px;
+				height:50px;
+				display:block;
+				float:right;
+				&:focus{
+					outline:none;
+				}
+				&:after{
+					font-size:xx-large;
+					content:"\205D";
+				}
+			}
+			button.nm_add_button {
+				background-position: center;
+				background-repeat: no-repeat;
+				margin-right:5px;
+				border-left:1px solid silver;
+				border:0;
+				color: white;
+				width:50px;
+				height:50px;
+				display:block;
+				float:right;
+				background: white;
+			    border: 10px solid @mobile-nm-search-bg;
+				border-radius: 50px;
+				&:focus{
+					outline:none;
+				}
+				&:after{
+					font-size:xx-large;
+					content:"+";
+					display: inline-block;
+					vertical-align: middle;
+					line-height: 10px;
+					color:@mobile-nm-search-bg;
+					font-weight: bold;
+				}
+			}
+			button.nm_toggle_header_on {
+				&:after {
+					content:"\2715";
+				}
+			}
+			input {
+				width: 20%;
+				height: @mobile-elem-height;
+				font-size: large;
+				margin:0;
+				border:0;
+				background-color:@mobile-nm-search-bg;
+				color: white;
+				&:active{
+					border:none;
+					background: @mobile-nm-search-bg;
+				}
+				&:focus {
+					border:none;
+					backgroun:@mobile-nm-search-bg;
+					outline: none;
+					position: absolute;
+					width:100%;
+				}
+			}
+		}
+		.header_row_right {
+			div[id$=favorite_wrapper] {
+				margin:0;
+				top:0 !important;
+				height:@mobile-elem-height;
+			}
+			height: @mobile-elem-height;
+			width: 100%;
+			padding:0;
+			* {
+				display:inline-block;
+				float:left;
+			}
+			.et2_dropdown {
+				button {
+					height:@mobile-elem-height;
+					width: @mobile-button-width;
+				}
+			}
+		}
+		.header_count {
+			margin:0;
+			height:@mobile-elem-height;
+			font-size: large;
+			margin-top: -3px;
+			margin-right: 0px;
+			float:right;
+			border: none;
+			border-radius:0;
+			border-left:1px solid rgba(0, 0, 0, 0.15);
+		}
+		table.egwGridView_grid {
+			tr {
+				img {
+					height: 12px;
+				}
+			}
+			tbody {
+				tr.focused
+				{
+					background-image: none;
+				}
+				tr.selected {
+					background: rgba(255, 194, 0, 0.5) !important;
+				}
+				tr {
+					&:hover {
+						background: transparent;
+					}
+				}
+				tr.swipe{
+					background-color:rgba(255, 194, 0, 1);
+					border:none;
+					
+				}
+			}
+		}
+		.egwGridView_outer {
+			thead tr th {
+				font-size: large;
+			}
+		}
+	}
+	
+	.dtree {
+		img {
+			width:24px !important;
+			height:24px !important;
+		}
+		table , tr, td
+		{
+			padding: 2px;
+			padding-left: 0;
+			padding-right: 0px;
+		}
+		.containerTableStyle {
+			overflow: auto;			
+		}
+	}
+}
\ No newline at end of file
diff --git a/pixelegg/head_mobile.tpl b/pixelegg/head_mobile.tpl
index 79b7ac6a34..8737d5eef2 100644
--- a/pixelegg/head_mobile.tpl
+++ b/pixelegg/head_mobile.tpl
@@ -10,7 +10,7 @@
 		<meta name="language" content="{lang_code}" />
 		<meta name="author" content="Stylite AG www.stylite.de" />
 		<meta name="apple-mobile-web-app-capable" content="yes" />
-		<meta name="viewport" content="user-scalable=no" />
+		<meta name="viewport" content="width=device-width, initial-scale=1"/>
 		<link rel="apple-touch-icon" href="{webserver_url}/phpgwapi/templates/default/images/logo64x64.png" />
 		{pngfix}
 		{meta_robots}
diff --git a/pixelegg/login_mobile.tpl b/pixelegg/login_mobile.tpl
new file mode 100644
index 0000000000..44348d0894
--- /dev/null
+++ b/pixelegg/login_mobile.tpl
@@ -0,0 +1,75 @@
+<script src="./phpgwapi/js/login.js" type="text/javascript"></script>
+
+
+<div id="loginMainDiv">
+
+    <div id="divAppIconBar" style="position:relative;">
+        <div id="divLogo"><a href="{logo_url}" target="_blank"><img src="{logo_file}" border="0" alt="{logo_title}" title="{logo_title}" /></a></div>
+    </div>
+    <div id="centerBox">
+		<div id="loginAvatar">{login_avatar}</div>
+        <div id="loginScreenMessage">{lang_message}</div>
+        <div id="loginCdMessage" class="{cd_class}">{cd}</div>
+        <form name="login_form" method="post" action="{login_url}">
+            <table class="divLoginbox divSideboxEntry" cellspacing="0" cellpadding="2" border="0" align="center">
+                <tr class="divLoginboxHeader">
+                    <td colspan="3">{website_title}</td>
+                </tr>
+                <tr class="hiddenCredential">
+                    <td colspan="2" height="20" >
+                        <input type="hidden" name="passwd_type" value="text" />
+                        <input type="hidden" name="account_type" value="u" />
+                    </td>
+                    <td rowspan="6">
+                        <img src="{template_set}/images/password.svg" class="passwordImage" />
+                    </td>
+                </tr>
+                <!-- BEGIN language_select -->
+                <tr>
+                    <td>{select_language}</td>
+                </tr>
+                <!-- END language_select -->
+                <!-- BEGIN domain_selection -->
+                <tr>
+                    <td align="right">{lang_domain}:&nbsp;</td>
+                    <td>{select_domain}</td>
+                </tr>
+                <!-- END domain_selection -->
+                <!-- BEGIN remember_me_selection -->
+                <tr>
+                    <td align="right">{lang_remember_me}:&nbsp;</td>
+                    <td>{select_remember_me}</td>
+                </tr>
+                <!-- END remember_me_selection -->
+                <tr>
+                    <td><input name="login" tabindex="4" value="{login}" size="30" {autofocus_login} placeholder="{lang_username}"/></td>
+                </tr>
+                <tr>
+                    <td><input name="passwd" tabindex="5" value="{passwd}" type="password" size="30" placeholder="{lang_password}" /></td>
+                </tr>
+               <!-- BEGIN change_password -->
+                 <tr>
+                    <td><input name="new_passwd" tabindex="6" type="password" size="30" {autofocus_new_passwd} placeholder="{lang_new_password}"/></td>
+                </tr>
+                <tr>
+                    <td><input name="new_passwd2" tabindex="7" type="password" size="30" placeholder="{lang_repeat_password}"/></td>
+                </tr>
+               <!-- END change_password -->
+                <tr>
+                    <td>
+                        <input tabindex="8" type="submit" value="  {lang_login}  " name="submitit" />
+                    </td>
+                </tr>
+                <!-- BEGIN registration -->
+                <tr>
+                    <td colspan="3" height="20" align="center" class="registration">
+                        {lostpassword_link}
+                        {lostid_link}
+                        {register_link}
+                    </td>
+                </tr>
+                <!-- END registration -->
+            </table>
+        </form>
+    </div>
+</div>