From c3f12efd2ef2fdf26ad934f03ddf28578743903b Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hn@stylite.de>
Date: Thu, 28 Jan 2016 11:30:52 +0000
Subject: [PATCH] Mobile theme W.I.P.: - Add vertical tabs for addressbook edit
 dialog - Fix link_to widget - Fix zipcode and city fileds in addressbook edit
 dialog

---
 addressbook/templates/mobile/edit.xet   | 586 ++++++++++++------------
 addressbook/templates/pixelegg/app.css  |   8 +
 addressbook/templates/pixelegg/app.less |   6 +
 pixelegg/css/mobile.css                 |  40 +-
 pixelegg/css/mobile.less                |  47 +-
 5 files changed, 378 insertions(+), 309 deletions(-)

diff --git a/addressbook/templates/mobile/edit.xet b/addressbook/templates/mobile/edit.xet
index ab31a13919..93eea1956f 100644
--- a/addressbook/templates/mobile/edit.xet
+++ b/addressbook/templates/mobile/edit.xet
@@ -55,300 +55,287 @@
 		</grid>
 	</template>
 	<template id="addressbook.edit.general" template="" lang="" group="0" version="1.9.003">
-		<details title="Organisation">
-			<grid width="100%">
-				<columns>
-					<column width = "120"/>
-					<column width="600"/>
-				</columns>
-				<rows>
-					<row>
-						<description for="role" value="Role"/>
-						<hbox width="100%">
-							<textbox id="role" width="60%" maxlength="64" autocomplete="section-one" />
-							<textbox label="Room" id="room" width="40%"/>
-						</hbox>
-					</row>
-					<row>
-						<description for="assistent" value="Assistent"/>
-						<textbox id="assistent" class="et2_fullWidth"/>
-					</row>
-					<row disabled="@addr_format=city_state_postcode">
-						<description for="tel_assistent" value="Assistent phone"/>
-						<url-phone id="tel_assistent" class="et2_fullWidth"/>
-					</row>
-					<row>
-						<description for="tel_fax" value="fax"/>
-						<url-phone id="tel_fax" class="et2_fullWidth" autocomplete="fax" />
-					</row>
-					<row>
-						<description for="tel_other" value="Other phone"/>
-						<url-phone id="tel_other" class="et2_fullWidth"  autocomplete="tel" />
-					</row>
-					
-					<row disabled="!@addr_format=city_state_postcode">
-						<description for="tel_fax" value="fax"/>
-						<url-phone id="tel_fax" class="et2_fullWidth" autocomplete="fax" />
-					</row>
-					<row disabled="!@addr_format=city_state_postcode">
-						<description for="tel_other" value=" Other Phone"/>
-						<url-phone id="tel_other" class="et2_fullWidth" autocomplete="tel"/>
-					</row>
-					<row>
-						<description for="tel_car" value="car phone"/>
-						<url-phone id="tel_car" class="et2_fullWidth"/>
-					</row>
-					<row>
-						<description disabled="@no_tid" for="tid" value="Type"/>
-						<menulist disabled="@no_tid">
-							<menupopup id="tid" no_lang="1" class="et2_fullWidth" onchange="1"/>
+		<grid width="100%">
+			<columns>
+				<column width = "120"/>
+				<column width="600"/>
+			</columns>
+			<rows>
+				<row>
+					<description for="role" value="Role"/>
+					<textbox id="role" class="et2_fullWidth" maxlength="64" autocomplete="section-one" />
+				</row>
+				<row>
+					<description value="Room"/>
+					<textbox id="room"  width="35%"/>
+				</row>
+				<row>
+					<description for="assistent" value="Assistent"/>
+					<textbox id="assistent" class="et2_fullWidth"/>
+				</row>
+				<row disabled="@addr_format=city_state_postcode">
+					<description for="tel_assistent" value="Assistent phone"/>
+					<url-phone id="tel_assistent" class="et2_fullWidth"/>
+				</row>
+				<row>
+					<description for="tel_fax" value="fax"/>
+					<url-phone id="tel_fax" class="et2_fullWidth" autocomplete="fax" />
+				</row>
+				<row>
+					<description for="tel_other" value="Other phone"/>
+					<url-phone id="tel_other" class="et2_fullWidth"  autocomplete="tel" />
+				</row>
+
+				<row disabled="!@addr_format=city_state_postcode">
+					<description for="tel_fax" value="fax"/>
+					<url-phone id="tel_fax" class="et2_fullWidth" autocomplete="fax" />
+				</row>
+				<row disabled="!@addr_format=city_state_postcode">
+					<description for="tel_other" value=" Other Phone"/>
+					<url-phone id="tel_other" class="et2_fullWidth" autocomplete="tel"/>
+				</row>
+				<row>
+					<description for="tel_car" value="car phone"/>
+					<url-phone id="tel_car" class="et2_fullWidth"/>
+				</row>
+				<row>
+					<description disabled="@no_tid" for="tid" value="Type"/>
+					<menulist disabled="@no_tid">
+						<menupopup id="tid" no_lang="1" class="et2_fullWidth" onchange="1"/>
+					</menulist>
+				</row>
+				<row disabled="@addr_format=city_state_postcode">
+					<description for="adr_one_street" value="street"/>
+					<textbox id="adr_one_street" class="et2_fullWidth" maxlength="64" autocomplete="address-line1"/>
+				</row>
+				<row>
+					<description/>
+					<textbox statustext="address line 2" id="adr_one_street2" class="et2_fullWidth" maxlength="64" autocomplete="address-line2"/>
+				</row>
+				<row disabled="@addr_format=city_state_postcode">
+					<description for="adr_one_locality" value="city" />
+					<textbox statustext="City" id="adr_one_locality" maxlength="64"  class="et2_fullWidth" autocomplete="address-level2"/>
+				</row>
+				<row disabled="@addr_format=city_state_postcode">
+					<description value="ZIP Code"/>
+					<textbox statustext="ZIP Code" id="adr_one_postalcode" width="35%" maxlength="64" autocomplete="postal-code"/>
+				</row>
+				<row disabled="!@addr_format=city_state_postcode">
+					<description value="City"/>
+					<hbox>
+						<textbox statustext="City" id="adr_one_locality" size="30" maxlength="64" autocomplete="address-level2"/>
+						<textbox statustext="State" id="adr_one_region" size="3" maxlength="64" autocomplete="address-level1"/>
+						<textbox statustext="ZIP Code" id="adr_one_postalcode" size="5" maxlength="64" autocomplete="postal-code"/>
+					</hbox>
+				</row>
+				<row disabled="@addr_format=city_state_postcode">
+					<description value="Region"/>
+					<textbox statustext="State" id="adr_one_region" maxlength="64" class="et2_fullWidth" autocomplete="address-level1"/>
+				</row>
+				<row disabled="@addr_format=city_state_postcode">
+					<description for="adr_one_countryname" value="country"/>
+					<vbox width="100%">
+						<menulist class="et2_fullWidth">
+							<menupopup type="select-country" class="countrySelect et2_fullWidth" id="adr_one_countrycode" onchange="app.addressbook.show_custom_country(this);" options="Select one,0,1" autocomplete="country"/>
 						</menulist>
-					</row>
-					<row disabled="@addr_format=city_state_postcode">
-						<description for="adr_one_street" value="street"/>
-						<textbox id="adr_one_street" class="et2_fullWidth" maxlength="64" autocomplete="address-line1"/>
-					</row>
-					<row>
-						<description/>
-						<textbox statustext="address line 2" id="adr_one_street2" class="et2_fullWidth" maxlength="64" autocomplete="address-line2"/>
-					</row>
-					<row disabled="@addr_format=city_state_postcode">
-						<description for="adr_one_locality" value="city" />
-						<hbox>
-							<textbox statustext="ZIP Code" id="adr_one_postalcode" width="40%" maxlength="64" autocomplete="postal-code"/>
-							<textbox statustext="City" id="adr_one_locality" maxlength="64"  width="60%" autocomplete="address-level2"/>
-						</hbox>
-					</row>
-				
-					<row disabled="!@addr_format=city_state_postcode">
-						<description value="City"/>
-						<hbox>
-							<textbox statustext="City" id="adr_one_locality" size="30" maxlength="64" autocomplete="address-level2"/>
-							<textbox statustext="State" id="adr_one_region" size="3" maxlength="64" autocomplete="address-level1"/>
-							<textbox statustext="ZIP Code" id="adr_one_postalcode" size="5" maxlength="64" autocomplete="postal-code"/>
-						</hbox>
-					</row>
-					<row disabled="@addr_format=city_state_postcode">
-						<description value="Region"/>
-						<textbox statustext="State" id="adr_one_region" maxlength="64" class="et2_fullWidth" autocomplete="address-level1"/>
-					</row>
-					<row disabled="@addr_format=city_state_postcode">
-						<description for="adr_one_countryname" value="country"/>
-						<vbox width="100%">
-							<menulist class="et2_fullWidth">
-								<menupopup type="select-country" class="countrySelect et2_fullWidth" id="adr_one_countrycode" onchange="app.addressbook.show_custom_country(this);" options="Select one,0,1" autocomplete="country"/>
-							</menulist>
-							<textbox id="adr_one_countryname" class="custom_country et2_fullWidth" autocomplete="country-name"/>
-						</vbox>
-					</row>
-				</rows>
-			</grid>
-		</details>
+						<textbox id="adr_one_countryname" class="custom_country et2_fullWidth" autocomplete="country-name"/>
+					</vbox>
+				</row>
+			</rows>
+		</grid>
 	</template>
 	<template id="addressbook.edit.details" template="" lang="" group="0" version="1.9.002">
-		<details title="Details">
-			<grid width="100%">
-				<columns>
-					<column width = "120"/>
-					<column width="600"/>
-				</columns>
-				<rows>
-					<row>
-						<description value="Notes"/>
-						<textbox multiline="true" id="note" rows="10" resize_ratio="0" class="et2_fullWidth" height="200"/>
-					</row>
-					<row disabled="@hidebuttons">
-						<description value="Last date"/>
-						<link id="last_link"/>
-					</row>
-					<row disabled="@hidebuttons">
-						<description value="Next date"/>
-						<link id="next_link"/>
-					</row>
-					<row>
-						<description for="pubkey" value="Public key"/>
-						<textbox multiline="true" id="pubkey" rows="4" resize_ratio="0" class="et2_fullWidth"/>
-					</row>
-					<row disabled="!@cat_tab=Tree">
-						<tree-cat id="cat_id_tree" options="13,,width:99%"/>
-					</row>	
-					<row disabled="@cat_tab=Tree">
-						<listbox type="select-cat" id="cat_id" rows="11"/>
-					</row>
-				</rows>
-			</grid>
-		</details>
+		<grid width="100%">
+			<columns>
+				<column width = "120"/>
+				<column width="600"/>
+			</columns>
+			<rows>
+				<row>
+					<description value="Notes"/>
+					<textbox multiline="true" id="note" rows="10" resize_ratio="0" class="et2_fullWidth" height="200"/>
+				</row>
+				<row disabled="@hidebuttons">
+					<description value="Last date"/>
+					<link id="last_link"/>
+				</row>
+				<row disabled="@hidebuttons">
+					<description value="Next date"/>
+					<link id="next_link"/>
+				</row>
+				<row>
+					<description for="pubkey" value="Public key"/>
+					<textbox multiline="true" id="pubkey" rows="4" resize_ratio="0" class="et2_fullWidth"/>
+				</row>
+				<row disabled="!@cat_tab=Tree">
+					<tree-cat id="cat_id_tree" options="13,,width:99%"/>
+				</row>	
+				<row disabled="@cat_tab=Tree">
+					<listbox type="select-cat" id="cat_id" rows="11"/>
+				</row>
+			</rows>
+		</grid>
 	</template>
 	<template id="addressbook.edit.home" template="" lang="" group="0" version="1.9.001">
-		<details title="Private">
-			<grid width="100%">
-				<columns>
-					<column width = "120"/>
-					<column width="600"/>
-				</columns>
-				<rows>
-					<row>
-						<description for="tel_home" value="Home phone"/>
-						<url-phone id="tel_home" class="et2_fullWidth" autocomplete="section-two home tel" />
-					</row>
-					<row>
-						<description for="tel_cell_private" value="mobile phone"/>
-						<url-phone id="tel_cell_private" class="et2_fullWidth" autocomplete="section-two mobile tel" />
-					</row>
-					<row disabled="@addr_format=city_state_postcode">
-						<description for="tel_pager" value="pager" autocomplete="section-two pager tel" />
-						<url-phone id="tel_pager" class="et2_fullWidth"/>
-					</row>
-					<row disabled="!@addr_format=city_state_postcode">
-						<description for="tel_pager" value="pager"/>
-						<url-phone id="tel_pager" class="et2_fullWidth"/>
-					</row>
-					<row disabled="@addr_format=city_state_postcode">
-						<description for="tel_fax_home" value="fax"/>
-						<url-phone id="tel_fax_home" class="et2_fullWidth" autocomplete="section-two fax tel" />
-					</row>
-					<row disabled="!@addr_format=city_state_postcode">
-						<description for="tel_fax_home" value="fax"/>
-						<url-phone id="tel_fax_home" class="et2_fullWidth" autocomplete="fax tel" />
-					</row>
-					<row>
-						<description for="email_home" value="EMail"/>
-						<url-email id="email_home" onchange="app.addressbook.check_value(widget,'$cont[id]');" class="et2_fullWidth" autocomplete="section-two home email" />
-					</row>
-					<row>
-						<description for="url_home" value="URL"/>
-						<url id="url_home" class="et2_fullWidth" autocomplete="section-two url" />
-					</row>
-					<row disabled="@addr_format=city_state_postcode">
-						<description for="bday" value="Birthday"/>
-						<date id="bday" options="Y-m-d"  year_range="c-90:c+2" class="et2_fullWidth"/>
-					</row>
-					<row>
-						<description for="adr_two_street" value="street"/>
-						<textbox id="adr_two_street" class="et2_fullWidth" maxlength="64" autocomplete="section-two address-line1" />
-					</row>
-					<row>
-						<description/>
-						<textbox statustext="address line 2" id="adr_two_street2" class="et2_fullWidth" maxlength="64" autocomplete="section-two address-line2" />
-					</row>
-					<row disabled="@addr_format=city_state_postcode">
-						<description for="adr_two_locality" value="city"/>
-						<hbox>
-							<textbox statustext="ZIP Code" id="adr_two_postalcode" width="40" maxlength="64" autocomplete="section-two postal-code" />
-							<textbox statustext="City" id="adr_two_locality" maxlength="64" width="242" autocomplete="section-two address-level2" />
-						</hbox>
-					</row>
-					<row disabled="@addr_format=city_state_postcode">
-						<description for="adr_two_countryname" value="country"/>
-						<vbox width="100%">
-							<menulist class="et2_fullWidth">
-								<menupopup type="select-country" class="countrySelect et2_fullWidth" id="adr_two_countrycode" onchange="app.addressbook.show_custom_country(this);" options="Select one,0,1" autocomplete="section-two country" />
-							</menulist>
-							<textbox id="adr_two_countryname" class="custom_country et2_fullWidth" autocomplete="section-two country-name" />
-						</vbox>
-					</row>
-					<row disabled="@addr_format=city_state_postcode">
-						<description value="Region"/>
-						<textbox statustext="State" id="adr_two_region" maxlength="64" class="et2_fullWidth" autocomplete="section-two address-level1" />
-					</row>
-					<row disabled="!@addr_format=city_state_postcode">
-						<description value="City"/>
-						<hbox>
-							<textbox statustext="City" id="adr_two_locality" size="30" maxlength="64" autocomplete="section-two address-level2" />
-							<textbox statustext="State" id="adr_two_region" size="3" maxlength="64" autocomplete="section-two address-level1"/>
-							<textbox statustext="ZIP Code" id="adr_two_postalcode" size="5" maxlength="64" autocomplete="section-two postal-code" />
-						</hbox>
-					</row>
-					
-					<row disabled="!@addr_format=city_state_postcode">
-						<description for="adr_two_countryname" value="country"/>
-						<vbox width="100%">
-							<menulist>
-								<menupopup type="select-country" class="countrySelect et2_fullWidth" id="adr_two_countrycode" onchange="app.addressbook.show_custom_country(this);" options="Select one,0,1" autocomplete="section-two country" />
-							</menulist>
-							<textbox id="adr_two_countryname" class="custom_country et2_fullWidth" autocomplete="section-two country-name" />
-						</vbox>
-					</row>
-					<row disabled="!@addr_format=city_state_postcode">
-						<description for="bday" value="Birthday"/>
-						<date id="bday" options="Y-m-d" class="et2_fullWidth"/>
-					</row>
-					
-				</rows>
-			</grid>
-		</details>
+		<grid width="100%">
+			<columns>
+				<column width = "120"/>
+				<column width="600"/>
+			</columns>
+			<rows>
+				<row>
+					<description for="tel_home" value="Home phone"/>
+					<url-phone id="tel_home" class="et2_fullWidth" autocomplete="section-two home tel" />
+				</row>
+				<row>
+					<description for="tel_cell_private" value="mobile phone"/>
+					<url-phone id="tel_cell_private" class="et2_fullWidth" autocomplete="section-two mobile tel" />
+				</row>
+				<row disabled="@addr_format=city_state_postcode">
+					<description for="tel_pager" value="pager" autocomplete="section-two pager tel" />
+					<url-phone id="tel_pager" class="et2_fullWidth"/>
+				</row>
+				<row disabled="!@addr_format=city_state_postcode">
+					<description for="tel_pager" value="pager"/>
+					<url-phone id="tel_pager" class="et2_fullWidth"/>
+				</row>
+				<row disabled="@addr_format=city_state_postcode">
+					<description for="tel_fax_home" value="fax"/>
+					<url-phone id="tel_fax_home" class="et2_fullWidth" autocomplete="section-two fax tel" />
+				</row>
+				<row disabled="!@addr_format=city_state_postcode">
+					<description for="tel_fax_home" value="fax"/>
+					<url-phone id="tel_fax_home" class="et2_fullWidth" autocomplete="fax tel" />
+				</row>
+				<row>
+					<description for="email_home" value="EMail"/>
+					<url-email id="email_home" onchange="app.addressbook.check_value(widget,'$cont[id]');" class="et2_fullWidth" autocomplete="section-two home email" />
+				</row>
+				<row>
+					<description for="url_home" value="URL"/>
+					<url id="url_home" class="et2_fullWidth" autocomplete="section-two url" />
+				</row>
+				<row disabled="@addr_format=city_state_postcode">
+					<description for="bday" value="Birthday"/>
+					<date id="bday" options="Y-m-d"  year_range="c-90:c+2" class="et2_fullWidth"/>
+				</row>
+				<row>
+					<description for="adr_two_street" value="street"/>
+					<textbox id="adr_two_street" class="et2_fullWidth" maxlength="64" autocomplete="section-two address-line1" />
+				</row>
+				<row>
+					<description/>
+					<textbox statustext="address line 2" id="adr_two_street2" class="et2_fullWidth" maxlength="64" autocomplete="section-two address-line2" />
+				</row>
+				<row disabled="@addr_format=city_state_postcode">
+					<description for="adr_two_locality" value="city"/>
+					<hbox>
+						<textbox statustext="ZIP Code" id="adr_two_postalcode" width="40" maxlength="64" autocomplete="section-two postal-code" />
+						<textbox statustext="City" id="adr_two_locality" maxlength="64" width="242" autocomplete="section-two address-level2" />
+					</hbox>
+				</row>
+				<row disabled="@addr_format=city_state_postcode">
+					<description for="adr_two_countryname" value="country"/>
+					<vbox width="100%">
+						<menulist class="et2_fullWidth">
+							<menupopup type="select-country" class="countrySelect et2_fullWidth" id="adr_two_countrycode" onchange="app.addressbook.show_custom_country(this);" options="Select one,0,1" autocomplete="section-two country" />
+						</menulist>
+						<textbox id="adr_two_countryname" class="custom_country et2_fullWidth" autocomplete="section-two country-name" />
+					</vbox>
+				</row>
+				<row disabled="@addr_format=city_state_postcode">
+					<description value="Region"/>
+					<textbox statustext="State" id="adr_two_region" maxlength="64" class="et2_fullWidth" autocomplete="section-two address-level1" />
+				</row>
+				<row disabled="!@addr_format=city_state_postcode">
+					<description value="City"/>
+					<hbox>
+						<textbox statustext="City" id="adr_two_locality" size="30" maxlength="64" autocomplete="section-two address-level2" />
+						<textbox statustext="State" id="adr_two_region" size="3" maxlength="64" autocomplete="section-two address-level1"/>
+						<textbox statustext="ZIP Code" id="adr_two_postalcode" size="5" maxlength="64" autocomplete="section-two postal-code" />
+					</hbox>
+				</row>
+
+				<row disabled="!@addr_format=city_state_postcode">
+					<description for="adr_two_countryname" value="country"/>
+					<vbox width="100%">
+						<menulist>
+							<menupopup type="select-country" class="countrySelect et2_fullWidth" id="adr_two_countrycode" onchange="app.addressbook.show_custom_country(this);" options="Select one,0,1" autocomplete="section-two country" />
+						</menulist>
+						<textbox id="adr_two_countryname" class="custom_country et2_fullWidth" autocomplete="section-two country-name" />
+					</vbox>
+				</row>
+				<row disabled="!@addr_format=city_state_postcode">
+					<description for="bday" value="Birthday"/>
+					<date id="bday" options="Y-m-d" class="et2_fullWidth"/>
+				</row>
+
+			</rows>
+		</grid>
 	</template>
 	<template id="addressbook.edit.links" template="" lang="" group="0" version="1.9.001">
-		<details title="Links">
-			<grid width="100%">
-				<columns>
-					<column width = "120"/>
-					<column width="600"/>
-				</columns>
-				<rows>
-					<row disabled="@view">
-						<link-to id="link_to"/>
-					</row>
-					<row>
-						<description value="Existing links"/>
-						<link-list id="link_to"/>
-					</row>
-				</rows>
-			</grid>
-		</details>
+		<grid width="100%">
+			<columns>
+				<column width = "120"/>
+				<column width="600"/>
+			</columns>
+			<rows>
+				<row disabled="@view">
+					<description/>
+					<link-to id="link_to"/>
+				</row>
+				<row>
+					<description value="Existing links"/>
+					<link-list id="link_to"/>
+				</row>
+			</rows>
+		</grid>
 	</template>
 	<template id="addressbook.edit.distribution_list" template="" lang="" group="0" version="1.9.001">
-		<details title="Distribution list">
-			<grid width="100%">
-				<columns>
-					<column width = "120"/>
-					<column width="600"/>
-				</columns>
-				<rows>
-					<row>
-						<box width="100%" overflow="auto">
-							<description id="distrib_lists" span="all"/>
-						</box>
-					</row>
-				</rows>
-			</grid>
-		</details>
+		<grid width="100%">
+			<columns>
+				<column width = "120"/>
+				<column width="600"/>
+			</columns>
+			<rows>
+				<row>
+					<box width="100%" overflow="auto">
+						<description id="distrib_lists" span="all"/>
+					</box>
+				</row>
+			</rows>
+		</grid>
 	</template>
 	<template id="addressbook.edit.custom" template="" lang="" group="0" version="1.9.001">
-		<details title="Customfields">
-			<grid width="100%">
-				<columns>
-					<column width = "120"/>
-					<column width="600"/>
-				</columns>
-				<rows>
-					<row>
-						<box width="100%" overflow="auto">
-							<customfields options="$cont[tid],$cont[no_private_cfs]"/>
-						</box>
-					</row>
-				</rows>
-			</grid>
-		</details>
+		<grid width="100%">
+			<columns>
+				<column width = "120"/>
+				<column width="600"/>
+			</columns>
+			<rows>
+				<row>
+					<box width="100%" overflow="auto">
+						<customfields options="$cont[tid],$cont[no_private_cfs]"/>
+					</box>
+				</row>
+			</rows>
+		</grid>
 	</template>
 	<template id="addressbook.edit.custom_private" template="" lang="" group="0" version="1.9.001">
-		<details title="Private customfields">
-			<grid width="100%">
-				<columns>
-					<column width = "120"/>
-					<column width="600"/>
-				</columns>
-				<rows>
-					<row>
-						<box width="100%" overflow="auto">
-							<customfields id="private_cfs" options="$cont[tid],1"/>
-						</box>
-					</row>
-				</rows>
-			</grid>
-		</details>
+		<grid width="100%">
+			<columns>
+				<column width = "120"/>
+				<column width="600"/>
+			</columns>
+			<rows>
+				<row>
+					<box width="100%" overflow="auto">
+						<customfields id="private_cfs" options="$cont[tid],1"/>
+					</box>
+				</row>
+			</rows>
+		</grid>
 	</template>
-	
 	<template id="addressbook.edit" template="" lang="" group="0" version="1.9.004" class="addressbook_edit">
 		<template id="addressbook.editname"/>
 		<grid class="addressbook_edit" border="1" width="100%">
@@ -415,25 +402,26 @@
 					<url id="url" class="et2_fullWidth" autocomplete="url" />
 				</row>
 				<row>
-					<template id="addressbook.edit.general"/>
-				</row>
-				<row>
-					<template id="addressbook.edit.home"/>
-				</row>
-				<row>
-					<template id="addressbook.edit.details"/>
-				</row>
-				<row>
-					<template id="addressbook.edit.links"/>
-				</row>
-				<row>
-					<template id="addressbook.edit.distribution_list"/>
-				</row> 
-				<row>
-					<template id="addressbook.edit.custom"/>
-				</row>
-				<row>
-					<template id="addressbook.edit.custom_private"/>
+					<tabbox id="tabs" span="all" width="100%" align_tabs="v">
+						<tabs>
+							<tab id="general" label="Organisation"/>
+							<tab id="home" label="Private" statustext="Home address, Birthday, ..."/>
+							<tab id="details" label="Details" statustext="Categories, Notes, ..."/>
+							<tab id="links" label="Links" statustext="Links"/>
+							<tab id="distribution_list" label="Distribution lists" statustext="Distribution lists, ..."/>
+							<tab id="custom" label="Extra" statustext="Custom fields"/>
+							<tab id="custom_private" label="Extra private" statustext="Private custom fields"/>
+						</tabs>
+						<tabpanels>
+							<template id="addressbook.edit.general"/>
+							<template id="addressbook.edit.home"/>
+							<template id="addressbook.edit.details"/>
+							<template id="addressbook.edit.links"/>
+							<template id="addressbook.edit.distribution_list"/>
+							<template id="addressbook.edit.custom"/>
+							<template id="addressbook.edit.custom_private"/>
+						</tabpanels>
+					</tabbox>
 				</row>
 				<row>
 					<details title="Ownership">
diff --git a/addressbook/templates/pixelegg/app.css b/addressbook/templates/pixelegg/app.css
index 1de92add59..9bdc3ece37 100755
--- a/addressbook/templates/pixelegg/app.css
+++ b/addressbook/templates/pixelegg/app.css
@@ -507,6 +507,14 @@ input.et2_radiobox {
     text-align: center;
     font-size: 12pt;
   }
+  #addressbook-edit #addressbook-edit_adr_one_locality,
+  #addressbook-edit #addressbook-edit_adr_two_locality,
+  #addressbook-edit #addressbook-edit_room {
+    margin-left: 0;
+  }
+  #addressbook-edit a.et2_url.email {
+    display: none;
+  }
   #addressbook-index table.egwGridView_outer tbody .addressbookCol3 div.avatar {
     position: absolute;
   }
diff --git a/addressbook/templates/pixelegg/app.less b/addressbook/templates/pixelegg/app.less
index 1e62dede17..9a1d55015b 100755
--- a/addressbook/templates/pixelegg/app.less
+++ b/addressbook/templates/pixelegg/app.less
@@ -407,6 +407,12 @@ div.addressbook_edit_general_picture img {
 			text-align: center;
 			.mob-fontsize-l;
 		}
+		#addressbook-edit_adr_one_locality, #addressbook-edit_adr_two_locality, #addressbook-edit_room{
+			margin-left:0;
+		}
+		a.et2_url.email {
+			display: none;
+		}
 	}
 	
 	#addressbook-index {
diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css
index dde6df612e..663e89d7b1 100644
--- a/pixelegg/css/mobile.css
+++ b/pixelegg/css/mobile.css
@@ -7349,6 +7349,7 @@ span.egw_tutorial_title {
     font-size: 24pt;
     color: white;
     padding-left: 5px;
+    font-weight: bold;
   }
   .dialogHeadbar {
     height: 50px;
@@ -7540,6 +7541,7 @@ span.egw_tutorial_title {
     top: 50px !important;
     right: 0px;
     left: auto !important;
+    background-color: white;
   }
   body div#egw_message {
     bottom: 0px;
@@ -7894,9 +7896,10 @@ span.egw_tutorial_title {
     overflow: auto;
   }
   body .et2_details .et2_details_toggle:after {
-    width: 24px;
-    height: 24px;
+    width: 25px;
+    height: 25px;
     font-size: 18pt;
+    text-align: center;
   }
   body input {
     border: none;
@@ -7930,7 +7933,7 @@ span.egw_tutorial_title {
     display: inline-block;
     background-color: #F0F0F0;
     width: 100%;
-    padding-top: 12px;
+    padding-top: 6px;
   }
   body #popupMainDiv .et2_details {
     position: relative;
@@ -7939,11 +7942,11 @@ span.egw_tutorial_title {
   body #popupMainDiv .et2_details .et2_details_toggle {
     position: absolute;
     right: 2px;
-    top: 4px;
+    top: 0px;
     margin: 0px;
   }
   body #popupMainDiv .et2_details .et2_details_title {
-    padding-top: 12px;
+    padding-top: 6px;
     margin-top: 0;
   }
   body .rowHeader {
@@ -7991,4 +7994,31 @@ span.egw_tutorial_title {
   body div.et2_toolbar.et2_head_toolbar div.et2_toolbar_more span {
     display: none;
   }
+  body .et2_tabbox.vertical .et2_tabflag {
+    border: none;
+  }
+  body .et2_tabbox.vertical .et2_tabflag div.et2_tabtitle {
+    background-color: #f0f0f0;
+  }
+  body .et2_tabbox.vertical .et2_tabflag div.et2_tabtitle:before {
+    padding: 0;
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    font-size: 18pt;
+  }
+  body .et2_link_to div {
+    height: 40px;
+    padding-bottom: 3px;
+    width: 99% !important;
+  }
+  body .et2_link_to .et2_file {
+    margin: 0;
+    padding: 0;
+  }
+  body .et2_link_to .et2_file .et2_file_span,
+  body .et2_link_to .et2_file .et2_file_spanHover,
+  body .et2_link_to .et2_file .et2_file_upload {
+    height: 25px !important;
+  }
 }
diff --git a/pixelegg/css/mobile.less b/pixelegg/css/mobile.less
index 875f14e81c..cca116be66 100644
--- a/pixelegg/css/mobile.less
+++ b/pixelegg/css/mobile.less
@@ -830,6 +830,7 @@
 				font-size: 24pt;
 				color: white;
 				padding-left: 5px;
+				font-weight: bold;
 			}
 			background-image: none;
 		}
@@ -1091,6 +1092,7 @@
 			top:50px !important;
 			right:0px;
 			left:auto !important;
+			background-color: white;
 		}
 		div#egw_message {
 			bottom: 0px;
@@ -1475,9 +1477,10 @@
 		.et2_details {
 			.et2_details_toggle {
 				&:after{
-					width:24px;
-					height: 24px;
+					width:25px;
+					height: 25px;
 					font-size:	18pt;
+					text-align: center;
 				}
 			}
 		}
@@ -1507,7 +1510,7 @@
 					display: inline-block;
 					background-color: #F0F0F0;
 					width:100%;
-					padding-top: 12px;
+					padding-top: 6px;
 				}
 				.et2_details_toggle {
 					
@@ -1519,11 +1522,11 @@
 				.et2_details_toggle {
 					position: absolute;
 					right: 2px;
-					top:4px;
+					top:0px;
 					margin: 0px;
 				}
 				.et2_details_title {
-					padding-top: 12px;
+					padding-top: 6px;
 					margin-top:0;
 				}
 			}
@@ -1589,5 +1592,39 @@
 					}
 				}
 			}
+			//###########################################
+			//#											#
+			//#		et2_tabbox styles					#
+			//#											#
+			//###########################################
+			.et2_tabbox.vertical {
+				.et2_tabflag {
+					border:none;
+					div.et2_tabtitle {
+						background-color: #f0f0f0;
+						&:before {
+							padding: 0;
+							width:30px;
+							height:30px;
+							text-align: center;
+							font-size: 18pt;
+						}
+					}
+				}
+			}
+			.et2_link_to {
+				div {
+					height:40px;
+					padding-bottom: 3px;
+					width: 99% !important;
+				}
+				.et2_file {
+					margin: 0;
+					padding:0;
+					.et2_file_span, .et2_file_spanHover, .et2_file_upload {
+						height:25px !important;
+					}
+				}
+			}
 	}
 }
\ No newline at end of file