extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-25 09:23:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

Mobile theme W.I.P.:

Browse Source 
- Implement fw load logo indicator
- Fix sidebar not getting closed when touch on dropped shadow area
This commit is contained in:
Hadi Nategh 2016-02-08 14:36:54 +00:00
parent 9e690d2304
commit 4de59b33da
4 changed files with 93 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
pixelegg/css/mobile.css
View File

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

44
pixelegg/css/mobile.less
View File

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

1
pixelegg/head_mobile.tpl
View File

@ -46,5 +46,6 @@
</div>
</div>
</div>
<div id="egw_fw_firstload"></div>
<div id="egw_fw_footer">{powered_by}</div>
<!-- END framework -->

5
pixelegg/inc/class.pixelegg_framework.inc.php
View File

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