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

@@ -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;
   }

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,6 +74,31 @@
 
 		}
 		
+		#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;
+			
+			}
+			
+		}
 		
 		//###################
 		//#					#

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 -->

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 div.et2_nextmatch .search .nm_favorites_button,
-body .dialogHeadbar{
+body .dialogHeadbar,
+body #egw_fw_firstload{
 	background-color: $color;
 }";
 		}