mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-07 08:34:42 +01:00
Mobile theme W.I.P.:
- 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
parent
ac6b0e9a94
commit
d8d1b0b61f
@ -121,8 +121,18 @@ var fw_ui_sidemenu_entry = (function(){ "use strict"; return Class.extend(
|
||||
open: function()
|
||||
{
|
||||
/* Move this entry to the top of the list */
|
||||
$j(this.baseDiv).prepend(this.contentDiv);
|
||||
$j(this.baseDiv).prepend(this.headerDiv);
|
||||
if (egwIsMobile())
|
||||
{
|
||||
$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;
|
||||
|
||||
$j(this.headerDiv).addClass("egw_fw_ui_sidemenu_entry_header_active");
|
||||
|
||||
@ -6164,9 +6164,28 @@ span.egw_tutorial_title {
|
||||
body #egw_fw_basecontainer {
|
||||
background: white;
|
||||
}
|
||||
body #egw_fw_basecontainer #egw_fw_main {
|
||||
margin-top: 15px;
|
||||
}
|
||||
body #egw_fw_basecontainer #egw_fw_main #egw_fw_tabs {
|
||||
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 {
|
||||
max-height: 60px;
|
||||
width: 60%;
|
||||
@ -6210,6 +6229,7 @@ span.egw_tutorial_title {
|
||||
background-repeat: no-repeat;
|
||||
z-index: 999;
|
||||
background-position: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
body #egw_fw_basecontainer div#egw_fw_menu:hover {
|
||||
-webkit-box-shadow: none;
|
||||
@ -6248,16 +6268,6 @@ span.egw_tutorial_title {
|
||||
-moz-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 {
|
||||
content: " ";
|
||||
background-image: url(../images/topmenu_items/mobile/home.png);
|
||||
@ -6328,13 +6338,10 @@ span.egw_tutorial_title {
|
||||
background-position: center;
|
||||
}
|
||||
body #egw_fw_basecontainer #egw_fw_userinfo {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
margin-left: 8px;
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
z-index: 1000;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
margin-left: 40%;
|
||||
}
|
||||
body #egw_fw_basecontainer #egw_fw_userinfo span.avatar {
|
||||
display: inline-block;
|
||||
@ -6475,7 +6482,7 @@ span.egw_tutorial_title {
|
||||
background-color: #b4b4b4;
|
||||
}
|
||||
body #egw_fw_sidebar {
|
||||
top: 110px;
|
||||
top: 55px;
|
||||
bottom: 5px;
|
||||
}
|
||||
body #egw_fw_sidebar #egw_fw_sidemenu {
|
||||
@ -6629,6 +6636,7 @@ span.egw_tutorial_title {
|
||||
border-style: solid;
|
||||
border-width: 0px;
|
||||
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) {
|
||||
@ -6773,7 +6781,8 @@ span.egw_tutorial_title {
|
||||
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 {
|
||||
body .sidebar-toggle #egw_fw_top_toolbar #egw_fw_userinfo,
|
||||
body .sidebar-toggle #egw_fw_top_toolbar .egw_fw_logout {
|
||||
display: none;
|
||||
}
|
||||
body .sidebar-toggle #egw_fw_sidebar {
|
||||
|
||||
@ -137,6 +137,7 @@
|
||||
background:white;
|
||||
|
||||
#egw_fw_main {
|
||||
margin-top:15px;
|
||||
#egw_fw_tabs {
|
||||
margin-top:-3px;
|
||||
}
|
||||
@ -147,6 +148,20 @@
|
||||
//# #
|
||||
//###################
|
||||
#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{
|
||||
max-height: 60px;
|
||||
@ -197,6 +212,7 @@
|
||||
background-repeat: no-repeat;
|
||||
z-index: 999;
|
||||
background-position:center;
|
||||
margin-left:10px;
|
||||
&:hover {
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
@ -233,18 +249,7 @@
|
||||
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 {
|
||||
content: " ";
|
||||
background-image: url(../images/topmenu_items/mobile/home.png);
|
||||
@ -325,13 +330,10 @@
|
||||
}
|
||||
}
|
||||
#egw_fw_userinfo {
|
||||
position: absolute;
|
||||
top:50px;
|
||||
margin-left:8px;
|
||||
width:300px;
|
||||
height:50px;
|
||||
z-index:1000;
|
||||
text-align : left;
|
||||
display: inline-block;
|
||||
margin-left:40%;
|
||||
span.avatar {
|
||||
display: inline-block;
|
||||
float:left;
|
||||
@ -479,7 +481,7 @@
|
||||
//# #
|
||||
//###################
|
||||
#egw_fw_sidebar{
|
||||
top: 110px;
|
||||
top: 55px;
|
||||
bottom: 5px;
|
||||
//SIDE AREA
|
||||
#egw_fw_sidemenu {
|
||||
@ -577,7 +579,7 @@
|
||||
border-style: solid;
|
||||
border-width: 0px;
|
||||
margin: 0 0 2em 0;
|
||||
|
||||
background-color:white;
|
||||
|
||||
// rounded Corner on bottom
|
||||
&:nth-last-of-type(-n+3) {
|
||||
@ -718,7 +720,7 @@
|
||||
#egw_fw_top_toolbar div#egw_fw_menu{
|
||||
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;
|
||||
}
|
||||
#egw_fw_sidebar{
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -6175,9 +6175,28 @@ span.egw_tutorial_title {
|
||||
body #egw_fw_basecontainer {
|
||||
background: white;
|
||||
}
|
||||
body #egw_fw_basecontainer #egw_fw_main {
|
||||
margin-top: 15px;
|
||||
}
|
||||
body #egw_fw_basecontainer #egw_fw_main #egw_fw_tabs {
|
||||
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 {
|
||||
max-height: 60px;
|
||||
width: 60%;
|
||||
@ -6221,6 +6240,7 @@ span.egw_tutorial_title {
|
||||
background-repeat: no-repeat;
|
||||
z-index: 999;
|
||||
background-position: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
body #egw_fw_basecontainer div#egw_fw_menu:hover {
|
||||
-webkit-box-shadow: none;
|
||||
@ -6259,16 +6279,6 @@ span.egw_tutorial_title {
|
||||
-moz-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 {
|
||||
content: " ";
|
||||
background-image: url(../images/topmenu_items/mobile/home.png);
|
||||
@ -6339,13 +6349,10 @@ span.egw_tutorial_title {
|
||||
background-position: center;
|
||||
}
|
||||
body #egw_fw_basecontainer #egw_fw_userinfo {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
margin-left: 8px;
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
z-index: 1000;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
margin-left: 40%;
|
||||
}
|
||||
body #egw_fw_basecontainer #egw_fw_userinfo span.avatar {
|
||||
display: inline-block;
|
||||
@ -6486,7 +6493,7 @@ span.egw_tutorial_title {
|
||||
background-color: #b4b4b4;
|
||||
}
|
||||
body #egw_fw_sidebar {
|
||||
top: 110px;
|
||||
top: 55px;
|
||||
bottom: 5px;
|
||||
}
|
||||
body #egw_fw_sidebar #egw_fw_sidemenu {
|
||||
@ -6640,6 +6647,7 @@ span.egw_tutorial_title {
|
||||
border-style: solid;
|
||||
border-width: 0px;
|
||||
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) {
|
||||
@ -6784,7 +6792,8 @@ span.egw_tutorial_title {
|
||||
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 {
|
||||
body .sidebar-toggle #egw_fw_top_toolbar #egw_fw_userinfo,
|
||||
body .sidebar-toggle #egw_fw_top_toolbar .egw_fw_logout {
|
||||
display: none;
|
||||
}
|
||||
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) {
|
||||
body #egw_fw_basecontainer.sidebar-toggle div#egw_fw_top_toolbar {
|
||||
z-index: 0;
|
||||
}
|
||||
body #egw_fw_basecontainer.sidebar-toggle #egw_fw_main {
|
||||
margin-left: 0 !important ;
|
||||
}
|
||||
@ -7202,10 +7208,17 @@ form[id^="tracker-"] .dialogHeadbar {
|
||||
background-position: 15px center;
|
||||
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 {
|
||||
width: 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 {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
@ -170,9 +170,6 @@
|
||||
body{
|
||||
#egw_fw_basecontainer.sidebar-toggle
|
||||
{
|
||||
div#egw_fw_top_toolbar {
|
||||
z-index: 0;
|
||||
}
|
||||
#egw_fw_main {
|
||||
margin-left:0 !important ;
|
||||
#egw_fw_tabs {
|
||||
@ -255,11 +252,20 @@
|
||||
}
|
||||
}
|
||||
#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 {
|
||||
width:18px;
|
||||
height:18px;
|
||||
}
|
||||
#egw_fw_top_toolbar {
|
||||
position:absolute;
|
||||
width:300px;
|
||||
#egw_fw_userinfo {
|
||||
|
||||
}
|
||||
div#egw_fw_topmenu_items {
|
||||
padding-top: 8px;
|
||||
ul {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user