forked from extern/egroupware
WIP mobile framework: add some styling and mobile header template
This commit is contained in:
Hadi Nategh
parent
c22721d0c9
commit
9e32d842a2
@ -134,26 +134,6 @@ egw_LAB.wait(function() {
|
|||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
|
||||||
* Callback to calculate height of browser iframe or div
|
|
||||||
*
|
|
||||||
* Override jdots height calcluation
|
|
||||||
*
|
|
||||||
* @param {object} _iframe dom node of iframe or null for div
|
|
||||||
* @returns number in pixel
|
|
||||||
*/
|
|
||||||
egw_fw.prototype.getIFrameHeight = function(iframe)
|
|
||||||
{
|
|
||||||
$header = $j(this.tabsUi.appHeaderContainer);
|
|
||||||
var content = $j(this.tabsUi.activeTab.contentDiv);
|
|
||||||
//var height = $j(this.sidemenuDiv).height()-this.tabsUi.appHeaderContainer.outerHeight() - this.tabsUi.appHeader.outerHeight();
|
|
||||||
var height = $j(this.sidemenuDiv).height()
|
|
||||||
- $header.outerHeight() - $j(this.tabsUi.contHeaderDiv).outerHeight() - (content.outerHeight(true) - content.height())
|
|
||||||
// Not sure where this comes from...
|
|
||||||
+ 5;
|
|
||||||
return height;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* replace [+] on mouseover with quick-add selectbox
|
* replace [+] on mouseover with quick-add selectbox
|
||||||
*
|
*
|
||||||
|
|||||||
@ -8,9 +8,148 @@ and open the template in the editor.
|
|||||||
Author : Hadi Nategh <hn@stylite.de>
|
Author : Hadi Nategh <hn@stylite.de>
|
||||||
*/
|
*/
|
||||||
@media all {
|
@media all {
|
||||||
#egw_fw_sidebar{
|
|
||||||
-webkit-transform: translate3d(0px,0px,0px);
|
#egw_fw_basecontainer{
|
||||||
}
|
|
||||||
|
//###################
|
||||||
|
//# #
|
||||||
|
//# SIDEBAR #
|
||||||
|
//# #
|
||||||
|
//###################
|
||||||
|
#egw_fw_sidebar{
|
||||||
|
top: 60px;
|
||||||
|
border-top:2px solid gray;
|
||||||
|
|
||||||
|
}//End of Sidebar
|
||||||
|
|
||||||
|
//###################
|
||||||
|
//# #
|
||||||
|
//# TOOLBAR #
|
||||||
|
//# #
|
||||||
|
//###################
|
||||||
|
|
||||||
|
//FW Logout
|
||||||
|
div#egw_fw_logout{
|
||||||
|
left: 235px;
|
||||||
|
top: 15px;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background-size: 24px 24px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
//FW Print
|
||||||
|
div#egw_fw_print{
|
||||||
|
display:none; //ATM set it to not displayed
|
||||||
|
left: 180px;
|
||||||
|
top: 15px;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background-size: 24px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
//FW Menu
|
||||||
|
div#egw_fw_menu{
|
||||||
|
background-image: url(../images/topmenu_items/mobile/menu.png);
|
||||||
|
position: fixed;
|
||||||
|
left: 20px;
|
||||||
|
top: 15px;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background-size: 32px 32px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
div#egw_fw_menu:active {
|
||||||
|
-webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
|
||||||
|
-moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
|
||||||
|
box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
div#egw_fw_topmenu_items{
|
||||||
|
width: 250px;
|
||||||
|
display: inline-block;
|
||||||
|
float: left;
|
||||||
|
position: fixed;
|
||||||
|
left: 20px;
|
||||||
|
top: 4px;
|
||||||
|
ul{
|
||||||
|
display:flex;
|
||||||
|
li{
|
||||||
|
display:table-row;
|
||||||
|
padding-right: 6px;
|
||||||
|
}
|
||||||
|
a#topmenu_home:before {
|
||||||
|
content: " ";
|
||||||
|
background-image: url(../images/topmenu_items/mobile/home.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 24px 24px;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
display: inline-block;
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
a#topmenu_prefs:before {
|
||||||
|
content: "";
|
||||||
|
background-image: url(../images/topmenu_items/mobile/setup.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background-size: 32px 32px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
a#topmenu_acl:before {
|
||||||
|
content: "";
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background-size: 32px 32px;
|
||||||
|
background-image: url(../images/topmenu_items/mobile/access.png);
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
a#topmenu_cats:before {
|
||||||
|
background-image: url(../images/topmenu_items/mobile/category.png);
|
||||||
|
content: "";
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background-size: 32px 32px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
a#topmenu_preferences:before {
|
||||||
|
background-image: url(../images/topmenu_items/mobile/password.png);
|
||||||
|
content: "";
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background-size: 32px 32px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
a#topmenu_manual:before {
|
||||||
|
background-image: url(../images/topmenu_items/mobile/help.png);
|
||||||
|
content: "";
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background-size: 32px 32px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
a#topmenu_search:before {
|
||||||
|
background-image: url(../images/topmenu_items/mobile/search.png);
|
||||||
|
content: "";
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background-size: 32px 32px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}//End of toolbar
|
||||||
|
|
||||||
|
|
||||||
// ######################tabs header ##########################
|
// ######################tabs header ##########################
|
||||||
// # # # # # # # # # ####
|
// # # # # # # # # # ####
|
||||||
@ -19,7 +158,7 @@ and open the template in the editor.
|
|||||||
// # # # # # # # # # ####
|
// # # # # # # # # # ####
|
||||||
// ############################################################
|
// ############################################################
|
||||||
// Div Tabs
|
// Div Tabs
|
||||||
|
|
||||||
.egw_fw_ui_tabs_header {
|
.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;
|
||||||
@ -54,7 +193,7 @@ and open the template in the editor.
|
|||||||
.egw_fw_ui_tab_header {
|
.egw_fw_ui_tab_header {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
.border_radius(5px,0, 0, 5px);
|
.border_radius(0,0, 0, 0);
|
||||||
background: transparent;
|
background: transparent;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -113,10 +252,10 @@ and open the template in the editor.
|
|||||||
.egw_fw_ui_tab_header_active {
|
.egw_fw_ui_tab_header_active {
|
||||||
border-width: 1px 1px 0px 1px !important;
|
border-width: 1px 1px 0px 1px !important;
|
||||||
/*padding: 0 0 5px !important;*/
|
/*padding: 0 0 5px !important;*/
|
||||||
.background_color_30_gray ;
|
.background_color_egw_light;
|
||||||
background-image:none !important;
|
background-image:none !important;
|
||||||
|
|
||||||
&:hover {.background_color_25_gray ;}
|
&:hover {.background_color_egw_light ;}
|
||||||
|
|
||||||
|
|
||||||
// Active image
|
// Active image
|
||||||
@ -398,35 +537,46 @@ and open the template in the editor.
|
|||||||
//ToggleClass
|
//ToggleClass
|
||||||
|
|
||||||
.sidebarToggle{
|
.sidebarToggle{
|
||||||
width:82px !important;
|
#egw_fw_sidebar{
|
||||||
.egw_fw_ui_sidemenu_entry_content{
|
#egw_fw_sidemenu{
|
||||||
|
width:82px !important;
|
||||||
|
.egw_fw_ui_sidemenu_entry_content, .egw_fw_ui_sidemenu_entry_header{
|
||||||
|
display:none !important;
|
||||||
|
}
|
||||||
|
.egw_fw_ui_sidemenu_entry_header{
|
||||||
|
height: 38px;
|
||||||
|
width: 54px;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
border-radius: 0px 15px 15px 0px;
|
||||||
|
img{
|
||||||
|
src: url(../images/topmenu_items/setup.png) !important;
|
||||||
|
height:32px !important;
|
||||||
|
width:32px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.egw_fw_ui_tabs_header{
|
||||||
|
span{
|
||||||
|
height:38px;
|
||||||
|
width:50px;
|
||||||
|
border-radius: 0px 15px 15px 0px;
|
||||||
|
img{
|
||||||
|
height:32px !important;
|
||||||
|
width:32px !important;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#egw_fw_splitter, .egw_fw_ui_sidemenu_entry_header_active h1{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#egw_fw_logout, #egw_fw_topmenu_items{
|
||||||
display:none !important;
|
display:none !important;
|
||||||
}
|
}
|
||||||
.egw_fw_ui_sidemenu_entry_header{
|
|
||||||
height: 38px;
|
|
||||||
width: 54px;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
border-radius: 0px 15px 15px 0px;
|
|
||||||
img{
|
|
||||||
src: url(../images/topmenu_items/setup.png) !important;
|
|
||||||
height:32px !important;
|
|
||||||
width:32px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.egw_fw_ui_tabs_header{
|
|
||||||
span{
|
|
||||||
height:38px;
|
|
||||||
width:50px;
|
|
||||||
border-radius: 0px 15px 15px 0px;
|
|
||||||
img{
|
|
||||||
height:32px !important;
|
|
||||||
width:32px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#egw_fw_splitter{
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
48
pixelegg/templates/pixelegg/head_mobile.tpl
Normal file
48
pixelegg/templates/pixelegg/head_mobile.tpl
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
<!-- BEGIN head --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||||
|
<html xml:lang="{lang_code}" xmlns="http://www.w3.org/1999/xhtml"{dir_code}>
|
||||||
|
<head>
|
||||||
|
<title>{website_title}</title>
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset={charset}" />
|
||||||
|
<meta name="keywords" content="EGroupware" />
|
||||||
|
<meta name="description" content="EGroupware" />
|
||||||
|
<meta name="keywords" content="EGroupware" />
|
||||||
|
<meta name="copyright" content="Stylite AG 2013, see http://www.stylite.de/EPL" />
|
||||||
|
<meta name="language" content="{lang_code}" />
|
||||||
|
<meta name="author" content="Stylite AG www.stylite.de" />
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
|
<meta name="viewport" content="user-scalable=no" />
|
||||||
|
{pngfix}
|
||||||
|
{meta_robots}
|
||||||
|
<link rel="icon" href="{img_icon}" type="image/x-ico" />
|
||||||
|
<link rel="shortcut icon" href="{img_shortcut}" />
|
||||||
|
{css_file}
|
||||||
|
<style type="text/css">
|
||||||
|
{app_css}
|
||||||
|
</style>
|
||||||
|
{java_script}
|
||||||
|
</head>
|
||||||
|
<body {body_tags}>
|
||||||
|
{include_wz_tooltip}
|
||||||
|
<div id="divAppboxHeader" class="onlyPrint">{app_header}</div>
|
||||||
|
<!-- END head -->
|
||||||
|
<!-- BEGIN framework -->
|
||||||
|
{hook_after_navbar}
|
||||||
|
<div id="egw_fw_basecontainer">
|
||||||
|
<div id="egw_fw_logout" title="{title_logout}" data-logout-url="{link_logout}"></div>
|
||||||
|
<div id="egw_fw_print" title="{title_print}"></div>
|
||||||
|
<div id="egw_fw_topmenu_items">{topmenu_items}</div>
|
||||||
|
<div id="egw_fw_menu" title="{title_menu}"></div>
|
||||||
|
<div id="egw_fw_sidebar">
|
||||||
|
<div id="egw_fw_sidemenu">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="egw_fw_main">
|
||||||
|
|
||||||
|
<div id="egw_fw_tabs">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="egw_fw_footer">{powered_by}</div>
|
||||||
|
<!-- END framework -->
|
||||||
Loading…
Reference in New Issue
Block a user