From 4de59b33daa8c87afafd41c5c86d8a8a8b2eb63c Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hn@stylite.de>
Date: Mon, 8 Feb 2016 14:36:54 +0000
Subject: [PATCH] Mobile theme W.I.P.: - Implement fw load logo indicator - Fix
 sidebar not getting closed when touch on dropped shadow area

---
 pixelegg/css/mobile.css                       | 44 ++++++++++++++++++
 pixelegg/css/mobile.less                      | 46 ++++++++++++++++++-
 pixelegg/head_mobile.tpl                      |  1 +
 pixelegg/inc/class.pixelegg_framework.inc.php |  5 +-
 4 files changed, 93 insertions(+), 3 deletions(-)

diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css
index cb2fe034ea..0ff966d065 100644
--- a/pixelegg/css/mobile.css
+++ b/pixelegg/css/mobile.css
@@ -6566,6 +6566,27 @@ span.egw_tutorial_title {
 /*Tablets landscape mode*/
 /*Tablets Portrait*/
 /*Smartphones*/
+@keyframes fw-firstload {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0);
+    -webkit-transform: translateY(0);
+    -moz-transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-30px);
+    -webkit-transform: translateY(-30px);
+    -moz-transform: translateY(-30px);
+  }
+  60% {
+    transform: translateY(-15px);
+    -webkit-transform: translateY(-15px);
+    -moz-transform: translateY(-15px);
+  }
+}
 @media all {
   body {
     background-color: transparent;
@@ -6585,6 +6606,29 @@ span.egw_tutorial_title {
     width: 100%;
     line-height: 32px !important;
   }
+  body #egw_fw_firstload {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    background-color: #ffc200;
+    height: 100%;
+    width: 100%;
+  }
+  body #egw_fw_firstload:before {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-image: url(/egroupware/phpgwapi/templates/default/images/logo64x64.png);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 64px;
+    -webkit-animation: fw-firstload 1s infinite;
+    animation: fw-firstload 1s infinite;
+    -moz-animation: fw-firstload 1s infinite;
+  }
   body table.egwGridView_outer thead tr th {
     font-size: small !important;
   }
diff --git a/pixelegg/css/mobile.less b/pixelegg/css/mobile.less
index 748713a9a5..4d11714add 100644
--- a/pixelegg/css/mobile.less
+++ b/pixelegg/css/mobile.less
@@ -35,6 +35,25 @@
 /*Smartphones*/
 @smartphones: ~"only screen and (max-device-width: @{smartphone-max}) and (min-width: @{smartphone-min})";
 
+
+@keyframes fw-firstload {
+	0%, 20%, 50%, 80%, 100% {
+		transform:translateY(0);
+		-webkit-transform: translateY(0);
+		-moz-transform:translateY(0);
+	}
+	40% {
+		transform: translateY(-30px);
+		-webkit-transform: translateY(-30px);
+		-moz-transform: translateY(-30px);
+	}
+	60% {
+		transform: translateY(-15px);
+		-webkit-transform: translateY(-15px);
+		-moz-transform: translateY(-15px);
+	}
+}
+
 @media all {
 	body{
 		
@@ -55,7 +74,32 @@
 
 		}
 		
-
+		#egw_fw_firstload {
+			position: absolute;
+			top: 0;
+			left: 0;
+			bottom: 0;
+			.background_color_egw_normal;
+			height: 100%;
+			width: 100%;
+			&:before{
+				content:"";
+				display: inline-block;
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				background-image: url(/egroupware/phpgwapi/templates/default/images/logo64x64.png);
+				background-position: center;
+				background-repeat: no-repeat;
+				background-size: 64px;
+				-webkit-animation: fw-firstload 1s infinite;
+				animation: fw-firstload 1s infinite;
+				-moz-animation: fw-firstload 1s infinite;
+			
+			}
+			
+		}
+		
 		//###################
 		//#					#
 		//#	 Grid & NM		#
diff --git a/pixelegg/head_mobile.tpl b/pixelegg/head_mobile.tpl
index b9d338c3f6..4379ad90b3 100644
--- a/pixelegg/head_mobile.tpl
+++ b/pixelegg/head_mobile.tpl
@@ -46,5 +46,6 @@
 				</div>
 			</div>
 		</div>
+		<div id="egw_fw_firstload"></div>
 		<div id="egw_fw_footer">{powered_by}</div>
 <!-- END framework -->
diff --git a/pixelegg/inc/class.pixelegg_framework.inc.php b/pixelegg/inc/class.pixelegg_framework.inc.php
index 32d6ca02c2..21751d0339 100755
--- a/pixelegg/inc/class.pixelegg_framework.inc.php
+++ b/pixelegg/inc/class.pixelegg_framework.inc.php
@@ -170,8 +170,9 @@ body div.et2_nextmatch .search button,
 body button.plus_button,
 body div.et2_nextmatch .search .nm_action_header,
 body div.et2_nextmatch .search .nm_toggle_header,
-body div.et2_nextmatch .search .nm_favorites_button ,
-body .dialogHeadbar{
+body div.et2_nextmatch .search .nm_favorites_button,
+body .dialogHeadbar,
+body #egw_fw_firstload{
 	background-color: $color;
 }";
 		}