Small design changes in Contacts

4 files changed, 56 insertions, 49 deletions

diff --git a/apps/contacts/css/styles.css b/apps/contacts/css/styles.css
index c7680f4a716..1f95fdb2ad4 100644
--- a/apps/contacts/css/styles.css
+++ b/apps/contacts/css/styles.css
@@ -1 +1,2 @@
-.contacts_propertyname {float:left;}
+.contacts_details_left {text-align:right;vertical-align:top;padding:2px;}
+.contacts_details_right {text-align:left;vertical-align:top;padding:2px;}
diff --git a/apps/contacts/js/interface.js b/apps/contacts/js/interface.js
index ef2179b372b..b8a66d51aab 100644
--- a/apps/contacts/js/interface.js
+++ b/apps/contacts/js/interface.js
@@ -102,12 +102,12 @@ $(document).ready(function(){
 		return false;
 	});
 
-	$('.contacts_property [data-use="edit"]').live('click',function(){
+	$('.contacts_details_property [data-use="edit"]').live('click',function(){
 		var id = $('#rightcontent').data('id');
 		var checksum = $(this).parent().parent().data('checksum');
 		$.getJSON('ajax/showsetproperty.php',{'id': id, 'checksum': checksum },function(jsondata){
 			if(jsondata.status == 'success'){
-				$('.contacts_property[data-checksum="'+checksum+'"] .contacts_propertyvalue').html(jsondata.data.page);
+				$('.contacts_details_property[data-checksum="'+checksum+'"] .contacts_details_right').html(jsondata.data.page);
 			}
 			else{
 				alert(jsondata.data.message);
@@ -119,7 +119,7 @@ $(document).ready(function(){
 	$('#contacts_setpropertyform input[type="submit"]').live('click',function(){
 		$.post('ajax/setproperty.php',$('#contacts_setpropertyform').serialize(),function(jsondata){
 			if(jsondata.status == 'success'){
-				$('.contacts_property[data-checksum="'+jsondata.data.oldchecksum+'"]').replaceWith(jsondata.data.page);
+				$('.contacts_details_property[data-checksum="'+jsondata.data.oldchecksum+'"]').replaceWith(jsondata.data.page);
 			}
 			else{
 				alert(jsondata.data.message);
@@ -128,12 +128,12 @@ $(document).ready(function(){
 		return false;
 	});
 
-	$('.contacts_property [data-use="delete"]').live('click',function(){
+	$('.contacts_details_property [data-use="delete"]').live('click',function(){
 		var id = $('#rightcontent').data('id');
 		var checksum = $(this).parent().parent().data('checksum');
 		$.getJSON('ajax/deleteproperty.php',{'id': id, 'checksum': checksum },function(jsondata){
 			if(jsondata.status == 'success'){
-				$('.contacts_property[data-checksum="'+checksum+'"]').remove();
+				$('.contacts_details_property[data-checksum="'+checksum+'"]').remove();
 			}
 			else{
 				alert(jsondata.data.message);
@@ -143,11 +143,11 @@ $(document).ready(function(){
 	});
 
 
-	$('.contacts_property').live('mouseenter',function(){
+	$('.contacts_details_property').live('mouseenter',function(){
 		$(this).find('span').show();
 	});
 	
-	$('.contacts_property').live('mouseleave',function(){
+	$('.contacts_details_property').live('mouseleave',function(){
 		$(this).find('span').hide();
 	});
 });
diff --git a/apps/contacts/templates/part.details.php b/apps/contacts/templates/part.details.php
index 119c88486ac..5048349abc5 100644
--- a/apps/contacts/templates/part.details.php
+++ b/apps/contacts/templates/part.details.php
@@ -1,27 +1,33 @@
-<?php if(array_key_exists('PHOTO',$_['details'])): ?>
-	<img src="photo.php?id=<?php echo $_['id']; ?>">
-<?php endif; ?>
-
 <?php if(array_key_exists('FN',$_['details'])): ?>
-	<?php echo $this->inc('part.property', array('property' => $_['details']['FN'][0])); ?>
-<?php endif; ?>
+	<table>
+		<?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])); ?>
+		
+		<?php if(isset($_['details']['BDAY'])): // Emails first ?>
+			<?php echo $this->inc('part.property', array('property' => $_['details']['BDAY'][0])); ?>
+		<?php endif; ?>
 
-<?php if(isset($_['details']['BDAY'])): // Emails first ?>
-	<?php echo $this->inc('part.property', array('property' => $_['details']['BDAY'][0])); ?>
-<?php endif; ?>
+		<?php if(isset($_['details']['ORG'])): // Emails first ?>
+			<?php echo $this->inc('part.property', array('property' => $_['details']['ORG'][0])); ?>
+		<?php endif; ?>
 
-<?php if(isset($_['details']['ORG'])): // Emails first ?>
-	<?php echo $this->inc('part.property', array('property' => $_['details']['ORG'][0])); ?>
-<?php endif; ?>
-
-<?php foreach(array('EMAIL','TEL','ADR') as $type): ?>
-	<?php if(isset($_['details'][$type])): // Emails first ?>
-		<br>
-		<?php foreach($_['details'][$type] as $property): ?>
-			<?php echo $this->inc('part.property',array('property' => $property )); ?>
+		<?php foreach(array('EMAIL','TEL','ADR') as $type): ?>
+			<?php if(isset($_['details'][$type])): // Emails first ?>
+				<?php foreach($_['details'][$type] as $property): ?>
+					<?php echo $this->inc('part.property',array('property' => $property )); ?>
+				<?php endforeach; ?>
+			<?php endif; ?>
 		<?php endforeach; ?>
-	<?php endif; ?>
-<?php endforeach; ?>
+	</table>
+<?php endif; ?>
 
 <div id="contacts_cardoptions">
 	<a id="contacts_deletecard"><img class="svg action" src="<?php echo image_path('', 'actions/delete.svg'); ?>" /></a>
diff --git a/apps/contacts/templates/part.property.php b/apps/contacts/templates/part.property.php
index cdb03068128..9e2a5cabad4 100644
--- a/apps/contacts/templates/part.property.php
+++ b/apps/contacts/templates/part.property.php
@@ -1,49 +1,49 @@
-<div class="contacts_property" data-checksum="<?php echo $_['property']['checksum']; ?>">
+<tr class="contacts_details_property" data-checksum="<?php echo $_['property']['checksum']; ?>">
 	<?php if($_['property']['name'] == 'FN'): ?>
-		<div class="contacts_propertyname"><?php echo $l->t('Name'); ?></div>
-		<div class="contacts_propertyvalue">
+		<td class="contacts_details_left"><?php echo $l->t('Name'); ?></td>
+		<td class="contacts_details_right">
 			<?php echo $_['property']['value']; ?>
 			<span style="display:none;" data-use="edit"><img class="svg action" src="<?php echo image_path('', 'actions/rename.svg'); ?>" /></span>
-		</div>
+		</td>
 	<?php elseif($_['property']['name'] == 'BDAY'): ?>
-		<div class="contacts_propertyname"><?php echo $l->t('Birthday'); ?></div>
-		<div class="contacts_propertyvalue">
+		<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'])); ?>
 			<span style="display:none;" data-use="delete"><img class="svg action" src="<?php echo image_path('', 'actions/delete.svg'); ?>" /></span>
-		</div>
+		</td>
 	<?php elseif($_['property']['name'] == 'ORG'): ?>
-		<div class="contacts_propertyname"><?php echo $l->t('Organisation'); ?></div>
-		<div class="contacts_propertyvalue">
+		<td class="contacts_details_left"><?php echo $l->t('Organisation'); ?></td>
+		<td class="contacts_details_right">
 			<?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>
-		</div>
+		</td>
 	<?php elseif($_['property']['name'] == 'EMAIL'): ?>
-		<div class="contacts_propertyname"><?php echo $l->t('Email'); ?></div>
-		<div class="contacts_propertyvalue">
+		<td class="contacts_details_left"><?php echo $l->t('Email'); ?></td>
+		<td class="contacts_details_right">
 			<?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>
-		</div>
+		</td>
 	<?php elseif($_['property']['name'] == 'TEL'): ?>
-		<div class="contacts_propertyname"><?php echo $l->t('Telephone'); ?></div>
-		<div class="contacts_propertyvalue">
+		<td class="contacts_details_left"><?php echo $l->t('Telephone'); ?></td>
+		<td class="contacts_details_right">
 			<?php echo $_['property']['value']; ?>
 			<?php if(isset($_['property']['parameters']['TYPE'])): ?>
 				(<?php echo $l->t('tel_'.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>
-		</div>
+		</td>
 	<?php elseif($_['property']['name'] == 'ADR'): ?>
-		<div class="contacts_propertyname">
+		<td class="contacts_details_left">
 			<?php echo $l->t('Address'); ?>
 			<?php if(isset($_['property']['parameters']['TYPE'])): ?>
 				<br>
 				(<?php echo $l->t('adr_'.strtolower($_['property']['parameters']['TYPE'])); ?>)
 			<?php endif; ?>
-		</div>
-		<div class="contacts_propertyvalue">
+		</td>
+		<td class="contacts_details_right">
 			<?php echo $l->t('PO Box'); ?> <?php echo $_['property']['value'][0]; ?><br>
 			<?php echo $l->t('Extended Address'); ?> <?php echo $_['property']['value'][1]; ?><br>
 			<?php echo $l->t('Street Name'); ?> <?php echo $_['property']['value'][2]; ?><br>
@@ -53,6 +53,6 @@
 			<?php echo $l->t('Country'); ?> <?php echo $_['property']['value'][6]; ?> 
 			<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>
-		</div>
+		</td>
 	<?php endif; ?>
-</div>
+</tr>