Some improvements on the contact application

12 files changed, 594 insertions, 171 deletions

diff --git a/apps/contacts/ajax/addcard.php b/apps/contacts/ajax/addcard.php
index 4e68dc96385..0cecd3bdc06 100644
--- a/apps/contacts/ajax/addcard.php
+++ b/apps/contacts/ajax/addcard.php
@@ -43,12 +43,22 @@ $parameters = $_POST['parameters'];
 $vcard = new Sabre_VObject_Component('VCARD');
 $vcard->add(new Sabre_VObject_Property('FN',$fn));
 $vcard->add(new Sabre_VObject_Property('UID',OC_Contacts_VCard::createUID()));
-foreach(array('ADR', 'TEL', 'EMAIL', 'ORG') as $propname){
+
+// Data to add ...
+$add = array('TEL', 'EMAIL', 'ORG');
+$address = false;
+for($i = 0; $i < 7; $i++){
+	if( isset($values['ADR'][$i] ) && $values['ADR'][$i]) $address = true;
+}
+if( $address ) $add[] = 'ADR';
+
+// Add data
+foreach( $add as $propname){
 	if( !( isset( $values[$propname] ) && $values[$propname] )){
 		continue;
 	}
 	$value = $values[$propname];
-	if( isset( $parameters[$propname] ) && count$parameters[$propname] ){
+	if( isset( $parameters[$propname] ) && count( $parameters[$propname] )){
 		$prop_parameters = $parameters[$propname];
 	}
 	else{
diff --git a/apps/contacts/appinfo/info.xml b/apps/contacts/appinfo/info.xml
index d18a19c3aea..0e2b1336006 100644
--- a/apps/contacts/appinfo/info.xml
+++ b/apps/contacts/appinfo/info.xml
@@ -1,4 +1,4 @@
-<?xml version="1.0"?> 
+<?xml version="1.0"?>
 <info>
 	<id>contacts</id>
 	<name>Contacts</name>
diff --git a/apps/contacts/css/formtastic.css b/apps/contacts/css/formtastic.css
new file mode 100644
index 00000000000..629c220732b
--- /dev/null
+++ b/apps/contacts/css/formtastic.css
@@ -0,0 +1,272 @@
+/* -------------------------------------------------------------------------------------------------
+
+ownCloud changes: search for OWNCLOUD
+
+Based on formtastic style sheet
+This stylesheet forms part of the Formtastic Rails Plugin
+(c) 2008-2011 Justin French
+
+--------------------------------------------------------------------------------------------------*/
+/* NORMALIZE AND RESET - obviously inspired by Yahoo's reset.css, but scoped to just .formtastic
+--------------------------------------------------------------------------------------------------*/
+.formtastic,
+.formtastic ul,
+.formtastic ol,
+.formtastic li,
+.formtastic fieldset,
+.formtastic legend,
+/*.formtastic input,
+.formtastic textarea,
+.formtastic select, COMMENTED BY OWNCLOUD */
+.formtastic p {
+  margin:0;
+  padding:0;
+}
+
+.formtastic fieldset {
+  border:0;
+}
+
+.formtastic em,
+.formtastic strong {
+  font-style:normal;
+  font-weight:normal;
+}
+
+.formtastic ol,
+.formtastic ul {
+  list-style:none;
+}
+
+.formtastic abbr,
+.formtastic acronym {
+  border:0;
+  font-variant:normal;
+}
+
+/*.formtastic input,
+.formtastic textarea {
+  font-family:sans-serif;
+  font-size:inherit;
+  font-weight:inherit;
+}
+
+.formtastic input,
+.formtastic textarea,
+.formtastic select {
+  font-size:100%;
+} COMMENTED BY OWNCLOUD */
+
+.formtastic legend {
+  white-space:normal;
+  color:#000;
+}
+
+/* SEMANTIC ERRORS
+--------------------------------------------------------------------------------------------------*/
+.formtastic .errors {
+  color:#cc0000;
+  margin:0.5em 0 1.5em 25%;
+  list-style:square;
+}
+
+.formtastic .errors li {
+  padding:0;
+  border:none;
+  display:list-item;
+}
+
+
+/* BUTTONS
+--------------------------------------------------------------------------------------------------*/
+.formtastic .buttons {
+  overflow:hidden; /* clear containing floats */
+  padding-left:25%;
+}
+
+.formtastic .button {
+  float:left;
+  padding-right:0.5em;
+  border:none;  /* ADDED BY OWNCLOUD */
+}
+
+
+/* INPUTS
+--------------------------------------------------------------------------------------------------*/
+.formtastic .inputs {
+  overflow:hidden; /* clear containing floats */
+}
+
+.formtastic .input {
+  overflow:hidden; /* clear containing floats */
+  padding:0.5em 0; /* padding and negative margin juggling is for Firefox */
+  margin-top:-0.5em;
+  margin-bottom:1em;
+}
+
+
+/* LEFT ALIGNED LABELS
+--------------------------------------------------------------------------------------------------*/
+.formtastic .input .label {
+  display:block;
+  width:25%;
+  float:left;
+  padding-top:.2em;
+}
+
+.formtastic .fragments .label,
+.formtastic .choices .label {
+  position:absolute;
+  width:95%;
+  left:0px;
+}
+
+.formtastic .fragments .label label,
+.formtastic .choices .label label {
+  position:absolute;
+}
+
+/* NESTED FIELDSETS AND LEGENDS (radio, check boxes and date/time inputs use nested fieldsets)
+--------------------------------------------------------------------------------------------------*/
+.formtastic .choices {
+  position:relative;
+}
+
+.formtastic .choices-group {
+  float:left;
+  width:74%;
+  margin:0;
+  padding:0 0 0 25%;
+}
+
+.formtastic .choice {
+  padding:0;
+  border:0;
+}
+
+
+/* INLINE HINTS
+--------------------------------------------------------------------------------------------------*/
+.formtastic .input .inline-hints {
+  color:#666;
+  margin:0.5em 0 0 25%;
+}
+
+
+/* INLINE ERRORS
+--------------------------------------------------------------------------------------------------*/
+.formtastic .inline-errors {
+  color:#cc0000;
+  margin:0.5em 0 0 25%;
+}
+
+.formtastic .errors {
+  color:#cc0000;
+  margin:0.5em 0 0 25%;
+  list-style:square;
+}
+
+.formtastic .errors li {
+  padding:0;
+  border:none;
+  display:list-item;
+}
+
+
+/* STRING, NUMERIC, PASSWORD, EMAIL, URL, PHONE, SEARCH (ETC) OVERRIDES
+--------------------------------------------------------------------------------------------------*/
+.formtastic .stringish input {
+  width:72%;
+}
+
+.formtastic .stringish input[size] {
+  width:auto;
+  max-width:72%;
+}
+
+
+/* TEXTAREA OVERRIDES
+--------------------------------------------------------------------------------------------------*/
+.formtastic .text textarea {
+  width:72%;
+}
+
+.formtastic .text textarea[cols] {
+  width:auto;
+  max-width:72%;
+}
+
+
+/* HIDDEN OVERRIDES
+--------------------------------------------------------------------------------------------------*/
+.formtastic .hidden {
+  display:none;
+}
+
+
+/* BOOLEAN LABELS
+--------------------------------------------------------------------------------------------------*/
+.formtastic .boolean label {
+  padding-left:25%;
+  display:block;
+}
+
+
+/* CHOICE GROUPS
+--------------------------------------------------------------------------------------------------*/
+.formtastic .choices-group {
+  margin-bottom:-0.5em;
+}
+
+.formtastic .choice {
+  margin:0.1em 0 0.5em 0;
+}
+
+.formtastic .choice label {
+  float:none;
+  width:100%;
+  line-height:100%;
+  padding-top:0;
+  margin-bottom:0.6em;
+}
+
+
+/* ADJUSTMENTS FOR INPUTS INSIDE LABELS (boolean input, radio input, check_boxes input)
+--------------------------------------------------------------------------------------------------*/
+.formtastic .choice label input,
+.formtastic .boolean label input {
+  margin:0 0.3em 0 0.1em;
+  line-height:100%;
+}
+
+
+/* FRAGMENTED INPUTS (DATE/TIME/DATETIME)
+--------------------------------------------------------------------------------------------------*/
+.formtastic .fragments {
+  position:relative;
+}
+
+.formtastic .fragments-group {
+  float:left;
+  width:74%;
+  margin:0;
+  padding:0 0 0 25%;
+}
+
+.formtastic .fragment {
+  float:left;
+  width:auto;
+  margin:0 .3em 0 0;
+  padding:0;
+  border:0;
+}
+
+.formtastic .fragment label {
+  display:none;
+}
+
+.formtastic .fragment label input {
+  display:inline;
+  margin:0;
+  padding:0;
+}
diff --git a/apps/contacts/css/styles.css b/apps/contacts/css/styles.css
index c1abd0efb62..972902c0500 100644
--- a/apps/contacts/css/styles.css
+++ b/apps/contacts/css/styles.css
@@ -1,3 +1,33 @@
 .contacts_details_left {text-align:right;vertical-align:top;padding:2px;}
 .contacts_details_right {text-align:left;vertical-align:top;padding:2px;}
+
+#contacts_details_name { font-weight:bold;font-size:1.1em;margin-left:25%;}
+#contacts_details_photo { margin:.5em 0em .5em 25%; }
+
 #contacts_deletecard {position:absolute;top:15px;right:0;}
+#contacts_details_list { list-style:none; }
+#contacts_details_list li { overflow:hidden; }
+#contacts_details_list li p.contacts_property_name { width:25%; float:left; }
+#contacts_details_list li p.contacts_property_data, #contacts_details_list li ul.contacts_property_data { width:72%; overflow:hidden; }
+#contacts_addproperty, #contacts_addproperty_button { margin-left:25%; }
+
+.contacts_property_data ul, .contacts_property_data ol { list-style:none; }
+.contacts_property_data li { overflow: hidden; }
+.contacts_property_data li label { width:20%; float:left; }
+.contacts_property_data li input { width:70%;overflow:hidden; }
+
+/* Form setup ----------------------------------------------------------------*/
+/* .forme {} */
+/* .forme ul, .forme ol { list-style:none; } */
+/* .forme .inputs, .forme .buttons { overflow: hidden; } */
+
+/* Labels --------------------------------------------------------------------*/
+/* .forme .input .label { width:25%; float:left; display:block; } */
+
+/* Inputs --------------------------------------------------------------------*/
+/* .forme .stringish input { width:72%; } */
+/* .forme .text textarea { width:72%; } */
+
+/* Buttons -------------------------------------------------------------------*/
+/* .forme .buttons { padding-left:25%; } */
+/* .forme .button { float:left; padding-left:0.5em; } */
diff --git a/apps/contacts/js/interface.js b/apps/contacts/js/interface.js
index 2f4a736f553..da5c1f3760f 100644
--- a/apps/contacts/js/interface.js
+++ b/apps/contacts/js/interface.js
@@ -40,7 +40,8 @@ $(document).ready(function(){
 		var id = $('#rightcontent').data('id');
 		$.getJSON('ajax/showaddproperty.php',{'id':id},function(jsondata){
 			if(jsondata.status == 'success'){
-				$('#rightcontent').append(jsondata.data.page);
+				$('#contacts_details_list').append(jsondata.data.page);
+				$('#contacts_addproperty').hide();
 			}
 			else{
 				alert(jsondata.data.message);
@@ -68,9 +69,10 @@ $(document).ready(function(){
 	$('#contacts_addpropertyform input[type="submit"]').live('click',function(){
 		$.post('ajax/addproperty.php',$('#contacts_addpropertyform').serialize(),function(jsondata){
 			if(jsondata.status == 'success'){
-				$('#contacts_details').append(jsondata.data.page);
+				$('#contacts_details_list').append(jsondata.data.page);
 				$('#contacts_addpropertyform').remove();
 				$('#contacts_addcontactsparts').remove();
+				$('#contacts_addproperty').show();
 			}
 			else{
 				alert(jsondata.data.message);
@@ -78,7 +80,7 @@ $(document).ready(function(){
 		}, 'json');
 		return false;
 	});
-	
+
 	$('#contacts_newcontact').click(function(){
 		$.getJSON('ajax/showaddcard.php',{},function(jsondata){
 			if(jsondata.status == 'success'){
@@ -107,12 +109,12 @@ $(document).ready(function(){
 		return false;
 	});
 
-	$('.contacts_details_property [data-use="edit"]').live('click',function(){
+	$('.contacts_property [data-use="edit"]').live('click',function(){
 		var id = $('#rightcontent').data('id');
-		var checksum = $(this).parent().parent().data('checksum');
+		var checksum = $(this).parents('li').first().data('checksum');
 		$.getJSON('ajax/showsetproperty.php',{'id': id, 'checksum': checksum },function(jsondata){
 			if(jsondata.status == 'success'){
-				$('.contacts_details_property[data-checksum="'+checksum+'"] .contacts_details_right').html(jsondata.data.page);
+				$('.contacts_property[data-checksum="'+checksum+'"]').html(jsondata.data.page);
 			}
 			else{
 				alert(jsondata.data.message);
@@ -122,9 +124,9 @@ $(document).ready(function(){
 	});
 
 	$('#contacts_setpropertyform input[type="submit"]').live('click',function(){
-		$.post('ajax/setproperty.php',$(this).parent('form').serialize(),function(jsondata){
+		$.post('ajax/setproperty.php',$(this).parents('form').first().serialize(),function(jsondata){
 			if(jsondata.status == 'success'){
-				$('.contacts_details_property[data-checksum="'+jsondata.data.oldchecksum+'"]').replaceWith(jsondata.data.page);
+				$('.contacts_property[data-checksum="'+jsondata.data.oldchecksum+'"]').replaceWith(jsondata.data.page);
 			}
 			else{
 				alert(jsondata.data.message);
@@ -133,12 +135,12 @@ $(document).ready(function(){
 		return false;
 	});
 
-	$('.contacts_details_property [data-use="delete"]').live('click',function(){
+	$('.contacts_property [data-use="delete"]').live('click',function(){
 		var id = $('#rightcontent').data('id');
-		var checksum = $(this).parent().parent().data('checksum');
+		var checksum = $(this).parents('li').first().data('checksum');
 		$.getJSON('ajax/deleteproperty.php',{'id': id, 'checksum': checksum },function(jsondata){
 			if(jsondata.status == 'success'){
-				$('.contacts_details_property[data-checksum="'+checksum+'"]').remove();
+				$('.contacts_property[data-checksum="'+checksum+'"]').remove();
 			}
 			else{
 				alert(jsondata.data.message);
@@ -148,11 +150,11 @@ $(document).ready(function(){
 	});
 
 
-	$('.contacts_details_property').live('mouseenter',function(){
+	$('.contacts_property').live('mouseenter',function(){
 		$(this).find('span').show();
 	});
-	
-	$('.contacts_details_property').live('mouseleave',function(){
+
+	$('.contacts_property').live('mouseleave',function(){
 		$(this).find('span').hide();
 	});
 });
diff --git a/apps/contacts/templates/index.php b/apps/contacts/templates/index.php
index 98ebc1b0b36..630dca41b2e 100644
--- a/apps/contacts/templates/index.php
+++ b/apps/contacts/templates/index.php
@@ -1,6 +1,7 @@
 <?php // Include Style and Script
 OC_Util::addScript('contacts','interface');
 OC_Util::addStyle('contacts','styles');
+OC_Util::addStyle('contacts','formtastic');
 ?>
 
 <div id="controls">
diff --git a/apps/contacts/templates/part.addcardform.php b/apps/contacts/templates/part.addcardform.php
index 9899f552857..8e482cc4eba 100644
--- a/apps/contacts/templates/part.addcardform.php
+++ b/apps/contacts/templates/part.addcardform.php
@@ -1,51 +1,111 @@
-<form id="contacts_addcardform">
+<form class="formtastic" id="contacts_addcardform">
 	<?php if(count($_['addressbooks'])==1): ?>
 		<input type="hidden" name="id" value="<?php echo $_['addressbooks'][0]['id']; ?>">
 	<?php else: ?>
-		<label for="id"><?php echo $l->t('Group'); ?></label>
-		<select name="id" size="1">
-			<?php foreach($_['addressbooks'] as $addressbook): ?>
-				<option value="<?php echo $addressbook['id']; ?>"><?php echo $addressbook['displayname']; ?></option>
-			<?php endforeach; ?>
-		</select>
+		<fieldset class="inputs">
+			<ol>
+				<li class="input stringish">
+					<label class="label" for="id"><?php echo $l->t('Group'); ?></label>
+					<select name="id" size="1">
+						<?php foreach($_['addressbooks'] as $addressbook): ?>
+							<option value="<?php echo $addressbook['id']; ?>"><?php echo $addressbook['displayname']; ?></option>
+						<?php endforeach; ?>
+					</select>
+				</li>
+			</ol>
+		</fieldset>
 	<?php endif; ?>
-	<label for="fn"><?php echo $l->t('Name'); ?></label>
-	<input type="text" name="fn" value=""><br>
-	<label for="ADR"><?php echo $l->t('Address'); ?></label>
-	<div id="contacts_addresspart">
-		<select id="ADR" name="parameters[ADR][TYPE]" size="1">
-			<option value="work"><?php echo $l->t('Work'); ?></option>
-			<option value="home" selected="selected"><?php echo $l->t('Home'); ?></option>
-		</select>
-		<p><label><?php echo $l->t('PO Box'); ?></label> <input type="text" name="value[ADR][0]" value=""></p>
-		<p><label><?php echo $l->t('Extended'); ?></label> <input type="text" name="value[ADR][1]" value=""></p>
-		<p><label><?php echo $l->t('Street'); ?></label> <input type="text" name="value[ADR][2]" value=""></p>
-		<p><label><?php echo $l->t('City'); ?></label> <input type="text" name="value[ADR][3]" value=""></p>
-		<p><label><?php echo $l->t('Region'); ?></label> <input type="text" name="value[ADR][4]" value=""></p>
-		<p><label><?php echo $l->t('Zipcode'); ?></label> <input type="text" name="value[ADR][5]" value=""></p>
-		<p><label><?php echo $l->t('Country'); ?></label> <input type="text" name="value[ADR][6]" value=""></p>
-	</div>
-	<label for="TEL"><?php echo $l->t('Telephone'); ?></label>
-	<div id="contacts_phonepart">
-		<select id="TEL" name="parameters[TEL][TYPE]" size="1">
-			<option value="home"><?php echo $l->t('Home'); ?></option>
-			<option value="cell" selected="selected"><?php echo $l->t('Mobile'); ?></option>
-			<option value="work"><?php echo $l->t('Work'); ?></option>
-			<option value="text"><?php echo $l->t('Text'); ?></option>
-			<option value="voice"><?php echo $l->t('Voice'); ?></option>
-			<option value="fax"><?php echo $l->t('Fax'); ?></option>
-			<option value="video"><?php echo $l->t('Video'); ?></option>
-			<option value="pager"><?php echo $l->t('Pager'); ?></option>
-		</select>
-		<input type="text" name="value[TEL]" value="">
-	</div>
-	<label for="EMAIL"><?php echo $l->t('Email'); ?></label>
-	<div id="contacts_email">
-		<input id="EMAIL" type="text" name="value[EMAIL]" value="">
-	</div>
-	<label for="ORG"><?php echo $l->t('Organization'); ?></label>
-	<div id="contacts_organisation">
-		<input id="ORG" type="text" name="value[ORG]" value="">
-	</div>
-	<input type="submit" name="submit" value="<?php echo $l->t('Create Contact'); ?>">
+	<fieldset class="inputs">
+		<ol>
+			<li class="input stringish">
+				<label class="label" for="fn"><?php echo $l->t('Name'); ?></label>
+				<input type="text" name="fn" value=""><br>
+			</li>
+			<li class="input stringish">
+				<label class="label" for="org"><?php echo $l->t('Organization'); ?></label>
+				<input id="org" type="text" name="value[ORG]" value="">
+			</li>
+		</ol>
+	</fieldset>
+	<fieldset class="inputs">
+		<ol>
+			<li class="input stringish">
+				<label class="label" for="email"><?php echo $l->t('Email'); ?></label>
+				<input id="email" type="text" name="value[EMAIL]" value="">
+			</li>
+			<li class="input">
+				<fieldset class="fragments">
+					<legend class="label">
+						<label for="tel"><?php echo $l->t('Telephone'); ?></label>
+					</legend>
+					<ol class="fragments-group">
+						<li class="fragment">
+							<label for="tel"><?php echo $l->t('Number'); ?></label>
+							<input type="phone" id="tel" name="value[TEL]" value="">
+						</li>
+						<li class="fragment">
+							<label for="tel_type"><?php echo $l->t('Type'); ?></label>
+							<select id="TEL" name="parameters[TEL][TYPE]" size="1">
+								<option value="home"><?php echo $l->t('Home'); ?></option>
+								<option value="cell" selected="selected"><?php echo $l->t('Mobile'); ?></option>
+								<option value="work"><?php echo $l->t('Work'); ?></option>
+								<option value="text"><?php echo $l->t('Text'); ?></option>
+								<option value="voice"><?php echo $l->t('Voice'); ?></option>
+								<option value="fax"><?php echo $l->t('Fax'); ?></option>
+								<option value="video"><?php echo $l->t('Video'); ?></option>
+								<option value="pager"><?php echo $l->t('Pager'); ?></option>
+							</select>
+						</li>
+					</ol>
+				</fieldset>
+			</li>
+		</ol>
+	</fieldset>
+	<fieldset class="inputs">
+		<legend><?php echo $l->t('Address'); ?></legend>
+		<ol>
+			<li class="input">
+				<label class="label" for="adr_type"><?php echo $l->t('Type'); ?></label>
+				<select id="adr_type" name="parameters[ADR][TYPE]" size="1">
+					<option value="work"><?php echo $l->t('Work'); ?></option>
+					<option value="home" selected="selected"><?php echo $l->t('Home'); ?></option>
+				</select>
+			</li>
+			<li class="input stringish">
+				<label class="label" for="adr_pobox"><?php echo $l->t('PO Box'); ?></label>
+				<input type="text" id="adr_pobox" name="value[ADR][0]" value="">
+			</li>
+			<li class="input stringish">
+				<label class="label" for="adr_extended"><?php echo $l->t('Extended'); ?></label>
+				<input type="text" id="adr_extended" name="value[ADR][1]" value="">
+			</li>
+			<li class="input stringish">
+				<label class="label" for="adr_street"><?php echo $l->t('Street'); ?></label>
+				<input type="text" for="adr_street" name="value[ADR][2]" value="">
+			</li>
+			<li class="input stringish">
+				<label class="label" for="adr_city"><?php echo $l->t('City'); ?></label>
+				<input type="text" for="adr_city" name="value[ADR][3]" value="">
+			</li>
+			<li class="input stringish">
+				<label class="label" for="adr_region"><?php echo $l->t('Region'); ?></label>
+				<input type="text" for="adr_region" name="value[ADR][4]" value="">
+			</li>
+			<li class="input stringish">
+				<label class="label" for="adr_zipcode"><?php echo $l->t('Zipcode'); ?></label>
+				<input type="text" for="adr_zipcode" name="value[ADR][5]" value="">
+			</li>
+			<li class="input stringish">
+				<label class="label" for="adr_country"><?php echo $l->t('Country'); ?></label>
+				<input type="text" id="adr_country" name="value[ADR][6]" value="">
+			</li>
+		</ol>
+	</fieldset>
+	<fieldset class="buttons">
+		<ol>
+			<li class="commit button">
+				<input class="create" type="submit" name="submit" value="<?php echo $l->t('Create Contact'); ?>">
+			</li>
+		</ol>
+	</fieldset>
 </form>
diff --git a/apps/contacts/templates/part.addpropertyform.php b/apps/contacts/templates/part.addpropertyform.php
index 7c366e03242..b0e93b01604 100644
--- a/apps/contacts/templates/part.addpropertyform.php
+++ b/apps/contacts/templates/part.addpropertyform.php
@@ -1,44 +1,72 @@
-<form id="contacts_addpropertyform">
-	<input type="hidden" name="id" value="<?php echo $_['id']; ?>">
-	<select name="name" size="1">
-		<option value="ADR"><?php echo $l->t('Address'); ?></option>
-		<option value="TEL"><?php echo $l->t('Telephone'); ?></option>
-		<option value="EMAIL" selected="selected"><?php echo $l->t('Email'); ?></option>
-		<option value="ORG"><?php echo $l->t('Organization'); ?></option>
-	</select>
-	<div id="contacts_generic">
-		<input type="text" name="value" value="">
+<li class="contacts_property_add">
+	<form id="contacts_addpropertyform">
+		<input type="hidden" name="id" value="<?php echo $_['id']; ?>">
+		<p class="contacts_property_name">
+			<select name="name" size="1">
+				<option value="ADR"><?php echo $l->t('Address'); ?></option>
+				<option value="TEL"><?php echo $l->t('Telephone'); ?></option>
+				<option value="EMAIL" selected="selected"><?php echo $l->t('Email'); ?></option>
+				<option value="ORG"><?php echo $l->t('Organization'); ?></option>
+			</select>
+		</p>
+		<p class="contacts_property_data" id="contacts_generic">
+			<input type="text" name="value" value="">
+		</p><br>
+		<input id="contacts_addproperty_button" type="submit">
+	</form>
+	<div id="contacts_addcontactsparts" style="display:none;">
+		<ul class="contacts_property_data" id="contacts_addresspart">
+			<li>
+				<label for="adr_type"><?php echo $l->t('Type'); ?></label>
+				<select id="adr_type" name="parameters[TYPE]" size="1">
+					<option value="work"><?php echo $l->t('Work'); ?></option>
+					<option value="home" selected="selected"><?php echo $l->t('Home'); ?></option>
+				</select>
+			</li>
+			<li>
+				<label for="adr_pobox"><?php echo $l->t('PO Box'); ?></label>
+				<input id="adr_pobox" type="text" name="value[0]" value="">
+			</li>
+			<li>
+				<label for="adr_extended"><?php echo $l->t('Extended'); ?></label>
+				<input id="adr_extended" type="text" name="value[1]" value="">
+			</li>
+			<li>
+				<label for="adr_street"><?php echo $l->t('Street'); ?></label>
+				<input id="adr_street" type="text" name="value[2]" value="">
+			</li>
+			<li>
+				<label for="adr_city"><?php echo $l->t('City'); ?></label>
+				<input id="adr_city" type="text" name="value[3]" value="">
+			</li>
+			<li>
+				<label for="adr_region"><?php echo $l->t('Region'); ?></label>
+				<input id="adr_region" type="text" name="value[4]" value="">
+			</li>
+			<li>
+				<label for="adr_zipcode"><?php echo $l->t('Zipcode'); ?></label>
+				<input id="adr_zipcode" type="text" name="value[5]" value="">
+			</li>
+			<li>
+				<label for="adr_country"><?php echo $l->t('Country'); ?></label>
+				<input id="adr_country" type="text" name="value[6]" value="">
+			</li>
+		</ul>
+		<p class="contacts_property_data" id="contacts_phonepart">
+			<input type="text" name="value" value="">
+			<select name="parameters[TYPE]" size="1">
+				<option value="home"><?php echo $l->t('Home'); ?></option>
+				<option value="cell" selected="selected"><?php echo $l->t('Mobile'); ?></option>
+				<option value="work"><?php echo $l->t('Work'); ?></option>
+				<option value="text"><?php echo $l->t('Text'); ?></option>
+				<option value="voice"><?php echo $l->t('Voice'); ?></option>
+				<option value="fax"><?php echo $l->t('Fax'); ?></option>
+				<option value="video"><?php echo $l->t('Video'); ?></option>
+				<option value="pager"><?php echo $l->t('Pager'); ?></option>
+			</select>
+		</p>
+		<p class="contacts_property_data" id="contacts_generic">
+			<input type="text" name="value" value="">
+		</p>
 	</div>
-	<input type="submit">
-</form>
-<div id="contacts_addcontactsparts" style="display:none;">
-	<div id="contacts_addresspart">
-		<select name="parameters[TYPE]" size="1">
-			<option value="work"><?php echo $l->t('Work'); ?></option>
-			<option value="home" selected="selected"><?php echo $l->t('Home'); ?></option>
-		</select>
-		<p><label><?php echo $l->t('PO Box'); ?></label> <input type="text" name="value[0]" value=""></p>
-		<p><label><?php echo $l->t('Extended'); ?></label> <input type="text" name="value[1]" value=""></p>
-		<p><label><?php echo $l->t('Street'); ?></label> <input type="text" name="value[2]" value=""></p>
-		<p><label><?php echo $l->t('City'); ?></label> <input type="text" name="value[3]" value=""></p>
-		<p><label><?php echo $l->t('Region'); ?></label> <input type="text" name="value[4]" value=""></p>
-		<p><label><?php echo $l->t('Zipcode'); ?></label> <input type="text" name="value[5]" value=""></p>
-		<p><label><?php echo $l->t('Country'); ?></label> <input type="text" name="value[6]" value=""></p>
-	</div>
-	<div id="contacts_phonepart">
-		<select name="parameters[TYPE]" size="1">
-			<option value="home"><?php echo $l->t('Home'); ?></option>
-			<option value="cell" selected="selected"><?php echo $l->t('Mobile'); ?></option>
-			<option value="work"><?php echo $l->t('Work'); ?></option>
-			<option value="text"><?php echo $l->t('Text'); ?></option>
-			<option value="voice"><?php echo $l->t('Voice'); ?></option>
-			<option value="fax"><?php echo $l->t('Fax'); ?></option>
-			<option value="video"><?php echo $l->t('Video'); ?></option>
-			<option value="pager"><?php echo $l->t('Pager'); ?></option>
-		</select>
-		<input type="text" name="value" value="">
-	</div>
-	<div id="contacts_generic">
-		<input type="text" name="value" value="">
-	</div>
-</div>
+</li>
diff --git a/apps/contacts/templates/part.details.php b/apps/contacts/templates/part.details.php
index 438f84d45d4..afb2b468f0c 100644
--- a/apps/contacts/templates/part.details.php
+++ b/apps/contacts/templates/part.details.php
@@ -1,16 +1,11 @@
 <?php if(array_key_exists('FN',$_['details'])): ?>
-	<table id="contacts_details">
-		<?php if(isset($_['details']['PHOTO'])): // Emails first ?>
-			<tr class="contacts_details_property">
-				<td class="contacts_details_left">&nbsp;</td>
-				<td class="contacts_details_right">
-					<img src="photo.php?id=<?php echo $_['id']; ?>">
-				</td>
-			</tr>
-		<?php endif; ?>
-		
-		<?php echo $this->inc('part.property', array('property' => $_['details']['FN'][0])); ?>
-		
+	<p id="contacts_details_name"><?php echo $_['details']['FN'][0]['value']; ?></p>
+
+	<?php if(isset($_['details']['PHOTO'])): // Emails first ?>
+		<img id="contacts_details_photo" src="photo.php?id=<?php echo $_['id']; ?>">
+	<?php endif; ?>
+
+	<ul id="contacts_details_list">
 		<?php if(isset($_['details']['BDAY'])): // Emails first ?>
 			<?php echo $this->inc('part.property', array('property' => $_['details']['BDAY'][0])); ?>
 		<?php endif; ?>
@@ -26,7 +21,7 @@
 				<?php endforeach; ?>
 			<?php endif; ?>
 		<?php endforeach; ?>
-	</table>
+	</ul>
 	<form>
 		<img class="svg action" id="contacts_deletecard" src="<?php echo image_path('', 'actions/delete.svg'); ?>" title="<?php echo $l->t('Delete contact');?>" />
 		<input type="button" id="contacts_addproperty" value="<?php echo $l->t('Add Property');?>">
diff --git a/apps/contacts/templates/part.property.php b/apps/contacts/templates/part.property.php
index ffc056e5aba..4bc3a4d85f8 100644
--- a/apps/contacts/templates/part.property.php
+++ b/apps/contacts/templates/part.property.php
@@ -1,72 +1,66 @@
-<tr class="contacts_details_property" data-checksum="<?php echo $_['property']['checksum']; ?>">
-	<?php if($_['property']['name'] == 'FN'): ?>
-		<td class="contacts_details_left"></td>
-		<td class="contacts_details_right">
-			<strong><?php echo $_['property']['value']; ?></strong>
-			<span style="display:none;" data-use="edit"><img class="svg action" src="<?php echo image_path('', 'actions/rename.svg'); ?>" /></span>
-		</td>
-	<?php elseif($_['property']['name'] == 'BDAY'): ?>
-		<td class="contacts_details_left"><?php echo $l->t('Birthday'); ?></td>
-		<td class="contacts_details_right">
-		<?php echo $l->l('date',new DateTime($_['property']['value'])); ?>
+<li class="contacts_property" data-checksum="<?php echo $_['property']['checksum']; ?>">
+	<?php if($_['property']['name'] == 'BDAY'): ?>
+		<p class="contacts_property_name"><?php echo $l->t('Birthday'); ?></p>
+		<p class="contacts_property_data">
+			<?php echo $l->l('date',new DateTime($_['property']['value'])); ?>
 			<span style="display:none;" data-use="delete"><img class="svg action" src="<?php echo image_path('', 'actions/delete.svg'); ?>" /></span>
-		</td>
+		</p>
 	<?php elseif($_['property']['name'] == 'ORG'): ?>
-		<td class="contacts_details_left"><?php echo $l->t('Organization'); ?></td>
-		<td class="contacts_details_right">
+		<p class="contacts_property_name"><?php echo $l->t('Organization'); ?></p>
+		<p class="contacts_property_data">
 			<?php echo $_['property']['value']; ?>
 			<span style="display:none;" data-use="edit"><img class="svg action" src="<?php echo image_path('', 'actions/rename.svg'); ?>" /></span>
 			<span style="display:none;" data-use="delete"><img class="svg action" src="<?php echo image_path('', 'actions/delete.svg'); ?>" /></span>
-		</td>
+		</p>
 	<?php elseif($_['property']['name'] == 'EMAIL'): ?>
-		<td class="contacts_details_left"><?php echo $l->t('Email'); ?></td>
-		<td class="contacts_details_right">
+		<p class="contacts_property_name"><?php echo $l->t('Email'); ?></p>
+		<p class="contacts_property_data">
 			<?php echo $_['property']['value']; ?>
 			<span style="display:none;" data-use="edit"><img class="svg action" src="<?php echo image_path('', 'actions/rename.svg'); ?>" /></span>
 			<span style="display:none;" data-use="delete"><img class="svg action" src="<?php echo image_path('', 'actions/delete.svg'); ?>" /></span>
-		</td>
+		</p>
 	<?php elseif($_['property']['name'] == 'TEL'): ?>
-		<td class="contacts_details_left"><?php echo $l->t('Phone'); ?></td>
-		<td class="contacts_details_right">
+		<p class="contacts_property_name"><?php echo $l->t('Phone'); ?></p>
+		<p class="contacts_property_data">
 			<?php echo $_['property']['value']; ?>
 			<?php if(isset($_['property']['parameters']['TYPE'])): ?>
 				(<?php echo $l->t(ucwords(str_replace('cell','mobile',strtolower($_['property']['parameters']['TYPE'])))); ?>)
 			<?php endif; ?>
 			<span style="display:none;" data-use="edit"><img class="svg action" src="<?php echo image_path('', 'actions/rename.svg'); ?>" /></span>
 			<span style="display:none;" data-use="delete"><img class="svg action" src="<?php echo image_path('', 'actions/delete.svg'); ?>" /></span>
-		</td>
+		</p>
 	<?php elseif($_['property']['name'] == 'ADR'): ?>
-		<td class="contacts_details_left">
+		<p class="contacts_property_name">
 			<?php echo $l->t('Address'); ?>
 			<?php if(isset($_['property']['parameters']['TYPE'])): ?>
 				<br>
 				(<?php echo $l->t(ucwords($_['property']['parameters']['TYPE'])); ?>)
 			<?php endif; ?>
-		</td>
-		<td class="contacts_details_right">
+		</p>
+		<p class="contacts_property_data">
 			<?php if(!empty($_['property']['value'][0])): ?>
-			<?php echo $l->t('PO Box'); ?> <?php echo $_['property']['value'][0]; ?><br>
+				<?php echo $_['property']['value'][0]; ?><br>
 			<?php endif; ?>
 			<?php if(!empty($_['property']['value'][1])): ?>
-			<?php echo $l->t('Extended'); ?> <?php echo $_['property']['value'][1]; ?><br>
+				<?php echo $_['property']['value'][1]; ?><br>
 			<?php endif; ?>
 			<?php if(!empty($_['property']['value'][2])): ?>
-			<?php echo $l->t('Street'); ?> <?php echo $_['property']['value'][2]; ?><br>
+				<?php echo $_['property']['value'][2]; ?><br>
 			<?php endif; ?>
 			<?php if(!empty($_['property']['value'][3])): ?>
-			<?php echo $l->t('City'); ?> <?php echo $_['property']['value'][3]; ?><br>
+				<?php echo $_['property']['value'][3]; ?><br>
 			<?php endif; ?>
 			<?php if(!empty($_['property']['value'][4])): ?>
-			<?php echo $l->t('Region'); ?> <?php echo $_['property']['value'][4]; ?><br>
+				<?php echo $_['property']['value'][4]; ?><br>
 			<?php endif; ?>
 			<?php if(!empty($_['property']['value'][5])): ?>
-			<?php echo $l->t('Zipcode'); ?> <?php echo $_['property']['value'][5]; ?><br>
+				<?php echo $_['property']['value'][5]; ?><br>
 			<?php endif; ?>
 			<?php if(!empty($_['property']['value'][6])): ?>
-			<?php echo $l->t('Country'); ?> <?php echo $_['property']['value'][6]; ?> 
+				<?php echo $_['property']['value'][6]; ?>
 			<?php endif; ?>
 			<span style="display:none;" data-use="edit"><img class="svg action" src="<?php echo image_path('', 'actions/rename.svg'); ?>" /></span>
 			<span style="display:none;" data-use="delete"><img class="svg action" src="<?php echo image_path('', 'actions/delete.svg'); ?>" /></span>
-		</td>
+		</p>
 	<?php endif; ?>
-</tr>
+</li>
diff --git a/apps/contacts/templates/part.setpropertyform.php b/apps/contacts/templates/part.setpropertyform.php
index 69c789795e5..afdba2bd759 100644
--- a/apps/contacts/templates/part.setpropertyform.php
+++ b/apps/contacts/templates/part.setpropertyform.php
@@ -1,18 +1,49 @@
-<form id="contacts_setpropertyform">
-	<input type="hidden" name="checksum" value="<?php echo $_['property']['checksum']; ?>">
-	<input type="hidden" name="id" value="<?php echo $_['id']; ?>">
-	<?php if($_['property']['name']=='ADR'): ?>
-		<label><?php echo $l->t('PO Box'); ?></label> <input type="text" name="value[0]" value="<?php echo $_['property']['value'][0]; ?>"><br>
-		<label><?php echo $l->t('Extended'); ?></label> <input type="text" name="value[1]" value="<?php echo $_['property']['value'][1]; ?>"><br>
-		<label><?php echo $l->t('Street'); ?></label> <input type="text" name="value[2]" value="<?php echo $_['property']['value'][2]; ?>"><br>
-		<label><?php echo $l->t('City'); ?></label> <input type="text" name="value[3]" value="<?php echo $_['property']['value'][3]; ?>"><br>
-		<label><?php echo $l->t('Region'); ?></label> <input type="text" name="value[4]" value="<?php echo $_['property']['value'][4]; ?>"><br>
-		<label><?php echo $l->t('Zipcode'); ?></label> <input type="text" name="value[5]" value="<?php echo $_['property']['value'][5]; ?>"><br>
-		<label><?php echo $l->t('Country'); ?></label> <input type="text" name="value[6]" value="<?php echo $_['property']['value'][6]; ?>"><br>
-	<?php elseif($_['property']['name']=='TEL'): ?>
-		<input type="text" name="value" value="<?php echo $_['property']['value']; ?>">
-	<?php else: ?>
-		<input type="text" name="value" value="<?php echo $_['property']['value']; ?>">
-	<?php endif; ?>
-	<input type="submit" value="<?php echo $l->t('Edit'); ?>">
-</form>
+<li class="contacts_property_edit" data-checksum="<?php echo $_['property']['checksum']; ?>">
+	<form id="contacts_setpropertyform">
+		<input type="hidden" name="checksum" value="<?php echo $_['property']['checksum']; ?>">
+		<input type="hidden" name="id" value="<?php echo $_['id']; ?>">
+		<?php if($_['property']['name']=='ADR'): ?>
+			<p class="contacts_property_name"><label for="adr_pobox"><?php echo $l->t('Address'); ?></label></p>
+			<ol class="contacts_property_data" id="contacts_addresspart">
+				<li>
+					<label for="adr_pobox"><?php echo $l->t('PO Box'); ?></label>
+					<input id="adr_pobox" type="text" name="value[0]" value="">
+				</li>
+				<li>
+					<label for="adr_extended"><?php echo $l->t('Extended'); ?></label>
+					<input id="adr_extended" type="text" name="value[1]" value="">
+				</li>
+				<li>
+					<label for="adr_street"><?php echo $l->t('Street'); ?></label>
+					<input id="adr_street" type="text" name="value[2]" value="">
+				</li>
+				<li>
+					<label for="adr_city"><?php echo $l->t('City'); ?></label>
+					<input id="adr_city" type="text" name="value[3]" value="">
+				</li>
+				<li>
+					<label for="adr_region"><?php echo $l->t('Region'); ?></label>
+					<input id="adr_region" type="text" name="value[4]" value="">
+				</li>
+				<li>
+					<label for="adr_zipcode"><?php echo $l->t('Zipcode'); ?></label>
+					<input id="adr_zipcode" type="text" name="value[5]" value="">
+				</li>
+				<li>
+					<label for="adr_country"><?php echo $l->t('Country'); ?></label>
+					<input id="adr_country" type="text" name="value[6]" value="">
+				</li>
+			</ol>
+		<?php elseif($_['property']['name']=='TEL'): ?>
+			<p class="contacts_property_name"><label for="tel"><?php echo $l->t('Address'); ?></label></p>
+			<p class="contacts_property_data"><input id="tel" type="phone" name="value" value="<?php echo $_['property']['value']; ?>"></p>
+		<?php elseif($_['property']['name']=='EMAIL'): ?>
+			<p class="contacts_property_name"><label for="email"><?php echo $l->t('Email'); ?></label></p>
+			<p class="contacts_property_data"><input id="email" type="text" name="value" value="<?php echo $_['property']['value']; ?>"></p>
+		<?php elseif($_['property']['name']=='EMAIL'): ?>
+			<p class="contacts_property_name"><label for="org"><?php echo $l->t('Organization'); ?></label></p>
+			<p class="contacts_property_data"><input id="org" type="text" name="value" value="<?php echo $_['property']['value']; ?>"></p>
+		<?php endif; ?>
+		<input id="contacts_setproperty_button" type="submit" value="<?php echo $l->t('Edit'); ?>">
+	</form>
+</li>
diff --git a/apps/contacts/templates/settings.php b/apps/contacts/templates/settings.php
index f5c37c5a044..d9130625200 100644
--- a/apps/contacts/templates/settings.php
+++ b/apps/contacts/templates/settings.php
@@ -1,7 +1,7 @@
 <form id="mediaform">
 	<fieldset class="personalblock">
 		<strong>Contacts</strong><br />
-		CardDAV syncing address: 
+		CardDAV syncing address:
   		<?php echo OC_Helper::linkTo('apps/contacts', 'carddav.php', null, true); ?><br />
 	</fieldset>
 </form>