Added more profile data and CSS styling to the /directory page

2 files changed, 84 insertions, 5 deletions

diff --git a/view/theme/diabook/directory_item.tpl b/view/theme/diabook/directory_item.tpl
index bc2af16c2..70d197955 100755
--- a/view/theme/diabook/directory_item.tpl
+++ b/view/theme/diabook/directory_item.tpl
@@ -3,9 +3,40 @@
 	<div class="directory-photo-wrapper" id="directory-photo-wrapper-$id" > 
 		<div class="directory-photo" id="directory-photo-$id" >
 			<a href="$profile-link" class="directory-profile-link" id="directory-profile-link-$id" >
-				<img class="directory-photo-img" src="$photo" alt="$alt-text" title="$alt-text" />
+				<img class="directory-photo-img photo" src="$photo" alt="$alt-text" title="$alt-text" />
 			</a>
 		</div>
 	</div>
-	<div class="contact-name" id="directory-name-$id">$name</div>
+	<div class="directory-profile-wrapper" id="directory-profile-wrapper-$id" >
+		<div class="contact-name" id="directory-name-$id">$name</div>
+		<div class="page-type">$page-type</div>
+		{{ if $pdesc }}<div class="directory-profile-title">$profile.pdesc</div>{{ endif }}
+    	<div class="directory-detailcolumns-wrapper" id="directory-detailcolumns-wrapper-$id">
+        	<div class="directory-detailscolumn-wrapper" id="directory-detailscolumn1-wrapper-$id">	
+			{{ if $location }}
+			    <dl class="location"><dt class="location-label">$location</dt>
+				<dd class="adr">
+					{{ if $profile.address }}<div class="street-address">$profile.address</div>{{ endif }}
+					<span class="city-state-zip">
+						<span class="locality">$profile.locality</span>{{ if $profile.locality }}, {{ endif }}
+						<span class="region">$profile.region</span>
+						<span class="postal-code">$profile.postal-code</span>
+					</span>
+					{{ if $profile.country-name }}<span class="country-name">$profile.country-name</span>{{ endif }}
+				</dd>
+				</dl>
+			{{ endif }}
+
+			{{ if $gender }}<dl class="mf"><dt class="gender-label">$gender</dt> <dd class="x-gender">$profile.gender</dd></dl>{{ endif }}
+			</div>	
+			<div class="directory-detailscolumn-wrapper" id="directory-detailscolumn2-wrapper-$id">	
+				{{ if $marital }}<dl class="marital"><dt class="marital-label"><span class="heart">&hearts;</span>$marital</dt><dd class="marital-text">$profile.marital</dd></dl>{{ endif }}
+
+				{{ if $homepage }}<dl class="homepage"><dt class="homepage-label">$homepage</dt><dd class="homepage-url"><a href="$profile.homepage" target="external-link">$profile.homepage</a></dd></dl>{{ endif }}
+			</div>
+		</div>
+	  	<div class="directory-copy-wrapper" id="directory-copy-wrapper-$id" >
+			{{ if $about }}<dl class="directory-copy"><dt class="directory-copy-label">$about</dt><dd class="directory-copy-data">$profile.about</dd></dl>{{ endif }}
+  		</div>
+	</div>
 </div>
diff --git a/view/theme/diabook/style.css b/view/theme/diabook/style.css
index 736817c7b..049fb7ba4 100644
--- a/view/theme/diabook/style.css
+++ b/view/theme/diabook/style.css
@@ -2732,6 +2732,30 @@ float: left;
 /* ============= */
 /* = Directory = */
 /* ============= */
+section .directory-item dl {
+  height: auto;
+  overflow: auto;	
+}
+section .directory-item dt {
+  float: left;
+  margin-left: 0px;
+  text-align: right;
+  color: #999;
+}
+section .directory-item dd {
+  float: left;
+  margin-left: 5px;
+}
+.directory-profile-wrapper {
+  float: left;
+  max-height: 178px;
+  overflow: hidden;
+  width: 635px;
+}
+.directory-copy-wrapper {
+  float: left;
+  overflow: hidden;	
+}
 /* contacts menu */
 .contact-photo-wrapper {
   position: relative;
@@ -2773,7 +2797,7 @@ float: left;
 }
 .directory-item {
   float: left;
-  width: 200px;
+  width: 800px;
   height: 200px;
 }
 .directory-item .contact-photo {
@@ -2784,14 +2808,38 @@ float: left;
   width: 175px;
   height: 175px;
 }
+.directory-photo-wrapper {
+  float: left;
+  height: 200px;
+  width: 165px;	
+}
 .contact-name {
-  text-align: left;
+  font-size: 18px;
   font-weight: bold;
-  font-size: 12px;
+  margin-bottom: -3px;
+  text-align: left;
 }
 .contact-details {
   color: #999999;
 }
+.page-type {
+  font-size: 10px;
+  font-style: italic;
+}
+.directory-detailscolumn-wrapper {
+  float: left;	
+  width: 305px;
+  margin-right: 10px;  
+}
+.directory-profile-wrapper dl {
+  margin-top: 3px;
+  margin-bottom: 3px;
+}
+.directory-profile-title {
+  font-weight: bold;
+  margin-bottom: 3px;
+  font-size: 14px;
+}
 #side-bar-photos-albums li{
 list-style-type: disc;
 }