Mobile theme W.I.P.:

- Addressbook layout improvement

addressbook/templates/mobile/index.xet

@@ -17,8 +17,8 @@
 		<grid width="100%">
 			<columns>
 				<column width="10"/>
-				<column width="60%"/>
+				<column width="40%"/>
-				<column width="39%"/>
+				<column width="40%"/>
 				<column width="58"/>
 			</columns>
 			<rows>
@@ -28,18 +28,21 @@
 					<description class=" cat_$row_cont[cat_id] mobile_cat_col"/>
 					<vbox class="addressbookCol1">
 						<vbox id="${row}[id]">
-							<description id="${row}[line1]" no_lang="1"/>
 							<description id="${row}[line2]" no_lang="1"/>
+							<description id="${row}[line1]" no_lang="1"/>
 						</vbox>
-						<hbox class="workphone">
+						<description value=" " id="${row}[adr_one_locality]" no_lang="1"/>
+					</vbox>
+					<vbox class="addressbookCol2">
+						<hbox>
+							<image src="email.png"/>
+							<url-email id="${row}[email]" readonly="true" class="telNumbers"/>
+						</hbox>
+						<hbox>
 							<image src="phone.png"/>
 							<url-phone id="${row}[tel_work]" readonly="true" class="telNumbers"/>
 						</hbox>
-					</vbox>
+						<hbox>
-					<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>

addressbook/templates/pixelegg/app.css

@@ -496,18 +496,24 @@ input.et2_radiobox {
     background-size: 35px 35px;
     background-repeat: no-repeat;
     background-position: center;
+    position: absolute;
+    bottom: 25%;
+    top: 25%;
+  }
+  #addressbook-index table.egwGridView_outer tbody .addressbookCol3 div.avatar img {
+    padding-top: 0;
   }
   #addressbook-index table.egwGridView_outer tbody span[id^='addressbook-index_'][id$='line1]'] {
-    font-weight: bold;
+    font-size: 9pt;
     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;
+    font-weight: bold;
   }
   #addressbook-index table.egwGridView_outer tbody .addressbookCol2 {
     text-overflow: ellipsis;
@@ -515,35 +521,26 @@ input.et2_radiobox {
     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;
+    font-size: 9pt;
     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;
+    font-size: 9pt;
-    display: block;
+    padding-left: 4px;
+    padding-bottom: 2px;
+    display: inline;
     overflow: hidden;
     text-overflow: ellipsis;
     padding-bottom: 5px;
+    color: #2C6398;
   }
   #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;
+    font-size: 9pt;
     display: inline-block;
     padding-left: 3px;
     overflow: hidden;

addressbook/templates/pixelegg/app.less

@@ -403,18 +403,24 @@ div.addressbook_edit_general_picture img {
 				background-size: 35px 35px;
 				background-repeat: no-repeat;
 				background-position: center;
+				position: absolute;
+				bottom:25%;
+				top:25%;
+				img{
+					padding-top:0;
+				}
 			}
 			span[id^='addressbook-index_'][id$='line1]'] {
-				font-weight: bold;
+				.mob-fontsize-s;
 				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;
+				font-weight: bold;
 			}
 			.addressbookCol2 {
 				text-overflow: ellipsis;
@@ -422,18 +428,6 @@ div.addressbook_edit_general_picture img {
 				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]']
 			{
@@ -446,10 +440,13 @@ div.addressbook_edit_general_picture img {
 			}
 			a[id^='addressbook-index_'][id$='email]']{
 				.mob-fontsize-s;
-				display:block;
+				padding-left: 4px;
+				padding-bottom:2px;
+				display: inline;
 				overflow: hidden;
 				text-overflow: ellipsis;
 				padding-bottom: 5px;
+				color: #2C6398;
 			}
 			a[id^='addressbook-index_'][id$='tel_cell]'],
 			a[id^='addressbook-index_'][id$='tel_work]']

pixelegg/css/mobile.css

@@ -6709,7 +6709,7 @@ span.egw_tutorial_title {
     background: white;
   }
   #egw_fw_basecontainer #egw_fw_main #egw_fw_tabs {
-    margin-top: 0;
+    margin-top: -3px;
   }
   #egw_fw_basecontainer #egw_fw_top_toolbar div.egw_fw_ui_tabs_header {
     max-height: 60px;
@@ -7316,6 +7316,7 @@ span.egw_tutorial_title {
   }
   .egw_fw_content_browser_div {
     padding: 0;
+    background-color: white;
   }
   .egw_fw_mobile_popup_container {
     width: 100%;
@@ -7448,6 +7449,9 @@ span.egw_tutorial_title {
   body #egw_fw_basecontainer.sidebar-toggle div#egw_fw_top_toolbar {
     z-index: 0;
   }
+  body #egw_fw_basecontainer.sidebar-toggle #egw_fw_main {
+    margin-left: 0 !important ;
+  }
   body #egw_fw_basecontainer.sidebar-toggle #egw_fw_main #egw_fw_tabs {
     -webkit-filter: none;
     -moz-filter: none;
@@ -7720,6 +7724,23 @@ span.egw_tutorial_title {
   body .et2_nextmatch table.egwGridView_grid tbody tr:hover {
     background: transparent;
   }
+  body .et2_nextmatch table.egwGridView_grid tbody tr td {
+    padding: 10px 0px 10px 0px;
+  }
+  body .et2_nextmatch table.egwGridView_grid tbody tr td .et2_label,
+  body .et2_nextmatch table.egwGridView_grid tbody tr td .et2_button,
+  body .et2_nextmatch table.egwGridView_grid tbody tr td .et2_link,
+  body .et2_nextmatch table.egwGridView_grid tbody tr td .et2_textbox,
+  body .et2_nextmatch table.egwGridView_grid tbody tr td .et2_textbox_ro,
+  body .et2_nextmatch table.egwGridView_grid tbody tr td .et2_email,
+  body .et2_nextmatch table.egwGridView_grid tbody tr td img,
+  body .et2_nextmatch table.egwGridView_grid tbody tr td span {
+    padding: 8px 0px 0px 0px;
+  }
+  body .et2_nextmatch table.egwGridView_grid tbody tr td time.et2_label,
+  body .et2_nextmatch table.egwGridView_grid tbody tr td span.mobile_cat_col {
+    padding: 0;
+  }
   body .et2_nextmatch table.egwGridView_grid tbody tr.swipe {
     background-color: #ffc200;
     border: none;

pixelegg/css/mobile.less

@@ -148,7 +148,7 @@
 
 		#egw_fw_main {
 			#egw_fw_tabs {
-				margin-top:0;
+				margin-top:-3px;
 			}
 		}
 		//###################
@@ -786,6 +786,7 @@
 
 	.egw_fw_content_browser_div {
 		padding: 0;
+		background-color: white;
 	}
 	
 	//###################################
@@ -957,6 +958,7 @@
 				z-index: 0;
 			}
 			#egw_fw_main {
+				margin-left:0 !important ;
 				#egw_fw_tabs {
 					-webkit-filter: none;
 					-moz-filter: none;
@@ -1272,6 +1274,16 @@
 						&:hover {
 							background: transparent;
 						}
+						td {
+							padding: 10px 0px 10px 0px;
+							.et2_label, .et2_button, .et2_link, .et2_textbox, .et2_textbox_ro,
+							.et2_email, img, span{
+								padding: 8px 0px 0px 0px;
+							}
+							time.et2_label, span.mobile_cat_col {
+								padding: 0;
+							}
+						}
 					}
 					tr.swipe{
 						background-color:rgba(255, 194, 0, 1);

pixelegg/less/def_mobile.less

@@ -13,8 +13,9 @@
 
 @mobile-fontsize-base : 10pt;
 
-.mob-fontsize-xs {font-size: @mobile-fontsize-base*0.6;}
+.mob-fontsize-xxs {font-size: @mobile-fontsize-base*0.6;}
-.mob-fontsize-s {font-size: @mobile-fontsize-base*0.8;}
+.mob-fontsize-xs {font-size: @mobile-fontsize-base*0.8;}
+.mob-fontsize-s {font-size: @mobile-fontsize-base*0.9;}
 .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;}