* Template for mobile browsers: only show application area, all apps are available via slideout menu

phpgwapi/templates/default/navbar.tpl

@@ -6,7 +6,7 @@
 
 <!-- BEGIN app_extra_icons_div -->
 <script language="javascript">
-	new ypSlideOutMenu("menu1", "down", 10, 114, 160, 200,'right');
+	new ypSlideOutMenu("menu1", "down", 10, {menu1top}, 160, 200,'right');
 </script>
 
 <div id="menu1Container">
@@ -46,11 +46,11 @@
 					<table width="100%" border="0" cellspacing="0" cellpadding="0">
 						<tr>
 <!-- BEGIN app_icon_block -->
-							<td width="{tdwidth}%" align="center" style="text-align:center"><a href="{url}" {target}><img src="{icon}" alt="{title}" title="{title}" border="0" /></a></td>
+							<td width="{tdwidth}%" align="center" style="text-align:center" class="tdAppIcon"><a href="{url}" {target}><img src="{icon}" alt="{title}" title="{title}" border="0" /></a></td>
 <!-- END app_icon_block -->
 <!-- BEGIN app_extra_icons_icon -->
 							<td width="26" valign="top" align="right" style="padding-right:3px; padding-top:20px;">
-								<a title="{lang_show_more_apps}" href="#" {show_menu_event}="ypSlideOutMenu.showMenu('menu1')"><img src="{img_root}/extra_icons.png" border="0" /></a>
+								<a id="extra_icons_show" title="{lang_show_more_apps}" href="#" {show_menu_event}="ypSlideOutMenu.showMenu('menu1')"><img src="{img_root}/extra_icons.png" border="0" /></a>
 							</td>
 <!-- END app_extra_icons_icon -->
 						</tr>
@@ -84,10 +84,10 @@
 
 <!-- BEGIN sidebox_hide_header -->
 	<script language="javascript">
-		new ypSlideOutMenu("menu2", "right", 0, 105, 100, 200)
+		new ypSlideOutMenu("menu2", "right", 0, {menu2top}, 100, 200)
 	</script>
 
-	<div id="sideboxdragarea" style="z-index:100;position:absolute;left:0px;top:105px">
+	<div id="sideboxdragarea">
 		<a href="#" {show_menu_event}="ypSlideOutMenu.showMenu('menu2')" title="{lang_show_menu}"><img src="{img_root}/dragarea_right.png" /></a>
 	</div>
 

phpgwapi/templates/idots/class.idots_framework.inc.php

@@ -101,6 +101,10 @@ class idots_framework extends egw_framework
 		$this->tpl->set_file(array('_head' => 'head.tpl'));
 		$this->tpl->set_block('_head','head');
 
+		if (html::$ua_mobile)
+		{
+			self::$css_include_files[] = '/phpgwapi/templates/idots/mobile.css';
+		}
 		$this->tpl->set_var($this->_get_header());
 
 		$content .= $this->tpl->fp('out','head');
@@ -466,7 +470,7 @@ class idots_framework extends egw_framework
 	{
 		$var = parent::_get_navbar($apps);
 
-		if($GLOBALS['egw_info']['user']['preferences']['common']['click_or_onmouseover'] == 'onmouseover')
+		if($GLOBALS['egw_info']['user']['preferences']['common']['click_or_onmouseover'] == 'onmouseover' && !html::$ua_mobile)
 		{
 			$var['show_menu_event'] = 'onMouseOver';
 		}
@@ -497,7 +501,12 @@ class idots_framework extends egw_framework
 			$this->tpl->set_var('upper_tabs','');
 		}
 
-		if (!($max_icons=$GLOBALS['egw_info']['user']['preferences']['common']['max_icons']))
+		if (html::$ua_mobile)
+		{
+			$max_icons = 0;
+			$this->tpl->set_var('app_icons','');
+		}
+		elseif (!($max_icons=$GLOBALS['egw_info']['user']['preferences']['common']['max_icons']))
 		{
 			$max_icons = 30;
 		}
@@ -516,7 +525,8 @@ class idots_framework extends egw_framework
 		foreach($apps as $app => $app_data)
 		{
 			if ($app != 'preferences' && $app != 'about' && $app != 'logout' && $app != 'manual' &&
-				($app != 'home' || $GLOBALS['egw_info']['user']['preferences']['common']['start_and_logout_icons'] != 'no'))
+				($app != 'home' || $GLOBALS['egw_info']['user']['preferences']['common']['start_and_logout_icons'] != 'no') ||
+				html::$ua_mobile && in_array($app,array('preferences','logout','home')))
 			{
 				$this->tpl->set_var($app_data);
 
@@ -568,6 +578,10 @@ class idots_framework extends egw_framework
 		{
 			$var['app_titles'] = '<td colspan="'.$max_icons.'">&nbsp;</td>';
 		}
+		// mobile support
+		$var['menu1top'] = html::$ua_mobile ? 20 : 114;
+		$var['menu2top'] = html::$ua_mobile ? 20 : 105;
+
 		return $var;
 	}
 

phpgwapi/templates/idots/css/traditional.css

@@ -65,6 +65,13 @@ a:hover,a:active
 	color: #000000;
 }
 
+#sideboxdragarea {
+	z-index:100;
+	position:absolute;
+	left:0px;
+	top:105px"
+}
+
 /*
 	other styling
 */

phpgwapi/templates/idots/mobile.css

@@ -0,0 +1,44 @@
+/**
+ * Mobile support for idots: only show application area, all apps are in slideout instead of navbar
+ *
+ * @version $Id$
+ */
+
+#divLogo,#XXXdivAppIconBar,#tdSidebox,#divStatusBar,#topmenu,#divGenTime,#divPoweredBy,#divUpperTabs,.tdAppIcon,#divAppboxHeader {
+	display:none;
+}
+
+#divAppIconBar {
+	position: relative;
+	height: 0px;
+	overflow: visible;
+	border: none;
+}
+
+#extra_icons_show {
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+#menu1Container {
+	left: 5px;
+}
+
+#sideboxdragarea {
+	top: 20px;
+}
+
+#divMain,#popupMainDiv {
+	border:none;
+	margin:0px;
+	padding:0px;
+}
+
+#tdAppbox,#divAppboxHeader,#divSubContainer,#divAppbox {
+	border: none;
+	text-align: left;
+}
+#divAppboxHeader {
+	background: none;
+}