mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-22 07:53:39 +01:00
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;
|
||||
}
|
||||
}
|
||||
/* 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/def_mobile.less";
|
||||
@import (less) "../default/app.css";
|
||||
|
||||
|
||||
@ -386,3 +387,80 @@ div.addressbook_edit_general_picture img {
|
||||
// END DIALOG #############################################################################
|
||||
|
||||
} // 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