mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-07 08:34:42 +01:00
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
|
||||
*
|
||||
|
||||
@ -8,9 +8,148 @@ and open the template in the editor.
|
||||
Author : Hadi Nategh <hn@stylite.de>
|
||||
*/
|
||||
@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 ##########################
|
||||
// # # # # # # # # # ####
|
||||
@ -19,7 +158,7 @@ and open the template in the editor.
|
||||
// # # # # # # # # # ####
|
||||
// ############################################################
|
||||
// Div Tabs
|
||||
|
||||
|
||||
.egw_fw_ui_tabs_header {
|
||||
margin: 0px 0 0 0;
|
||||
padding: 1px 1px 0px 0px;
|
||||
@ -54,7 +193,7 @@ and open the template in the editor.
|
||||
.egw_fw_ui_tab_header {
|
||||
padding-left: 0;
|
||||
position: relative;
|
||||
.border_radius(5px,0, 0, 5px);
|
||||
.border_radius(0,0, 0, 0);
|
||||
background: transparent;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
@ -113,10 +252,10 @@ and open the template in the editor.
|
||||
.egw_fw_ui_tab_header_active {
|
||||
border-width: 1px 1px 0px 1px !important;
|
||||
/*padding: 0 0 5px !important;*/
|
||||
.background_color_30_gray ;
|
||||
.background_color_egw_light;
|
||||
background-image:none !important;
|
||||
|
||||
&:hover {.background_color_25_gray ;}
|
||||
&:hover {.background_color_egw_light ;}
|
||||
|
||||
|
||||
// Active image
|
||||
@ -398,35 +537,46 @@ and open the template in the editor.
|
||||
//ToggleClass
|
||||
|
||||
.sidebarToggle{
|
||||
width:82px !important;
|
||||
.egw_fw_ui_sidemenu_entry_content{
|
||||
#egw_fw_sidebar{
|
||||
#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;
|
||||
}
|
||||
.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