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 
- Sidebar acts based on device size
- Remove portrait top header (sidebar toggle menu will be positioned next to nm header)
- Remove collapsed sidebar application navigator, only for devices
This commit is contained in:
Hadi Nategh 2015-11-16 15:45:04 +00:00
parent 6e924a3700
commit 7c944b5aeb
15 changed files with 853 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
home/inc/class.home_tutorial_ui.inc.php
View File

@ -132,6 +132,7 @@ class home_tutorial_ui
*/
public static function tutorial_menu()
{
if (html::$ua_mobile) return;
$tutorials = json_decode(self::getJsonData(),true);
$appname = $GLOBALS['egw_info']['flags']['currentapp'];
if (!is_array($tutorials[$appname])) return false;

2
infolog/inc/class.infolog_hooks.inc.php
View File

@ -109,7 +109,7 @@ class infolog_hooks
display_sidebox($appname,$GLOBALS['egw_info']['apps']['infolog']['title'].' '.lang('Menu'),$file);
}
if ($GLOBALS['egw_info']['user']['apps']['admin'])
if ($GLOBALS['egw_info']['user']['apps']['admin'] && !html::$ua_mobile)
{
$file = Array(
'Site configuration' => egw::link('/index.php',array(

2
mail/inc/class.mail_hooks.inc.php
View File

@ -526,7 +526,7 @@ class mail_hooks
// display them all
display_sidebox($appname,$menu_title,$file);
if ($GLOBALS['egw_info']['user']['apps']['admin'])
if ($GLOBALS['egw_info']['user']['apps']['admin'] && !html::$ua_mobile)
{
$file = Array(
'Site Configuration' => egw::link('/index.php','menuaction=admin.uiconfig.index&appname=' . $appname),

1
mail/inc/class.mail_ui.inc.php
View File

@ -436,6 +436,7 @@ class mail_ui
'actions' => self::get_actions(),
'row_id' => 'row_id', // is a concatenation of trim($GLOBALS['egw_info']['user']['account_id']):profileID:base64_encode(FOLDERNAME):uid
'placeholder_actions' => array('composeasnew'),
'header_row' => 'mail.mobile_index.header_right'
);
}
}

6
mail/templates/default/app.css
View File

@ -838,6 +838,9 @@ blockquote blockquote blockquote blockquote blockquote blockquote{
padding-top: 8px;
padding-bottom: 8px;
}
table.egwGridView_grid span.et2_date_ro.et2_label {
font-size: 9px;
}
/*Make Font size readable in mobile theme*/
#mail-compose .mailComposeHeaders span, #mail-compose .mailComposeHeadersSection span,
div.mailDisplayHeaders > span:first-child, div.mailComposeHeaders > span:first-child, div.mailComposeBody, div.mailPreviewHeaders > *{
@ -846,6 +849,9 @@ blockquote blockquote blockquote blockquote blockquote blockquote{
.mailDisplayHeaders, .mailDisplayAttachments > * {
font-size: large !important;
}
span.status_img {
background-image: none !important;
}
}
/* tablets and smartphones (portrait) ----------- */
@media only screen

43
mail/templates/default/mobile_index.xet
View File

@ -5,52 +5,41 @@
<template id="mail.mobile_index.rows" template="" lang="" group="0" version="1.9.001">
<grid width="100%">
<columns>
<column width="25"/>
<column width="20"/>
<column width="20"/>
<column width="40%"/>
<column width="95"/>
<column width="30%"/>
<column width="30%"/>
<column width="30%"/>
<column/>
<column width="80"/>
</columns>
<rows>
<row class="th">
<nextmatch-sortheader label="ID" id="uid" readonly="true"/>
<nextmatch-header statustext="Status" label="St." id="status"/>
<nextmatch-header statustext="attachments, ..." label="..." id="attachments"/>
<nextmatch-sortheader label="subject" id="subject"/>
<nextmatch-sortheader align="center" label="date" id="date" sortmode="DESC"/>
<nextmatch-sortheader label="mail-address" id="address"/>
<nextmatch-sortheader label="to" id="toaddress"/>
<nextmatch-sortheader label="from" id="fromaddress"/>
<nextmatch-sortheader align="center" label="size" id="size"/>
</row>
<row class="$row_cont[class]">
<description id="${row}[uid]" no_lang="1" readonly="true"/>
<description span="1" class="status_img"/>
<html id="${row}[attachments]"/>
<description id="${row}[subject]" no_lang="1"/>
<date-time_today align="center" id="${row}[date]" readonly="true"/>
<url-email id="${row}[address]" contact_plus = "true" readonly="true"/>
<url-email id="${row}[toaddress]" contact_plus = "true" readonly="true"/>
<vbox>
<url-email id="${row}[fromaddress]" contact_plus = "true" readonly="true"/>
<vfs-size align="right" id="${row}[size]" no_lang="1" readonly="true"/>
<description id="${row}[subject]" no_lang="1"/>
</vbox>
<vbox>
<time_or_date align="center" id="${row}[date]" readonly="true"/>
<hbox>
<html id="${row}[attachments]"/>
<description class="status_img"/>
</hbox>
</vbox>
</row>
</rows>
</grid>
</template>
<template id="mail.mobile_index.header_right">
<hbox class="mail-index_quotabox"><progress id="nm[quotainpercent]" label="@nm[quota]" class="@nm[quotaclass]"/></hbox>
</template>
<template id="mail.mobile_index" template="" lang="" group="0" version="1.9.001">
<tree autoloading="mail.mail_ui.ajax_foldertree" id="nm[foldertree]" onclick="app.mail.mail_changeFolder" parent_node="mail-tree_target"/>
<html id="msg"/>
<buttononly id="button[mailcreate]" onclick="app.mail.mail_compose(false);" label="Compose" parent_node="mail-index_buttonmailcreate"/>
<hbox class="mail-index_quotabox"><progress id="nm[quotainpercent]" label="@nm[quota]" class="@nm[quotaclass]"/></hbox>
<hbox class="mail-index_vacation"><vbox>
<description id="nm[vacationnotice]" class="@nm[vacationclass]"/>
<description id="nm[vacationrange]" class="@nm[vacationrangeclass]"/></vbox>
</hbox>
<nextmatch id="nm" onselect="app.mail.mail_preview" template="mail.mobile_index.rows"/>
<nextmatch id="nm" onselect="app.mail.mail_preview" template="mail.mobile_index.rows" right_header="mail.mobile_index.header_right"/>
<iframe frameborder="1" id="extra_iframe" scrolling="auto" disabled="true"/>
</template>
</overlay>

6
mail/templates/pixelegg/app.css
View File

@ -834,6 +834,9 @@ blockquote blockquote blockquote blockquote blockquote blockquote {
padding-top: 8px;
padding-bottom: 8px;
}
table.egwGridView_grid span.et2_date_ro.et2_label {
font-size: 9px;
}
/*Make Font size readable in mobile theme*/
#mail-compose .mailComposeHeaders span,
#mail-compose .mailComposeHeadersSection span,
@ -847,6 +850,9 @@ blockquote blockquote blockquote blockquote blockquote blockquote {
.mailDisplayAttachments > * {
font-size: large !important;
}
span.status_img {
background-image: none !important;
}
}
/* tablets and smartphones (portrait) ----------- */
@media only screen and (max-device-width: 1024px) and (orientation: portrait) {

2
phpgwapi/inc/class.egw_framework.inc.php
View File

@ -587,7 +587,7 @@ abstract class egw_framework
//error_log(__METHOD__."() this->template=$this->template, this->template_dir=$this->template_dir, get_class(this)=".get_class($this));
$tmpl = new Template(EGW_SERVER_ROOT.$this->template_dir);
$tmpl->set_file(array('login_form' => 'login.tpl'));
$tmpl->set_file(array('login_form' => html::$ua_mobile?'login_mobile.tpl':'login.tpl'));
$tmpl->set_var('lang_message',$GLOBALS['loginscreenmessage']);

1
phpgwapi/inc/class.hooks.inc.php
View File

@ -373,6 +373,7 @@ class hooks
*/
public static function pgp_encryption_menu($appname)
{
if (html::$ua_mobile) return;
// PGP Encryption (Mailvelope plugin) restore/backup menu
$file = Array(
'Backup/Restore ...' => 'javascript:app.'.$appname.'.mailvelopeCreateBackupRestoreDialog();',

17
phpgwapi/js/framework/fw_base.js
View File

@ -32,7 +32,7 @@ var fw_base = Class.extend({
window.egw_webserverUrl = _webserverUrl;
this.serializedTabState = '';
this.notifyTabChangeEnabled = false;
this.notifyTabChangeEnabled = true;
this.sidemenuUi = null;
this.tabsUi = null;
@ -394,6 +394,17 @@ var fw_base = Class.extend({
}
if (this.notifyTabChangeEnabled)
{
this.storeTabsStatus();
}
},
/**
* Store last status of tabs
* tab status being used in order to open all previous opened
* tabs and to activate the last active tab
*/
storeTabsStatus: function ()
{
//Send the current tab list to the server
var data = this.assembleTabList();
@ -405,10 +416,10 @@ var fw_base = Class.extend({
{
this.serializedTabState = serialized;
var request = egw.jsonq("home.jdots_framework.ajax_tab_changed_state", [data]);
}
egw.jsonq("home.jdots_framework.ajax_tab_changed_state", [data]);
}
},
/**
* @param {function} _opened
* Sends sidemenu entry category open/close information to the server using an AJAX request

3
phpgwapi/js/login.js
View File

@ -15,6 +15,9 @@ egw_LAB.wait(function()
{
$j(document).ready(function()
{
// lock the device orientation in portrait view
if (screen.orientation) screen.orientation.lock('portrait');
function do_social(_data)
{
var isPixelegg = $j('link[href*="pixelegg.css"]')[0];

419
pixelegg/css/mobile.css
View File

@ -6514,6 +6514,7 @@ span.egw_tutorial_title {
/*All devices landscape mode*/
/*Tablets landscape mode*/
/*Tablets Portrait*/
/*Smartphones*/
@media all {
body {
background-color: transparent;
@ -6533,17 +6534,23 @@ span.egw_tutorial_title {
}
body div.dhtmlxMenu_egw_SubLevelArea_Polygon {
font-size: medium;
margin-top: 15px;
top: 50px !important;
right: 0px;
left: auto !important;
}
body table.egwGridView_outer thead tr th {
font-size: small !important;
}
body table.egwGridView_outer tbody tr {
touch-action: initial;
height: 50px;
}
#egw_fw_basecontainer {
background: white;
}
#egw_fw_basecontainer #egw_fw_main #egw_fw_tabs {
margin-top: 0;
}
#egw_fw_basecontainer #egw_fw_top_toolbar div.egw_fw_ui_tabs_header {
max-height: 60px;
width: 60%;
@ -6552,7 +6559,7 @@ span.egw_tutorial_title {
position: initial;
white-space: nowrap;
position: fixed;
left: 40%;
left: 83%;
top: 15px;
height: 50px;
}
@ -6573,9 +6580,9 @@ span.egw_tutorial_title {
display: none;
}
#egw_fw_basecontainer .egw_fw_top_toolbar > div:hover {
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#egw_fw_basecontainer div#egw_fw_menu {
background-image: url(../images/topmenu_items/mobile/menu_active.png);
@ -6583,8 +6590,8 @@ span.egw_tutorial_title {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
position: fixed;
left: 20px;
top: 20px;
left: 13px;
top: 13px;
width: 32px;
height: 32px;
background-size: 32px 32px;
@ -6592,22 +6599,22 @@ span.egw_tutorial_title {
z-index: 999;
}
#egw_fw_basecontainer div#egw_fw_menu:hover {
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#egw_fw_basecontainer 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);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#egw_fw_basecontainer div#egw_fw_topmenu_items {
width: 280px;
display: inline;
float: left;
position: fixed;
left: 55px;
top: 20px;
padding-left: 55px;
padding-top: 13px;
}
#egw_fw_basecontainer div#egw_fw_topmenu_items ul {
display: inline;
@ -6622,9 +6629,9 @@ span.egw_tutorial_title {
padding: 2px;
}
#egw_fw_basecontainer div#egw_fw_topmenu_items ul li:hover {
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_logout:before {
content: "";
@ -6731,19 +6738,6 @@ span.egw_tutorial_title {
.egw_fw_ui_tabs_header .egw_fw_ui_tab_header {
padding-left: 0;
position: relative;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
/*.background-clip(padding-box);*/
background: transparent;
display: inline-block;
overflow: hidden;
@ -6752,9 +6746,6 @@ span.egw_tutorial_title {
margin: 0px 5px 0px 0px;
padding: 2px 5px 7px 2px;
cursor: pointer;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #b4b4b4;
background-repeat: repeat-x;
height: 38px;
width: 97%;
@ -6768,10 +6759,11 @@ span.egw_tutorial_title {
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
}
.egw_fw_ui_tabs_header .egw_fw_ui_tab_header h1 {
font-size: 19.8px;
font-size: 14.3px;
line-height: 1em;
margin: 0 15px 2px 2px;
vertical-align: super;
padding-left: 25px;
}
.egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon {
display: inline-block;
@ -6851,8 +6843,8 @@ span.egw_tutorial_title {
position: absolute;
top: 0px;
bottom: 4px;
left: 4px;
right: 5px;
left: 0;
right: 0;
overflow-y: auto;
z-index: 0;
padding-top: 0.6em;
@ -6892,19 +6884,6 @@ span.egw_tutorial_title {
background-position: 95% -3000px;
background-repeat: no-repeat;
background-color: #f0f0f0;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-top-left-radius: 27px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-topleft: 27px;
border-top-right-radius: 5px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-top-left-radius: 27px;
/*.background-clip(padding-box);*/
border-top: solid 1px #b4b4b4;
border-left: solid 1px #b4b4b4;
border-right: solid 1px #b4b4b4;
@ -6986,15 +6965,15 @@ span.egw_tutorial_title {
background-image: none;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 27px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 27px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-topleft: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 27px;
border-bottom-left-radius: 0px;
border-top-left-radius: 0;
/*.background-clip(padding-box);*/
border-color: #b4b4b4;
@ -7007,39 +6986,11 @@ span.egw_tutorial_title {
padding: 5px 0.3em 1.5em 0.3em;
margin: 0 0 10px 0;
background-color: #b3b3b3 !important;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 24px;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 24px;
-moz-border-radius-topleft: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 24px;
border-top-left-radius: 0;
/*.background-clip(padding-box);*/
border-color: #b4b4b4;
}
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content > div {
background-color: #b3b3b3 !important;
}
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content div.egw_fw_ui_category:nth-last-of-type(-n+3) {
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-topleft: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 15px;
border-top-left-radius: 0;
/*.background-clip(padding-box);*/
}
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category {
margin: 4px 5px 5px 5px;
padding: 0.5em 1em 0.5em 0;
@ -7072,6 +7023,9 @@ span.egw_tutorial_title {
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category div.egw_fw_ui_category:nth-last-of-type(-n+3) img.egw_fw_ui_sidemenu_listitem_icon {
display: block;
}
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content div.egw_fw_ui_category_content {
border-radius: 0;
}
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category:hover {
background-color: #999999;
padding: 0.5em 1em 0.5em 0;
@ -7194,16 +7148,15 @@ span.egw_tutorial_title {
.sidebar-toggle #egw_fw_topmenu_items {
display: none !important;
}
.tabs-header-portrait-collapsed {
left: 7% !important;
width: 90% !important;
}
#egw_fw_footer {
display: none;
}
.egw_fw_ui_app_header_container {
display: none;
}
.egw_fw_content_browser_div {
padding: 0;
}
.egw_fw_mobile_popup_container {
width: 100%;
height: 100%;
@ -7220,8 +7173,8 @@ span.egw_tutorial_title {
visibility: hidden;
}
.egw_fw_mobile_popup_container span.egw_fw_mobile_popup_close {
width: 32px;
height: 32px;
width: 50px;
height: 50px;
float: right;
background-image: url('../images/cancelled.png');
/*url(../images/topmenu_items/mobile/menu_active.png);*/
@ -7257,7 +7210,6 @@ span.egw_tutorial_title {
position: absolute;
margin: 0;
width: 100%;
background-color: transparent;
padding: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
@ -7279,7 +7231,6 @@ span.egw_tutorial_title {
}
div#loginMainDiv div#centerBox form {
margin-top: -2em;
margin-right: 3em;
}
div#loginMainDiv div#centerBox form table.divLoginbox {
width: 100%;
@ -7289,15 +7240,15 @@ span.egw_tutorial_title {
display: none;
}
div#loginMainDiv div#centerBox form table.divLoginbox input[type="submit"] {
font-size: xx-large;
font-size: large;
}
div#loginMainDiv div#centerBox form table.divLoginbox input,
div#loginMainDiv div#centerBox form table.divLoginbox select {
width: 100%;
height: 60px;
height: 50px;
}
div#loginMainDiv div#centerBox form table.divLoginbox td {
font-size: 300%;
font-size: large;
padding: 0.8%;
}
div#loginMainDiv div#centerBox form table.divLoginbox td.registration {
@ -7320,22 +7271,298 @@ span.egw_tutorial_title {
float: left;
}
body div#loginMainDiv div#centerBox form table.divLoginbox input[type="submit"] {
font-size: xx-large;
font-size: large;
}
body div#loginMainDiv div#centerBox form table.divLoginbox input,
body div#loginMainDiv div#centerBox form table.divLoginbox select {
width: 100%;
height: 80px;
height: 50px;
}
body div#loginMainDiv div#centerBox form table.divLoginbox td {
font-size: 400%;
font-size: large;
padding: 0.8%;
}
body div#loginMainDiv div#centerBox form table.divLoginbox td.registration {
font-size: 250%;
}
body div#loginMainDiv div#centerBox #loginCdMessage {
font-size: xx-large;
font-size: large;
padding: 0;
}
}
@media only screen and (max-device-width: 700px) and (min-width: 321px) {
body #egw_fw_basecontainer.sidebar-toggle div#egw_fw_top_toolbar {
z-index: 0;
}
body #egw_fw_basecontainer.sidebar-toggle #egw_fw_main #egw_fw_tabs {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
-o-filter: none;
filter: none;
}
body #egw_fw_basecontainer #egw_fw_top_toolbar {
z-index: 998;
width: 300px;
background: white;
}
body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items {
width: 245px;
display: inline;
float: left;
position: fixed;
padding-left: 55px;
padding-top: 13px;
background: white;
height: 100%;
z-index: 998;
border-right: 2px solid silver;
}
body #egw_fw_basecontainer #egw_fw_sidebar {
z-index: 999;
background: white;
}
body #egw_fw_basecontainer #egw_fw_main #egw_fw_tabs {
-webkit-filter: brightness(20%);
-moz-filter: brightness(20%);
-ms-filter: brightness(20%);
-o-filter: brightness(20%);
filter: brightness(20%);
}
}
/*mobile etemplate2*/
/*mobile etemplate2*/
@media only screen and (min-width: 320px) and (max-width: 1279px) {
div.ui-dialog {
width: 100% !important;
height: 100% !important;
left: 0 !important;
top: 0 !important;
}
.et2_nextmatch .nextmatch_header_row {
background-color: background-color-egw-dark;
}
.et2_nextmatch .nextmatch_header_row select {
display: block;
width: 100%;
height: 50px;
font-size: large;
background-size: 32px;
border-left: none;
border-right: none;
border-radius: 0;
border-bottom: none;
padding-left: 10px;
max-width: none;
}
.et2_nextmatch .nextmatch_header_row label {
display: block;
width: 100%;
float: left;
font-size: large;
}
.et2_nextmatch .nextmatch_header_row label select {
display: inline-block;
width: 80%;
float: right;
margin: 0;
height: 50px;
font-size: large;
}
.et2_nextmatch .nextmatch_header.nm_header_hide {
display: none !important;
}
.et2_nextmatch .nextmatch_header {
background-color: white;
padding: 0;
display: none;
border: 1px solid silver;
border-top: none;
}
.et2_nextmatch .nextmatch_header div.et2_box_widget {
display: block;
height: 50px;
}
.et2_nextmatch .nextmatch_header .et2_button {
width: 50px;
height: 50px;
}
.et2_nextmatch .egwGridView_outer thead tr {
visibility: hidden;
}
.et2_nextmatch .search {
background: #0c5da5;
border: 1px solid silver;
margin-left: 60px;
}
.et2_nextmatch .search button {
height: 50px;
width: 50px;
font-size: large;
background-color: #0c5da5;
border: none;
margin: 0;
border-right: 1px solid silver;
color: white;
background-image: none;
}
.et2_nextmatch .search button:active,
.et2_nextmatch .search button:hover {
background: transparent;
color: white;
}
.et2_nextmatch .search button:focus {
color: white;
box-shadow: none !important;
}
.et2_nextmatch .search button.nm_toggle_header {
background-position: center;
background-repeat: no-repeat;
margin-right: 5px;
border-left: 1px solid silver;
border: 0;
color: white;
width: 50px;
height: 50px;
display: block;
float: right;
}
.et2_nextmatch .search button.nm_toggle_header:focus {
outline: none;
}
.et2_nextmatch .search button.nm_toggle_header:after {
font-size: xx-large;
content: "\2630";
}
.et2_nextmatch .search button.nm_action_header {
background-position: center;
background-repeat: no-repeat;
margin-right: 5px;
border-left: 1px solid silver;
border: 0;
color: white;
width: 50px;
height: 50px;
display: block;
float: right;
}
.et2_nextmatch .search button.nm_action_header:focus {
outline: none;
}
.et2_nextmatch .search button.nm_action_header:after {
font-size: xx-large;
content: "\205D";
}
.et2_nextmatch .search button.nm_add_button {
background-position: center;
background-repeat: no-repeat;
margin-right: 5px;
border-left: 1px solid silver;
border: 0;
color: white;
width: 50px;
height: 50px;
display: block;
float: right;
background: white;
border: 10px solid #0c5da5;
border-radius: 50px;
}
.et2_nextmatch .search button.nm_add_button:focus {
outline: none;
}
.et2_nextmatch .search button.nm_add_button:after {
font-size: xx-large;
content: "+";
display: inline-block;
vertical-align: middle;
line-height: 10px;
color: #0c5da5;
font-weight: bold;
}
.et2_nextmatch .search button.nm_toggle_header_on:after {
content: "\2715";
}
.et2_nextmatch .search input {
width: 20%;
height: 50px;
font-size: large;
margin: 0;
border: 0;
background-color: #0c5da5;
color: white;
}
.et2_nextmatch .search input:active {
border: none;
background: #0c5da5;
}
.et2_nextmatch .search input:focus {
border: none;
backgroun: #0c5da5;
outline: none;
position: absolute;
width: 100%;
}
.et2_nextmatch .header_row_right {
height: 50px;
width: 100%;
padding: 0;
}
.et2_nextmatch .header_row_right div[id$=favorite_wrapper] {
margin: 0;
top: 0 !important;
height: 50px;
}
.et2_nextmatch .header_row_right * {
display: inline-block;
float: left;
}
.et2_nextmatch .header_row_right .et2_dropdown button {
height: 50px;
width: 50px;
}
.et2_nextmatch .header_count {
margin: 0;
height: 50px;
font-size: large;
margin-top: -3px;
margin-right: 0px;
float: right;
border: none;
border-radius: 0;
border-left: 1px solid rgba(0, 0, 0, 0.15);
}
.et2_nextmatch table.egwGridView_grid tr img {
height: 12px;
}
.et2_nextmatch table.egwGridView_grid tbody tr.focused {
background-image: none;
}
.et2_nextmatch table.egwGridView_grid tbody tr.selected {
background: rgba(255, 194, 0, 0.5) !important;
}
.et2_nextmatch table.egwGridView_grid tbody tr:hover {
background: transparent;
}
.et2_nextmatch table.egwGridView_grid tbody tr.swipe {
background-color: #ffc200;
border: none;
}
.et2_nextmatch .egwGridView_outer thead tr th {
font-size: large;
}
.dtree img {
width: 24px !important;
height: 24px !important;
}
.dtree table,
.dtree tr,
.dtree td {
padding: 2px;
padding-left: 0;
padding-right: 0px;
}
.dtree .containerTableStyle {
overflow: auto;
}
}

427
pixelegg/css/mobile.less
View File

@ -20,7 +20,7 @@
/*Tablets Max-Width*/
@tablet-max: 1024px;
/*Smartphones Max-Width*/
@smartphone-max: 768px;
@smartphone-max: 700px;
/*Smartphones Min-Width*/
@smartphone-min: 321px;
@handheld: ~"only screen and (max-device-width : @{tablet-max})";
@ -32,7 +32,8 @@
@tablet-portrait: ~"only screen and (max-device-width : @{tablet-max}) and (min-width: @{smartphone-max}) and (orientation : landscape)";
/*Tablets Portrait*/
@tablet-portrait: ~"only screen and (max-device-width : @{tablet-max}) and (min-width: @{smartphone-max}) and (orientation : portrait)";
/*Smartphones*/
@smartphones: ~"only screen and (max-device-width: @{smartphone-max}) and (min-width: @{smartphone-min})";
@media all {
body{
@ -60,7 +61,9 @@
div.dhtmlxMenu_egw_SubLevelArea_Polygon
{
font-size:medium;
margin-top:15px;
top:50px !important;
right:0px;
left:auto !important;
}
//###################
@ -79,6 +82,7 @@
tbody{
tr{
touch-action:initial;
height:@mobile-elem-height;
}
}
}
@ -86,13 +90,18 @@
#egw_fw_basecontainer{
background:white;
#egw_fw_main {
#egw_fw_tabs {
margin-top:0;
}
}
//###################
//# #
//# TOOLBAR #
//# #
//###################
#egw_fw_top_toolbar{
div.egw_fw_ui_tabs_header{
max-height: 60px;
width: 60%;
@ -101,7 +110,7 @@
position: initial;
white-space: nowrap;
position: fixed;
left: 40%;
left: 83%;
top: 15px;
height: 50px;
span{
@ -125,9 +134,9 @@
}
.egw_fw_top_toolbar>div:hover{
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
@ -138,31 +147,31 @@
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
position: fixed;
left: 20px;
top: 20px;
left: 13px;
top: 13px;
width: 32px;
height: 32px;
background-size: 32px 32px;
background-repeat: no-repeat;
z-index: 999;
&:hover {
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
}
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);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
div#egw_fw_topmenu_items{
width: 280px;
display: inline;
float: left;
position: fixed;
left: 55px;
top: 20px;
padding-left: 55px;
padding-top: 13px;
ul{
display:inline;
padding:0;
@ -174,9 +183,9 @@
display: inline-block;
padding:2px;
&:hover {
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
}
a#topmenu_logout{
@ -315,7 +324,6 @@
.egw_fw_ui_tab_header {
padding-left: 0;
position: relative;
.border_radius(0,0, 0, 0);
background: transparent;
display: inline-block;
overflow: hidden;
@ -324,9 +332,6 @@
margin: 0px 5px 0px 0px;
padding: 2px 5px 7px 2px;
cursor: pointer;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: @gray_30;;
background-repeat:repeat-x;
height: 38px;
width: 97%;
@ -340,10 +345,11 @@
}
// APP Name
h1 {
.fontsize_xxl;
.fontsize_xl;
line-height: 1em;
margin:0 15px 2px 2px;
vertical-align: super;
padding-left: 25px;
}
// Images
@ -410,8 +416,8 @@
position: absolute;
top: 0px;
bottom: 4px;
left: 4px;
right: 5px;
left: 0;
right: 0;
overflow-y: auto;
z-index: 0;
padding-top: 0.6em;
@ -423,7 +429,6 @@
{
display: block;
margin: 0 0;
&:hover {
.background_color_15_gray;
.rounded(5px);
@ -462,7 +467,6 @@
background-repeat: no-repeat;
.background_color_10_gray;
.border_radius ( 5px, 0px, 0px, 27px );
.bordered (@gray_30, @gray_30, @gray_30, @gray_30);
margin: 0 0 0 0;
@ -526,7 +530,7 @@
.egw_fw_ui_sidemenu_entry_content {
display: block;
background-image: none;
.border_radius (0, 0, 27px, 0);
.border_radius (0, 0, 0px, 0);
border-color: @gray_30;
border-style: solid;
border-width: 0px;
@ -538,7 +542,6 @@
padding: 5px 0.3em 1.5em 0.3em;
margin: 0 0 10px 0;
.background_color_30_gray;
.border_radius (0, 0, 24px, 0);
border-color: @gray_30;
}
@ -547,7 +550,7 @@
//###################################################
// has round corners
div.egw_fw_ui_category:nth-last-of-type(-n+3) {
.border_radius (0, 0, 15px, 0);
}
//###################################################
@ -577,9 +580,11 @@
display: block;
}
}
}
div.egw_fw_ui_category_content {
border-radius: 0;
}
//#################################
// Hover
// on Mouse over change color
@ -666,6 +671,7 @@
.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;
@ -704,11 +710,6 @@
}
}
.tabs-header-portrait-collapsed{
left:7% !important;
width: 90% !important;
}
//###################################
//# #
//# FOOTER #
@ -727,6 +728,9 @@
display:none;
}
.egw_fw_content_browser_div {
padding: 0;
}
//###################################
//# #
@ -748,8 +752,8 @@
visibility: hidden;
}
span.egw_fw_mobile_popup_close {
width: 32px;
height: 32px;
width: 50px;
height: 50px;
float:right;
background-image: url('../images/cancelled.png');/*url(../images/topmenu_items/mobile/menu_active.png);*/
-webkit-filter: contrast(2);
@ -795,7 +799,6 @@
position:absolute;
margin: 0;
width: 100%;
background-color: transparent;
padding: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius:0;
@ -822,7 +825,6 @@
border-radius: none;
form {
margin-top: -2em;
margin-right: 3em;
table.divLoginbox {
width:100%;
@ -831,15 +833,15 @@
display:none;
}
input[type="submit"] {
font-size: xx-large;
font-size: large;
}
input, select {
width:100%;
height:60px;
height:50px;
}
td {
font-size: 300%;
font-size: large;
padding:0.8%;
&.registration{
font-size: 180%;
@ -872,15 +874,15 @@
width:100%;
float:left;
input[type="submit"] {
font-size: xx-large;
font-size: large;
}
input, select {
width:100%;
height:80px;
height:50px;
}
td {
font-size: 400%;
font-size: large;
padding:0.8%;
&.registration {
font-size: 250%;
@ -889,10 +891,335 @@
}
}
#loginCdMessage {
font-size:xx-large;
font-size:large;
padding:0;
}
}
}
}
}
@media @smartphones {
body{
#egw_fw_basecontainer.sidebar-toggle
{
div#egw_fw_top_toolbar {
z-index: 0;
}
#egw_fw_main {
#egw_fw_tabs {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
-o-filter: none;
filter: none;
}
}
}
#egw_fw_basecontainer {
#egw_fw_top_toolbar {
z-index: 998;
width: 300px;
background: white;
div#egw_fw_topmenu_items{
width: 245px;
display: inline;
float: left;
position: fixed;
padding-left: 55px;
padding-top: 13px;
background:white;
height:100%;
z-index:998;
border-right:2px solid silver;
}
}
#egw_fw_sidebar {
z-index: 999;
background:white;
}
#egw_fw_main {
#egw_fw_tabs {
-webkit-filter: brightness(20%);
-moz-filter: brightness(20%);
-ms-filter: brightness(20%);
-o-filter: brightness(20%);
filter: brightness(20%);
}
}
}
}
}
/*mobile etemplate2*/
/*mobile etemplate2*/
@mobile-elem-height: 50px;
@mobile-button-width: 50px;
@mobile-nm-search-bg: #0c5da5;
@media only screen and (min-width: 320px) and (max-width: 1279px) {
div.ui-dialog {
width:100% !important;
height:100% !important;
left:0 !important;
top:0 !important;
}
.et2_nextmatch {
.nextmatch_header_row
{
background-color: background-color-egw-dark;
select {
display: block;
width: 100%;
height: @mobile-elem-height;
font-size: large;
background-size: 32px;
border-left: none;
border-right: none;
border-radius: 0;
border-bottom: none;
padding-left:10px;
max-width:none;
}
label {
display:block;
width: 100%;
float: left;
font-size: large;
select {
display: inline-block;
width: 80%;
float: right;
margin: 0;
height: @mobile-elem-height;
font-size: large;
}
}
}
.nextmatch_header.nm_header_hide {
display:none !important;
}
.nextmatch_header {
background-color: white;
padding:0;
display:none;
border: 1px solid silver;
border-top:none;
div.et2_box_widget {
display:block;
height:@mobile-elem-height;
}
.et2_button {
width:@mobile-button-width;
height: @mobile-elem-height;
}
}
.egwGridView_outer {
thead {
tr {
visibility:hidden;
th{
}
}
}
}
.search {
background: @mobile-nm-search-bg;
border: 1px solid silver;
margin-left: 60px;
button {
height: @mobile-elem-height;
width: @mobile-button-width;
font-size:large;
background-color: @mobile-nm-search-bg;
border: none;
margin:0;
border-right: 1px solid silver;
color: white;
background-image:none;
&:active, &:hover {
background: transparent;
color: white;
}
&:focus {
color: white;
box-shadow:none !important;
}
}
button.nm_toggle_header {
background-position: center;
background-repeat: no-repeat;
margin-right:5px;
border-left:1px solid silver;
border:0;
color: white;
width:50px;
height:50px;
display:block;
float:right;
&:focus{
outline:none;
}
&:after{
font-size:xx-large;
content:"\2630";
}
}
button.nm_action_header {
background-position: center;
background-repeat: no-repeat;
margin-right:5px;
border-left:1px solid silver;
border:0;
color: white;
width:50px;
height:50px;
display:block;
float:right;
&:focus{
outline:none;
}
&:after{
font-size:xx-large;
content:"\205D";
}
}
button.nm_add_button {
background-position: center;
background-repeat: no-repeat;
margin-right:5px;
border-left:1px solid silver;
border:0;
color: white;
width:50px;
height:50px;
display:block;
float:right;
background: white;
border: 10px solid @mobile-nm-search-bg;
border-radius: 50px;
&:focus{
outline:none;
}
&:after{
font-size:xx-large;
content:"+";
display: inline-block;
vertical-align: middle;
line-height: 10px;
color:@mobile-nm-search-bg;
font-weight: bold;
}
}
button.nm_toggle_header_on {
&:after {
content:"\2715";
}
}
input {
width: 20%;
height: @mobile-elem-height;
font-size: large;
margin:0;
border:0;
background-color:@mobile-nm-search-bg;
color: white;
&:active{
border:none;
background: @mobile-nm-search-bg;
}
&:focus {
border:none;
backgroun:@mobile-nm-search-bg;
outline: none;
position: absolute;
width:100%;
}
}
}
.header_row_right {
div[id$=favorite_wrapper] {
margin:0;
top:0 !important;
height:@mobile-elem-height;
}
height: @mobile-elem-height;
width: 100%;
padding:0;
* {
display:inline-block;
float:left;
}
.et2_dropdown {
button {
height:@mobile-elem-height;
width: @mobile-button-width;
}
}
}
.header_count {
margin:0;
height:@mobile-elem-height;
font-size: large;
margin-top: -3px;
margin-right: 0px;
float:right;
border: none;
border-radius:0;
border-left:1px solid rgba(0, 0, 0, 0.15);
}
table.egwGridView_grid {
tr {
img {
height: 12px;
}
}
tbody {
tr.focused
{
background-image: none;
}
tr.selected {
background: rgba(255, 194, 0, 0.5) !important;
}
tr {
&:hover {
background: transparent;
}
}
tr.swipe{
background-color:rgba(255, 194, 0, 1);
border:none;
}
}
}
.egwGridView_outer {
thead tr th {
font-size: large;
}
}
}
.dtree {
img {
width:24px !important;
height:24px !important;
}
table , tr, td
{
padding: 2px;
padding-left: 0;
padding-right: 0px;
}
.containerTableStyle {
overflow: auto;
}
}
}

2
pixelegg/head_mobile.tpl
View File

@ -10,7 +10,7 @@
<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" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="apple-touch-icon" href="{webserver_url}/phpgwapi/templates/default/images/logo64x64.png" />
{pngfix}
{meta_robots}

75
pixelegg/login_mobile.tpl Normal file
View File

@ -0,0 +1,75 @@
<script src="./phpgwapi/js/login.js" type="text/javascript"></script>
<div id="loginMainDiv">
<div id="divAppIconBar" style="position:relative;">
<div id="divLogo"><a href="{logo_url}" target="_blank"><img src="{logo_file}" border="0" alt="{logo_title}" title="{logo_title}" /></a></div>
</div>
<div id="centerBox">
<div id="loginAvatar">{login_avatar}</div>
<div id="loginScreenMessage">{lang_message}</div>
<div id="loginCdMessage" class="{cd_class}">{cd}</div>
<form name="login_form" method="post" action="{login_url}">
<table class="divLoginbox divSideboxEntry" cellspacing="0" cellpadding="2" border="0" align="center">
<tr class="divLoginboxHeader">
<td colspan="3">{website_title}</td>
</tr>
<tr class="hiddenCredential">
<td colspan="2" height="20" >
<input type="hidden" name="passwd_type" value="text" />
<input type="hidden" name="account_type" value="u" />
</td>
<td rowspan="6">
<img src="{template_set}/images/password.svg" class="passwordImage" />
</td>
</tr>
<!-- BEGIN language_select -->
<tr>
<td>{select_language}</td>
</tr>
<!-- END language_select -->
<!-- BEGIN domain_selection -->
<tr>
<td align="right">{lang_domain}:&nbsp;</td>
<td>{select_domain}</td>
</tr>
<!-- END domain_selection -->
<!-- BEGIN remember_me_selection -->
<tr>
<td align="right">{lang_remember_me}:&nbsp;</td>
<td>{select_remember_me}</td>
</tr>
<!-- END remember_me_selection -->
<tr>
<td><input name="login" tabindex="4" value="{login}" size="30" {autofocus_login} placeholder="{lang_username}"/></td>
</tr>
<tr>
<td><input name="passwd" tabindex="5" value="{passwd}" type="password" size="30" placeholder="{lang_password}" /></td>
</tr>
<!-- BEGIN change_password -->
<tr>
<td><input name="new_passwd" tabindex="6" type="password" size="30" {autofocus_new_passwd} placeholder="{lang_new_password}"/></td>
</tr>
<tr>
<td><input name="new_passwd2" tabindex="7" type="password" size="30" placeholder="{lang_repeat_password}"/></td>
</tr>
<!-- END change_password -->
<tr>
<td>
<input tabindex="8" type="submit" value=" {lang_login} " name="submitit" />
</td>
</tr>
<!-- BEGIN registration -->
<tr>
<td colspan="3" height="20" align="center" class="registration">
{lostpassword_link}
{lostid_link}
{register_link}
</td>
</tr>
<!-- END registration -->
</table>
</form>
</div>
</div>