forked from extern/egroupware
Mobile theme W.I.P.:
- Implement addressbook listview - Add mobile fonts definitions
This commit is contained in:
Hadi Nategh
parent
ecc189fd05
commit
3dbd096054
96
addressbook/templates/mobile/index.xet
Normal file
96
addressbook/templates/mobile/index.xet
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!DOCTYPE overlay PUBLIC "-//Stylite AG//eTemplate 2//EN" "http://www.egroupware.org/etemplate2.dtd">
|
||||||
|
<!-- $Id$ -->
|
||||||
|
<overlay>
|
||||||
|
<template id="addressbook.index.left" template="" lang="" group="0" version="1.3.001">
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<template id="addressbook.index.right_add" template="" lang="" group="0" version="1.7.001">
|
||||||
|
<hbox>
|
||||||
|
<menulist>
|
||||||
|
<menupopup align="right" label="Type" id="col_filter[tid]" empty_label="All"/>
|
||||||
|
</menulist>
|
||||||
|
<buttononly align="right" statustext="Add a new contact" label="Add" id="add" onclick="egw(window).openPopup(egw::link('/index.php','menuaction=addressbook.addressbook_ui.edit'),'850','440','_blank','addressbook',null,true); return false;"/>
|
||||||
|
</hbox>
|
||||||
|
</template>
|
||||||
|
<template id="addressbook.index.rows" template="" lang="" group="0" version="1.9.005">
|
||||||
|
<grid width="100%">
|
||||||
|
<columns>
|
||||||
|
<column width="60%"/>
|
||||||
|
<column width="39%"/>
|
||||||
|
<column width="58"/>
|
||||||
|
</columns>
|
||||||
|
<rows>
|
||||||
|
<row class="th">
|
||||||
|
</row>
|
||||||
|
<row class="$row_cont[cat_id] $row_cont[class]" valign="top">
|
||||||
|
<vbox class="addressbookCol1">
|
||||||
|
<vbox id="${row}[id]">
|
||||||
|
<description id="${row}[line1]" no_lang="1"/>
|
||||||
|
<description id="${row}[line2]" no_lang="1"/>
|
||||||
|
</vbox>
|
||||||
|
<hbox class="workphone">
|
||||||
|
<image src="phone.png"/>
|
||||||
|
<url-phone id="${row}[tel_work]" readonly="true" class="telNumbers"/>
|
||||||
|
</hbox>
|
||||||
|
</vbox>
|
||||||
|
<vbox class="addressbookCol2">
|
||||||
|
<url-email id="${row}[email]" readonly="true" />
|
||||||
|
<description value=" " id="${row}[adr_one_locality]" no_lang="1"/>
|
||||||
|
<hbox class="cellphone">
|
||||||
|
<image src="cellphone.png"/>
|
||||||
|
<url-phone id="${row}[tel_cell]" readonly="true" class="telNumbers"/>
|
||||||
|
</hbox>
|
||||||
|
</vbox>
|
||||||
|
<vbox class="addressbookCol3">
|
||||||
|
<hbox class="avatar">
|
||||||
|
<image src="${row}[photo]" height= "62px"/>
|
||||||
|
</hbox>
|
||||||
|
</vbox>
|
||||||
|
</row>
|
||||||
|
</rows>
|
||||||
|
</grid>
|
||||||
|
</template>
|
||||||
|
<template id="addressbook.index" template="" lang="" group="0" version="1.9.002">
|
||||||
|
<grid width="100%">
|
||||||
|
<columns>
|
||||||
|
<column/>
|
||||||
|
<column/>
|
||||||
|
<column/>
|
||||||
|
<column/>
|
||||||
|
<column/>
|
||||||
|
<column/>
|
||||||
|
<column/>
|
||||||
|
<column/>
|
||||||
|
<column/>
|
||||||
|
</columns>
|
||||||
|
<rows>
|
||||||
|
<row disabled="!@msg">
|
||||||
|
<description align="center" id="msg" no_lang="1" span="all" class="redItalic"/>
|
||||||
|
<description/>
|
||||||
|
<description/>
|
||||||
|
<description/>
|
||||||
|
<description/>
|
||||||
|
<description/>
|
||||||
|
<description/>
|
||||||
|
<description/>
|
||||||
|
<description/>
|
||||||
|
</row>
|
||||||
|
<row disabled="1">
|
||||||
|
<template id="addressbook.index.left"/>
|
||||||
|
<template align="right" id="addressbook.index.right_add"/>
|
||||||
|
</row>
|
||||||
|
<row>
|
||||||
|
<nextmatch id="nm" template="addressbook.index.rows" span="all"/>
|
||||||
|
</row>
|
||||||
|
<row class="noPrint dialogFooterToolbar" disabled="!@nm[selectcols]=/legacy_actions/">
|
||||||
|
<button statustext="Add a new contact" label="Add" id="add" onclick="window.open(egw::link('/index.php','menuaction=addressbook.addressbook_ui.edit'),'_blank','dependent=yes,width=850,height=440,scrollbars=yes,status=yes'); return false;"/>
|
||||||
|
<hbox align="right" span="all">
|
||||||
|
<buttononly statustext="Select action" label="Select action" id="legacy_actions" onclick="if (!egw_globalObjectManager.getObjectById('addressbook.'+({$cont[nm][do_email]} ? 'email' : 'index') + '.rows').executeActionImplementation(this, 'popup')) alert(egw::lang('You need to select some entries first!')); return false;;"/>
|
||||||
|
<button statustext="Check all" label="Check all" id="check_all" needed="1" onclick="egw_globalObjectManager.getObjectById('addressbook.'+({$cont[nm][do_email]} ? 'email' : 'index') + '.rows').toggleAllSelected(); return false;" image="arrow_ltr" class="checkAllArrow"/>
|
||||||
|
</hbox>
|
||||||
|
</row>
|
||||||
|
</rows>
|
||||||
|
</grid>
|
||||||
|
</template>
|
||||||
|
</overlay>
|
||||||
@ -481,3 +481,70 @@ input.et2_radiobox {
|
|||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
/* tablets and smartphones */
|
||||||
|
@media only screen and (max-device-width: 1024px) {
|
||||||
|
#addressbook-index table.egwGridView_outer tbody .addressbookCol3 div.avatar {
|
||||||
|
border: 1px solid silver;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background-image: url(/egroupware/addressbook/templates/pixelegg/images/photo.png);
|
||||||
|
background-size: 35px 35px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
#addressbook-index table.egwGridView_outer tbody span[id^='addressbook-index_'][id$='line1]'] {
|
||||||
|
font-weight: bold;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
#addressbook-index table.egwGridView_outer tbody span[id^='addressbook-index_'][id$='line2]'] {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
#addressbook-index table.egwGridView_outer tbody .addressbookCol2 {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 99%;
|
||||||
|
}
|
||||||
|
#addressbook-index table.egwGridView_outer tbody td[class^="gridCont"] {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#addressbook-index table.egwGridView_outer tbody td[class^="gridCont"] .et2_hbox.et2_box_widget.cellphone {
|
||||||
|
margin-left: -4px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
#addressbook-index table.egwGridView_outer tbody td[class^="gridCont"] .workphone {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
#addressbook-index table.egwGridView_outer tbody span[id^='addressbook-index_'][id$='adr_one_locality]'] {
|
||||||
|
font-size: 8pt;
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
#addressbook-index table.egwGridView_outer tbody a[id^='addressbook-index_'][id$='email]'] {
|
||||||
|
font-size: 8pt;
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
#addressbook-index table.egwGridView_outer tbody a[id^='addressbook-index_'][id$='tel_cell]'],
|
||||||
|
#addressbook-index table.egwGridView_outer tbody a[id^='addressbook-index_'][id$='tel_work]'] {
|
||||||
|
font-size: 8pt;
|
||||||
|
display: inline-block;
|
||||||
|
padding-left: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -14,6 +14,7 @@
|
|||||||
|
|
||||||
|
|
||||||
@import (reference) "../../../pixelegg/less/definitions.less";
|
@import (reference) "../../../pixelegg/less/definitions.less";
|
||||||
|
@import (reference) "../../../pixelegg/less/def_mobile.less";
|
||||||
@import (less) "../default/app.css";
|
@import (less) "../default/app.css";
|
||||||
|
|
||||||
|
|
||||||
@ -386,3 +387,80 @@ div.addressbook_edit_general_picture img {
|
|||||||
// END DIALOG #############################################################################
|
// END DIALOG #############################################################################
|
||||||
|
|
||||||
} // Ende Media all
|
} // Ende Media all
|
||||||
|
|
||||||
|
|
||||||
|
/* tablets and smartphones */
|
||||||
|
@media only screen and (max-device-width:1024px) {
|
||||||
|
#addressbook-index {
|
||||||
|
table.egwGridView_outer tbody {
|
||||||
|
.addressbookCol3 div.avatar {
|
||||||
|
border: 1px solid silver;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background-image: url(/egroupware/addressbook/templates/pixelegg/images/photo.png);
|
||||||
|
background-size: 35px 35px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
span[id^='addressbook-index_'][id$='line1]'] {
|
||||||
|
font-weight: bold;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
span[id^='addressbook-index_'][id$='line2]']{
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.addressbookCol2 {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
width:99%;
|
||||||
|
}
|
||||||
|
td[class^="gridCont"]{
|
||||||
|
position:relative;
|
||||||
|
.et2_hbox.et2_box_widget.cellphone {
|
||||||
|
margin-left: -4px;
|
||||||
|
position: absolute;
|
||||||
|
bottom:0;
|
||||||
|
}
|
||||||
|
.workphone {
|
||||||
|
position: absolute;
|
||||||
|
bottom:0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span[id^='addressbook-index_'][id$='adr_one_locality]']
|
||||||
|
{
|
||||||
|
.mob-fontsize-s;
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
}
|
||||||
|
a[id^='addressbook-index_'][id$='email]']{
|
||||||
|
.mob-fontsize-s;
|
||||||
|
display:block;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
a[id^='addressbook-index_'][id$='tel_cell]'],
|
||||||
|
a[id^='addressbook-index_'][id$='tel_work]']
|
||||||
|
{
|
||||||
|
.mob-fontsize-s;
|
||||||
|
display: inline-block;
|
||||||
|
padding-left: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
BIN
addressbook/templates/pixelegg/images/avatar.png
Normal file
BIN
addressbook/templates/pixelegg/images/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
20
pixelegg/less/def_mobile.less
Normal file
20
pixelegg/less/def_mobile.less
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
/**
|
||||||
|
* EGroupware: Stylite Pixelegg template
|
||||||
|
*
|
||||||
|
* Please do NOT change css-files directly, instead change less-files and compile them!
|
||||||
|
*
|
||||||
|
* @link http://www.egroupware.org
|
||||||
|
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
|
||||||
|
* @author Hadi Nategh <hn@stylite.de>
|
||||||
|
* @package pixelegg
|
||||||
|
* @version $Id: $
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
@mobile-fontsize-base : 10pt;
|
||||||
|
|
||||||
|
.mob-fontsize-xs {font-size: @mobile-fontsize-base*0.6;}
|
||||||
|
.mob-fontsize-s {font-size: @mobile-fontsize-base*0.8;}
|
||||||
|
.mob-fontsize-n {font-size: @mobile-fontsize-base}
|
||||||
|
.mob-fontsize-l {font-size: @mobile-fontsize-base*1.2;}
|
||||||
|
.mob-fontsize-xl {font-size: @mobile-fontsize-base*1.5;}
|
||||||
Loading…
Reference in New Issue
Block a user