extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-26 16:48:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Mobile theme W.I.P.:

Browse Source 
- Implement user info in sidebar
- Avatar image implementation W.I.P.
- Fix top menu and toolbars in sidebar for both iOS and Android
This commit is contained in:
Hadi Nategh 2016-02-08 16:36:12 +00:00
parent 4de59b33da
commit 915ca69e86
4 changed files with 89 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
pixelegg/css/mobile.css
View File

@ -6723,13 +6723,12 @@ span.egw_tutorial_title {
background-image: url(../images/topmenu_items/mobile/menu_active.png); background-image: url(../images/topmenu_items/mobile/menu_active.png);
cursor: pointer; cursor: pointer;
position: fixed; position: fixed;
left: 13px; width: 50px;
top: 13px;
width: 65px;
height: 50px; height: 50px;
background-size: 32px 32px; background-size: 24px 24px;
background-repeat: no-repeat; background-repeat: no-repeat;
z-index: 999; z-index: 999;
background-position: center;
} }
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;
@ -6749,8 +6748,7 @@ span.egw_tutorial_title {
display: inline; display: inline;
float: left; float: left;
position: fixed; position: fixed;
padding-left: 55px; padding: 8px 5px 0 50px;
padding-top: 13px;
} }
body #egw_fw_basecontainer div#egw_fw_topmenu_items ul { body #egw_fw_basecontainer div#egw_fw_topmenu_items ul {
display: inline; display: inline;
@ -6848,6 +6846,30 @@ span.egw_tutorial_title {
display: inline-block; display: inline-block;
background-position: center; background-position: center;
} }
body #egw_fw_basecontainer #egw_fw_userinfo {
position: fixed;
top: 60px;
margin-left: 8px;
width: 300px;
height: 60px;
z-index: 1000;
text-align: left;
}
body #egw_fw_basecontainer #egw_fw_userinfo span.avatar {
display: inline-block;
float: left;
}
body #egw_fw_basecontainer #egw_fw_userinfo span.user {
display: inline-block;
height: 50px;
margin-left: 8px;
font-size: 12pt;
overflow: hidden;
max-width: 225px;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 17px;
}
body .egw_fw_ui_tabs_header { body .egw_fw_ui_tabs_header {
margin: 0px 0 0 0; margin: 0px 0 0 0;
padding: 1px 1px 0px 0px; padding: 1px 1px 0px 0px;
@ -6972,7 +6994,7 @@ span.egw_tutorial_title {
background-color: #b4b4b4; background-color: #b4b4b4;
} }
body #egw_fw_sidebar { body #egw_fw_sidebar {
top: 76px; top: 120px;
bottom: 5px; bottom: 5px;
} }
body #egw_fw_sidebar #egw_fw_sidemenu { body #egw_fw_sidebar #egw_fw_sidemenu {
@ -7248,6 +7270,15 @@ span.egw_tutorial_title {
filter: gray; filter: gray;
/* IE 6-9 */ /* IE 6-9 */
} }
body .sidebar-toggle #egw_fw_top_toolbar div#egw_fw_menu {
background-image: url(../images/topmenu_items/mobile/menu.png);
}
body .sidebar-toggle #egw_fw_top_toolbar #egw_fw_userinfo {
display: none;
}
body .sidebar-toggle #egw_fw_sidebar {
top: 70px;
}
body .sidebar-toggle #egw_fw_sidebar #egw_fw_sidemenu { body .sidebar-toggle #egw_fw_sidebar #egw_fw_sidemenu {
width: 82px !important; width: 82px !important;
} }
@ -7448,8 +7479,8 @@ span.egw_tutorial_title {
display: inline; display: inline;
float: left; float: left;
position: fixed; position: fixed;
padding-left: 55px; padding-left: 50px;
padding-top: 13px; padding-right: 5px;
background: white; background: white;
height: 100%; height: 100%;
z-index: 998; z-index: 998;
@ -7479,21 +7510,16 @@ span.egw_tutorial_title {
} }
body #egw_fw_basecontainer.sidebar-toggle #egw_fw_top_toolbar div#egw_fw_menu { body #egw_fw_basecontainer.sidebar-toggle #egw_fw_top_toolbar div#egw_fw_menu {
background-image: url(../images/topmenu_items/mobile/menu_white.png); background-image: url(../images/topmenu_items/mobile/menu_white.png);
width: 65px; width: 50px;
height: 50px; height: 50px;
background-color: transparent; background-color: transparent;
top: -3px;
background-position: 15px center; background-position: 15px center;
background-size: 24px 24px; margin-left: 8px;
left: 0;
} }
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 div#egw_fw_menu {
background-size: 24px 24px;
}
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;
} }

56
pixelegg/css/mobile.less
View File

@ -223,13 +223,12 @@
background-image: url(../images/topmenu_items/mobile/menu_active.png); background-image: url(../images/topmenu_items/mobile/menu_active.png);
cursor: pointer; cursor: pointer;
position: fixed; position: fixed;
left: 13px; width: 50px;
top: 13px;
width: 65px;
height: 50px; height: 50px;
background-size: 32px 32px; background-size: 24px 24px;
background-repeat: no-repeat; background-repeat: no-repeat;
z-index: 999; z-index: 999;
background-position:center;
&:hover { &:hover {
-webkit-box-shadow: none; -webkit-box-shadow: none;
-moz-box-shadow: none; -moz-box-shadow: none;
@ -249,8 +248,7 @@
display: inline; display: inline;
float: left; float: left;
position: fixed; position: fixed;
padding-left: 55px; padding:8px 5px 0 50px;
padding-top: 13px;
ul{ ul{
display:inline; display:inline;
padding:0; padding:0;
@ -358,6 +356,31 @@
} }
} }
} }
#egw_fw_userinfo {
position: fixed;
top:60px;
margin-left:8px;
width:300px;
height:60px;
z-index:1000;
text-align : left;
span.avatar {
display: inline-block;
float:left;
}
span.user {
display: inline-block;
height: 50px;
margin-left: 8px;
font-size: 12pt;
overflow: hidden;
max-width: 225px;
text-overflow: ellipsis;
white-space: nowrap;
margin-top:17px;
}
}
}//End of toolbar }//End of toolbar
// ######################tabs header ########################## // ######################tabs header ##########################
@ -488,7 +511,7 @@
//# # //# #
//################### //###################
#egw_fw_sidebar{ #egw_fw_sidebar{
top: 76px; top: 120px;
bottom: 5px; bottom: 5px;
//SIDE AREA //SIDE AREA
#egw_fw_sidemenu { #egw_fw_sidemenu {
@ -710,9 +733,13 @@
.sidebar-toggle{ .sidebar-toggle{
#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);
}
#egw_fw_top_toolbar #egw_fw_userinfo{
display: none;
} }
#egw_fw_sidebar{ #egw_fw_sidebar{
top: 70px;
#egw_fw_sidemenu{ #egw_fw_sidemenu{
width:82px !important; width:82px !important;
.egw_fw_ui_sidemenu_entry_content{ .egw_fw_ui_sidemenu_entry_content{
@ -978,8 +1005,8 @@
display: inline; display: inline;
float: left; float: left;
position: fixed; position: fixed;
padding-left: 55px; padding-left: 50px;
padding-top: 13px; padding-right:5px;
background:white; background:white;
height:100%; height:100%;
z-index:998; z-index:998;
@ -1017,13 +1044,11 @@
#egw_fw_top_toolbar { #egw_fw_top_toolbar {
div#egw_fw_menu { div#egw_fw_menu {
background-image: url(../images/topmenu_items/mobile/menu_white.png); background-image: url(../images/topmenu_items/mobile/menu_white.png);
width: 65px; width: 50px;
height: 50px; height: 50px;
background-color: transparent; background-color: transparent;
top: -3px;
background-position: 15px center; background-position: 15px center;
background-size: 24px 24px; margin-left:8px;
left: 0;
} }
} }
} }
@ -1033,9 +1058,6 @@
height:18px; height:18px;
} }
#egw_fw_top_toolbar { #egw_fw_top_toolbar {
div#egw_fw_menu {
background-size: 24px 24px;
}
div#egw_fw_topmenu_items { div#egw_fw_topmenu_items {
padding-top: 8px; padding-top: 8px;
} }

6
pixelegg/head_mobile.tpl
View File

File diff suppressed because one or more lines are too long