From fad8ebc355c74d8ff06768342cdd8ecc609ece93 Mon Sep 17 00:00:00 2001
From: rabuzarus <>
Date: Fri, 23 Oct 2015 15:18:05 +0200
Subject: [PATCH] template rework: two row contact page for vier

---
 view/theme/vier/style.css                     | 43 ++++++++++++++++---
 .../theme/vier/templates/contact_template.tpl | 16 +++++--
 2 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/view/theme/vier/style.css b/view/theme/vier/style.css
index 3757d79e2..d6e47da01 100644
--- a/view/theme/vier/style.css
+++ b/view/theme/vier/style.css
@@ -351,7 +351,7 @@ code {
   margin: 0px;
   padding: 1em;
   list-style: none;
-  border: 3px solid #364e59;
+  /*border: 3px solid #364e59;*/
   z-index: 100000;
   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 }
@@ -2270,12 +2270,40 @@ aside #id_password {
   float: left;
 }
 /* contacts */
-.contact-entry-wrapper {
+/*.contact-entry-wrapper {
   width: 120px;
   height: 130px;
   float: left;
-/*  overflow: hidden; */
+  overflow: hidden; 
   margin-left: 5px;
+}*/
+
+.contact-entry-wrapper {
+  float: left;
+  width: 363px;
+  height: 90px;
+  padding-right: 10px;
+  margin: 0 10px 10px 0px;
+}
+.contact-entry-wrapper .contact-entry-photo-wrapper {
+  float: left;
+  margin-right: 10px;
+}
+.contact-entry-photo-wrapper {
+  position: relative;
+}
+.contact-entry-desc {
+  overflow: hidden;
+}
+.contact-entry-name {
+  font-weight: bold;
+}
+.contact-entry-details {
+  font-size: 13px;
+  color: #999999;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 /* photo */
 .lframe {
@@ -2323,14 +2351,15 @@ aside #id_password {
 }
 .contact-photo-menu {
         width: 11em;
-        border: 3px solid #364e59;
+        /*border: 3px solid #364e59;*/
 	color: #2d2d2d;
         background: #FFFFFF;
-/*        position: absolute;*/
-        position: relative;
-        left: 0px; top: 0px;
+        position: absolute;
+        /*position: relative;*/
+        left: 0px; /*top: 0px;*/
         display: none;
         z-index: 10000;
+	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 }
 .contact-photo-menu ul { margin:0px; padding: 0px; list-style: none }
 .contact-photo-menu li a {
diff --git a/view/theme/vier/templates/contact_template.tpl b/view/theme/vier/templates/contact_template.tpl
index a065b8fbf..add2eff5c 100644
--- a/view/theme/vier/templates/contact_template.tpl
+++ b/view/theme/vier/templates/contact_template.tpl
@@ -13,12 +13,12 @@
 			{{if $contact.photo_menu}}
 			<!-- <span onclick="openClose('contact-photo-menu-{{$contact.id}}');" class="fakelink contact-photo-menu-button" id="contact-photo-menu-button-{{$contact.id}}">menu</span> -->
 			<div class="contact-photo-menu" id="contact-photo-menu-{{$contact.id}}">
-				<ul>
+				<ul role="menu" aria-haspopup="true">
 					{{foreach $contact.photo_menu as $k=>$c}}
 					{{if $c.2}}
-					<li><a class="{{$k}}" target="redir" href="{{$c.1}}">{{$c.0}}</a></li>
+					<li role="menuitem"><a class="{{$k}}" target="redir" href="{{$c.1}}">{{$c.0}}</a></li>
 					{{else}}
-					<li><a class="{{$k}}" href="{{$c.1}}">{{$c.0}}</a></li>
+					<li role="menuitem"><a class="{{$k}}" href="{{$c.1}}">{{$c.0}}</a></li>
 					{{/if}}
 					{{/foreach}}
 				</ul>
@@ -28,7 +28,15 @@
 			
 	</div>
 	<div class="contact-entry-photo-end" ></div>
-	<div class="contact-entry-name" id="contact-entry-name-{{$contact.id}}" >{{$contact.name}}</div>
+	
+	<div class="contact-entry-desc">
+		<div class="contact-entry-name" id="contact-entry-name-{{$contact.id}}" >{{$contact.name}}</div>
+		{{if $contact.alt_text}}<div class="contact-entry-details" id="contact-entry-rel-{{$contact.id}}" >{{$contact.alt_text}}</div>{{/if}}
+		{{if $contact.itemurl}}<div class="contact-entry-details" id="contact-entry-url-{{$contact.id}}" >{{$contact.itemurl}}</div>{{/if}}
+		{{if $contact.network}}<div class="contact-entry-details" id="contact-entry-network-{{$contact.id}}" >{{$contact.network}}</div>{{/if}}
+		{{if $contact.details}}<div class="contact-entry-details" id="contact-entry-details-{{$contact.id}}" >{{$contact.details}}</div>{{/if}}
+	</div>
+
 
 	<div class="contact-entry-end" ></div>
 </div>