From c2dc16c85c5a35da9996ca11fdcc28daba1038f6 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hn@stylite.de>
Date: Mon, 24 Nov 2014 16:20:55 +0000
Subject: [PATCH] WIP mobile framework: Add topbar menu for portrait view

---
 pixelegg/less/mobile.less | 72 +++++++++++++++++++++++++++++++--------
 1 file changed, 57 insertions(+), 15 deletions(-)

diff --git a/pixelegg/less/mobile.less b/pixelegg/less/mobile.less
index 9e09e99412..f47897553e 100644
--- a/pixelegg/less/mobile.less
+++ b/pixelegg/less/mobile.less
@@ -20,17 +20,33 @@ and open the template in the editor.
 		//###################
 		#egw_fw_top_toolbar{
 			border-bottom: 2px solid gray;
-			div#egw_fw_app_menu{
-				background-image: url(../images/topmenu_items/mobile/menu.png);
-				top: 15px;
-				width: 32px;
-				height: 32px;
-				background-size: 32px 32px;
-				background-repeat: no-repeat;
-				position:absolute;
-				right:15px;
-				padding-bottom: 13px;
-				border-bottom: 2px solid gray;
+			div.egw_fw_ui_tabs_header{
+				max-height: 60px;
+				width: 69%;
+				margin-left: 0;
+				overflow-x: scroll;
+				position: initial;
+				white-space: nowrap;
+				position: fixed;
+				left: 30%;
+				top: 6px;
+				height: 50px;
+				span{
+					margin:0;
+					overflow: visible;
+					height:38px;
+					width:50px;
+					border-width: 1px 1px 1px 1px;
+					
+					/*border-radius: 0px 15px 15px 0px;*/
+					img{
+						height:32px !important;
+						width:32px !important;
+					}
+					h1{
+						display:none;
+					}
+				}
 			}
 		}			
 		//FW Logout
@@ -52,10 +68,18 @@ and open the template in the editor.
 			height: 24px;
 			background-size: 24px 24px;
 		}
+		.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);
+		}
+		
 
 		//FW Menu
 		div#egw_fw_menu{
-			background-image: url(../images/topmenu_items/mobile/menu.png);
+			background-image: url(../images/topmenu_items/mobile/menu_active.png);
+			-webkit-transform:rotate(360deg);
+			transform:rotate(360deg);
 			position: fixed;
 			left: 20px;
 			top: 15px;
@@ -63,6 +87,7 @@ and open the template in the editor.
 			height: 32px;
 			background-size: 32px 32px;
 			background-repeat: no-repeat;
+			z-index: 999;
 		}
 		div#egw_fw_menu:active {
 			-webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
@@ -104,7 +129,7 @@ and open the template in the editor.
 						background-size: 32px 32px;
 						display: inline-block;
 				}
-
+				
 				a#topmenu_acl:before {
 					content: "";
 					background-repeat: no-repeat;
@@ -153,7 +178,11 @@ and open the template in the editor.
 					background-size: 32px 32px;
 					display: inline-block;
 				}
-
+				a#topmenu_search:active {
+					transform: scale(-2);
+					-webkit-transform:scale(-2);
+					-webkit-transition: 1s ease;
+				}
 			}
 		} 
 	}//End of toolbar
@@ -552,6 +581,11 @@ and open the template in the editor.
 	//ToggleClass
 	
 	.sidebar-toggle{
+		#egw_fw_top_toolbar div#egw_fw_menu{
+			background-image: url(../images/topmenu_items/mobile/menu.png);
+			-webkit-transform:rotate(0deg);
+			transform:rotate(0deg);
+		}
 		#egw_fw_sidebar{
 			#egw_fw_sidemenu{
 				width:82px !important;
@@ -571,9 +605,11 @@ and open the template in the editor.
 				}
 				.egw_fw_ui_tabs_header{
 					span{
+						margin:0px 5px 0px 2px;
+						overflow: visible;
 						height:38px;
 						width:50px;
-						border-radius: 0px 15px 15px 0px;
+						/*border-radius: 0px 15px 15px 0px;*/
 						img{
 							height:32px !important;
 							width:32px !important;
@@ -592,4 +628,10 @@ and open the template in the editor.
 			display:none !important;
 		}
 	}
+	
+	.tabs-header-portrait-collapsed{
+		left:7% !important;
+		width: 90% !important;
+		border-left:2px solid gray;
+	}
 }
\ No newline at end of file