holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Mobile theme W.I.P.:

Browse Source 
- Get applications list from bottom to top
- Simplify top toolbar in sidebar including avatar
- Fix desktop mobile theme sidebar and main div alignments
This commit is contained in:
Hadi Nategh 2016-03-31 13:58:42 +00:00
parent ac6b0e9a94
commit d8d1b0b61f
6 changed files with 110 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
phpgwapi/js/framework/fw_ui.js
View File

@ -121,8 +121,18 @@ var fw_ui_sidemenu_entry = (function(){ "use strict"; return Class.extend(
open: function() open: function()
{ {
/* Move this entry to the top of the list */ /* Move this entry to the top of the list */
$j(this.baseDiv).prepend(this.contentDiv); if (egwIsMobile())
$j(this.baseDiv).prepend(this.headerDiv); {
$j(this.baseDiv).append(this.headerDiv);
$j(this.baseDiv).append(this.contentDiv);
}
else
{
$j(this.baseDiv).prepend(this.contentDiv);
$j(this.baseDiv).prepend(this.headerDiv);
}
this.atTop = true; this.atTop = true;
$j(this.headerDiv).addClass("egw_fw_ui_sidemenu_entry_header_active"); $j(this.headerDiv).addClass("egw_fw_ui_sidemenu_entry_header_active");

43
pixelegg/css/mobile.css
View File

@ -6164,9 +6164,28 @@ span.egw_tutorial_title {
body #egw_fw_basecontainer { body #egw_fw_basecontainer {
background: white; background: white;
} }
body #egw_fw_basecontainer #egw_fw_main {
margin-top: 15px;
}
body #egw_fw_basecontainer #egw_fw_main #egw_fw_tabs { body #egw_fw_basecontainer #egw_fw_main #egw_fw_tabs {
margin-top: -3px; margin-top: -3px;
} }
body #egw_fw_basecontainer #egw_fw_top_toolbar {
width: 300px;
position: absolute;
}
body #egw_fw_basecontainer #egw_fw_top_toolbar .egw_fw_logout {
float: right;
}
body #egw_fw_basecontainer #egw_fw_top_toolbar .egw_fw_logout a#topmenu_logout {
background-image: url(../images/logout.png);
background-repeat: no-repeat;
width: 50px;
height: 50px;
background-size: 24px 24px;
display: inline-block;
background-position: center;
}
body #egw_fw_basecontainer #egw_fw_top_toolbar div.egw_fw_ui_tabs_header { body #egw_fw_basecontainer #egw_fw_top_toolbar div.egw_fw_ui_tabs_header {
max-height: 60px; max-height: 60px;
width: 60%; width: 60%;
@ -6210,6 +6229,7 @@ span.egw_tutorial_title {
background-repeat: no-repeat; background-repeat: no-repeat;
z-index: 999; z-index: 999;
background-position: center; background-position: center;
margin-left: 10px;
} }
body #egw_fw_basecontainer div#egw_fw_menu:hover { body #egw_fw_basecontainer div#egw_fw_menu:hover {
-webkit-box-shadow: none; -webkit-box-shadow: none;
@ -6248,16 +6268,6 @@ span.egw_tutorial_title {
-moz-box-shadow: none; -moz-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_logout:before {
content: "";
background-image: url(../images/logout.png);
background-repeat: no-repeat;
width: 32px;
height: 32px;
background-size: 24px 24px;
display: inline-block;
background-position: center;
}
body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_home:before { body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_home:before {
content: " "; content: " ";
background-image: url(../images/topmenu_items/mobile/home.png); background-image: url(../images/topmenu_items/mobile/home.png);
@ -6328,13 +6338,10 @@ span.egw_tutorial_title {
background-position: center; background-position: center;
} }
body #egw_fw_basecontainer #egw_fw_userinfo { body #egw_fw_basecontainer #egw_fw_userinfo {
position: absolute;
top: 50px;
margin-left: 8px;
width: 300px;
height: 50px; height: 50px;
z-index: 1000; z-index: 1000;
text-align: left; display: inline-block;
margin-left: 40%;
} }
body #egw_fw_basecontainer #egw_fw_userinfo span.avatar { body #egw_fw_basecontainer #egw_fw_userinfo span.avatar {
display: inline-block; display: inline-block;
@ -6475,7 +6482,7 @@ span.egw_tutorial_title {
background-color: #b4b4b4; background-color: #b4b4b4;
} }
body #egw_fw_sidebar { body #egw_fw_sidebar {
top: 110px; top: 55px;
bottom: 5px; bottom: 5px;
} }
body #egw_fw_sidebar #egw_fw_sidemenu { body #egw_fw_sidebar #egw_fw_sidemenu {
@ -6629,6 +6636,7 @@ span.egw_tutorial_title {
border-style: solid; border-style: solid;
border-width: 0px; border-width: 0px;
margin: 0 0 2em 0; margin: 0 0 2em 0;
background-color: white;
/*######################*/ /*######################*/
} }
body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content:nth-last-of-type(-n+3) { body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content:nth-last-of-type(-n+3) {
@ -6773,7 +6781,8 @@ span.egw_tutorial_title {
body .sidebar-toggle #egw_fw_top_toolbar div#egw_fw_menu { body .sidebar-toggle #egw_fw_top_toolbar div#egw_fw_menu {
background-image: url(../images/topmenu_items/mobile/menu.png); background-image: url(../images/topmenu_items/mobile/menu.png);
} }
body .sidebar-toggle #egw_fw_top_toolbar #egw_fw_userinfo { body .sidebar-toggle #egw_fw_top_toolbar #egw_fw_userinfo,
body .sidebar-toggle #egw_fw_top_toolbar .egw_fw_logout {
display: none; display: none;
} }
body .sidebar-toggle #egw_fw_sidebar { body .sidebar-toggle #egw_fw_sidebar {

42
pixelegg/css/mobile.less
View File

@ -137,6 +137,7 @@
background:white; background:white;
#egw_fw_main { #egw_fw_main {
margin-top:15px;
#egw_fw_tabs { #egw_fw_tabs {
margin-top:-3px; margin-top:-3px;
} }
@ -147,6 +148,20 @@
//# # //# #
//################### //###################
#egw_fw_top_toolbar{ #egw_fw_top_toolbar{
width:300px;
position:absolute;
.egw_fw_logout {
float:right;
a#topmenu_logout{
background-image: url(../images/logout.png);
background-repeat: no-repeat;
width: 50px;
height: 50px;
background-size: 24px 24px;
display: inline-block;
background-position: center;
}
}
div.egw_fw_ui_tabs_header{ div.egw_fw_ui_tabs_header{
max-height: 60px; max-height: 60px;
@ -197,6 +212,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
z-index: 999; z-index: 999;
background-position:center; background-position:center;
margin-left:10px;
&:hover { &:hover {
-webkit-box-shadow: none; -webkit-box-shadow: none;
-moz-box-shadow: none; -moz-box-shadow: none;
@ -233,18 +249,7 @@
box-shadow: none; box-shadow: none;
} }
} }
a#topmenu_logout{
&:before {
content: "";
background-image: url(../images/logout.png);
background-repeat: no-repeat;
width: 32px;
height: 32px;
background-size: 24px 24px;
display: inline-block;
background-position: center;
}
}
a#topmenu_home:before { a#topmenu_home:before {
content: " "; content: " ";
background-image: url(../images/topmenu_items/mobile/home.png); background-image: url(../images/topmenu_items/mobile/home.png);
@ -325,13 +330,10 @@
} }
} }
#egw_fw_userinfo { #egw_fw_userinfo {
position: absolute;
top:50px;
margin-left:8px;
width:300px;
height:50px; height:50px;
z-index:1000; z-index:1000;
text-align : left; display: inline-block;
margin-left:40%;
span.avatar { span.avatar {
display: inline-block; display: inline-block;
float:left; float:left;
@ -479,7 +481,7 @@
//# # //# #
//################### //###################
#egw_fw_sidebar{ #egw_fw_sidebar{
top: 110px; top: 55px;
bottom: 5px; bottom: 5px;
//SIDE AREA //SIDE AREA
#egw_fw_sidemenu { #egw_fw_sidemenu {
@ -577,7 +579,7 @@
border-style: solid; border-style: solid;
border-width: 0px; border-width: 0px;
margin: 0 0 2em 0; margin: 0 0 2em 0;
background-color:white;
// rounded Corner on bottom // rounded Corner on bottom
&:nth-last-of-type(-n+3) { &:nth-last-of-type(-n+3) {
@ -718,7 +720,7 @@
#egw_fw_top_toolbar div#egw_fw_menu{ #egw_fw_top_toolbar div#egw_fw_menu{
background-image: url(../images/topmenu_items/mobile/menu.png); background-image: url(../images/topmenu_items/mobile/menu.png);
} }
#egw_fw_top_toolbar #egw_fw_userinfo{ #egw_fw_top_toolbar #egw_fw_userinfo,#egw_fw_top_toolbar .egw_fw_logout {
display: none; display: none;
} }
#egw_fw_sidebar{ #egw_fw_sidebar{

14
pixelegg/head_mobile.tpl
View File

File diff suppressed because one or more lines are too long

53
pixelegg/mobile/fw_mobile.css
View File

@ -6175,9 +6175,28 @@ span.egw_tutorial_title {
body #egw_fw_basecontainer { body #egw_fw_basecontainer {
background: white; background: white;
} }
body #egw_fw_basecontainer #egw_fw_main {
margin-top: 15px;
}
body #egw_fw_basecontainer #egw_fw_main #egw_fw_tabs { body #egw_fw_basecontainer #egw_fw_main #egw_fw_tabs {
margin-top: -3px; margin-top: -3px;
} }
body #egw_fw_basecontainer #egw_fw_top_toolbar {
width: 300px;
position: absolute;
}
body #egw_fw_basecontainer #egw_fw_top_toolbar .egw_fw_logout {
float: right;
}
body #egw_fw_basecontainer #egw_fw_top_toolbar .egw_fw_logout a#topmenu_logout {
background-image: url(../images/logout.png);
background-repeat: no-repeat;
width: 50px;
height: 50px;
background-size: 24px 24px;
display: inline-block;
background-position: center;
}
body #egw_fw_basecontainer #egw_fw_top_toolbar div.egw_fw_ui_tabs_header { body #egw_fw_basecontainer #egw_fw_top_toolbar div.egw_fw_ui_tabs_header {
max-height: 60px; max-height: 60px;
width: 60%; width: 60%;
@ -6221,6 +6240,7 @@ span.egw_tutorial_title {
background-repeat: no-repeat; background-repeat: no-repeat;
z-index: 999; z-index: 999;
background-position: center; background-position: center;
margin-left: 10px;
} }
body #egw_fw_basecontainer div#egw_fw_menu:hover { body #egw_fw_basecontainer div#egw_fw_menu:hover {
-webkit-box-shadow: none; -webkit-box-shadow: none;
@ -6259,16 +6279,6 @@ span.egw_tutorial_title {
-moz-box-shadow: none; -moz-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_logout:before {
content: "";
background-image: url(../images/logout.png);
background-repeat: no-repeat;
width: 32px;
height: 32px;
background-size: 24px 24px;
display: inline-block;
background-position: center;
}
body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_home:before { body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_home:before {
content: " "; content: " ";
background-image: url(../images/topmenu_items/mobile/home.png); background-image: url(../images/topmenu_items/mobile/home.png);
@ -6339,13 +6349,10 @@ span.egw_tutorial_title {
background-position: center; background-position: center;
} }
body #egw_fw_basecontainer #egw_fw_userinfo { body #egw_fw_basecontainer #egw_fw_userinfo {
position: absolute;
top: 50px;
margin-left: 8px;
width: 300px;
height: 50px; height: 50px;
z-index: 1000; z-index: 1000;
text-align: left; display: inline-block;
margin-left: 40%;
} }
body #egw_fw_basecontainer #egw_fw_userinfo span.avatar { body #egw_fw_basecontainer #egw_fw_userinfo span.avatar {
display: inline-block; display: inline-block;
@ -6486,7 +6493,7 @@ span.egw_tutorial_title {
background-color: #b4b4b4; background-color: #b4b4b4;
} }
body #egw_fw_sidebar { body #egw_fw_sidebar {
top: 110px; top: 55px;
bottom: 5px; bottom: 5px;
} }
body #egw_fw_sidebar #egw_fw_sidemenu { body #egw_fw_sidebar #egw_fw_sidemenu {
@ -6640,6 +6647,7 @@ span.egw_tutorial_title {
border-style: solid; border-style: solid;
border-width: 0px; border-width: 0px;
margin: 0 0 2em 0; margin: 0 0 2em 0;
background-color: white;
/*######################*/ /*######################*/
} }
body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content:nth-last-of-type(-n+3) { body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content:nth-last-of-type(-n+3) {
@ -6784,7 +6792,8 @@ span.egw_tutorial_title {
body .sidebar-toggle #egw_fw_top_toolbar div#egw_fw_menu { body .sidebar-toggle #egw_fw_top_toolbar div#egw_fw_menu {
background-image: url(../images/topmenu_items/mobile/menu.png); background-image: url(../images/topmenu_items/mobile/menu.png);
} }
body .sidebar-toggle #egw_fw_top_toolbar #egw_fw_userinfo { body .sidebar-toggle #egw_fw_top_toolbar #egw_fw_userinfo,
body .sidebar-toggle #egw_fw_top_toolbar .egw_fw_logout {
display: none; display: none;
} }
body .sidebar-toggle #egw_fw_sidebar { body .sidebar-toggle #egw_fw_sidebar {
@ -7119,9 +7128,6 @@ form[id^="tracker-"] .dialogHeadbar {
} }
} }
@media only screen and (max-device-width: 736px) and (min-width: 300px) { @media only screen and (max-device-width: 736px) and (min-width: 300px) {
body #egw_fw_basecontainer.sidebar-toggle div#egw_fw_top_toolbar {
z-index: 0;
}
body #egw_fw_basecontainer.sidebar-toggle #egw_fw_main { body #egw_fw_basecontainer.sidebar-toggle #egw_fw_main {
margin-left: 0 !important ; margin-left: 0 !important ;
} }
@ -7202,10 +7208,17 @@ form[id^="tracker-"] .dialogHeadbar {
background-position: 15px center; background-position: 15px center;
margin-left: 8px; margin-left: 8px;
} }
body #egw_fw_basecontainer #egw_fw_main {
margin-top: 0px;
}
body #egw_fw_basecontainer .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon { body #egw_fw_basecontainer .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon {
width: 18px; width: 18px;
height: 18px; height: 18px;
} }
body #egw_fw_basecontainer #egw_fw_top_toolbar {
position: absolute;
width: 300px;
}
body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items { body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items {
padding-top: 8px; padding-top: 8px;
} }

12
pixelegg/mobile/fw_mobile.less
View File

@ -170,9 +170,6 @@
body{ body{
#egw_fw_basecontainer.sidebar-toggle #egw_fw_basecontainer.sidebar-toggle
{ {
div#egw_fw_top_toolbar {
z-index: 0;
}
#egw_fw_main { #egw_fw_main {
margin-left:0 !important ; margin-left:0 !important ;
#egw_fw_tabs { #egw_fw_tabs {
@ -255,11 +252,20 @@
} }
} }
#egw_fw_basecontainer { #egw_fw_basecontainer {
#egw_fw_main {
margin-top:0px;
}
.egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon { .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon {
width:18px; width:18px;
height:18px; height:18px;
} }
#egw_fw_top_toolbar { #egw_fw_top_toolbar {
position:absolute;
width:300px;
#egw_fw_userinfo {
}
div#egw_fw_topmenu_items { div#egw_fw_topmenu_items {
padding-top: 8px; padding-top: 8px;
ul { ul {